# How does this scene work and how to create a new scene?

**URL:** <https://phaser.discourse.group/t/how-does-this-scene-work-and-how-to-create-a-new-scene/14384>\
**Category:** Phaser 3\
**Created:** [June 2, 2024, 10:19pm UTC](https://phaser.discourse.group/t/how-does-this-scene-work-and-how-to-create-a-new-scene/14384 "2024-06-02T22:19:01Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![ohio](https://avatars.discourse-cdn.com/v4/letter/o/54ee81/32.png) [@ohio](https://phaser.discourse.group/u/ohio)\
**Post date:** [June 2, 2024, 10:19pm UTC](https://phaser.discourse.group/t/how-does-this-scene-work-and-how-to-create-a-new-scene/14384/1 "2024-06-02T22:19:01Z")

</div>

scene:  
{  
preload: preload,  
create: create,  
update: update  
}

This is how the scene is built in the phaser tutorial and I have no idea how to give it a key or how this works at all or how to add a new scene. Please help me learn this.

---

<div class="post-metadata">

**Author:** ![ohio](https://avatars.discourse-cdn.com/v4/letter/o/54ee81/32.png) [@ohio](https://phaser.discourse.group/u/ohio)\
**Post date:** [June 2, 2024, 10:29pm UTC](https://phaser.discourse.group/t/how-does-this-scene-work-and-how-to-create-a-new-scene/14384/2 "2024-06-02T22:29:49Z")

</div>

I think I might understand some of it that I have done a bit of reaserch. So what I have typed above would go in the config like I did in my game but for to create a new phaser scene I would do  
class MyScene extends Phaser.scene {  
constructor() {  
super({ key: 'MyScene"})  
}

so I think that is how I would make a scene with a key, but how would I create a scene and put a preload create, and update function in my scene?

---

<div class="post-metadata">

**Author:** ![ohio](https://avatars.discourse-cdn.com/v4/letter/o/54ee81/32.png) [@ohio](https://phaser.discourse.group/u/ohio)\
**Post date:** [June 3, 2024, 4:24am UTC](https://phaser.discourse.group/t/how-does-this-scene-work-and-how-to-create-a-new-scene/14384/3 "2024-06-03T04:24:21Z")

</div>

Ok, I have done more reasearch and I have figured out that you must do this

class MyScene extends Phaser.scene {  
constructor() {  
super({ key: 'MyScene"})  
function preload()  
{  
//preload stuff here  
}  
function create()  
{  
//create stuff here  
}  
function update()  
{  
//update stuff here  
}  
}

---

<div class="post-metadata">

**Author:** ![ohio](https://avatars.discourse-cdn.com/v4/letter/o/54ee81/32.png) [@ohio](https://phaser.discourse.group/u/ohio)\
**Post date:** [June 3, 2024, 4:25am UTC](https://phaser.discourse.group/t/how-does-this-scene-work-and-how-to-create-a-new-scene/14384/4 "2024-06-03T04:25:06Z")

</div>

Although now I must learn how to call these scenes because if you cannot call them they are basically useless

---

<div class="post-metadata">

**Author:** ![ohio](https://avatars.discourse-cdn.com/v4/letter/o/54ee81/32.png) [@ohio](https://phaser.discourse.group/u/ohio)\
**Post date:** [June 3, 2024, 4:28am UTC](https://phaser.discourse.group/t/how-does-this-scene-work-and-how-to-create-a-new-scene/14384/5 "2024-06-03T04:28:28Z")

</div>

@samme you are a master at this stuff if you could please help me that would be so great and it would really help me in my next street fighter/super smash bros kind of game with all the fighting arenas as different scenes in phaser.

---

<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:** [June 3, 2024, 5:01am UTC](https://phaser.discourse.group/t/how-does-this-scene-work-and-how-to-create-a-new-scene/14384/6 "2024-06-03T05:01:37Z")

</div>

[https://github.com/samme/phaser3-faq/wiki/Scenes](https://github.com/samme/phaser3-faq/wiki/Scenes)

---

<div class="post-metadata">

**Author:** ![ohio](https://avatars.discourse-cdn.com/v4/letter/o/54ee81/32.png) [@ohio](https://phaser.discourse.group/u/ohio)\
**Post date:** [June 4, 2024, 3:38am UTC](https://phaser.discourse.group/t/how-does-this-scene-work-and-how-to-create-a-new-scene/14384/7 "2024-06-04T03:38:36Z")

</div>

thanks so much for that samme!

---

<div class="post-metadata">

**Author:** ![ohio](https://avatars.discourse-cdn.com/v4/letter/o/54ee81/32.png) [@ohio](https://phaser.discourse.group/u/ohio)\
**Post date:** [June 4, 2024, 3:48am UTC](https://phaser.discourse.group/t/how-does-this-scene-work-and-how-to-create-a-new-scene/14384/8 "2024-06-04T03:48:20Z")

</div>

Im sorry, but I still have another question, so I would do this to load scenes

new Phaser.Game({  
scene: [  
// Only ‘scene1’ will start.  
new Scene1(‘Scene1’),  
new Scene2(‘scene2’)  
]  
});

but if I were to do this, only scene 1 would start. How would I make it that if the player were to click or do something the scene would change. Is there a line of code that could do this. Like maybe Scene2.start(); or something simmilar?

---

<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:** [June 4, 2024, 1:17pm UTC](https://phaser.discourse.group/t/how-does-this-scene-work-and-how-to-create-a-new-scene/14384/9 "2024-06-04T13:17:50Z")

</div>

```js
this.input.once('pointerdown', () => {
  this.scene.start('scene2');
});

```

---

<div class="post-metadata">

**Author:** ![ohio](https://avatars.discourse-cdn.com/v4/letter/o/54ee81/32.png) [@ohio](https://phaser.discourse.group/u/ohio)\
**Post date:** [June 4, 2024, 3:08pm UTC](https://phaser.discourse.group/t/how-does-this-scene-work-and-how-to-create-a-new-scene/14384/10 "2024-06-04T15:08:42Z")

</div>

Thanks so much for this! It has really helped me understand phaser better and my next game will now not make your computer fan super loud!