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

// 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:

1 comment:

SergeyMarch 26, 2019 at 3:36 PM
Software developers in Ukraine have a strong skill set, they are tech savvy, up to date with recent innovations and have an independent thinking. Moreover, Ukraine offers intermediate prices of $25-$49/hour for its software developers in comparison to the engineers from other eastern European countries. Learn more about Ukrainian programmers.