# Question About Passing Variables Between JavaScript Files

**URL:** https://phaser.discourse.group/t/question-about-passing-variables-between-javascript-files/13301
**Category:** Phaser 3
**Created:** [June 5, 2023, 2:43pm UTC](https://phaser.discourse.group/t/question-about-passing-variables-between-javascript-files/13301 "2023-06-05T14:43:59Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![JesseLee](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jesselee/32/7525_2.png) [@JesseLee](https://phaser.discourse.group/u/JesseLee)
#### Post date: [June 5, 2023, 2:43pm UTC](https://phaser.discourse.group/t/question-about-passing-variables-between-javascript-files/13301/1 "2023-06-05T14:43:59Z")

</div>

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

---

<div class="post-metadata">

### Author: ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)
#### Post date: [June 5, 2023, 5:45pm UTC](https://phaser.discourse.group/t/question-about-passing-variables-between-javascript-files/13301/2 "2023-06-05T17:45:10Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![JesseLee](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jesselee/32/7525_2.png) [@JesseLee](https://phaser.discourse.group/u/JesseLee)
#### Post date: [June 5, 2023, 6:00pm UTC](https://phaser.discourse.group/t/question-about-passing-variables-between-javascript-files/13301/3 "2023-06-05T18:00:44Z")

</div>

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

---

<div class="post-metadata">

### Author: ![JesseLee](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jesselee/32/7525_2.png) [@JesseLee](https://phaser.discourse.group/u/JesseLee)
#### Post date: [June 5, 2023, 6:32pm UTC](https://phaser.discourse.group/t/question-about-passing-variables-between-javascript-files/13301/4 "2023-06-05T18:32:39Z")

</div>

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

```javascript
//--------------------------------------------------------------------------------------------------------------
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);

 
}

```

```javascript
//--------------------------------------------------------------------------------------------------------------
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);
        }

    }

}

```

---

<div class="post-metadata">

### Author: ![JesseLee](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jesselee/32/7525_2.png) [@JesseLee](https://phaser.discourse.group/u/JesseLee)
#### Post date: [June 5, 2023, 7:30pm UTC](https://phaser.discourse.group/t/question-about-passing-variables-between-javascript-files/13301/5 "2023-06-05T19:30:25Z")

</div>

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

---

<div class="post-metadata">

### Author: ![JesseLee](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jesselee/32/7525_2.png) [@JesseLee](https://phaser.discourse.group/u/JesseLee)
#### Post date: [June 5, 2023, 7:48pm UTC](https://phaser.discourse.group/t/question-about-passing-variables-between-javascript-files/13301/6 "2023-06-05T19:48:47Z")

</div>

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?:

```javascript
//--------------------------------------------------------------------------------------------------------------
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);
        }

    }

}

```

---

<div class="post-metadata">

### Author: ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)
#### Post date: [June 6, 2023, 12:17am UTC](https://phaser.discourse.group/t/question-about-passing-variables-between-javascript-files/13301/7 "2023-06-06T00:17:41Z")

</div>

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`.

```js
// 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

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

function create() {  
  LoadAllSpritesAndInitialize(this);
}

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

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

```

[this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/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
