Gravity Quest - Gameplay design and implementation

Other posts in this series:

• Introduction and technology choice
• Gameplay design and implementation
• Gameplay implementation: collision detection
• Visuals and sound
• Level design
• Distribution

In the first article of this series, I wrote about my choice to use Phaser to develop Gravity Quest. Now, I want to give some insights into the design and implementation of the game's gameplay.

In Gravity Quest, you take on the role of an astronaut who, while collecting mineral probes in space, in a freak accident is detached from her shuttle. To survive, the player has to navigate the astronaut, in every of the 25 levels, to a black hole that will eventually return her to earth. The player's instrument to reach the often - what a drag! - quite inconveniently positioned black holes is a gravity gun. While firing it, the astronaut accelerates to the nearest asteroid available, thus resulting in a tarzanian swinging around asteroids until either reaching the black whole, colliding with deadly objects, or drifting too far off into space and subsequently being lost. Video 1 shows some examples of the described gameplay.

Iterating ideas

Before setting on the final concept of the game as described above, I did some iterations with other designs. In one of my previous ideas, for example, the player controlled a black whole. The goal was to for the player to absorb various objects (planets, space ships, etc.) that constantly float towards the black hole before other, enemy black holes would do so. To outmaneuver these enemies, the player had to move her black hole around the screen skillfully. By creating a rough prototype of this concept, however, I quickly learned that the resulting gameplay - the player had to move his/her finger around the screen to relocate the black hole - led to hectic scribbling and was, in sum, unsatisfactory. The important lesson for me here was: test concepts about gameplay as early as possible, while you easily find yourself open to revise or even completely dismiss ideas.

Implementing the concept

In the following, I will describe and exemplify how I implemented the described gameplay with the Phaser framework (note: I am using the, as of writing this article, latest version 2.0.7). I will concentrate on the astronaut and how she interacts with asteroids upon user input in order to move around a level. While I will present all parts required to define a runnable demo, I will not go into specifics about every aspect of using the Phaser framework. Interested readers should look at more comprehensive introductions, like the extensive book Discover phaser by Thomas Palef.

As a foundation, Phaser requires the initialization of game object as shown in listing 1. The function responsible for this requires as parameters the game's intended width and height (for example, 640 and 480 pixels) as well as the rendering method (either Canvas or WebGL). Phaser.AUTO lets Phaser select the most appropriate rendering method. An additional parameter can be used to select a DOM element (such as div) into which the game's canvas will be injected, in this case a div with the id 'game'.

1
var game = new Phaser.Game(640, 480, Phaser.AUTO, 'game');

A game in Phaser consists of at least one state. A game state typically represents a distinct set of functionality. For example, one state is responsible for a game's menu while another is responsible for the actual gameplay. Each state typically consists of at least the three functions preload, create, and update which are described in listing 2.

1
...
2
var mainState = {
3
  preload: function() {
4
    // called once upon instantiation of the state
5
    // typically used to load required assets
6
  },
7
  create: function() {
8
    // called once after the preload function
9
    // typically used to set up the game
10
  },
11
  update: function() {
12
    // called 60 times per second
13
    // typically used to react to user input, define game logic etc.
14
  }
15
}

Having defined the (in this case) only state, it can be added to the game and immediately started as shown in listing 3.

1
...
2
game.state.add('main', mainState);
3
game.state.start('main');

Having this basic setup in place, the required sprites can be loaded within the preload function as shown in listing 4. In this case, we load sprites for the astronaut, asteroids, and the gravity ray that the astronaut can fire to the closest asteroid. And that is already it for the preload function.

1
...
2
game.load.image('astronaut', 'assets/astronaut.png');
3
game.load.image('asteroid', 'assets/asteroid.png');
4
game.load.image('gravityRay', 'assets/gravityray.png');
5
...

In the create function, first, Phaser's arcade physics system (more about physics systems in a latter article) is activated as shown in listing 5. It allows to assign bodies to sprites in the game world, upon which effects like gravity or acceleration can be applied and which can be checked for collisions.

1
...
2
game.physics.startSystem(Phaser.Physics.ARCADE);
3
...

Next, in the create function, the gravity ray, asteroids, and astronaut are placed in the world using the priorly loaded assets. As shown in listing 6, the gravity ray is positioned in the game world's left top corner - the position will later be adjusted with regard to the position of the astronaut from which the gravity ray is to originate. The gravity ray's anchor is set to be vertically centered. The gravity ray's visibility is further set to false because the ray should only be visible upon user input.

1
...
2
// create gravity ray between astronaut and closest asteroid:
3
this.gravityRay = game.add.sprite(0, 0, 'gravityray');
4
this.gravityRay.anchor.setTo(0, 0.5);
5
this.gravityRay.visible = false;
6
...

In this demo, 7 asteroids are added to the world as shown in listing 7. Every asteroid is positioned randomly in the game world using Phaser's rnd.integerInRange. A border of 100 pixels is excluded from potential asteroid positions. (Please note: in the actual game, every asteroid's position is manually defined for every level.) Furthermore, every asteroid's anchor is centered so that the astronaut will later not accelerate towards the top left corner of an asteroids, but towards its center. Also, the arcade physics system is activated for every asteroid, providing it with a physics body. The asteroid is then added the the priorly defined asteroids group, which combines asteroids for latter batch-processing.

1
...
2
// (randomly) place asteroids and add to group:
3
this.asteroids = game.add.group();
4
for (var i = 0; i < 7; i++) {
5
  var asteroid = game.add.sprite(
6
    game.rnd.integerInRange(100, game.world.width - 100),
7
    game.rnd.integerInRange(100, game.world.height - 100),
8
    'asteroid');
9
  asteroid.anchor.setTo(0.5, 0.5);
10
  game.physics.enable(asteroid, Phaser.Physics.ARCADE);
11
  this.asteroids.add(asteroid);
12
};
13
...

