HTML5 Game Development with Phaser2 - Part 3

jDataLab

3 minute read

This is the third part of [HTML5 Game Development with Phaser2]( {{site.url}}{{site.baseurl}}{% post_url 2018-07-03-phaser2 %} ). In the first and second parts, we have

  • set up a game container,
  • import the Phaser library,
  • create a new game object, and
  • display sprites.

In this part, we will show the code for

  • character animation,
  • object group and
  • physics system.

3. Character animation

As previously mentioned that an character can be animated by using a spritesheet. For example, in the preload function, load a spritesheet.

game.load.spritesheet('dude', 'dude.png', 32, 48, 9);

Then in the create function, add player and pick a frame to be initial state. There is nine frames in the dude sheet, indexed from 0 through 8. To select the middle one,

    player = game.add.sprite(0, 0, 'dude');
    player.frame = 4;

To define an animation, named ‘left’, for the character when moving left, using the frames 0 through 3, in the create function, write

player.animations.add('left', [0, 1, 2, 3], 10, true);

To define an animation, named ‘right’, for the character when moving right, using the frames 5 through 8, in the create function, write

player.animations.add('right', [5, 6, 7, 8], 10, true);

5. Keyboard hot keys

To create four hot keys, up, right, down, left,

var cursors = game.input.keyboard.createCursorKeys();

6. Physics System

Phaser supports three Physics engines: Arcade, Ninja and P2.

Arcade Physics

Arcade contains collision, overlap and movement related methods. Arcade supports the simple collision detection, AABB (axis aligned bounding box).

Enable physics engine

game.physics.startSystem(Phaser.Physics.ARCADE);

Enable a sprite with gravity

game.physics.arcade.enable(player);

player is the name of the sprite to be enabled.

Specify gravity level and prevent the out-of-boundary issue

In the Arcade engine, gravity can go either horizontally along with the x coordinate or vertically with the y coordinate.

player.body.gravity.y = 300; 
player.body.collideWorldBounds = true; 

fish.body.gravity.x = 20;
fish.body.collideWorldBounds = true;

AABB collide detection

In the Arcade system, AABB detection is defined between two sprite objects or object groups.

game.physics.arcade.collide(player, ground);

4. Add a group of sprites

Phaser2 supports sprite groups. In the create function, add a new group and enable it with gravity.

    var stars = game.add.group();
    stars.enableBody = true;

Assume that the image sprite has been loaded in the preload function,

game.load.image('star', 'star.png');

The following for loop creates 12 new sprite star within the group. It will be randomly placed within the game world and displayed with the ‘star’ image. And for each star in the group, enable the star with gravity and define bouncing rate.

    for (var i = 0; i < 12; i++)
    {
        var star = stars.create(i*70, Math.random()*100+10, 'star');
        star.scale.setTo(1.5,1.5);
        star.body.gravity.y = 300;
        star.body.bounce.y = 0.7 + Math.random() * 0.2;
        star.body.collideWorldBounds = true; //prevent out of game area boundary
    }

Continue to Part 4