Phaser3IntroDemo01.js

import Phaser from '../lib/phaser.js'

export default class Example3 extends Phaser.Scene
{
    constructor()
    {
        super('game');
    }

    preload()
    {
        this.load.audio('music', 'assets/lunar.mp3');
        this.load.image('bg', 'assets/bg.png');
        this.load.image('red', 'assets/red.png');
        this.load.image('blue', 'assets/blue.png');
        this.load.image('yellow', 'assets/yellow.png');
        this.load.script('webfont', 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js');
    }

    create()
    {   
        this.add.image(400, 300, 'bg');

        const ball1 = this.add.circle(200, 250, 10, 0xffffff);
        this.physics.add.existing(ball1);

        const ball2 = this.add.circle(200, 200, 40, 0xffffff);
        this.physics.add.existing(ball2);

        const ball3 = this.add.circle(100, 50, 10, 0xffffff);
        this.physics.add.existing(ball3);
        
        /** @type {Phaser.Physics.Arcade.Body} */
        let body;
        
        body = ball1.body;
        body.setCollideWorldBounds(true, 1, 1);
        body.setVelocity(400, 140);
        body.setBounce(1, 1);
        body.setMass(1);
        
        body = ball2.body;
        body.setCollideWorldBounds(true, 1, 1);
        body.setVelocity(-100, -180);
        body.setBounce(1, 1);
        body.setMass(3);

        body = ball3.body;
        body.setCollideWorldBounds(true, 1, 1);
        body.setVelocity(70, 180);
        body.setBounce(1, 1);
        body.setMass(1);

        var particles1 = this.add.particles('red');
        var emitter1 = particles1.createEmitter({
            speed: 20,
            scale: { start: 0.4, end: 0 },
            blendMode: 'ADD',
            lifespan: 2000,
        });
        emitter1.startFollow(ball1);

        var particles2 = this.add.particles('blue');
        var emitter2 = particles2.createEmitter({
            speed: 5,
            scale: { start: 0.7, end: 0 },
            blendMode: 'ADD',
            lifespan: 5000,
        });
        emitter2.startFollow(ball2);

        var particles3 = this.add.particles('yellow');
        var emitter3 = particles3.createEmitter({
            speed: 20,
            scale: { start: 0.4, end: 0 },
            blendMode: 'ADD',
            lifespan: 2000,
        });
        emitter3.startFollow(ball3);

        this.physics.add.collider(ball1, ball2);
        this.physics.add.collider(ball1, ball3);
        this.physics.add.collider(ball2, ball3);

        var vp = this.make.graphics();
        vp.fillStyle(0xffffff);
        vp.fillRect(0, 50, 800, 500);

        var mask = vp.createGeometryMask();
        ball1.setMask(mask);
        ball2.setMask(mask);
        ball3.setMask(mask);

        emitter1.setMask(mask);
        emitter2.setMask(mask);
        emitter3.setMask(mask);

        // black borders top and bottom
        this.add.rectangle(400, 0, 800, 90, 0x000000);
        this.add.rectangle(400, 600, 800, 90, 0x000000);

        // magenta borders top and bottom
        this.add.rectangle(400, 45, 800, 10, 0xff00ff);
        this.add.rectangle(400, 550, 800, 10, 0xff00ff);

        const fontFamily = 'Permanent Marker';

        WebFont.load({
            google: {
                families: [ fontFamily ]
            },
            active: () =>
            {
                let banner = this.add.text(-300, 295, 'Lunar - Hallman', 
                { 
                    fontFamily: fontFamily, 
                    fontSize: '100px', 
                    color: 'cyan',
                });
                banner.setShadow(-5, 5, 'rgba(255,0,255,1.0)', 0);

                this.add.tween({
                    targets: banner,
                    x: 300,
                    y: 200,
                    yoyo: true,
                    repeat: -1,
                    ease: 'Sine.easeInOut',
                    duration: 5000,
                });
            }
        });

        var sound = this.sound.add('music');
        sound.play();
    }
}