Build games as easily as you play them — join the Phaser Beam waitlist for Early Access.
                
            
            class Controller extends Phaser.Scene { constructor () { super({ key: 'Controller', active: true }); this.camera1; this.camera2; this.camera3; this.camera4; } create () { this.camera1 = this.scene.get('DemoA').cameras.main; this.camera2 = this.scene.get('DemoB').cameras.main; this.camera3 = this.scene.get('DemoC').cameras.main; this.camera4 = this.scene.get('DemoD').cameras.main; this.run(); } run () { this.slideLeft(2000, 3000); this.slideUp(2000, 6000); this.slideRight(2000, 9000); this.slideCenter(2000, 12000); this.slideTopLeft(2000, 16000); this.zoomOut(2000, 20000); this.exchange1(2000, 23000); this.exchange2(2000, 26000); this.exchange3(2000, 29000); this.zoomIn(2000, 32000); this.time.addEvent({ delay: 34000, callback: this.run, callbackScope: this, repeat: -1 }); } slideLeft (speed, delay) { var tween = this.tweens.add({ targets: [ this.camera1, this.camera2, this.camera3, this.camera4 ], x: '-=800', ease: 'Power1', duration: speed, delay: delay }); } slideRight(speed, delay) { var tween = this.tweens.add({ targets: [ this.camera1, this.camera2, this.camera3, this.camera4 ], x: '+=800', ease: 'Power1', duration: speed, delay: delay }); } slideUp(speed, delay) { var tween = this.tweens.add({ targets: [ this.camera1, this.camera2, this.camera3, this.camera4 ], y: '-=600', ease: 'Power1', duration: speed, delay: delay }); } slideDown(speed, delay) { var tween = this.tweens.add({ targets: [ this.camera1, this.camera2, this.camera3, this.camera4 ], y: '+=600', ease: 'Power1', duration: speed, delay: delay }); } slideCenter(speed, delay) { var tween = this.tweens.add({ targets: [ this.camera1, this.camera2, this.camera3, this.camera4 ], x: '-=400', y: '+=300', ease: 'Power1', duration: speed, delay: delay }); } slideTopLeft(speed, delay) { var tween = this.tweens.add({ targets: [ this.camera1, this.camera2, this.camera3, this.camera4 ], x: '+=400', y: '+=300', ease: 'Power1', duration: speed, delay: delay }); } exchange1(speed, delay) { var tween = this.tweens.add({ targets: this.camera1, x: 400, y: 300, ease: 'Power1', duration: speed, delay: delay }); var tween = this.tweens.add({ targets: this.camera4, x: 0, y: 0, ease: 'Power1', duration: speed, delay: delay }); } exchange2(speed, delay) { var tween = this.tweens.add({ targets: this.camera2, x: 0, y: 300, ease: 'Power1', duration: speed, delay: delay }); var tween = this.tweens.add({ targets: this.camera3, x: 400, y: 0, ease: 'Power1', duration: speed, delay: delay }); } exchange3(speed, delay) { var tween = this.tweens.add({ targets: this.camera1, x: 0, y: 0, ease: 'Power1', duration: speed, delay: delay }); var tween = this.tweens.add({ targets: this.camera2, x: 400, y: 0, ease: 'Power1', duration: speed, delay: delay }); var tween = this.tweens.add({ targets: this.camera3, x: 0, y: 300, ease: 'Power1', duration: speed, delay: delay }); var tween = this.tweens.add({ targets: this.camera4, x: 400, y: 300, ease: 'Power1', duration: speed, delay: delay }); } zoomOut(speed, delay) { var tween = this.tweens.add({ targets: this.camera1, x: 0, y: 0, zoom: 0.5, width: 400, height: 300, scrollX: 200, scrollY: 150, ease: 'Power1', duration: speed, delay: delay }); var tween = this.tweens.add({ targets: this.camera2, x: 400, y: 0, zoom: 0.5, width: 400, height: 300, scrollX: 200, scrollY: 150, ease: 'Power1', duration: speed, delay: delay }); var tween = this.tweens.add({ targets: this.camera3, x: 0, y: 300, zoom: 0.5, width: 400, height: 300, scrollX: 200, scrollY: 150, ease: 'Power1', duration: speed, delay: delay }); var tween = this.tweens.add({ targets: this.camera4, x: 400, y: 300, zoom: 0.5, width: 400, height: 300, scrollX: 200, scrollY: 150, ease: 'Power1', duration: speed, delay: delay }); } zoomIn(speed, delay) { var tween = this.tweens.add({ targets: this.camera1, x: 0, y: 0, zoom: 1, width: 800, height: 600, scrollX: 0, scrollY: 0, ease: 'Power1', duration: speed, delay: delay }); var tween = this.tweens.add({ targets: this.camera2, x: 800, y: 0, zoom: 1, width: 800, height: 600, scrollX: 0, scrollY: 0, ease: 'Power1', duration: speed, delay: delay }); var tween = this.tweens.add({ targets: this.camera3, x: 0, y: 600, zoom: 1, width: 800, height: 600, scrollX: 0, scrollY: 0, ease: 'Power1', duration: speed, delay: delay }); var tween = this.tweens.add({ targets: this.camera4, x: 800, y: 600, zoom: 1, width: 800, height: 600, scrollX: 0, scrollY: 0, ease: 'Power1', duration: speed, delay: delay }); } setCameraFull(cam, x, y) { cam.zoom = 1; cam.x = x; cam.y = y; cam.width = 800; cam.height = 600; cam.scrollX = 0; cam.scrollY = 0; } }
