Babsobar Posted November 21, 2016 Share Posted November 21, 2016 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 Link to comment Share on other sites More sharing options...
Théo Sabattié Posted November 21, 2016 Share Posted November 21, 2016 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? Link to comment Share on other sites More sharing options...
Babsobar Posted November 21, 2016 Author Share Posted November 21, 2016 Here's more of the game.js file, it's really ugly and badly organised for now Here are two gists :game.jscreateButtons.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... Link to comment Share on other sites More sharing options...
Théo Sabattié Posted November 21, 2016 Share Posted November 21, 2016 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) Link to comment Share on other sites More sharing options...
LTNGames Posted November 21, 2016 Share Posted November 21, 2016 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 Link to comment Share on other sites More sharing options...
Babsobar Posted November 21, 2016 Author Share Posted November 21, 2016 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!! Link to comment Share on other sites More sharing options...
Théo Sabattié Posted November 21, 2016 Share Posted November 21, 2016 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. Link to comment Share on other sites More sharing options...
Babsobar Posted November 21, 2016 Author Share Posted November 21, 2016 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 Link to comment Share on other sites More sharing options...
Babsobar Posted November 22, 2016 Author Share Posted November 22, 2016 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 Link to comment Share on other sites More sharing options...
Recommended Posts