Phaser Javascript Game Tutorial Series – Flappy Bird – Getting Started

Screen Shot 2014-02-17 at 12.07.47 AMWelcome to my Phaser Javascript Game Tutorial. Phaser is a desktop and mobile html5 game framework created by Photon Storm Ltd. The framework makes it super simple to create 2D games in JavaScript with the canvas and WebGL libraries. With all the attention surrounding the popular game Flappy Bird, I decided to give Phaser framework a go by creating a Flappy Bird like game. For this example, we will call it.. FappyBird!

Get ready, in the next 30-40 minutes we are going to create a Flappy Bird like game using the Phaser framework. These short 5 videos go over many essentials in creating games with Phaser. Phaser’s website http://phaser.io has great examples available if you run into any troubles. Now, this tutorial was written on the fly with very little reference so I run into some brain stumping and syntax problems but FireBug is your friend!

FireBug for those of you who may not know, is a great FireFox addon for troubleshooting JavaScript errors and see what kinds of POSTS and GETS are being done in the background. It really can be used to reverse engineer as well :)

Phaser essentials included in this series:
1. Loading Images
2. Tilemaps
3. Loading Audio
4. Animating
5. Collision Detection
6. Input – Keyboard for Movement
7. Physics
8. Text

Tutorial Video Series:
1. Getting Started
2. Creating the Game Environment
3. Input Movement & Physics
4. Moving TileMaps and Keeping Score
5. Obstacles, Collision Detection, and Game Over!

Full Source

Game Demo ( i sped it up a little bit by moving tilemaps faster and pipes faster as well as generating pipes more often )

In this first 5 minute video we download the Phaser Framework, create our HTML file and include the Phaser Framework in the HTML file. Make sure you watch it in 720p so you can read the source clearly -_-

You can obtain the Phaser fromework from GitHub. https://github.com/photonstorm/phaser

7 Responses to Phaser Javascript Game Tutorial Series – Flappy Bird – Getting Started

  1. Crea tu propia versiĆ³n de Flappy Bird | Cyberhades

  2. OMG, thats a lot of code and the result is rubbish and all buggy, showing alot of alerts at the end and infinite sound loops.

    Try this simple version:

    http://aamirafridi.com/flappybird

  3. really??? that’s the most buggy game I’ve ever seen… I was looking for other flappy bird clones on canvas on the web and couldn’t find many, but when you find a game constructor tutorial with so many bugs and even using alerts drives me crazy… and the background image is Fappy Bird… really?? Check my site: very very simple, took me 1h:37mins to make (I am 13), contains no bugs and doesn’t frigging enter in an alert loop

    • Matt thanks and sorry you are not happy. At the end of the day, its an easy game to make whether made by you or me.

      In addition, I have received very positive feed backs about learning the core features of Phaser which the videos DO include.

      Here are some things to think about:
      1. This was made while i was learning Phaser framework myself and never made a game for web in my life.
      2. Alerts aren’t a requirement.. innovate and do something different! i realize on mobile it can cause problems.
      3. This one took only 30-40 minutes to make and would take less than 5 minutes to correct the bugs.
      4. “Fappy Bird” background was part of the parody of it all.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>