Tutorial: How to make a Flappy Bird in HTML5 with Phaser

[lessmilk]

Hello,

 

I just wrote a Phaser tutorial on how to make a simple Flappy Bird clone in 65 lines of Javascript.

 

You can read the tutorial here: blog.lessmilk.com

Edit: And here's the part 2 of the tutorial.

 

 

If you are new to Phaser, this can be a good way to discover how Phaser works.

And if you already know well Phaser, I'd love to hear your feedback!

 

Thanks :-)

[jerome]

excellent !!!

[jeromegn]

Very cool.

 

For a second, I was hoping for dynamic tilemap generation. No such luck. Nice technique though!

[Zenryo]

I am a beginner in game development, your games inspired me to start using Phaser

Thank you for the tutorial, very helpful for a beginner!

[Tamedo]

Thanks for the tutorial, just what i was looking for, a nice and simple implementation.

 

Question:

 

How can you make it so that score only increments when the player passes through the pipe, and not when the pipe appears on the screen?

 

At the moment the score increments before player has reached the pipe.

[ZRT]

Awesome! Thanks! There are some nice, useful practices in your tutorial.

 

I think we need a subforum here for Phaser tutorials. It's just a suggestion, it's nice to have all tutorials in one place.

[plicatibu]

Very nice tutorial.

 

Thank you.

[hackenstein]

If you ask yourself "Why would I want to make a Flappy Bird clone?": Flappy Jam, that's why

 

http://www.palmentieri.it/somepx/flappyjam/

[totor]

adding row of pipes based on time is a bad idea because on low end devices the rows are sticked together making the game unplayable.

[Teemu-Tor]

Nice one!

Hehe, i was coding a flappybird-clone too. Interesting to see how different your impelementation was...

[lessmilk]

Thanks a lot for your feedback! :-)

 

 

I am a beginner in game development, your games inspired me to start using Phaser 

Thank you for the tutorial, very helpful for a beginner!

 

Wow, that's awesome! Welcome to the wold of Phaser developers then ;-)

 

 

Thanks for the tutorial, just what i was looking for, a nice and simple implementation.

 

Question:

 

How can you make it so that score only increments when the player passes through the pipe, and not when the pipe appears on the screen?

 

At the moment the score increments before player has reached the pipe.

 

I made it that way to keep the code as simple as possible. There are lots of way to do this, for examples:

- Add an invisible sprite where the hole is. When the bird hit this sprite, increase the score by one and kill the sprite.

- Or check in the update function if a pipe is behind the bird. When that happens, increase the score by one and set a flag to not count the same pipe twice.

 

 

adding row of pipes based on time is a bad idea because on low end devices the rows are sticked together making the game unplayable.

 

You are right. However:

- On low end devices playing a reflex game is never going to be a great experience anyway

- And "every 1.5 seconds" is easy to understand and perfect for a beginner tutorial 

[Tamedo]

I made it that way to keep the code as simple as possible. There are lots of way to do this, for examples:

- Add an invisible sprite where the hole is. When the bird hit this sprite, increase the score by one and kill the sprite.

- Or check in the update function if a pipe is behind the bird. When that happens, increase the score by one and set a flag to not count the same pipe twice.

 

Makes perfect sense, im happy the code is simple, im new to phaser and this tutorial is perfect for me to learn.

 

Thanks for your answers, i may have a go at adding an invisible sprite, seems a logical approach.

 

Keep up the great work.

[Hammster1911]

Hi there,

First of all thank you for the tutorial. Now to the problem i encountered when fooling around with it.
I wanted to add a tileSprite as background but its not displayed and i have no idea what possible i could have done wrong, here are the lines i added.
 

preload: function() { 		this.game.load.image('background', 'assets/background.png');          ...        ...    },create: function() {         this.background = this.game.add.tileSprite(0, 0, 400, 480, 'background');        ...        ...    },

[lessmilk]

 

Hi there,

First of all thank you for the tutorial. Now to the problem i encountered when fooling around with it.

I wanted to add a tileSprite as background but its not displayed and i have no idea what possible i could have done wrong, here are the lines i added.

 

preload: function() { 		this.game.load.image('background', 'assets/background.png');          ...        ...    },create: function() {         this.background = this.game.add.tileSprite(0, 0, 400, 480, 'background');        ...        ...    },

 

