# The good way to write Phaser 3 game?

**URL:** <https://phaser.discourse.group/t/the-good-way-to-write-phaser-3-game/5222>\
**Category:** Phaser 3\
**Created:** [February 17, 2020, 3:00am UTC](https://phaser.discourse.group/t/the-good-way-to-write-phaser-3-game/5222 "2020-02-17T03:00:24Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![William\_Soeparjo](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/william_soeparjo/32/1406_2.png) [@William\_Soeparjo](https://phaser.discourse.group/u/William_Soeparjo)\
**Post date:** [February 17, 2020, 3:00am UTC](https://phaser.discourse.group/t/the-good-way-to-write-phaser-3-game/5222/1 "2020-02-17T03:00:24Z")

</div>

Hi

Is there any good tutorial how to write good and maintanable Phaser 3 game?

I want to take seriously to write game with Phaser

I already read this great tutorial [http://sbcgames.io/build-maintainable-games-with-phaser-3-1-project-setup/](http://sbcgames.io/build-maintainable-games-with-phaser-3-1-project-setup/)

But this tutorial is using Typescript, since i don’t need TS, and it’s look complicated than my code structure.

My code to write most of my games:

```
class Boot extends Phaser.Scene { // 1
	constructor(){
		super('boot');
	}
	preload(){
		//load some initial sprites
		//ex: BG, game_title, play button
	}
	create(){
		this.scene.start('load');
	}
}
class Load extends Phaser.Scene { // 2
	constructor(){
		super('load');
	}
	preload(){
		//show game progress
		//load all game assets
		this.load.image('btn_close', 'img/btn_close.png');
		this.load.image('btn_play', 'img/btn_play.png');
		this.load.image('btn_start', 'img/btn_start.png');
		this.load.image('ship4', 'img/ship4.png');
	}
	create(){
		this.scene.start('menu');
	}
}
class Menu extends Phaser.Scene { // 2
	constructor(){
		super('menu');
	}
	create(){
		//Draw menu
		let btn_play = this.add.sprite(360,540,'btn_play').setInteractive();
		btn_play.name = 'play';

		this.input.on('gameobjectdown', function(pointer, obj){
			if(obj.name === 'play'){
				this.scene.start('game');
			}
		}, this);
	}
}
class Game extends Phaser.Scene {
	constructor(){
		super('game');
	}
	create(){
		//Gameplay
		let btn_close = this.add.sprite(360,680,'btn_close').setInteractive();
		btn_close.name = 'close';

		let ship = this.add.sprite(360, 400, 'ship4');

		this.input.on('gameobjectdown', function(pointer, obj){
			if(obj.name === 'close'){
				this.scene.start('menu');
			}
		}, this);
	}
}
var config = {
	type: Phaser.AUTO,
	width: 720,
	height: 1080,
	scale: {
        mode: Phaser.Scale.FIT,
        parent: 'game_content',
        autoCenter: Phaser.Scale.CENTER_BOTH,
    },
	scene: [Boot, Load, Menu, Game],
}
var game = new Phaser.Game(config);

```

I put a game logic/functions inside create() function, since i avoid global function or variable if is not necessary. It may look bloated for a while.

Can you tell me about my method, is bad or not ? any suggestion?

Thanks

---

<div class="post-metadata">

**Author:** ![Sabatino](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/sabatino/32/2897_2.png) [@Sabatino](https://phaser.discourse.group/u/Sabatino)\
**Post date:** [February 29, 2020, 5:26pm UTC](https://phaser.discourse.group/t/the-good-way-to-write-phaser-3-game/5222/2 "2020-02-29T17:26:28Z")

</div>

Personally I use a webpack setup so I can write my classes in separate files, and simply require/import them. This way you don’t write all your game logic in 1 huge file (with lots of classes).

These boilerplates can be helpful:

- [https://github.com/lean/phaser-es6-webpack](https://github.com/lean/phaser-es6-webpack)
- [https://github.com/simiancraft/create-phaser-app](https://github.com/simiancraft/create-phaser-app)

---

<div class="post-metadata">

**Author:** ![cmr](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/cmr/32/2446_2.png) [@cmr](https://phaser.discourse.group/u/cmr)\
**Post date:** [February 29, 2020, 7:38pm UTC](https://phaser.discourse.group/t/the-good-way-to-write-phaser-3-game/5222/3 "2020-02-29T19:38:45Z")

</div>

I agree with @Sabatino, I would use a starter boilerplate!

Just wanted to throw in the great starter templates by yandeu here.  
[https://github.com/yandeu/phaser-project-template-es6](https://github.com/yandeu/phaser-project-template-es6)