Jump to content

Reuse UI elements between states


Recommended Posts


I am beginning with Phaser development and started to read Interphase. Is it possible to re-use UI components in between states? I see that it is possible to pass data to the next state but somehow it is not really working for me.

I have this in one state:

gengine.IntroScreen = function(game) {

gengine.IntroScreen.prototype = {
  preload: function () {
    exit = this.load.image('exit', 'assets/shared/exit_sprite.png');

  create: function () {
    this.exit = this.add.sprite(940,20,'exit');
    this.exit.inputEnabled = true;
    this.exit.events.onInputDown.add(this.exitState, this);
  exitState: function() {
    // restart the game

So the exit sprite is wired to a function that resets the game. Eventually I switch state in my code, trying to pass the exit sprite to the next state:

this.state.start('next_state', false, false, this.exit);

So then I was testing that in the next state, the sprite image was there since I didn't clearWorld() but it no longer responds to any click events. 

Is it better to just rebuild the UI every time from scratch?



Link to comment
Share on other sites

Nevermind - answered it. It seems like the best way to create re-usable functions and events that are global and independent from the current game state is to just add them to the gengine object so that they persist between states...


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...