05Nov

Start working with Phaser 2, how and where to learn

I used Phaser during a web project I did for Ford. I discovered it long time ago doing some web monitoring and I finally played seriously with it recently.

My challenge was to build a mobile HTML5 game. That game needed physic collision detection and to access the phone accelerometer. The goal of the game, based two different levels, is to park a car between other cars without touching them and within a certain time.

In this blog post, I just want to share what I think could be a good way to get familiar with Phaser for your first project.

Phaser is awesome, go on for it!

phaser HTML5 game screenshot
Screenshot: debug mode for collision detection

Examples

We can really do lots with it. The power of Phaser reside in his physics. But getting started sounds a bit scary. On my opinion, the best way to start would be to look at every examples on the website. It takes time but do it.

Existing games

Then, look a existing games on the web. They will give you an idea of how to structure your code, some functions and how to use some classes.
There are a few examples using Phaser 1.x on the web so be careful. Functions are not exactly the same. I obviously recommend to use the last version. The version 1.0.9 doesn’t support some new cool physic collision and rotation system.

Here is a listing of online tutorials www.lessmilk.com/phaser-tutorial

Official documentation

Last source, look at the doc for every extra you possibly need docs.phaser.io

Quick install

With bower you can install phaser using: bower install phaser

Or with NPM you can install phaser using: npm install phaser

All you need after is to include the CDNSJ in your html.
"//cdnjs.cloudflare.com/ajax/libs/phaser/2.1.2/phaser.min.js"

And start coding!

You can combine Phaser with other Javascript

It may not do everything you need but you can combine it with other javascript. For instance, I needed a drag and drop speed controller working on touch. I chose to do it with GSAP.
It was also easier to create tween animations with GreenSock. In my case for the loading screen, menu, the how to play screen and final screen.

Phaser is getting very popular those days. I hope this article will help someone.

Subscribe
Notify of

1 Comment
Oldest
Newest
Inline Feedbacks
View all comments
9 years ago

Interesante, no conocía GSAP… habrá que verlo más adelante! :D