Setup angular 13 and Ionic 6 with phaser 3 for online game design guide

Setting up Ionic 6, Phaser 3 with angular/nx 13

Hit the ground running

This technical article is the first in a series for the Brackeys Gamejam Feb 2022. Where we create a game from scratch in a week, with the theme “It Is Not Real”. We’ll be sharing freely all insights and even the code for every step of the way for you to follow along. If there is a topic you wish to learn more of, let us know in the comment section below.

Why did we use Ionic 6 and Phaser3?

The first thing to always consider is HOW you create your game. There are many great options, while using unity or unreal game engine looked tempting, we choose for using Phaser 3, together with ionic 6. We deliberately picked this tech stack as we are already familiar with ionic6/angular and it also enables us to easily port the game to a browser or to a mobile app if we need it down the road. This way we have more time designing a game instead of learning a new programming language or new game interface.

Kickstart with a great template

We don’t have to reinvent the wheel to setup an angular project with ionic 6 and phaser 3. Last week Openforge hosted a webinar for Building Mobile Games with Ionic & Phaser, you can rewatch the webinar here. During the webinar they shared a great git template that included ionic 6, nx 13 and Phaser 3 so you can hit the ground running. The git template can be found here. Click on “Use this template” to use it in your project.

Refactor to your own taste

After using the above template in your own project you can follow the instructions in the README.md to personalize the project from a placeholder ‘example-app’ and company ‘company-name’ to your specific needs. Don’t forget to npm install. (If you don’t know what npm is? Then please start catching up here, before reading further).

Development environment ready?

We have our development environment running with nx serve example-app. But we also wish to be able to host our game online for others to playtest and follow along. Preferably without a hosting server that we need to setup so we can focus on designing the game. This will be the topic of the next article.