Creating a Phaser Isometric Tile Based Game with Angular – Episode 1

Simple Tutorials | Clean Reusable Code Snippets

Rather watch a tutorial?

Purpose of this tutorial

This tutorial will show you how to create a new Angular project and add a Phaser scene to an Angular component in the simplest approach possible. Our newly created scene will consist of a text label displaying “Hello from scene!” and an image of a house.

• click here to download this complete project https://gitlab.com/medinadev.com.tutorials/angular-phaser-tiled-isometric/-/archive/master/angular-phaser-tiled-isometric-master.zip
• You can also find this project on GitLab here: https://gitlab.com/medinadev.com.tutorials/angular-phaser-tiled-isometric

What do you need to get started?

• Download and install Node.js: https://nodejs.org/en/download/
• install angular CLI from command line like so:

npm install -g @angular/cli

Step 1 – Create a new Angular project called “angular-phaser-tiled-isometric” via command line

ng new angular-phaser-tiled-isometric

• Press enter to enable angular-routing
• Press enter to use CSS

It ill take a little bit of time to install the dependencies..

Step 2 – Install Phaser

npm i phaser

Step 3 – Modify our project tsconfig.json to work with Phaser

in tsconfig.json -> change “module” to “AMD”, add “scripthost” to “lib” :