recover objects thru states

[jerome]

When swapping states, existing objects are usually cleared.

In some posts, people ask for a way to easily recover or recreate cleared objects in the next state. Something smarter than juste copy/paste the relevant create function content.

 

Assuming you have many states, here is a way, maybe not the best but a working one

 

Your state declaration would probably look like this :

var myGame = new Phaser.Game(800,600, Phaser.CANVAS);// one object to contain all statesvar gameState = {};gameState.one = function(game){};gameState.two = function(game){};gameState.three = function(game){};

You can then create a new object PersistentObject :

 

var PersistentObject = function(fct){  this._function = fct;};PersistentObject.prototype.reset = function(state){  return this._function(state);}

This name is not that pertinent as we don't create a real persistent object but a persistent code section.

 

You can then create as many functions you need.

These functions can content the code you would have copied/pasted from your create state function.

Just change the name "this" refering your state in the create code to the name "state". This "state" is the input parameter of your new function.

 

examples :

var playerAndEnnemies = function(state){  // pasted code section from your create function  player = state.add.sprite(10,10,'bot');  ennemies = state.add.group();  ennemies.createMultiple(30, 'ennemySprite');  ennemies.setAll('anchor.x', 0.5);  ennemies.setAll('anchor.y', 1);  ennemies.setAll('outOfBoundsKill', true);  // you could add here groups, tweens, tileSprite, etc  // as you would do in your state create function  // storing variables as properties :  // ===============================  // it's done here  only in didactic purpose  // if you need to access to newly created objects later, make them properties  this.player = player;  this.ennemies = ennemies;}var playerOnly = function(state){  // you can obviously set the property when creating your sprite  this.player = state.add.sprite(10,10,'bot');}

You could add as many functions you need : one for the player, another one for ennemies, for particles, for tweens only, for groups, for all at once, etc.

 

You then just need to create the needed PersistentObjects with the right function name as parameter :

 

var persistentPlayer = new PersistentObject(playerOnly);var persistentPlayerAndEnnemies = new PersistentObject(playerAndEnnemies);

Now just call your PersistentObjects in your different states :

 

// Boot stategameState.one.prototype = {  preload: function(){  this.load.atlasJSONHash('bot', '/phaser116/examples/assets/sprites/running_bot.png', '/phaser116/examples/assets/sprites/running_bot.json');  }, create: function(){  persistentPlayer.reset(this);  player = persistentPlayer.player; // if we need to access the player sprite  player.body.velocity.x = 10;  // starts next state  this.game.state.start('menu');  }};// Menu stategameState.two.prototype = {  create: function(){    persistentPlayer.reset(this);    player = persistentPlayer.player;    player.scale.setTo(2,2);  },  update: function(){    // some stuff here  }};// Adds states to the gamemyGame.state.add('boot', gameState.one);myGame.state.add('menu', gameState.two);// Starts first statemyGame.state.start('boot');

As you can see, I just deported the common create code outside state definitions.

Objects are not persistent, they are just re-created the same way in the new state context.

 

Maybe it would be helpful for some people stuck with copy/paste problems.