Slick UI: Destroy or remove element

[praine]

Hi all,

I'm trying to use Slick UI to dynamically create multiple choice question prompts in a new game (see image). The problem is, there doesn't seem to be a way to remove a panel, or update its child elements once they have been created. I couldn't find a way to do this directly through Phaser either. Any help greatly appreciated.

Perhaps there is a Phaser method to destroy all children generated by a particular plugin?

Cheers,

Paul.

[drhayes]

I don't believe there is, but if the Slick UI is generating things that end up being Display Objects (Sprites, Image, etc) then you can hold on to their references and call "kill" on them when you want to remove them. You could also add your UI in a single group then call "removeAll" on the group.

[praine]

Thanks for your response, drhayes. This is the code snippet I ended up using as a workaround until I figure out something better:

while(pf.game.world.children[n].children.length>0){
pf.game.world.children[n].children.forEach(function(c,i){c.destroy()})
}

Where 'n' is the index of the Slick container in game.world.children

[samme]

You should save a reference to a UI element or Display Object if you need to modify it later.

The root UI and all the elements have a `container.displayGroup` that is a Phaser.Group and so can call removeAll(). Here's a shortcut:

Phaser.Plugin.SlickUI.prototype.removeAll         =
SlickUI.Element.Button.prototype.removeAll        =
SlickUI.Element.Checkbox.prototype.removeAll      =
SlickUI.Element.DisplayObject.prototype.removeAll =
SlickUI.Element.Panel.prototype.removeAll         =
SlickUI.Element.Slider.prototype.removeAll        =
SlickUI.Element.Text.prototype.removeAll          =
SlickUI.Element.TextField.prototype.removeAll     =
function(destroy, silent, destroyTexture) {
  this.container.displayGroup.removeAll(destroy, silent, destroyTexture);
};

 

[praine]

Thanks for that, samme, I'll give it a go.