class Controller extends Phaser.Scene
{
    constructor ()
    {
        super({ key: 'Controller', active: true });
        this.camera1;
        this.camera2;
        this.camera3;
        this.camera4;
    }
    create ()
    {
        this.camera1 = this.scene.get('DemoA').cameras.main;
        this.camera2 = this.scene.get('DemoB').cameras.main;
        this.camera3 = this.scene.get('DemoC').cameras.main;
        this.camera4 = this.scene.get('DemoD').cameras.main;
        this.run();
    }
    run ()
    {
        this.slideLeft(2000, 3000);
        this.slideUp(2000, 6000);
        this.slideRight(2000, 9000);
        this.slideCenter(2000, 12000);
        this.slideTopLeft(2000, 16000);
        this.zoomOut(2000, 20000);
        this.exchange1(2000, 23000);
        this.exchange2(2000, 26000);
        this.exchange3(2000, 29000);
        this.zoomIn(2000, 32000);
        this.time.addEvent({ delay: 34000, callback: this.run, callbackScope: this, repeat: -1 });
    }
    slideLeft (speed, delay)
    {
       var tween = this.tweens.add({
            targets: [ this.camera1, this.camera2, this.camera3, this.camera4 ],
            x: '-=800',
            ease: 'Power1',
            duration: speed,
            delay: delay
        });
    }
    slideRight(speed, delay)
    {
       var tween = this.tweens.add({
            targets: [ this.camera1, this.camera2, this.camera3, this.camera4 ],
            x: '+=800',
            ease: 'Power1',
            duration: speed,
            delay: delay
        });
    }
    slideUp(speed, delay)
    {
       var tween = this.tweens.add({
            targets: [ this.camera1, this.camera2, this.camera3, this.camera4 ],
            y: '-=600',
            ease: 'Power1',
            duration: speed,
            delay: delay
        });
    }
    slideDown(speed, delay)
    {
       var tween = this.tweens.add({
            targets: [ this.camera1, this.camera2, this.camera3, this.camera4 ],
            y: '+=600',
            ease: 'Power1',
            duration: speed,
            delay: delay
        });
    }
    slideCenter(speed, delay)
    {
       var tween = this.tweens.add({
            targets: [ this.camera1, this.camera2, this.camera3, this.camera4 ],
            x: '-=400',
            y: '+=300',
            ease: 'Power1',
            duration: speed,
            delay: delay
        });
    }
    slideTopLeft(speed, delay)
    {
       var tween = this.tweens.add({
            targets: [ this.camera1, this.camera2, this.camera3, this.camera4 ],
            x: '+=400',
            y: '+=300',
            ease: 'Power1',
            duration: speed,
            delay: delay
        });
    }
    exchange1(speed, delay)
    {
       var tween = this.tweens.add({
            targets: this.camera1,
            x: 400,
            y: 300,
            ease: 'Power1',
            duration: speed,
            delay: delay
        });
       var tween = this.tweens.add({
            targets: this.camera4,
            x: 0,
            y: 0,
            ease: 'Power1',
            duration: speed,
            delay: delay
        });
    }
    exchange2(speed, delay)
    {
       var tween = this.tweens.add({
            targets: this.camera2,
            x: 0,
            y: 300,
            ease: 'Power1',
            duration: speed,
            delay: delay
        });
       var tween = this.tweens.add({
            targets: this.camera3,
            x: 400,
            y: 0,
            ease: 'Power1',
            duration: speed,
            delay: delay
        });
    }
    exchange3(speed, delay)
    {
       var tween = this.tweens.add({
            targets: this.camera1,
            x: 0,
            y: 0,
            ease: 'Power1',
            duration: speed,
            delay: delay
        });
       var tween = this.tweens.add({
            targets: this.camera2,
            x: 400,
            y: 0,
            ease: 'Power1',
            duration: speed,
            delay: delay
        });
       var tween = this.tweens.add({
            targets: this.camera3,
            x: 0,
            y: 300,
            ease: 'Power1',
            duration: speed,
            delay: delay
        });
       var tween = this.tweens.add({
            targets: this.camera4,
            x: 400,
            y: 300,
            ease: 'Power1',
            duration: speed,
            delay: delay
        });
    }
    zoomOut(speed, delay)
    {
       var tween = this.tweens.add({
            targets: this.camera1,
            x: 0,
            y: 0,
            zoom: 0.5,
            width: 400,
            height: 300,
            scrollX: 200,
            scrollY: 150,
            ease: 'Power1',
            duration: speed,
            delay: delay
        });
       var tween = this.tweens.add({
            targets: this.camera2,
            x: 400,
            y: 0,
            zoom: 0.5,
            width: 400,
            height: 300,
            scrollX: 200,
            scrollY: 150,
            ease: 'Power1',
            duration: speed,
            delay: delay
        });
       var tween = this.tweens.add({
            targets: this.camera3,
            x: 0,
            y: 300,
            zoom: 0.5,
            width: 400,
            height: 300,
            scrollX: 200,
            scrollY: 150,
            ease: 'Power1',
            duration: speed,
            delay: delay
        });
       var tween = this.tweens.add({
            targets: this.camera4,
            x: 400,
            y: 300,
            zoom: 0.5,
            width: 400,
            height: 300,
            scrollX: 200,
            scrollY: 150,
            ease: 'Power1',
            duration: speed,
            delay: delay
        });
    }
    zoomIn(speed, delay)
    {
       var tween = this.tweens.add({
            targets: this.camera1,
            x: 0,
            y: 0,
            zoom: 1,
            width: 800,
            height: 600,
            scrollX: 0,
            scrollY: 0,
            ease: 'Power1',
            duration: speed,
            delay: delay
        });
       var tween = this.tweens.add({
            targets: this.camera2,
            x: 800,
            y: 0,
            zoom: 1,
            width: 800,
            height: 600,
            scrollX: 0,
            scrollY: 0,
            ease: 'Power1',
            duration: speed,
            delay: delay
        });
       var tween = this.tweens.add({
            targets: this.camera3,
            x: 0,
            y: 600,
            zoom: 1,
            width: 800,
            height: 600,
            scrollX: 0,
            scrollY: 0,
            ease: 'Power1',
            duration: speed,
            delay: delay
        });
       var tween = this.tweens.add({
            targets: this.camera4,
            x: 800,
            y: 600,
            zoom: 1,
            width: 800,
            height: 600,
            scrollX: 0,
            scrollY: 0,
            ease: 'Power1',
            duration: speed,
            delay: delay
        });
    }
    setCameraFull(cam, x, y)
    {
        cam.zoom = 1;
        cam.x = x;
        cam.y = y;
        cam.width = 800;
        cam.height = 600;
        cam.scrollX = 0;
        cam.scrollY = 0;
    }
}