Taking on Flappy Bird

For something extra to do while waiting for our next Game Design class (and likely to continue working on our Halloween game), I decided to go on the hunt for some tutorials that would help me practice my Flash skills. I ended up finding a very good one that promised to help you recreate an homage to Flappy Bird. I never played the original app, since it was pulled off the game store before I got a chance to download it, but there are so many similar games out there that I thought this tutorial would teach me some core skills I’d like for creating original Flash games.

Building a HTML5 Flappy Bird Game Clone

The tutorial began by providing you with some basic sketches and artwork to start from. I won’t go into massive detail on the step-by-step guide, since it’s there on the internet for anyone to try. However, there were some very useful lessons I learned that I will be definitely be applying to my future projects in Flash.

Creating assets in layers on top of a sketch.

Above: an example of a sketched bird and some of its overlaying parts.

We started by creating the game’s assets, using guides to put down the shapes and create our ground, obstacles, and bird. I actually really enjoyed it and it gave me a good idea in the future: have a rough outline of the character or item you’re trying to create and keep it on the background layer while you actually make the parts of your object on top. Then, make that background layer into a guide layer, hiding it away. I think I now find it easier taking the lined object I want to create and then “filling in” the shapes!

The placement of your assets is important.

The whole story: the game’s background with the pipes and ground images off canvas.

I did learn this quite quickly while making my maze game, but the placement of your assets is extremely important only if you’re keeping your game as a whole in mind. The pipe obstacles the bird had to avoid were placed in a very deliberate way on the canvas and the tutorial said that the code would take care of moving them, making it seem like they were animated to move from the right to the left as the bird flew. So far in our lessons, we’ve learned to animate using key frames and the timeline, so this was was all quite new and interesting to me.

Coding can be very difficult.

Above: All the layers and scenes that went into creating the game.

I know some code, but not nearly enough to achieve what this game needed. Not only did you have to take into account things like the player’s input – so clicking the mouse or tapping a touchscreen would cause the bird to flap – but the bird was being affected by gravity, the game had to know what to do when the bird hit a pipe/the ground and died, placement of alerts on the UI… there is so much to take into consideration when coding a game, even one that appears so simple on the surface. This just solidifies my desire to learn more about ActionScript, especially in comparison to the C# language we’re learning for Unity.

Test often, save different versions often, debug often.

I have had some serious issues with the tutorial and getting the game to test properly in a browser. I’m not entirely sure why, but I have learned one very important lesson: you should always make a point to stop yourself, test your game, and save a back-up of it if it’s still working. If it’s not working, either you can debug your game manually (ie, go through the steps you’ve done since your last test) or you can revert to an older save. I’m currently in the middle of fixing my version of the game, so I don’t have a final product to show as of yet.

Overall thoughts about the tutorial are positive.

There are hundreds of thousands of tutorials out there that take a well-known game and break it down in easy, accessible segments so that you can make your own version. This particular tutorial ended up being very good, making me think ahead to the sorts of mechanics I can put into my own future projects. Mobile games like Flappy Bird, Robot Unicorn Attack, or any of the ones I chose for my Flash games research post are popular mainly because they have simple controls and can be brought with you on a mobile device.

Not all guides are going to be useful and some might not give you the results you’re looking for, but I think this little game will cause me to go looking for more tutorials to try out. If nothing else, it’s excellent practice in applying what knowledge I’ve gained in our classes and hopefully help me learn some new tricks for future lessons.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s