Finally, in the create function, the astronaut is positioned in the center of the game world as shown in listing 8. Its anchor is centered so that the astronaut will later rotate around its center (and not around its top left point) from which the gravity gun is fired. As in the case of every asteroid, the physics system is activated for the astronaut to provide it with a physics body.

1
...
2
// create astronaut at the center of the world:
3
this.astronaut = game.add.sprite(game.world.width * 0.5, game.world.height * 0.5, 'astronaut');
4
this.astronaut.anchor.setTo(0.5, 0.5);
5
game.physics.enable(this.astronaut, Phaser.Physics.ARCADE);
6
...

Having set the stage for the game in the create function, in the following, the update function is filled with the logic needed to enable player controls.

First, the closest asteroid to the player and its distance is determined as shown in listing 9. The initial distance is set to a highest possible value. In the following, the group of asteroids from the create function is iterated. For every asteroid, its distance to the astronaut is calculated using a helper function available in the arcade physics system called distanceBetween, which takes as input two arcade physics bodies and returns the distance between their anchor points. If the determined distance is smaller than the currently smallest one, this distance is stored and the corresponding asteroid is set to be the closest one.

1
...
2
var distance = Number.MAX_VALUE;
3
var closestAsteroid;
4
this.asteroids.forEach(function(ast){
5
  var tempDistance = this.distanceBetween(ast, this.astronaut);
6
  if(tempDistance < distance){
7
    distance = tempDistance;
8
    closestAsteroid = ast;
9
  }
10
}, this);
11
...

Next, as shown in listing 10, the determined minimal distance is checked to be beneath a certain threshold, in this case 250. If the threshold is reached, the astronaut has drifted too far off and the game is lost. In this case, to keep things simple, rather than showing a game over menu, the game's sole main state is restarted.

1
...
2
if(distance > 250){
3
  game.state.start('main');
4
}
5
...

Next, within the update function, it is checked whether the user exerts control as shown in listing 11. In Gravity Quest, user input consists of the user holding down a pointer - either the mouse on a computer or a finger on a touch device. If user input is detected, the force with which to accelerate the astronaut to the closest asteroid is determined. In this case, the force is set to be at least 30 and potentially higher, depending on how close the astronaut is to the closest asteroid. The intended effect is to make the gravity gun stronger the closer the object it is fired at is. The value of 30 is not fixed but results from some experimentation on playability and personal preference. Of course, feel free to experiment with it. The player is then accelerated to the closest asteroid with the calculated force using the arcade physics system's accelerateToObject function. Furthermore, the astronaut is rotated to face towards the closest asteroid using the arcade physics system's angleBetween function. Here it is important that the astronaut body's anchor is centered (see listing 8) to receive the intended rotation.

1
...
2
if(game.input.activePointer.isDown){
3
  var force = Math.min(30, 30 * (1 - distance / 250));
4
  game.physics.arcade.accelerateToObject(this.astronaut, closestAsteroid, force);
5

6
  this.astronaut.rotation = game.physics.arcade.angleBetween(this.astronaut, closestAsteroid);
7
}
8
...

Next to accelerating the astronaut, the firing of the gravity gun should be visualized. To achieve this, the gravity ray is made visible, placed, scaled, and rotated upon user input as shown in listing 12. First, the gravity ray is made visible (it was initially set to be invisible in listing 6). Then, its position is matched to the one of the astronaut, from where the ray is to origin. The rotation of the gravity ray is set, similar to the astronaut's, using the angleBetween function. The gravity ray's width is set to be the distance from the astronaut to the closest asteroid, minus this asteroid's radius - this ensures the line to end at the asteroid's surface rather than at its center. Finally, the gravity ray's height is set in consideration of the astronaut's distance to the closest asteroid. The intention here is to make the ray smaller if the distance is high, thus indicating the lower force with which the astronaut is accelerated.

1
...
2
if(game.input.activePointer.isDown){
3
  ...
4
  this.gravityRay.visible = true;
5
  this.gravityRay.x = this.astronaut.x;
6
  this.gravityRay.y = this.astronaut.y;
7
  this.gravityRay.rotation = game.physics.arcade.angleBetween(this.astronaut, closestAsteroid);
8
  this.gravityRay.width = distance - closestAsteroid.width * 0.5;
9
  this.gravityRay.height = Math.min(15, 15 * (1 - distance / 250));
10
}
11
...

Finally, the astronaut's acceleration needs to be stopped and the gravity ray needs to be hidden once to user input ends as shown in listing 13.

1
...
2
if(game.input.activePointer.isDown){
3
  ...
4
} else {
5
  game.physics.arcade.accelerateToObject(this.astronaut, closestAsteroid, 0);
6
  this.gravityRay.visible = false;
7
}
8
...

Demo

Press the button below to play a demo, combining the concepts described above. In the demo, press anywhere (and hold the pressure) to accelerate the astronaut towards the nearest asteroid.

Play demo...

Conclusion

And that is all that's needed to implement Gravity Quest's basic gameplay. The complete, commented code is available in a GitHub repository. Building upon this basis, enhancements can easily be added. For example, asteroids can also accelerate towards the astronaut when being targeted by the gravity gun for more realistic physics. Or, various effects, such as particle emitters or astronaut animations, can be added to make things more interesting, as I will discuss in a following article. Before that, however, I will discuss some more details about implementing the gameplay, specifically collision detection, in the next article.

Resources linked in this article

• Gravity Quest at Apple's App store
• Gravity Quest's website
• Discover phaser - a book written about Phaser
• Gravity Quest gameplay demo - play a demo of the gameplay concept described in this article
• GitHub repository - complete, commented code of this gameplay demo