Phaser example: simple RoadMap function

RoadMap function is basically object chain tween movement where different tween points are user defined. This has been previously done in ActionScript on this blog, see here, example here and more code here. This function has been written in 2009 and now Phaser comes along ...

How it works. Click few times on the screen to create some object diamonds. When done with it press spacebar on keyboard to create and start object star animation. Object star will follow road of diamonds in order user created them - that is why it is called RoadMap function.

You can change the object's speed which is actually time between two diamond points.

Here is the JavaScript Phaser code:

Game.js

window.onload = function() {

    var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update});

    function preload () {

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

    }

    function create () {

        // starting game physics    
        game.physics.startSystem(Phaser.Physics.ARCADE);    
    
        // enabling spacebar keyboard button
        fireButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
        game.input.keyboard.addKeyCapture([Phaser.Keyboard.SPACEBAR]);
    }
    
    // Container Array for all diamonds / path points
    var pointsContainer = new Array();
    
    // If new star / bullet can fire or not
    var canFireBullet = true;

    function update () {
    
        handleClick();
        
        if (fireButton.isDown)
        {
            fireBullet();
        }
    
    }
    
    // Every mouse click sets new object diamond on stage
    function handleClick() {
    
        game.input.mouse.onMouseUp = function (evt) {
        
            var myPointX = game.input.activePointer.x-16;
            var myPointY = game.input.activePointer.y-14;
            
            var d = game.add.sprite(myPointX, myPointY, 'diamond');
            
            // we must remember diamonds positions
            pointsContainer.push([myPointX, myPointY]);

        };            
    }
    
    function fireBullet() {
        
            // if there are points to follow 
            if (pointsContainer.length > 1 && canFireBullet) {
            
                var starCounter = 1;
                
                // set object star speed
                var speed = 500;
                
                // disable new object star creation until last tween is complete
                canFireBullet = false;
            
                // create star on location of first object
                var s = game.add.sprite(pointsContainer[0][0], pointsContainer[0][1], 'star');
                
                // create tweens chain         
                var tween = game.add.tween(s);
                while (starCounter < pointsContainer.length) {
                    tween.to({ x: pointsContainer[starCounter][0], y: pointsContainer[starCounter][1] }, speed);
                    starCounter ++;
                }
                
                // enable new object star creation
                tween._lastChild.onComplete.add(canFire, this);
                tween.start();    
            };
    };
    
    function canFire() {
    
        canFireBullet = true;
    }

};

You will also need some graphics diamond.png and star.png to see this works. Ask questions if you have any. I remember there was another function where star speed was same despite of distances between diamonds.

Now, we can play with it a little bit more. It can be useful to group diamonds together and change alpha to entire group. At start we define new variable:

var diamondsGroup;

We have two new lines inside create function:

diamondsGroup = this.add.group();
diamondsGroup.enableBody = true;

Inside handleClick function instead of adding sprite line we have:

var d = diamondsGroup.create(myPointX, myPointY, 'diamond');

After if line in fireBullet function we set new alpha value, which can be anything, for example, lets subtract half of alpha for every new bullet:

diamondsGroup.alpha -= 0.5;

which makes our diamonds disappear very fast.

*_*