# HUD scene - Multiple Scenes

**URL:** <https://phaser.discourse.group/t/hud-scene-multiple-scenes/6348>\
**Category:** Phaser 3\
**Created:** [May 16, 2020, 7:44pm UTC](https://phaser.discourse.group/t/hud-scene-multiple-scenes/6348 "2020-05-16T19:44:42Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Phailser](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/phailser/32/3187_2.png) [@Phailser](https://phaser.discourse.group/u/Phailser)\
**Post date:** [May 16, 2020, 7:44pm UTC](https://phaser.discourse.group/t/hud-scene-multiple-scenes/6348/1 "2020-05-16T19:44:42Z")

</div>

I have an item bar scene that contains a transparent overlay and takes up about 10% of the bottom of the game screen.

I have the scene and can load it but when I do start it, the entire scene overlays with a black background and I can’t the scene underneath.

I have tried with just scene.start (though I’m sure this stops the other scene) and scene.add(‘key’,{},true);

Are there any other examples other than the phaser examples as they don’t seem to be helping me on this one.

Thanks

---

<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 16, 2020, 8:32pm UTC](https://phaser.discourse.group/t/hud-scene-multiple-scenes/6348/2 "2020-05-16T20:32:49Z")

</div>

By default, Phaser scenes with nothing in them and no camera background color are completely transparent.

You have to add a scene before starting it, but you can add all scenes in the game config. That’s the simplest way.

I’ll look for examples.

---

<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 16, 2020, 9:07pm UTC](https://phaser.discourse.group/t/hud-scene-multiple-scenes/6348/3 "2020-05-16T21:07:45Z")

</div>

https://codepen.io/samme/embed/preview/zYvmWBR?height=300&slug-hash=zYvmWBR&default-tabs=js,result&host=https://codepen.io

---

<div class="post-metadata">

**Author:** ![Phailser](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/phailser/32/3187_2.png) [@Phailser](https://phaser.discourse.group/u/Phailser)\
**Post date:** [May 16, 2020, 9:31pm UTC](https://phaser.discourse.group/t/hud-scene-multiple-scenes/6348/4 "2020-05-16T21:31:39Z")

</div>

Thanks, exactly what I needed, as usual!

---

<div class="post-metadata">

**Author:** ![theman0123](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/theman0123/32/486_2.png) [@theman0123](https://phaser.discourse.group/u/theman0123)\
**Post date:** [September 6, 2020, 8:27pm UTC](https://phaser.discourse.group/t/hud-scene-multiple-scenes/6348/5 "2020-09-06T20:27:12Z")

</div>

Just to be explicit…

`scene.start(key, {})` ==\> kill the current and start the next.

`scene.launch(key, {})` ==\> keep the current scene running and runs `launched` scene in parrallel.