Genius

Mobile Game Interface

The mobile game interface is one of the most important elements of mobile game design. The user uses the interface to interact with the game, to control his/her avatar. The design of the interface alow user to flawlessly operate and use the game or in the worst case will make the player angry and in result abandon our game. Therefore, the interface should be design with great care. At first we should think:

• who is our player, why he/she plays the game?
• how and maybe where he/he will play the game?
• what approach will be comfortable to the user?
• what type/size of device is used to play?

First take into account a person that plays the games with appropriate care. Then the player will probably take the "Gamer Stance".

The player keep the phone in landscape position with two thumbs near the bottom corners of the screen. We can easily see that a small part of the screen is easily accessible (Red area), a little bigger area that can be stil accessed (Orange area) and the rest of the screen very hard for interaction.

The player keeps the device in one hand and uses the secund one to operate on the screen. The hole area of the screen is accessible, but the user cannot touch instantly two distant places.

The player plays for short time usually in rush. Keeps the phone in one hand, probably in portrait orientation, controlling it with thumb of this hand. This type of player has minimal reach and the control area is very small, additionally multitouch control method is unacceptable.

This three types of players demand totally different interface for the game. There is no solution that will fit to any two types of the player. During the design stage, the developing team has to decide what type of player they expect. Moreover when we think about contextual games it is possible that the external context will prefer one of these types of interaction for example if player has to run/move with the phone, we have a subway type player, no sophisticated interaction is possible during movement.

Let us now cover some basic methods of interaction and their implementation in Cordova.

Tap, sigle touch

This method of interaction have been used in this course all the time. All types of buttons, clickable images represents this simplest control method. However for real fast interaction it is suggested to use touch events instead of click events. The reason is that mobile devices have to spend some time (around 300 milliseconds) to translate native touch event to a click one.

Drag, continuous touch

The mobile devices natively support touch events: touchstart, touchend, touchcancel, touchmove. As for default touch support multitouch, it tracks more than one finger separately. The simple example below presents how touches can be used for simple drawing application.

As usual starting with html file:

Now we will build a index.js file. First we have to register event listeners for all touch events.

var app = {
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },    onDeviceReady: function() {
        var canva = document.getElementById("drawing_canva");
		canva.addEventListener("touchstart", this.onTouchStart.bind(this), false);
		canva.addEventListener("touchend", this.onTouchEnd.bind(this), false);
		canva.addEventListener("touchmove", this.onTouchMove.bind(this), false);		
		this.lastTouch = {x:null, y:null};
		this.colors = ['#aaaaaa', '#ffaaff', '#01ffe3'];
		this.color = 0;
    },

We define three fields that will be used later:

[lastTouch] - represents coordinates of last registered touch, at this stage x, and y are null as no touch have been initiated yet,

[colors] - table of colors that will be used, the idea is to change color with the start of every new touch,

[color] - the index of actual color to be used when drawing.

Now the operations connected to specific touch events. Let us start with touchstart:

    onTouchStart: function(event){
		event.preventDefault();
		console.log("TouchStart");
		var touches = event.changedTouches;
		this.color++;
		if (this.color== this.colors.length) this.color=0;
		this.drawBall(touches[0].pageX, touches[0].pageY);
	},

The drawing of a ball uses a known canvas drawing:

    drawBall: function(x, y){
		console.log("drawing: ["+x+","+y+"]");
		this.lastTouch.x=x;
		this.lastTouch.y=y;
		var el = document.getElementById("drawing_canva");
		var ctx = el.getContext("2d");
		ctx.beginPath();
		ctx.arc(x, y, 4, 0, 2 * Math.PI, false);
		ctx.fillStyle = this.colors[this.color];
		ctx.fill();
	},

As we would like to continue drawing while the touch event continues, we do that in touchmove event handler:

    onTouchMove: function(event){
		event.preventDefault();
		console.log("TouchMove");
		var touches = event.changedTouches;
		this.moveBall(touches[0].pageX, touches[0].pageY);
	},
    moveBall: function(x, y){
		console.log("drawing: ["+x+","+y+"]");
		var el = document.getElementById("drawing_canva");
		var ctx = el.getContext("2d");
		ctx.beginPath();
		ctx.moveTo(this.lastTouch.x, this.lastTouch.y);
		ctx.lineTo(x, y);
		ctx.lineWidth = 4;
		ctx.strokeStyle = this.colors[this.color];
		ctx.stroke();
		this.lastTouch.x=x;
		this.lastTouch.y=y;
	}

Running this exiting code we will see that when touches start we draw a circle, after that the lines that follow the movement are drawn. The final result is not symmetric as we can easily see the ball at the beginning of the line and nothing at its end. To repair this we add appropriate touchend handler:

    onTouchEnd: function(event){
		event.preventDefault();
		console.log("TouchEnd");
		var touches = event.changedTouches;
		this.drawBall(touches[0].pageX, touches[0].pageY);
	},
		

In the presented example we have skipped touchcancel event as not applicable.

Virtual Joy

One of the nicest control method is virtual joystick. We can distinguish two basic vjoy concepts: stationary vjoy - always on the same place, and dynamical one - appears with touchstart. At first let us cover the stationary one. In this example we will use the ball code from accelerator case.

In the html we can notice additional canvas element for our virtual joy, this controller will be placed within the area that the ball is moving.

Now we can discuss the code for our virtual joy:

Dynamic VJoy

This time we would like our virtual Joy to appear at the place of touchstart and operate only via moving the finger. There is no many changes we have to add. First we crate a new class file DynamicVJov.js.

Catapult type control

We all know the game angry birds, In that game the control used something like a catapult mechanics, player using continous touch define the velocity vector of bird and a end of touch event the movement of the bird starts. In our example we will use balls and existing DynamicVJoy, when player touch a ball the VYoy will appear, when player stop touching the ball will start move with appropriate velocity.

Let's start with html file:

As we see there are two balls. The files Ball.js, VJoy.js and DynamicVJoy.js are exactly the same as in the last example, we have only two new files code4.js and CatapultDVJoy.js.

Now look deeper into the main code4.js file:

Finally we will analyze the CatapultDVJoy.js:

Copyright Genius.