Game controls design and Implementation

In this post I will talk about an interesting feature I added this week: Touchscreen controls.

Why touchscreen controls? Wasn’t this a console game?

This will be a console game, as soon as my OUYA arrives, or they alow me to cancel the preorder and buy it on Amazon or soemthing like that. But, as I don’t have it yet, I need a way to test the other functionalitues fo the game, so I figured, Why not design touchscreen controls now, so I can also post it on Google Play?

And thus the design process started.

Controls design: sliding is better than tapping

The first thought that occurred to me was to make 4 buttons on some corner of the screen (left, right, up and down), and control the player with those. However, this approach has some major downsides:

  • It make the game look dirty, as there is really not enough space to make decent-sized buttons that don’t interfere with the game scene.
  • It gives room for lots of errors on the tapping (to press left when you wanted to press up, for example).
  • It doesn’t feel good.

Given these limitations, I started over and designed some more simple and (in my opinion) more fun controls.

They are inspired in games like Fruit Ninja, and center around sliding a finger across the screen in the desired direction.

To move left, slide the finger left, in any point of the screen. To move right, slide it right. It’s that simple. And I love it.

Controls Implementation

The implementation of this idea came much easier than I thought it would (about 3 hours for the base algorithm that I’m about to explain). The algorithm goes as follows:

  • When the user presses the screen, store the position of the finger (two floats: startX and startY).
  • When the user lifts the finger, store that position too (two floats: endX and endY).
  • Calculate the difference between the two points: (two floats: deltaX = endX – startX, deltaY = endY – startY)
    • if (absolute value of deltaX > absolute value of deltaY) //it means to move horizontally
      • if(absolute value of deltaY < a vertical margin)//it means that it will only register fairly horizontal strokes, of about 30º on aither side. The margin is subject to playtesting
        • if(deltaX is positive)
          • move Right
        • if(deltaX is negative)
          • move left
    • Then just check the same things, but interchanging deltaY and deltaX

As you can see, this algorithm is based upon the difference of position between two pressed points, which form a vector. Then it analizes the vector to see in which direction it goes, and thus makes the movement.

This is the code in Java:
private void manageInput() {
this.setOnSceneTouchListener(this);
}

@Override
public boolean onSceneTouchEvent(Scene pScene, TouchEvent pSceneTouchEvent) {
// TODO Auto-generated method stub
switch (pSceneTouchEvent.getAction()) {
case MotionEvent.ACTION_DOWN:
this.startX = pSceneTouchEvent.getX();
this.startY = pSceneTouchEvent.getY();
break;
case MotionEvent.ACTION_UP:
this.endX = pSceneTouchEvent.getX();
this.endY = pSceneTouchEvent.getY();
// New code
this.deltaX = this.endX – this.startX;
this.deltaY = this.endY – this.startY;

if (Math.abs(this.deltaX) > Math.abs(this.deltaY)) {
if (Math.abs(this.deltaY) <= GameScene.MAX_DEVIATION_Y) { if (this.deltaX > 0) {
// Move Right
if (this.playerInMovement == false) {
this.player.moveRight();
this.playerInMovement = true;
}
}
if (this.deltaX < 0) {
// Move Left
if (this.playerInMovement == false) {
this.player.moveLeft();
this.playerInMovement = true;
}

}

}
} else if (Math.abs(this.deltaX) < Math.abs(this.deltaY)) {
if (Math.abs(this.deltaX) <= GameScene.MAX_DEVIATION_X) { if (this.deltaY > 0) {
// Move Up
if (this.playerInMovement == false) {
this.player.moveUp();
this.playerInMovement = true;
}

}

if (this.deltaY < 0) {
// Move Down
if (this.playerInMovement == false) {
this.player.moveDown();
this.playerInMovement = true;
}
}
}
}

// New code end
this.attachChild(new Line(this.startX, this.startY, this.endX,
this.endY, 6, this.vbom));
break;
}

return false;
}

Advertisements
Tagged , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: