Jump to content

Variable scope/declaration and 'modules'


Recommended Posts


Total newcomer to Phaser 3 and Javascript here so please bear with me!

I've been fiddling around with the very first example (the bouncing logo) just to get a feel for how things work (code below, set to use local copy of phaser.js as a test and with a pointless 2D array!). It seems pretty straightforward so far but I have two questions...

Is it usual to declare variables outside of functions (as in my code), rather than say declaring in preload() or create() and passing them around? And secondly, how do I go about splitting a program into logical chunks/modules/files and retain access to variables or constants that will be required throughout the program?

Thank you!


<!DOCTYPE html>
<!-- <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script> -->
<script src="phaser.js"></script>


    var config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 2000 }
        scene: {
            preload: preload,
            create: create,
            update: updatathon

    var game = new Phaser.Game(config);
    var cursors;
    var logo;
    var emitter;
    var arrayText;
    var test = [
        [1, 1, 1, 1, 1],
        [1, 0, 0, 0, 1]

    function preload ()
        this.load.image('sky', 'assets/skies/space3.png');
        this.load.image('logo', 'assets/sprites/phaser3-logo.png');
        this.load.image('red', 'assets/particles/red.png');

    function create ()
        this.add.image(400, 300, 'sky');

        var particles = this.add.particles('red');
        emitter = particles.createEmitter({
            speed: 600,
            scale: { start: 0.75, end: 0 },
            blendMode: 'ADD',
            angle : 90

        // player controlled logo-flavoured spaceship
        logo = this.physics.add.image(400, 400, 'logo');

        //set up cursor keys        
        cursors = this.input.keyboard.createCursorKeys();

        //text to display a pointless array index         
        arrayText = this.add.text(16, 16, '', { fontSize: '32px', fill: '#FFFFFF' });


    function updatathon()

        if (cursors.up.isDown)
            logo.setVelocityX(Phaser.Math.FloatBetween(-100, 100));
            emitter.setAngle(Phaser.Math.FloatBetween(60, 120));            
            emitter.on = true;
            emitter.on = false;

        if (cursors.left.isDown)

        if (cursors.right.isDown)

        arrayText.setText('Array [0][1]: ' + test[0][1]);



Link to comment
Share on other sites

That's a fine way to handle variable scope to start. It's the simplest.

A common way is to save values as properties of the current state:

this.logo = this.add.logo(/*...*/);

It does mean if you call your own methods or pass callbacks, you have to manage the calling context (this) as well.

JavaScript modules are a long story: https://hacks.mozilla.org/2015/08/es6-in-depth-modules/

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...