How do you use functions in a different js file in phaser 3?

Question

Im trying to create a js file with functions relevant to my game but i get an error message saying

Uncaught TypeError: Cannot read properties of undefined (reading 'add')

when i try to use phaser functions outside of the main file.

I have 2 files one called game.js and one called test.js. I am also using the matter physics engine.

game.js :

class bootScene extends Phaser.Scene {
    //Preloading assets for later use
    preload() {
        this.load.image('linus', 'assets/linus.png');
        this.load.script('t','test.js')
    }

    create() { }

    update() {
        //launch game scene
        this.scene.launch('game').stop();
    }
}

class playScene extends Phaser.Scene {

    constructor() {
        super('game');        
    }

    create() {
        test('test',1,1,'linus');
    }

    update() { }
}

// set the configuration of the game
let config = {
    type: Phaser.WEBGL, // Phaser will use WebGL if available, if not it will use Canvas
    width: 1280,
    height: 720,
    pixelArt: true,
    transparent: false,
    autoCenter: true,
    backgroundColor: '#000000',
    physics: {
        default: 'matter',
        matter: {
            restingThresh: 2,
            // debug: {
            //     renderFill: false
            // },
            gravity: {
                y: 0
            }
        }
    },
    scene: [bootScene, playScene]
};

// create a new game, pass the configuration
let game = new Phaser.Game(config);

test.js:

function test(msg,x,y,texture){
    console.log(msg)
    this.matter.add.image(x,y,texture)
}

I have tried trying to put t.test(etc.) and adding the load script in preload. I tried looking up examples, but I couldn't find any.

Sorry if this is a really obvious fix or im just terrible

Answer 1

You just need to pass the current scene, as a parameter, to the test function, and you will can access the matter object and other properties / functions, from the scene.

function test(scene, msg, x, y, texture) {
    console.log(msg);
    scene.matter.add.image(x, y, texture);
}

And the function test would have to be called, with the "current scene" in the case it is this:

 ...
 create() {
     ...
     test(this, 'test', 1, 1, 'linus');
     ...
 }

This example of the offical website: Example Script Loading, illustrates this fact indirect. Im that example the scene is not passed as paramter, but the canvas and the context are.
So following this example, passing the scene should solve your problem.

Side Note: In general, if there is no specific reason, to load scripts from inside of a phaser application (as shown above), I would load the scripts within the html-file or use a web-bundler like webpack or others. Not only for performance/minification reason.