Trouble executing a function in another JS file from inside the create method

[Babsobar]

Hello,
 

I'm migrating my index.html phaser code to different javascript files for better structure and organisation; but I'm coming upon a problem.

I've decided to use the template to make the game responsive "Basic Responsive Template"

The templates features different states: boot, preload, game, and mainmenu as js files.
I load all these in my HTML file and proceed to start from the "game" state. using a button I created in "Mainmenu".

In the "create" method, of the "game" state, I call the createButtons function. This function is stored in another JS file that is loaded in the HTML file, before loading the phaser states.

here is the createButtons code :
 

function createButtons(){
//Mountain Brush
buttonGroup = this.add.group();

    buttonMountain = this.add.button(736, 32, 'buttons', mountainOnClick, this, "mountainbutton0.png","mountainbuttonpush.png", "mountainbuttonpush.png");
    buttonMountain.fixedToCamera = true;
    buttonGroup.add(buttonMountain)

      function mountainOnClick () {
        currentLayer = terrainPop;
        currentTile = 5;
        }

 

 

In the "game" state here is the code I use to call createButtons

create: function () {

//========================== WORLD CREATION
//Make our game world and set it bounds
this.world.setBounds(0, 0, gameWorldX*32, gameWorldY*32);

// ========================== TERRAIN CREATION 
  //create Blank tilemap
terrainLayer = this.add.tilemap();

// add a tileset Image to the map
terrainLayer.addTilesetImage(tileSetImage);

//create the world as a layer
terrain = terrainLayer.create('level1', gameWorldX, gameWorldY, 32, 32);
terrainPop = terrainLayer.createBlankLayer('level2', gameWorldX,gameWorldY,32,32)
terrainLimbo = terrainLayer.createBlankLayer('limbo', gameWorldX,gameWorldY,32,32)

// Fills tilemap layer with default tile:HOLY WATER (6)
terrainLayer.fill(0, 0,0,gameWorldX,gameWorldY, 'level1');

//allows camera to move around
terrainLayer.fixedToCamera = false;

currentLayer = terrain;

createButtons();

	},// End of Create

When trying to load the state, I get the error: "TypeError : this.add is undefined" on the createButtons.js:3:1; I don't understand why createButtons isn't working in the scope of the create method


I've been beating my head at this all day long and couldn't find any solution; i'm pretty sure it's a noobie mistake and would be grateful for some help!

Thanks a lot

[Théo Sabattié]

I think that is too partial to understand. Can you show more?

I suppose "create" is a prototype method but where is createButtons defined ? what is really "this" in the context of createButtons?

[Babsobar]

Here's more of the game.js file, it's really ugly and badly organised for now
Here are two gists :


game.js
createButtons.js

 

createbuttons is called line 128 of game.js
 

this is supposed to be the context for which the function is called in, so in this case, inside the create function expression; I don't get why I can copy and paste the contents of the createButton file, and have it working, but not the opposite...

 

[Théo Sabattié]

BasicGame.Game = function (game) {
    this.add; // undefined how can you use it?
    
    // (...)
}

// (...)

BasicGame.Game.prototype = {
	create: function () {
        // (...)
        
        var text = this.add.text(this.world.centerX - 150, 370,"Buttons for brushtype");
        text.fixedToCamera = true;

        createButtons(); //HERE problem
    },
    // (...)
};



// CREATE BUTTONS Files

function createButtons(){

    buttonGroup = this.add.group(); 
    // buttonGroup is not declared.
    // this is not an instance of Game in this context
    // (...)
    
}

You can fix like that:

BasicGame.Game.prototype = {
	create: function () {
        // (...)
        
        // Some text for fun 
        var text = this.add.text(this.world.centerX - 150, 370,"Buttons for brushtype");
        text.fixedToCamera = true;
        this.createButtons();
    },
    // (...)
};



// CREATE BUTTONS Files

BasicGame.Game.prototype.createButtons = function (){

    buttonGroup = this.add.group();
    // (...)
    
}

 

Or like that:

BasicGame.Game.prototype = {
	create: function () {
        // (...)
        
        // Some text for fun 
        var text = this.add.text(this.world.centerX - 150, 370,"Buttons for brushtype");
        text.fixedToCamera = true;
        createButtons.bind(this)();
    },
    // (...)
};



// CREATE BUTTONS Files

function createButtons (){

    buttonGroup = this.add.group();
    // (...)
    
}

(The first is better, the latest is ugly)

[LTNGames]

 

Hmmm, it;s been a while since I've used phaser but I think it has to do with the fact you're creating the function in global scope which in your case would be the window scope, and when using the keyword 'this' it's searching through the window space for add.group(); which would be non-existent there because it's phaser namespace specific. I believe what you would have to do is make that function a prototype of BasicGame.Game so that you can access the normal inheritance of phaser

For example, something like this should work for you.

	BasicGame.Game.prototype.createButtons = function () {

	};

//game.js

create: function () {
this.createButtons();

}

 

ehh, just as @Théo Sabattiésaid

[Babsobar]

So i've tried each way:

@Théo Sabattié Your first method returns error "this.createButtons is undefined" in game.js

Your second method returns no error, but doesnt show the buttons as they should be.

@LTNGames Your method is basically the same as théo's; it returns an error

Thanks to both of you for taking the time to answer; I'm going nuts over here!!

[Théo Sabattié]

Can you show us your html file (loading script) and entry script please?

You must declare game.js before createButtons.js in your html file.

[Babsobar]

Here's my index.html
 

I had createButtons after game.js; so I moved it like you said;

still getting the same error.

Merci pour ton aide

[Babsobar]

Allright, so, now it works, seems like the magical night computer gnomes did their thing. I used your first technique featured in your first answer post.

Thanks to both for your help