The code you posted seems fine. Are you getting any error messages in the console?

[jerome]

maybe the good old power-of-two problem ?

http://www.html5gamedevs.com/topic/3763-looping-background-image/?hl=power#entry24117

[Hammster1911]

maybe the good old power-of-two problem ?

http://www.html5gamedevs.com/topic/3763-looping-background-image/?hl=power#entry24117

Thank you resized the image to 512x512 and changed the x, y value for the tilesprite and this solved the problem.

[lessmilk]

maybe the good old power-of-two problem ?

http://www.html5gamedevs.com/topic/3763-looping-background-image/?hl=power#entry24117

 

Good catch!

 

FYI I'm currently working on "how ti make a flappy bird - Part 2". It should be out soon!

[jerome]

We are all waiting for this flappy bird tuto second season, arf ! 

[lessmilk]

I just published the Part 2 of the Flappy Bird tutorial. You can read it here: http://blog.lessmilk.com/how-to-make-flappy-bird-in-html5-2/

 

Let me know if you have any feedback! :-)

[valueerror]

Really nice tutorial .. Very easy to understand. I'd love to see more of those when 2.0 is out...

May I ask javascript newbee question..

I've seen several games implemented in a way that looks a little bit easier to understand for beginners.. Also examples, other phaser tutorials (the one where you collect stars with the phaser dude) are done this way..

What's with the whole .prototype use that leads to this this. Overload? Could you elaborate or just point me to a page where I can learn more about it? Thx

[lessmilk]

Really nice tutorial .. Very easy to understand. I'd love to see more of those when 2.0 is out...

May I ask javascript newbee question..

I've seen several games implemented in a way that looks a little bit easier to understand for beginners.. Also examples, other phaser tutorials (the one where you collect stars with the phaser dude) are done this way..

What's with the whole .prototype use that leads to this this. Overload? Could you elaborate or just point me to a page where I can learn more about it? Thx

 

Good question! 

The ".prototype" and "game_state" are useful when managing multiple states in a game, like a menu, a play scene, a credit, etc. 

So right now you don't need them for the simple flappy bird clone. But since I'm planning to actually add a loading scene and a menu in the next tutorial, I decided to include this code from the beginning to make the transition easier.

So wait for the next tutorial to better understand what it is for and how to use it! :-)

[valueerror]

@lessmilk_   thank you very much for the answer..    i am playing around with phaser for 2 weeks now trying to learn everything necessary to make a nice game (so i'm very happy about new and good tutorials like yours because i can learn a lot from seeing other ways to accomplish things with phaser.. =)

so i already came across states.. but i implementet states completely without .prototype  .. you can look at the source on my "playground"  http://test.xapient.net/phaser/    therefore i still don't understand why there are 2 ways to do this and what is the advantage of your approach.. it seems much more sophisticated  so i figure it has an advantage..  maybe for loading the states from different js files?

 

(i'm still seeking for a method to make those damn buttons touch senisitive ^^)

[lessmilk]

@lessmilk_   thank you very much for the answer..    i am playing around with phaser for 2 weeks now trying to learn everything necessary to make a nice game (so i'm very happy about new and good tutorials like yours because i can learn a lot from seeing other ways to accomplish things with phaser.. =)

so i already came across states.. but i implementet states completely without .prototype  .. you can look at the source on my "playground"  http://test.xapient.net/phaser/    therefore i still don't understand why there are 2 ways to do this and what is the advantage of your approach.. it seems much more sophisticated  so i figure it has an advantage..  maybe for loading the states from different js files?

 

(i'm still seeking for a method to make those damn buttons touch senisitive ^^)

 

I just made some tests, and you are right, my code could have been simpler. I'm updating my tutorials right now to remove the .prototype. Thanks! :-)

[slash]

Hello! thank you for the tootooreal!

 

What would be a better html wrapper so that it autofills the browser screen on mobile devices, using something like mediaqueries?

[valueerror]

@lessmilk hmmm.. You're welcome..i guess.. Now i'm a little bit confused

@slash... I'm not sure i understood you correctly but if you are searchin for a way to autoresize your game to use all available space or even go full screen on mobile devices only.. Phaser does that for you..I could post an example if you like..