# Share functions between scenes

**URL:** <https://phaser.discourse.group/t/share-functions-between-scenes/5984>\
**Category:** Phaser 3\
**Created:** [April 19, 2020, 3:57pm UTC](https://phaser.discourse.group/t/share-functions-between-scenes/5984 "2020-04-19T15:57:03Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Eelco\_Luurtsema](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/eelco_luurtsema/32/3202_2.png) [@Eelco\_Luurtsema](https://phaser.discourse.group/u/Eelco_Luurtsema)\
**Post date:** [April 19, 2020, 3:57pm UTC](https://phaser.discourse.group/t/share-functions-between-scenes/5984/1 "2020-04-19T15:57:03Z")

</div>

Hi,

In a game, I have multiple scenes. However, a certain functionality is used in every scene. For example a button to pause the game is present in every scene. So now I have the code to generate this button, and the callback when the button is pressed, available in every scene:

```javascript
export default class SceneA extends Phaser.Scene {
    //..//
    displayButton(){
        this.add.image(....);
        // and some other code to handle clicks etc
    }
}

export default class SceneB extends Phaser.Scene {
    //..//
    displayButton(){
        this.add.image(....);
        // and some other code to handle clicks etc
    }
}

```

Is there some way to have this `displayButton` functionality in every scene, without having to include the method in every scene class?

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![123survesh](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/123survesh/32/2274_2.png) [@123survesh](https://phaser.discourse.group/u/123survesh)\
**Post date:** [April 19, 2020, 4:17pm UTC](https://phaser.discourse.group/t/share-functions-between-scenes/5984/2 "2020-04-19T16:17:49Z")

</div>

Hi @Eelco_Luurtsema, I don’t know about such a feature in Phaser, but you can do that your self. Its easy, your code is almost there.

1. Create a class, say **BaseScene** from **Phaser.Scene** with the displayButton method.

2. Then when you create classes **SceneA** and **SceneB** , extend them from the **BaseScene** class created before.

Hope this helps.

---

<div class="post-metadata">

**Author:** ![Eelco\_Luurtsema](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/eelco_luurtsema/32/3202_2.png) [@Eelco\_Luurtsema](https://phaser.discourse.group/u/Eelco_Luurtsema)\
**Post date:** [April 19, 2020, 6:03pm UTC](https://phaser.discourse.group/t/share-functions-between-scenes/5984/3 "2020-04-19T18:03:26Z")

</div>

Thanks for your quick reply. Yeah, I was thinking about something like this too, or maybe something like this: [https://calebporzio.com/equivalent-of-php-class-traits-in-javascript](https://calebporzio.com/equivalent-of-php-class-traits-in-javascript)

Good to know that Phaser does not have something build in for this, so I will follow your example. Thanks!

---

<div class="post-metadata">

**Author:** ![123survesh](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/123survesh/32/2274_2.png) [@123survesh](https://phaser.discourse.group/u/123survesh)\
**Post date:** [April 19, 2020, 6:54pm UTC](https://phaser.discourse.group/t/share-functions-between-scenes/5984/4 "2020-04-19T18:54:14Z")

</div>

@Eelco_Luurtsema another thing you can do is, you can have more than one scene running at a time in Phaser. So you can have a game scene and also a HUD scene running at the same time. You can have your HUD scene running on top of the other scenes, where you can place your pause button.  
See which approach goes well with your project.

---

<div class="post-metadata">

**Author:** ![Eelco\_Luurtsema](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/eelco_luurtsema/32/3202_2.png) [@Eelco\_Luurtsema](https://phaser.discourse.group/u/Eelco_Luurtsema)\
**Post date:** [April 19, 2020, 7:13pm UTC](https://phaser.discourse.group/t/share-functions-between-scenes/5984/5 "2020-04-19T19:13:17Z")

</div>

I was unaware you can run multiple scenes. Thanks for the tip, wil look into this!

---

<div class="post-metadata">

**Author:** ![BlunT76](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/blunt76/32/1454_2.png) [@BlunT76](https://phaser.discourse.group/u/BlunT76)\
**Post date:** [April 19, 2020, 9:12pm UTC](https://phaser.discourse.group/t/share-functions-between-scenes/5984/6 "2020-04-19T21:12:42Z")

</div>

> [@Eelco\_Luurtsema](#):
>
> displayButton(){ this.add.image(…); // and some other code to handle clicks etc }

Another way, you can create a new js file and just export a variable or function:

```javascript
export const displayButton = (scene) => {
  scene.add.image(....); // and some other code to handle clicks etc };
}

```

and to use it, just import at the beginning of each scene

```javascript
import { displayButton } from '../script/displayButton.js';
export default class SceneA extends Phaser.Scene {
    //..//
    displayButton(this); // just pass the scene as parameter
}

```