Getting Started with Phaser 3
This is a series of posts that attempt to create more beginner friendly tutorials for phaser 3, inspired by Modular Game Worlds in Phaser 3.
Part 1: Getting Started with Phaser 3
Part 2: Tiled Generated Map with Phaser 3
Part 2.5: Sprite Outline with Phaser 3
Getting Your Hands Dirty
Phaser 3 is a JavaScript game framework designed to build 2D game fast and easily. If you haven’t already, first go over Phaser’s Making your first Phaser 3 game tutorial series.
Once you complete the tutorials, you probably think the code is not scalable because everything is in a single file. They recently published another tutorial series, which introduces a more modular way to write Phaser 3 game using ES6 standard.
This is already great, but I would like you to take things even further and introduce TypeScript to the development. In fact, there is already a template made for us, so you don’t have to worry about the configuration.
If everything is set up correctly, you will see the Phaser 3 logo jumping around.
Publish Your Game
To publish the game on github page, you can use gh-pages. Update package.json as follows.
If your game is deployed under https://<github-username>.github.io/<repo-name>`, then you need to add --public-url /<repo-name>/ to your build option. Otherwise, by default, parcel assumes your resources are located at the root directory.
Continuous Integration (Optional)
Running npm run deploy every time is very tedious. What if your code doesn’t compile and you accidentally deployed your broken code? To prevent this from happening, you can automate the deployment with Travis CI. It’s a tool that automatically deploys the application for you when you submit your change to Github. What’s more, Travis CI deploys your application only when your code builds successfully.
Phaser Documentation and Community
The documentation provides detailed descriptions about the APIs. There is also an unofficial documentation (phaser3-rex-notes) that explains the Phaser 3 APIs from a different perspective. But these are useful only if you know what functions you need to use. Often times, you don’t even know what API to use. I would say just Google your question. I frequently find the solutions at HTML5 Game Devs Forum, Stack Overflow, and Phaser 3 Examples. If you are still stuck, there is a Phaser discord channel where you can ask for help!
Where to Get Game Assets
Some resources for finding free game assets.
If you don’t know where to start, check out the Dungeon tileset II by 0x72. I will be using this tileset throughout this tutorial series.
Next Up
In the next post, you will learn how to use the tilemap API from Phaser 3 to create a world. Cheers!
