# Persistent UI objects/components on scenes

**URL:** <https://phaser.discourse.group/t/persistent-ui-objects-components-on-scenes/2359>\
**Category:** Phaser 3\
**Created:** [May 6, 2019, 9:05am UTC](https://phaser.discourse.group/t/persistent-ui-objects-components-on-scenes/2359 "2019-05-06T09:05:59Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![SlavomirDurej](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/slavomirdurej/32/1330_2.png) [@SlavomirDurej](https://phaser.discourse.group/u/SlavomirDurej)\
**Post date:** [May 6, 2019, 9:05am UTC](https://phaser.discourse.group/t/persistent-ui-objects-components-on-scenes/2359/1 "2019-05-06T09:05:59Z")

</div>

This is another newbie question, but how do you create a persistent UI elements that will remain on your screen even if different scenes load ? Example would be a settings / sound icons, or a menu.

---

<div class="post-metadata">

**Author:** ![hcakar](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/hcakar/32/459_2.png) [@hcakar](https://phaser.discourse.group/u/hcakar)\
**Post date:** [May 6, 2019, 12:00pm UTC](https://phaser.discourse.group/t/persistent-ui-objects-components-on-scenes/2359/2 "2019-05-06T12:00:45Z")

</div>

Hello @SlavomirDurej,  
With phaser-3 now you can start multiple scenes.

here is an example about [this](https://labs.phaser.io/edit.html?src=src/scenes/multiple%20scenes%20from%20classes.js) which is on [https://labs.phaser.io/index.html](https://labs.phaser.io/index.html)

---

<div class="post-metadata">

**Author:** ![SlavomirDurej](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/slavomirdurej/32/1330_2.png) [@SlavomirDurej](https://phaser.discourse.group/u/SlavomirDurej)\
**Post date:** [May 6, 2019, 2:28pm UTC](https://phaser.discourse.group/t/persistent-ui-objects-components-on-scenes/2359/3 "2019-05-06T14:28:05Z")

</div>

Thank you, still would be nice if there was just a bit more info about this?  
From lookling at the source code I I guessed the way to make it run is by calling this in the constructor?

Phaser.Scene.call(this, { key: ‘background’, active: true }); Whereas “key” referes to the scenes classes array? But those are class names, the “key” variables are defined in constructor normaly, but then sometimes you just call superconstructor e.g. super({key: “GameScene”}); right?

So when you want to use multiple scenes you use Phaser.Scene.call instead?

And then how do you communicate with those other scenes? What about their position on the z / depth axis ?

Where can I find any documentation / guides about this and similar concepts?

---

<div class="post-metadata">

**Author:** ![hcakar](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/hcakar/32/459_2.png) [@hcakar](https://phaser.discourse.group/u/hcakar)\
**Post date:** [May 6, 2019, 2:40pm UTC](https://phaser.discourse.group/t/persistent-ui-objects-components-on-scenes/2359/4 "2019-05-06T14:40:39Z")

</div>

Hello again @SlavomirDurej,  
For documentation, you can check: [https://photonstorm.github.io/phaser3-docs/](https://photonstorm.github.io/phaser3-docs/)  
And please see all examples on [https://labs.phaser.io/index.html?dir=scenes/&q=](https://labs.phaser.io/index.html?dir=scenes/&q=)

as for multiple scenes when you want, you can use `this.scene.launch` see [this](https://labs.phaser.io/edit.html?src=src/scenes/launch%20parallel%20scene.js) example.

for passing data from another scene see [this](https://labs.phaser.io/view.html?src=src/scenes/passing%20data%20to%20a%20scene.js) example which is also on labs

I believe is the best way check online for your questions. 🙂  
After all if you really can’t find anything about your problem(which quite unlikely) then please do let us know about your problem and show us your code 🙂

I believe there are really tons of questions about `UIScene`, [similar to your question.](https://phaser.discourse.group/search?q=UIScene)

And for me, I’m always looking the source code of phaser before i wrote something here 🙂

**Update:**  
Oh bdw just saw this 2 example too:

[https://labs.phaser.io/view.html?src=src/scenes/ui%20scene%20es6.js](https://labs.phaser.io/view.html?src=src/scenes/ui%20scene%20es6.js)

[https://labs.phaser.io/view.html?src=src/scenes/ui%20scene.js](https://labs.phaser.io/view.html?src=src/scenes/ui%20scene.js) -\> this one specially called “ui scene.js” on examples

---

<div class="post-metadata">

**Author:** ![SlavomirDurej](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/slavomirdurej/32/1330_2.png) [@SlavomirDurej](https://phaser.discourse.group/u/SlavomirDurej)\
**Post date:** [May 6, 2019, 3:15pm UTC](https://phaser.discourse.group/t/persistent-ui-objects-components-on-scenes/2359/5 "2019-05-06T15:15:58Z")

</div>

Thank you so much for your help!  
It’s not that I didn’t try to look for it, it’s just that it’s really difficult to look for a specific answers , when you don’t know where to look! Those API docs, are really only helpful, if you already know the general area or a specific area or classes you need to look up. For example this issue would be hidden somewhere in the constructor of the class extending Phaser.Scene by calling superconstructor with super({key: “Menu”, active:true}); (I’m using typescript).  
And so it happens this information is burried under: Namespaces \> Phaser.Scenes.Settings  
(not inside [https://photonstorm.github.io/phaser3-docs/Phaser.Scene.html](https://photonstorm.github.io/phaser3-docs/Phaser.Scene.html) or Scene manager,) etc…  
which isn’t exactly intuitive?

and even there it says:

`active` boolean false Does the Scene start as active or not? An active Scene updates each step.

which still doesn’t mention that it allows these two scenes be visible or coexisting in paralel at the same time… So for anybody that’s working with Phaser only 2-3 days, this is pretty well hidden I’d say.

Another problem is I know some other game libraries / platforms that have quite a different approach, which makes it a bit harder to use Phaser (such as Unity, OpenFL or Starling).

---

<div class="post-metadata">

**Author:** ![hcakar](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/hcakar/32/459_2.png) [@hcakar](https://phaser.discourse.group/u/hcakar)\
**Post date:** [May 6, 2019, 3:28pm UTC](https://phaser.discourse.group/t/persistent-ui-objects-components-on-scenes/2359/6 "2019-05-06T15:28:32Z")

</div>

I see your problem @SlavomirDurej, and really i was also sooo confused when i start working with phaser-3 at first place. But as much as you have write and search for these kinda stuff you learn more as you can imagine.

> [@SlavomirDurej](#):
>
> `active` boolean false Does the Scene start as active or not? An active Scene updates each step.

For this i actually never checked if it’s actually starting or not and also about updates idk 🙂 but we can always ask help from @rich or @samme i believe they and many others can help! 😃  
As far as i understand, scenes are creating by `SceneManager` but doesn’t start therefor doesn’t have an update on the time.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [May 6, 2019, 4:40pm UTC](https://phaser.discourse.group/t/persistent-ui-objects-components-on-scenes/2359/7 "2019-05-06T16:40:24Z")

</div>

In the [scene config](https://photonstorm.github.io/phaser3-docs/Phaser.Scenes.Settings.html#.Config) `active` determines whether the scene will be **started** by the SceneManager after the scene is added by the manager. And once the scene is started its [sys.settings.active](https://photonstorm.github.io/phaser3-docs/Phaser.Scenes.Settings.html#.Object) flag is true. Specifically, the `active` flag is true for the scene states START and RUNNING and false for the others.

But read [#119](https://phaser.io/phaser3/devlog/119) and [#121](https://phaser.io/phaser3/devlog/121) for a guide to the scenes, that’s a better place to start.

---

<div class="post-metadata">

**Author:** ![SlavomirDurej](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/slavomirdurej/32/1330_2.png) [@SlavomirDurej](https://phaser.discourse.group/u/SlavomirDurej)\
**Post date:** [May 6, 2019, 6:12pm UTC](https://phaser.discourse.group/t/persistent-ui-objects-components-on-scenes/2359/8 "2019-05-06T18:12:49Z")

</div>

Thank you so much @samme this was mega useful! those dev logs should be featured much more prominently in the help section, or better yet, such articles could be compiled to a separate wiki page, and have their own section… it’s really useful and interesting information.
