As I have time for small project experiments for myself, I decided to explore new developments with Phaser JS. In general, Phaser JS seems like a fun framework to enable novice game makers to build fun 2D games. The javascript language has become a popular choice since the language exists in every web browser.
What can you build with Phaser 3? Check out some examples here.
– Tetris
– Robowhale
– Fun Math Game
In this blog post, we walk through building a small space shooter game.
As you start Phaser JS development, many tutorials walk you through some process to setup a web server to serve html and javascript content. Unfortunately, plain JavaScript alone does not guide makers to create well formed code. In plain Javascript, coders need to create stuff in baby steps. In this process, you should test stuff at each step. If you use a tool like Visual Studio code, the tool provides awesome guidance and autocomplete for devs. It would be nice if tools could improve to help you find more code faults and common syntax mistakes.
The TypeScript language invented by Anders Hejlsberg comes to the rescue. The TypeScript language and related coding tools provides robust feedback to the coder while constructing code. The JavaScript language does not support ideas like class structures or interfaces. Classes enable makers to describe a consistent template for making objects, their related methods, and properties. In a similar way, interfaces enable coders to describe the properties and methods connected to an object, but does not define implementations of methods. It turns out these ideas provide an increased structure and guidance to professional developers to create large applications using JavaScript. When your tools help you find mistakes faster, you feel like you move faster. This provides great support for early stage devs. TypeScript borrows patterns and ideas from C#, another popular language for game developers and business developers.
I found a pretty nice starter kit that integrates TypeScript, a working web server, and Phaser 3 JS together. Here’s the general steps for setting up your Phaser 3 development environment.
Install Visual Studio Code
Install NodeJs and NPM
- NodeJs enables coders to create JavaScript tools outside of the browser.
- npm – When you build software in modern times, tools that you build will depend upon other lego blocks. Those lego blocks may depend upon others. The node package manager makes it easy to install NodeJs tools and their related dependences.
- Use the following blog post to install NodeJs and NPM
- Installing NodeJs and NPM from kinsta.com
Install Yarn
- Install Yarn
- Yarn is a package manager that provides more project organization tools.
Download Phaser 3+TypeScript repository
On my environment, I have unziped the files to /home/michaelprosario/phaser3-rollup-typescript-master.
Finish the setup and run
cd /home/michaelprosario/phaser3-rollup-typescript-master
yarn install
yarn dev
At this point, you should see that the system has started a web server using vite. Open your browser to http://localhost:3000. You should see a bouncing Phaser logo.
Open up Visual Studio Code and start hacking
- Type CTRL+C in the terminal to stop the web server.
- In the terminal, type ‘code .’ to load Visual Studio Code for the current folder.
- Once Visual Studio Code loads, select “Terminal > New Terminal”
- In the terminal, execute ‘yarn dev’
- This will run your development web server and provide feedback to the coder on syntax errors every time a file gets saved.
- If everything compiles, the web server serves your game at http://localhost:3000
TypeScript Sample Code
Open src/scenes/Game.ts using Visual Studio Code. If you’ve done Java or some C#, the code style should feel more familiar.
import Phaser from 'phaser';
// Creates a scene called demo as a class
export default class Demo extends Phaser.Scene {
constructor() {
super('GameScene');
}
preload() {
// preload image asset into memory
this.load.image('logo', 'assets/phaser3-logo.png');
}
create() {
// add image to scene
const logo = this.add.image(400, 70, 'logo');
// bounce the logo using a tween
this.tweens.add({
targets: logo,
y: 350,
duration: 1500,
ease: 'Sine.inOut',
yoyo: true,
repeat: -1
});
}
}
