Search the Community

My current project uses game states, and I'm to the point where I have a character that can walk between different levels (states), but in every js file where my individual levels are I have all my code for player movement duplicated in each. I'd like to make my code slimmer and more modular because I'm to the point where I'm getting some slow down/lag in chrome browsers, and I'd like to keep scaling my project and that isn't easy with all of this duplicate code in every state. For reference, the way my project is constructed is based off of this tutorial: http://www.emanueleferonato.com/2014/08/28/phaser-tutorial-understanding-phaser-states/ For example, if this were one of my level states: var theGame = function(game){ spriteNumber = null; number = 0; workingButtons = true; higher = true; score = 0; } theGame.prototype = { create: function(){ number = Math.floor(Math.random()*10); spriteNumber = this.game.add.sprite(160,240,"numbers"); spriteNumber.anchor.setTo(0.5,0.5); spriteNumber.frame = number; var higherButton = this.game.add.button(160,100,"higher",this.clickedHigher,this); higherButton.anchor.setTo(0.5,0.5); var lowerButton = this.game.add.button(160,380,"lower",this.clickedLower,this); lowerButton.anchor.setTo(0.5,0.5); }, clickedHigher: function(){ higher=true; this.tweenNumber(true); }, clickedLower: function(){ higher=false; this.tweenNumber(false); } } How could I add methods to the theGame prototype object from a separate JS file? For this example, I'll like to use the clickedHigher method in a handful of different states, but I don't want to have to go through and edit it in each state. In my actually game I'm going to have up 50 different states and each time I refine my controls or add new mechanics I'd have to go through each state and copy paste. Thanks in advance

My current project uses game states, and I'm to the point where I have a character that can walk between different levels (states), but in every js file where my individual levels are I have all my code for player movement duplicated in each. I'd like to make my code slimmer and more modular because I'm to the point where I'm getting some slow down/lag in chrome browsers, and I'd like to keep scaling my project and that isn't easy with all of this duplicate code in every state. For reference, the way my project is constructed is based off of this tutorial: http://www.emanueleferonato.com/2014/08/28/phaser-tutorial-understanding-phaser-states/ For example, if this were one of my level states: theGame.prototype = { create: function(){ number = Math.floor(Math.random()*10); spriteNumber = this.game.add.sprite(160,240,"numbers"); spriteNumber.anchor.setTo(0.5,0.5); spriteNumber.frame = number; var higherButton = this.game.add.button(160,100,"higher",this.clickedHigher,this); higherButton.anchor.setTo(0.5,0.5); var lowerButton = this.game.add.button(160,380,"lower",this.clickedLower,this); lowerButton.anchor.setTo(0.5,0.5); }, clickedHigher: function(){ higher=true; this.

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