The good way to write Phaser 3 game?

Phaser 3
1

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/

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

2

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:

1 Like
3

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

1 Like