Example 16. TileSprite

We use the same image as in the previous example. This time we use it as only 1 image.


We tile this image, using tileSprite method.


This is the javascript file which adds 5 by 5 tiles, anchored around center of screen and starts autoscrolling.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// ex16. TileSprite

var GameState = {

    preload: function() {

        game.load.image('colorImages', 'images/ex16.png');
    },

    create: function() {

        // Set backgound color
        game.stage.backgroundColor = "#555555";

        // Image size
        var imageWidth = 64, imageHeight = 64;

        // parameters for tile placement
        var numTiles = 5;
        var x = game.world.centerX - numTiles / 2 * imageWidth;
        var y = game.world.centerY - numTiles / 2 * imageHeight;
        var w = numTiles * imageWidth;
        var h = numTiles * imageHeight;

        // tileSprite added and scrolling started
        this.color = game.add.tileSprite(x, y, w, h, 'colorImages');
        this.color.autoScroll(imageWidth / 2, imageHeight / 2);
    }
}

var game = new Phaser.Game(800, 600, Phaser.AUTO);
game.state.add("GameState", GameState);
game.state.start("GameState");

This is the output during the scrolling:


at 1 comment:

Example 15. Animation

We will use this image with four rectangles:


The image is 64 by 64, and spritesheet is loaded with key 'colorImages' and each frame is 32 by 32 bits. We also indicate there are four of them.


This is the javascript file which creates an animation 'colorAnimation' that go from frame 0 to 3 and then repeats at a rate of 2 frames per second:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// ex15. Animation

var GameState = {

    preload: function() {

        game.load.spritesheet('colorImages', 'images/ex15.png', 32, 32, 4);
    },

    create: function() {

        // Set backgound color
        game.stage.backgroundColor = "#555555";

        // add first frame
        this.color = game.add.sprite(game.world.centerX,
                                     game.world.centerY, 'colorImages');
        this.color.anchor.setTo(0.5);
        this.color.scale.set(4);

        // create looped animation
        this.color.animations.add('colorAnimation', [0, 1, 2, 3], 2, true);

        // start
        this.color.animations.play("colorAnimation");
    }
}

var game = new Phaser.Game(800, 600, Phaser.AUTO);
game.state.add("GameState", GameState);
game.state.start("GameState");

During the animation, we will have one of the four colors and it will change at a rate of 2 per second.


at No comments:

Example 14. moveToXY

If a sprite has physics enabled, we can use moveToXY method to move it to some direction. We use mouse coordinates, from the last click to move the sprite to.


moveToXY returns angle of rotation which we can set the sprite rotation attribute to. This assumes the arrow initial state is rightwards where rotation angle is zero.


This is the javascript file which calls moveToXY in the callback to the click.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// ex14. moveToXY

var GameState = {

    preload: function() {

        game.load.spritesheet("arrow", "images/arrow.png");
    },

    create: function() {

        // Set backgound color
        game.stage.backgroundColor = "#0FFF0F";

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

        // Player centered and physics, initial left velocity
        this.player = game.add.sprite(game.world.centerX, game.world.centerY, "arrow");
        this.player.anchor.setTo(0.5);
        game.physics.enable(this.player, Phaser.Physics.ARCADE);
        this.player.body.collideWorldBounds = true;

        // move toward upperleft, and face towards it
        rot = game.physics.arcade.moveToXY(this.player, 0, 0, 100);
        this.player.rotation = rot;

        // listen to mouse click
        game.input.onDown.add(this.move, this);
    },

    move: function() {
        // move to click point, face towards it
        var x = game.input.activePointer.x;
        var y = game.input.activePointer.y;
        var rot = game.physics.arcade.moveToXY(this.player, x, y, 100);
        this.player.rotation = rot;
    }
        
};

var game = new Phaser.Game(800, 600, Phaser.AUTO);
game.state.add("GameState", GameState);
game.state.start("GameState");

This is the output:


at No comments:

Example 13. Arrow Keys

Using createCursorKeys() method in our create() method, we can check the directions left, right, up and down arrows with isDown() in our update() method.


This program moves a sprite left, right, up or down by setting its velocity in one of the directions. Once a key is pressed and released, it will continue in that direction until new arrow key is pressed. However it will not be able to leave the world. Also it keeps changing sprite angle so it keeps facing direction it is moving.



This javascript file sets the physics and changes velocity in response to arrow keys.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// ex13. Arrow Keys

