# How to put part of a scene class code in a separate file?

**URL:** <https://phaser.discourse.group/t/how-to-put-part-of-a-scene-class-code-in-a-separate-file/9724>\
**Category:** Phaser 3\
**Created:** [June 3, 2021, 9:32pm UTC](https://phaser.discourse.group/t/how-to-put-part-of-a-scene-class-code-in-a-separate-file/9724 "2021-06-03T21:32:03Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![YanKleber](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yankleber/32/5152_2.png) [@YanKleber](https://phaser.discourse.group/u/YanKleber)\
**Post date:** [June 3, 2021, 9:32pm UTC](https://phaser.discourse.group/t/how-to-put-part-of-a-scene-class-code-in-a-separate-file/9724/1 "2021-06-03T21:32:03Z")

</div>

Hi!

One of my scene classes is getting umconfortably big and I would like to put the functions I use internally in a separate file. I searched online but couldn’t find a GOOD example of how doing it.

The basic structure I have is:

```javascript
class MyScene extends Phaser.Scene {

    constructor () {
    }
    
    init(data) {
    }
    
    preload() {
    }
    
    create() {
    }
    
    update() {
    }

    customFunction1 = () => {
    }

    customFunction2 = () => {
    }

}

export default MyScene;

```

I’d like to know how to put customFunction1, customFunction2, etc in a separate file for organization purposes.

How can I do this?

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:** [June 4, 2021, 2:12pm UTC](https://phaser.discourse.group/t/how-to-put-part-of-a-scene-class-code-in-a-separate-file/9724/2 "2021-06-04T14:12:07Z")

</div>

```javascript
import { customFunction1, customFunction2 } from './custom.js';

class MyScene extends Phaser.Scene {/*…*/}

Object.assign(MyScene.prototype, { customFunction1, customFunction2 });

```

---

<div class="post-metadata">

**Author:** ![YanKleber](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yankleber/32/5152_2.png) [@YanKleber](https://phaser.discourse.group/u/YanKleber)\
**Post date:** [June 4, 2021, 9:29pm UTC](https://phaser.discourse.group/t/how-to-put-part-of-a-scene-class-code-in-a-separate-file/9724/3 "2021-06-04T21:29:42Z")

</div>

Hi **Samme**!

I made my **custom.js** like this:

```javascript
customFunction1 = () => {}
customFunction2 = () => {}

```

As I couldn’t figure where to put the

`Object.assign(MyScene.prototype, { customFunction1, customFunction2 });`

I then tried a few different places but I always end with this error:

**Uncaught SyntaxError: The requested module ‘./custom.js’ does not provide an export named 'customFunction1’**

Also I think I cannot just save the functions in a JS file; otherwise I have to export it first, right? Should I put it into a Phaser 3 Scene class or what???

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:** [June 4, 2021, 10:37pm UTC](https://phaser.discourse.group/t/how-to-put-part-of-a-scene-class-code-in-a-separate-file/9724/4 "2021-06-04T22:37:20Z")

</div>

Were you using imports/exports already?

---

<div class="post-metadata">

**Author:** ![YanKleber](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yankleber/32/5152_2.png) [@YanKleber](https://phaser.discourse.group/u/YanKleber)\
**Post date:** [June 4, 2021, 10:57pm UTC](https://phaser.discourse.group/t/how-to-put-part-of-a-scene-class-code-in-a-separate-file/9724/5 "2021-06-04T22:57:22Z")

</div>

Only In scenes as I mentioned in the OP…

---

<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 5, 2021, 4:08pm UTC](https://phaser.discourse.group/t/how-to-put-part-of-a-scene-class-code-in-a-separate-file/9724/6 "2021-06-05T16:08:17Z")

</div>

#### custom.js

```js
const customFunction1 = () => {};
const customFunction2 = () => {};

export { customFunction1, customFunction2 };

```

#### MyScene.js

```js
import { customFunction1, customFunction2 } from './custom.js';

class MyScene extends Phaser.Scene {/*…*/}

Object.assign(MyScene.prototype, { customFunction1, customFunction2 });

// …

```

---

<div class="post-metadata">

**Author:** ![YanKleber](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yankleber/32/5152_2.png) [@YanKleber](https://phaser.discourse.group/u/YanKleber)\
**Post date:** [June 5, 2021, 5:00pm UTC](https://phaser.discourse.group/t/how-to-put-part-of-a-scene-class-code-in-a-separate-file/9724/7 "2021-06-05T17:00:06Z")

</div>

Cool, thank you **Samme**! I will give it a try! 🙂

---

<div class="post-metadata">

**Author:** ![NickHatBoecker](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/nickhatboecker/32/5380_2.png) [@NickHatBoecker](https://phaser.discourse.group/u/NickHatBoecker)\
**Post date:** [July 11, 2021, 10:21pm UTC](https://phaser.discourse.group/t/how-to-put-part-of-a-scene-class-code-in-a-separate-file/9724/8 "2021-07-11T22:21:38Z")

</div>

FYI: You could also write it like this, so you don’t have to put all the functions of one file into the export statement at the end.

```javascript
export const customFunction1 = () => {};
export const customFunction2 = () => {};

```

The code for `MyScene.js` does not change.

Best regards  
Nick

---

<div class="post-metadata">

**Author:** ![YanKleber](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yankleber/32/5152_2.png) [@YanKleber](https://phaser.discourse.group/u/YanKleber)\
**Post date:** [July 12, 2021, 2:38pm UTC](https://phaser.discourse.group/t/how-to-put-part-of-a-scene-class-code-in-a-separate-file/9724/9 "2021-07-12T14:38:41Z")

</div>

Thanks Nick!