HTML5 Gaming Tutorials using Phaser: 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:

// 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');

HTML5 Gaming Tutorials using Phaser

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:

This is the output near the halfway point:

No comments:

Post a Comment