Navigation

Part 6 - Special Effects

Published on 12th November 2018

Let's add a couple of simple effects to spice things up a little. First, we can make the selection block fade in and out, by adding this to the end of the Input Panel create function:

this.tweens.add({
    targets: this.block,
    alpha: 0.2,
    yoyo: true,
    repeat: -1,
    ease: 'Sine.easeInOut',
    duration: 350
});

Then, how about topping it all off with a nice starfield behind everything? We'll add this as its own Scene, running in the background. So the Highscore and Input Panel Scenes are running over the top of it.

I'm not going to explain the code behind it in detail, suffice to say it's a bit of simple math and a Blitter game object:

class Starfield extends Phaser.Scene {

    constructor ()
    {
        super({ key: 'Starfield', active: true });

        this.stars;

        this.distance = 300;
        this.speed = 250;

        this.max = 500;
        this.xx = [];
        this.yy = [];
        this.zz = [];
    }

    preload ()
    {
        this.load.setCORS('anonymous');
        this.load.setBaseURL('//labs.phaser.io/');

        this.load.image('star', 'assets/demoscene/star4.png');
    }

    create ()
    {
        //  Do this, otherwise this Scene will steal all keyboard input
        this.input.keyboard.enabled = false;

        this.stars = this.add.blitter(0, 0, 'star');

        for (let i = 0; i < this.max; i++)
        {
            this.xx[i] = Math.floor(Math.random() * 800) - 400;
            this.yy[i] = Math.floor(Math.random() * 600) - 300;
            this.zz[i] = Math.floor(Math.random() * 1700) - 100;

            let perspective = this.distance / (this.distance - this.zz[i]);
            let x = 400 + this.xx[i] * perspective;
            let y = 300 + this.yy[i] * perspective;

            this.stars.create(x, y);
        }
    }

    update (time, delta)
    {
        for (let i = 0; i < this.max; i++)
        {
            let perspective = this.distance / (this.distance - this.zz[i]);
            let x = 400 + this.xx[i] * perspective;
            let y = 300 + this.yy[i] * perspective;

            this.zz[i] += this.speed * (delta / 1000);

            if (this.zz[i] > 300)
            {
                this.zz[i] -= 600;
            }

            let bob = this.stars.children.list[i];

            bob.x = x;
            bob.y = y;
        }
    }

}

Here is what it looks like all put together:

Effective, definitely retro, but also with modern features.