Question About Passing Variables Between JavaScript Files

Phaser 3
1

Hi,

If Phaser “scene” is in: coreVisuals.js
how would I access it in say: coreScreens.js ?

Having a lot of issues with passing variables between JS files.
Any help would be appreciated…

Jesse

2

The scene isn’t really in a file but in a calling context — this in all the scene methods. You can pass that as a scene argument to any function or use call(this, …) to keep the this value.

Usually people store values as properties of the scene if they need to be accessed in other functions. If you’re using variables instead, you need to pass those variables as arguments or else use global variables.

3

Hi

Ok, that finally makes sense.
I am working now part-time on the PHAS3R web engine framework, I’ll let you know here when it is done.

Jesse Lee

4

Ugg, still need help…

LoadAllSpritesAndInitialize(scene); //ERROR, "scene" not defined?
Trying to use “scene” in same JS file it was declared in a different function in same JS file?

Jesse

//--------------------------------------------------------------------------------------------------------------
function SetupGameWindow ()
{
    config = {
        type: Phaser.AUTO,
        width: OriginalWidth,
        height: OriginalHeight,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 300 },
                debug: false
            }
        },scale: {
                mode: Phaser.Scale. FIT,
                autoCenter: Phaser.Scale.CENTER_BOTH
            },
        scene: {
            preload: preload,
            create: create,
            update: update
        }
    };

    var game = new Phaser.Game(config);

 
}

//--------------------------------------------------------------------------------------------------------------
function InitializeAllVisuals ()
{
    BG_Screen_Fading = this.add.image(-99999, -99999, 'BG_Screen_Fading');
    BG_Screen_Fading.setDepth(999);
    DrawSprite(BG_Screen_Fading, 320, 180, 1.0, 1.0, 0, 255, 255, 255, 0);

    GUI_Keyboard = this.add.image(-99999, -99999, 'GUI_Keyboard');
    GUI_Keyboard.setDepth(0);
    DrawSprite(GUI_Keyboard, 320, 180, 1.0, 1.0, 0, 255, 255, 255, 0);

    GUI_MouseTouch = this.add.image(-99999, -99999, 'GUI_MouseTouch');
    GUI_MouseTouch.setDepth(0);
    DrawSprite(GUI_MouseTouch, 320, 180, 1.0, 1.0, 0, 255, 255, 255, 0);
    
    BG_PHASER_v3_Logo = this.add.image(-99999, -99999, 'BG_PHASER_v3_Logo');
    BG_PHASER_v3_Logo.setDepth(0);
    DrawSprite(BG_PHASER_v3_Logo, 320, 180, 1.0, 1.0, 0, 255, 255, 255, 0);

    sky = this.add.image(-99999, -99999, 'sky');
    sky.setDepth(-1);
    DrawSprite(sky, 320, 180, 1.0, 1.0, 0, 255, 255, 255, 0);

    BG_JLP = this.add.image(-99999, -99999, 'BG_JLP');
    BG_JLP.setDepth(0);
    DrawSprite(BG_JLP, 320, 180, 1.0, 1.0, 0, 255, 255, 255, 0);

    BG_Title = this.add.image(-99999, -99999, 'BG_Title');
    BG_Title.setDepth(0);
    DrawSprite(BG_Title, 320, 180, 1.0, 1.0, 0, 255, 255, 255, 0);

    SPR_Logo = this.add.image(-99999, -99999, 'SPR_Logo');
    SPR_Logo.setDepth(1);
    DrawSprite(SPR_Logo, 320, 180, 1.0, 1.0, 0, 255, 255, 255, 0);

    for (index = 0; index < 10; index++)
    {
        SPR_LineDivider[index] = this.add.image(-99999, -99999, 'SPR_LineDivider[index]');
        SPR_LineDivider[index].setDepth(1);
        DrawSprite(SPR_LineDivider[index], 320, 180, 1.0, 1.0, 0, 255, 255, 255, 0);
    }

    for (index = 0; index < TextsMax; index++)
    {
        Texts[index] = LoadAllSpritesAndInitialize(scene);this.add.text(0, 0, ' ', { fontFamily: 'CustomFont', fontSize: 20 });
        Texts[index].setOrigin(0.5);
    }

    ScreenCenterX = this.cameras.main.worldView.x + (this.cameras.main.width / 2);
    ScreenSizeX = this.cameras.main.width;

    LoadAllSpritesAndInitialize(scene); //ERROR, "scene" not defined?

}

//--------------------------------------------------------------------------------------------------------------
function LoadSprite (scene, spriteIndex, filePath, spriteDepth, spriteAlpha)
{
    Sprites[spriteIndex] = scene.load.image('Sprites[spriteIndex]', filePath);
    Sprites[spriteIndex] = scene.add.image(-99999, -99999, 'Sprites[spriteIndex]');
    Sprites[spriteIndex].setDepth(spriteDepth);
    DrawSprite(Sprites[spriteIndex], 320, 180, 1.0, 1.0, 0, 255, 255, 255, spriteAlpha);

}

//--------------------------------------------------------------------------------------------------------------
function LoadAllSpritesAndInitialize (scene)
{
    for (index = 0; index < SpritesMax; index++)
    {
        if (index === 0)
        {
            LoadSprite(scene, index, 'data/images/backgrounds/BG_Screen_Fading.png', 999, 0);
        }

    }

}
5

Would it be possible to have Phaser “scene” to be global?

6

Ok, I have below call now:
LoadAllSpritesAndInitialize(this, scene);

How would I accept the function data and use that passed data in the function below?:

//--------------------------------------------------------------------------------------------------------------
function LoadSprite (sceneCopy, spriteIndex, filePath, spriteDepth, spriteAlpha)
{
    Sprites[spriteIndex] = sceneCopy.load.image('Sprites[spriteIndex]', filePath);
    Sprites[spriteIndex] = sceneCopy.add.image(-99999, -99999, 'Sprites[spriteIndex]');
    Sprites[spriteIndex].setDepth(spriteDepth);
    DrawSprite(Sprites[spriteIndex], 320, 180, 1.0, 1.0, 0, 255, 255, 255, spriteAlpha);

}

//--------------------------------------------------------------------------------------------------------------
function LoadAllSpritesAndInitialize (this, sceneCopy)
{
    for (index = 0; index < SpritesMax; index++)
    {
        if (index === 0)
        {
            LoadSprite(sceneCopy, index, 'data/images/backgrounds/BG_Screen_Fading.png', 999, 0);
        }

    }

}
7

There’s no existing scene variable. I meant that you could pass the scene context (this) as an argument to a function, naming that argument scene.

// In `preload()`, `create()`, and `update()`, `this` is the scene.
function create() {
  this.add.sprite(/*…*/);
  
  // Pass the scene so the function can use it.
  createThings(this);
}

function createThings(scene) {
  scene.add.sprite(/*…*/);
}

In yours it would be like

// For simplicity, I omitted all the other arguments.

function create() {  
  LoadAllSpritesAndInitialize(this);
}

function LoadAllSpritesAndInitialize(scene) {
  LoadSprite(scene);
}

function LoadSprite(scene) {
  scene.add.sprite();
}

this is a keyword, never a variable or a function argument.

Other notes:

  • You can’t do load.image() and add.image() with the same key all at once. The download hasn’t even started so there’s no texture ready. You need to do load.image() from preload() and add.image() from create().

  • You need to use unique keys for textures. If you want the sprite index in the key, it should be

    `Sprites[${spriteIndex}]`