var GameState = {

    preload: function() {

        game.load.spritesheet("arrow", "images/arrow.png");
    },

    create: function() {

        // Set backgound color
        game.stage.backgroundColor = "#0FFF0F";

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

        // Player centered and physics, initial left velocity
        this.player = game.add.sprite(game.world.centerX, game.world.centerY, "arrow");
        this.player.fame = 2;
        this.player.anchor.setTo(0.5);
        game.physics.enable(this.player, Phaser.Physics.ARCADE);
        this.player.body.collideWorldBounds = true;
        this.player.body.velocity.setTo(-100,0);

        // listen to the arrow keys
        this.cursor = game.input.keyboard.createCursorKeys();
    },

    update: function() {

        // was arrow key pressed
        if(this.cursor.left.isDown) {
            this.player.body.velocity.setTo(-100, 0);
            this.player.angle = 0;
        } else if (this.cursor.right.isDown) {
            this.player.body.velocity.setTo(100, 0);
            this.player.angle = 180;
        } else if (this.cursor.up.isDown) {
            this.player.body.velocity.setTo(0, -100);
            this.player.angle = 90;
        } else if (this.cursor.down.isDown) {
            this.player.body.velocity.setTo(0, 100);
            this.player.angle = 270;
        }
    }
};

var game = new Phaser.Game(800, 600, Phaser.AUTO);
game.state.add("GameState", GameState);
game.state.start("GameState");

This is the output:

at No comments:

Example 12. Reading JSON

A JSON file is written with a value for x and a value for y:


1
2
3
4
{
  "x": 300,
  "y": 200
}

This javascript file reads the JSON file and set the sprite coordinates.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// ex12. Reading JSON

var GameState = {

    preload: function() {

        game.load.image("red", "images/red.png");
        game.load.text("coord", "data/coord.json");
    },

    create: function() {

        // Set backgound color
        game.stage.backgroundColor = "#0FFF0F";

        // Coordinates
        var data = JSON.parse(game.cache.getText("coord"));
        var x = data.x;
        var y = data.y;

        //  sprite at x, y location
        this.red = game.add.sprite(x, y, "red");

    }
};

var game = new Phaser.Game(800, 600, Phaser.AUTO);
game.state.add('GameState', GameState);
game.state.start('GameState');

This is the output:


at No comments:

Example 11. Physics

We can use Physics to create the same animation as in Example 10.


We have to set the physics on game and the sprite. Also we make sure the sprite is bound to the game dimensions.


We use the moveTo method of the physics engine to move sprite to lower right corner. Had we not set the bounds, it would continue moving and out of the screen.


This is the javascript file. The output is similar to the previous Example.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// ex11. Physics

var game = new Phaser.Game(800, 600, Phaser.AUTO);

var GameState = {

    preload: function() {

        game.load.image("red","images/red.png");
    },

    create: function() {

        // Set backgound color
        game.stage.backgroundColor = "#0FFF0F";

        // Start sprite at upper left Corner
        this.red = game.add.sprite(0, 0, "red");

        // Stopping Point is lower right corner
        var x = game.width - this.red.width;
        var y = game.height - this.red.height;
        
        // start physics
        game.physics.startSystem(Phaser.Physics.ARCADE);

        // sprite physics on red
        game.physics.enable(this.red, Phaser.Physics.ARCADE);
        this.red.body.collideWorldBounds = true;

        // move diagonally
        game.physics.arcade.moveToXY(this.red, x, y, 100);
    }
};

game.state.add('GameState', GameState);
game.state.start('GameState');
at No comments:

Example 10. Animation

An animation can use the tween method to go from current state to another state, over a certain duration.


Here a sprite moves diagonally from upper left corner to lower right corner of the screen.


This is the javascript file:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// ex10. Animation

var game = new Phaser.Game(800, 600, Phaser.AUTO);

var GameState = {

    preload: function() {

        game.load.image("red","images/red.png");
    },

    create: function() {

        // Set backgound color
        game.stage.backgroundColor = "#0FFF0F";
        
        // sprite at Upper Left Corner
        this.red = game.add.sprite(0, 0, "red");

        // diagonal movement over 10 sec
        var redMovement = game.add.tween(this.red);
        var moveTo = {
            x : game.width - this.red.width,
            y : game.height - this.red.height
        };
        redMovement.to(moveTo, 10000);
        redMovement.start();
    }
};

game.state.add('GameState', GameState);
game.state.start('GameState');

This is the output near the halfway point:


at No comments:
Subscribe to: Comments (Atom)