# Reuse code across scenes

**URL:** <https://phaser.discourse.group/t/reuse-code-across-scenes/3544>\
**Category:** Phaser 3\
**Created:** [August 22, 2019, 8:54pm UTC](https://phaser.discourse.group/t/reuse-code-across-scenes/3544 "2019-08-22T20:54:50Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![User1](https://avatars.discourse-cdn.com/v4/letter/u/5daacb/32.png) [@User1](https://phaser.discourse.group/u/User1)\
**Post date:** [August 22, 2019, 8:54pm UTC](https://phaser.discourse.group/t/reuse-code-across-scenes/3544/1 "2019-08-22T20:54:50Z")

</div>

Hi, can I display objects in multiple scenes by calling a function defined in one scene, here is the example:

```
class Scene1 extends Phaser.Scene {
    constructor() {
        super({
            key: ‘scene1’
        })
    }

    create() {
        // I create many objects in this scene
        this.displayObjects();
    }

    displayObjects() {
       this.object1 = this.add.sprite(100, 100, "key");
       this.object2 = this.add.sprite(100, 100, "key");
       ...
    }
}

```

Now, I would like to display same objects in Scene 2 by calling displayObjects method from Scene1. How can I reuse code when working with scenes?

class Scene2 extends Phaser.Scene {  
constructor() {  
super({  
key: ‘scene2’  
})  
}

```
    create() {
        // display objects from Scene 1
    }
}
```

---

<div class="post-metadata">

**Author:** ![Tuskat](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/tuskat/32/1950_2.png) [@Tuskat](https://phaser.discourse.group/u/Tuskat)\
**Post date:** [August 23, 2019, 2:20am UTC](https://phaser.discourse.group/t/reuse-code-across-scenes/3544/2 "2019-08-23T02:20:47Z")

</div>

You could create your own basic scene in a separate file

```
class BaseScene extends Phaser.Scene {
    constructor() {
        super({
            key: null
        })
    }

    create() {
        // I create many objects in this scene
        this.displayObjects();
    }

    displayObjects() {
       this.object1 = this.add.sprite(100, 100, "key");
       this.object2 = this.add.sprite(100, 100, "key");
       ...
    }
} 

```

then use your new base class like

```
class Scene1 extends BaseScene {
    constructor() {
        super({
            key: ‘scene1’
        })
    }
    // You do not need to rewrite methods that exist in baseScene
   // You can override them by creating
   // methods of the same name 
}

```

make sure to import the BaseScene file in every scene that extends from it.  
Theorically it’s like this. Haven’t tested it yet.Let me know if there’s anything unclear/wrong 🙂

---

<div class="post-metadata">

**Author:** ![Wavertron](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/wavertron/32/323_2.png) [@Wavertron](https://phaser.discourse.group/u/Wavertron)\
**Post date:** [August 23, 2019, 12:04pm UTC](https://phaser.discourse.group/t/reuse-code-across-scenes/3544/3 "2019-08-23T12:04:39Z")

</div>

Alternatively, instead of using inheritance, you can create a common function that accepts a Scene object argument, and in that function it create your objects on the supplied scene.