Until today, I didn’t test the game on other screen densities. But since almost all UI in the game is aligned to screen edges or middle of the screen, the number of elements which had to have hardcoded coordinates is minimal. The game helper class calculates positions depending on the device density for these few exceptions.

Also today I’ve run the game for the first time on a tablet. Well, it’s not smooth enough and there were few graphical glitches. I’ve optimized therefore a little bit the tubes rendering. Now everything is running more-less at a reasonable speed.

Time do to some testing if the game is hard enough like the original.

Today it was time to do some heavy refactoring mainly in the gameplay state. All drawing methods are moved to a new helper class, this gives me a better overview of the core features of the gameplay (tube generating, main character moving and collision detection) which I left in the gameplay state. All graphics are stored now in another new sprite class. This class can also handle alpha and translation animations of the objects on screen.

Finally, I’ve added collision detection between the bird and tubes. Also I animated the bird when flying up and down. This was the last piece of the puzzle to complete the gameplay.

I’ve thought about adding some sound effects, but decided maybe it’s better to play some old school funky chip tune. I’m using the libmod library for Android now for the first time for playing music. It’s very small, CPU efficient and resource friendly I must say. On the title screen the player can toggle the music if it’s too boring. The music is also stopped / resumed when the app is interupted by the system.

   

With two states finished (splash and gameplay) it was time to build a state manager which will take care of which state is active and linking all states together. I’ve thought first to do separate states for the title, gameplay and gameover screens, but the graphics and behaviour in these states are practially the same so I’ve made it as one state with different modes.

Next thing to do on the agenda are the buttons on title and gameover screen. I was afraid that I had to save the whole state of the app when launching, for example, the play store to rate the app; but somehow the SurfaceView handles these interrupts with no problems. So the button actions are now finished and I’ve added also a little pressed state animation like in the original game.

The whole game flow is nearly finished, meaning it’s time to replace all test graphics with the original. I’ve found all graphic resources from the original game as a big PNG image on the internet. It took me a little bit of time to cut it down to pieces. I’ve modified the title from “bird” to “beard”.

I’ve finished today also the scoreboard showing scores and medals. There are 4 kind of medals: bronze, silver, gold, platinum for scores over 10, 20, 30 and 40.

With all graphics cut down I’ve managed also to squeeze in the main characters animation in todays timeline.

     

     

Today I’ve decided to do the core functionalities of the game and the actual gameplay.

I’ve started with the infinite background scroll which gives the player the effect that the main character is moving, although it’s always drawn at the same X position on the screen. The simplest way to do this is to have a background that is the same width as the screen width. This way we will draw the background maximum 2 times per frame. Every frame we are decreasing the x position of the background by a specific number of pixels, if the background position is exactly 0, we draw the background only once at the position 0; else we draw the background twice in a row: at position x (which is always a negative number) and at position x + width of the backround. It doesn’t matter if we are drawing off screen, Android supports clipping very well. Another popular effect in 2D games is parallax scrolling to achieve scene depth. It can be done by drawing multiple infinite backgrounds which are moving at different speeds.

I’ve done also the basic main character controls. The bird is pulled down every frame by the gravity and it’s speed is increasing. When the player taps the screen, a specific amount of speed is added to birds speed, so the bird is flying upwards. I’ve set also birds maximum speed in both directions to smooth the gameplay a little bit.

The next thing is generating, drawing and animating the tubes. For this part I’ve created a tube class which holds the x position, the y position of the gap and two flags if the player passed the tube. The tubes are generated at a constant distance (which is configurable), with a random gap position (the gap height is also configurable). On every frame I update the x position for moving and the flags if the player passed the tube; flags are crucial later on for performance, since I don’t want to process tubes which are already passed or outside of the screen.

Since the player can already pass the tubes it’s time to implement scoring. For every passed tube, the score is increasing by one. I’ve also finished persisting the high score on the device.

Some basic gameplay stuff is finished and I’ve started with the splash screen. It should show only the logo with some fade in/out effects; very easy and straight forward.

Last but not least, I’ve spent some time drawing the actual font for scoring. The font will contain only numbers for now.

       

Welcome to another development journal, this time covering the making of a Flappy Bird clone. Since the original game is very simple to develop, I’ll try to make this journal as detailed as possible. All of the original game features will be explained followed with many screenshots.

This project is also developed completely in my free time when I’m not spending time with my family or watching the World Cup. Since the original game is developed in a couple of days, I’ve set also a deadline to make things more interesing. I’ll try to finish the game in only 24 (twenty four) hours during the next seven days. I’m not completely sure if I’m going to use the original graphics, but what I know for sure is that the main character will have a beard, so the name of the game will be: Flappy Beard.

Let the game making fun begin…

When I was starting my last project which is also a 2D game, I couldn’t decide which drawing technique shall I use, Canvas drawing or OpenGL. So I’ve spent again a little bit of time reading articles related to 2D graphics on Android. OpenGL is very fast, hardware accelerated, but the effort to create all the polygon drawing and texturing routines is giving me headaches, especially when it comes to a small project like this. I didn’t want also to run into further dilemmas should I use OpenGL version 1 or 2, so I’ve decided to explore drawing to Canvas.

After further research I’ve found out that the best way is to use the SurfaceView which is a simple view that runs in a separate thread and it’s also hardware accelerated from Android 3.0+ versions. I’ve created the project, setup the view and added also methods for passing touch events to the view. To test if everything is working correctly I’ve drawn a little circle on the screen which you can move around by touching the view. Yey – my first 2D game for Android using Canvas. To avoid any obsolete drawing, calculating or resource leaking, the second thing that every developer implements is the FPS (frames per second) counter in the upper left corner of the screen. Android maximum framerate is 60 frames per second.