If you live in a cave you might have missed the ultra hard mobile game Flappy Bird that went viral recently. I wanted to build a proof of concept prototype version of Flappy Bird using Delphi XE5 Firemonkey and this is what I came up with. The game is called Flappy Firemonkey and I built it in a few hours. The code is very rough and it could use a lot of optimization and polish but it’s playable. It works best on Windows and I also tested it on Android and IOS but not OSX. It uses a TMemIniFile to save your best score, rudimentary collision detection, a game loop, opening a cross platform URL, and does some things with TFloatAnimation as well. Handling all of the different screen sizes was harder than I thought but I have run out of time for handling more screen sizes than a normal Android device and the Google Nexus 4 size device on Windows.
Things that worked out well:
- I accomplished the animation of the firemonkey and the moving ground bar by just using two frames and doing TBitmap.Assign() between them which is not at all the best way to do it but it works for a prototype. For a production project I would probably switch to this TSprite component or try to get TBitmapListAnimation working.
- Using a TTimer for the game loop worked out well. It keeps the game rendering separate (hopefully). I might try using a Firemonkey 3D form (see below) because it has an OnRender event.
- Using ShowModal on Windows and just Show on mobile worked as I had hoped. Adding in Hide to the Menu Form when the Game Form is active also worked like I wanted.
- I based my collision detection off of some code I found on Torry’s. The collision detection was one of the last things I added. There are a couple other methods to do collision detection like IntersectRect() and TRect.Intersect (and probably more). I would have to test each method to see which ones are the fastest for mobile.
- Building the pipes out of TRectangle worked but I ended up moving them into a TLayout to make the collision detection work correctly.
- I combined this code and this code for the open URL functionality.
- The cross platform functionality is awesome. I built and tested it with the Win32 target and switching the target to compile to Android and it just worked.
Things that did not work out so well:
- I attempted to apply a ratio to my hard coded movement and placement numbers so that it would take the screen size into account but was unable to really get or make a usable ratio for the screen size.
- I had some more Delphi XE5 Firemonkey effects like bevel and glow on my Game Over screen that I was using but once I started testing on mobile I had to remove them to get a better framerate.
- Originally I parented all of the objects on the Game Over screen off a TLabel but that fell apart once I started testing on multiple resolutions. I ended up switching to a TLayout and putting all of the Game Over objects in there.
- I had a TFloatAnimation on the Game Over screen but once I moved to the TLayout for multiple resolutions it no longer functioned how I had built it so I ended up disabling it.
- Moving the pipes manually seems slow and I would want to see if using a TFloatAnimation on them might be faster.
- Using TRectangles for the pipe may not have been the best choice for mobile optimization. I think I would try switching it to a TImage for mobile optimization.
- Some of the graphics (like the background) are included in the application twice because it made for easy visual editing. A simple fix would be to have one graphic and Assign() the other versions of it at runtime. I might also try to use Frames to do this but I’m not sure how they do transparency.
- Using a visually designed TBitmapAnimation to swap between the images of the flying firemonkey and the ground bar didn’t really work out. I think it is more for a longer transition than 33 ms.
- I didn’t have a really good and easy way to handle the background on multiple screen sizes without doing a lot of extra lifting. I settled for making a big background image set to center and setting the background form color to the same color as the sky. More testing on multiple resolutions would show how well this worked. I guess the multiresolution functionality in TImage might help with this.
- I was not able to achieve a really solid outline around text using the glow effect component.
- I had a plan to set the position of the second window (GameForm) to the same X and Y as the Menu Form (so they would be right above each other on Windows) but I didn’t find an easy way to make that happen.
- I wanted to have a TStyleBook on the form for each OS and then use an IFDEF to set the premium Diamond style at runtime. This did not work out.
Download Flappy Firemonkey Prototype Source Code For Delphi XE5 Firemonkey.
Update: I created a second version that uses a Firemonkey 3D form and a Layer3D. It is still 2D but rendered on the 3D layer. Seems faster.
Download Flappy Firemonkey 3D Prototype Source Code For Delphi XE5 Firemonkey 3D or download the Win32 binary.
Update 2: Developer Croco Tronic updated my original version of the source and implemented a thread for the game loop in addition to a lot of other code optimizations.
Here is a custom themed version on Google Play called Aswang – Manananggal Edition.
Update 3 (4/4/2014): Developer Croco Tronic and I both put new code into his version which fixes some bugs with it.
You can download the updated version here: Delphi XE5 Firemonkey Flappy Bird Clone.
Update 4 (5/16/2014): New XE6 compatible versions available:
Download Flappy Firemonkey for XE6
Download Flappy Firemonkey 3D for XE6
Download Flappy Bird for XE6
I tried running on ios simulator but the game didnt run
I never use the IOS simulator because it seems like it never works. I just tested it here on an older Ipod and it worked okay. It actually seemed to work better than on Android. Try disabling the OpenURL functionality as that might allow it to run on the simulator.
Hello,
I took your nice project and added a 3-tier-architecture and a thread. It works a little bit better.
To which address I can send you that?
Hi,
I run it on my Samsung Galaxy S III, it works, but the game had some defects. The barriers were only on bottom of the page and there is no barrier on the top. I run it on Windows too, it works fine.
If you tweak the 200 and 250 you can get it working right on your device.
if (Random<0.5) then
begin
WOffset := (200*BG_HRatio);
end
else
begin
WOffset := (250*BG_HRatio);
end;
Nice!
I’ll give it a try 🙂
Hi, I am getting FMX.TMSBaseControl.dcu , FMX.TMSBitmap.dcu and FMX.TMSBitmapContainer files not found in the updated version.
Please could somebody share the files? or email them? [email protected]
thankyou so much
They aren’t necessary. Just delete them from the Uses clause.
Thanks for the reply.
I tried to delete them out, it runs fine on win32 but don’t see any pipes on my android device.
It’s 720×1280 res , moto g
Yeah on these lines tweak the 200 and 250 values for your mobile device.
if (Random<0.5) then
begin
WOffset := (200*BG_HRatio);
end
else
begin
WOffset := (250*BG_HRatio);
end;
Yeah don’t delete them. Try like 300 and 350 or 150 and 200. It configures the space between the pipes.
Adjusting the numbers in the “Update 2” version didn’t seem to work.
Is there a way of making this a bit more dynamic? As I imagine in a final release we could maybe use the IFMXScreenService to get screen h&w dimensions and assign values based on results.
Not just for this app but it would be best practice for all apps, and would help everybody when deploying their apps. Isn’t this how most apps work? I didn’t think developers would need to generate an .apk for every possible screen setup..
It may take some time.. Im fairly new to delphi but this will be a good project for me to try and suss this out 🙂 – if anybody can help or give some pointers it would be appreciated.
I’ll also share everything back here, if I make some progress…
I get the following error when it tried to deploy to my nexus 4 device.
[PAClient Error] Error: E2568 Unable to execute ‘”C:\Program Files\Java\jdk1.7.0_21\bin\JarSigner.exe” -keystore “pke.keystore” -storepass * -keypass * -sigalg MD5withRSA -digestalg SHA1 “C:\FlappyBirds\Android\Release\FlappyBirds\bin\FlappyBirds-unsigned.apk” *’ (Error 1)
and
[PAClient Error] Error: E2568 jarsigner error: java.lang.RuntimeException: keystore load: pke.keystore (The system cannot find the path specified)
I updated the download with a new version with that removed. You can fix it by going to Project|Options|Provisioning… and go to Release Android. Click Reset All to clear the certificate.
You need to change the mode from release to debug mode. It’s above where you chose the target.
Thanks. It worked!
If you want it “Update 2” to show pipes in android, you need to add
{$IFDEF ANDROID}
if (Random<0.5) then
WOffset:= (150*FRatio)
else
WOffset:= (200*FRatio);
{$ENDIF}
in AppController.pas under procedure TCalculator.Execute;
Values will still need to be adjusted for your device.
hi tnx for this great article
I tried running this program but it gives me this error
[DCC Fatal Error] FlappyBirds.dpr(11): F1026 File not found: ‘C:\Users\zaha\Downloads\Compressed\FlappyBirds\FMX.MobilePreview.dcu’
can you help me on this 🙂
It sounds like you don’t have Update 2 for Delphi XE5 installed. Either install Update 2 or just remove FMX.MobilePreview from the uses clause of the forms and the project file.
It sounds like you don’t have Update 2 for Delphi XE5 installed. Either install Update 2 or just remove FMX.MobilePreview from the uses clause of the forms and the project file.
tax for help 🙂
Hi,
Great work on this. Are we free to use this code any way we choose? There is no license info anywhere. I’d like to be able to modify it and actually submit to the app store.
Yes, it is free to use.
I am getting this error:
[DCC Error] OpenViewUrl.pas(48): E2003 Undeclared identifier: ‘StrToNSUrl’
any idea where I can find it?
Add Macapi.Helpers to the uses clause of the unit where the error is.
Is there any way to compile it with XE6? Sure i have to change the “ae” to “TApplicationEvent.” But there is an Error loading the uMenu.fmx.
If you have XE5 load it in XE5 and remove the TStyleBook component. It should then load fine in XE6. I’ll try to get the download updated for XE6.
No, i dont have XE5 and in XE6 ill became an Error when i try to remove the component. Thank you for your help! I wait for your update 😉
I updated the post to have XE6 versions at the bottom.
http://www.fmxexpress.com/wp-content/uploads/2014/02/FlappyFiremonkey3DXE6.7z
http://www.fmxexpress.com/wp-content/uploads/2014/02/FlappyBirdXE6.7z
Great Job! 🙂
Nice. Hopefully the XE6 update will perform well on IOS
i have the rad seattle 10, does it works on that version? .. .i m getting this error: Error reading StyleBookW.ResourcesBin: Error reading TBitmapSwitchObject.ThumbText.Font.Size: Property ThumbText.FontSize does not exist
Delete the stylebook control.
I developed my first Android game using firemonkey (XE8). In the beginning, I learned from the Flappy Bird code. Thank you.
If you want to see it:
https://play.google.com/store/apps/details?id=com.SeraLogic.Anderafin_demo&hl
Thank you.
Wow, nice job!