Phaser.js Development (Scripts, Animation, Physics, Render)

While there are a ton of options when it comes to designing your own game, which engine do you choose? What if you don’t want to get all mixed up learning a new coding language that seems way too complicated?

Why not explore your options in HTML5? That’s right, and you can still make some great games using HTML5. No Python or SQL necessary. How do you do it?

Through Phaser. To use Phaser 3, all you need is a web browser.

The Phaser 3 Basics

Using the surprising power of HTML5, you’re able to create different game titles complete with a library of sprite sheets, game physics, and input control.

History of The Phaser Process

Phaser was first released in 2013 by Richard Davey. It uses a site, Pixi.js, to be its rendering library. This essentially means that the game is self-contained. It’s never compiled, meaning that it needs a web browser to even start.

The 4 Main Parts of Phaser in Games

Scripts

Games native to Phaser 3 only need JavaScript to get started.

Animation

Animating in Phaser 3 is as easy as uploading your sprite sheet of choice and then creating various animations.

Physics

There’s no need to get confused over physics. Phaser 3 already uses Arcade Physics built right into its framework.

Render

All the rendering takes place on a website, Pixi.js, and uses WebGL. This allows the game never to compile, requiring you to merely boot up an Internet browser to start playing.

Getting Started with a Game in Phaser.js

PhaserJS or Phaser JavaScript is an excellent mixture of both HTML5 and JavaScript. It’s actually pretty easy to get things moving. First, you need to download a zip file containing the application programs and files. There’s no code, however, so get those scripting muscles ready.

Later, you’ll become familiar with game states. These are the main phases of the game. There are three different states.

Menu

This is your main title screen. Nothing really happens here, and it serves more as a placeholder or transitional state until you access the game.

Game

This is where all of the action takes place. You control your character, whoever or whatever they may be, and complete your objectives in-game.

Game Over

The game over the state is when you fail to achieve your goal through several different methods. We all know we get a game over if we run out of lives, so this game state shows the classic game over screen. This is connected to the Game state, as the Game state starts back up when you click through.

Phaser 3 and It’s Journey

Richard Davey has been tirelessly working on newer, better iterations of Phaser. It’s now up to the third stable version, Phaser 3. This was released in April 2020. Richard Davey is currently working on the next version of Phaser, Phaser 4, to modify the 2D framework using TypeScript.

Conclusion

If you’ve always wanted to mess around with HTML5 and create a simple game, Phaser 3 is a fantastic option. It allows you to get some coding experience without all the hassle of straight-up learning an entire coding language.

Richard Davey has created a concrete way to develop 2D games through this framework. Hopefully, we’ll not only see future versions of the Phaser model but of innovations as well.