Flappy Bird Clone Source Code For Delphi XE5 Firemonkey On Android And IOS

Delphi XE5 Firemonkey Flappy BirdIf 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

Have Delphi Firemonkey questions? Ask and get answers on StackOverflow.

Flappy Bird Clone Source Code For Delphi XE5 Firemonkey On Android And IOS by Delphi XE5 XE6 XE7 XE8 10 Seattle Berlin Tokyo Firemonkey, Delphi Android, Delphi IOS is licensed under a Creative Commons Attribution 4.0 International License.

46 Responses to Flappy Bird Clone Source Code For Delphi XE5 Firemonkey On Android And IOS

  1. Wasif Leonhart says:

    I tried running on ios simulator but the game didnt run

    • Admin says:

      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.

  2. Pingback: Flappy Firemonkey - Spiele mit Delphi XE5 - Delphi-PRAXiS

  3. Croco Tronic says:

    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?

  4. Mehdy Karimpour says:

    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.

    • Admin says:

      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;

  5. Fibon says:

    Nice!

    I’ll give it a try 🙂

  6. Pingback: Free Triangle Component For Delphi XE5 Firemonkey On Android And IOS | Delphi XE5 Firemonkey, Delphi Android, Delphi IOS

  7. Pingback: Delphi XE5 Firemonkey實作仿Flappy Bird遊戲 | Levin's Blog-林壽山

  8. MrT says:

    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

    • Admin says:

      They aren’t necessary. Just delete them from the Uses clause.

      • MrT says:

        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

        • Admin says:

          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;

        • Admin says:

          Yeah don’t delete them. Try like 300 and 350 or 150 and 200. It configures the space between the pipes.

          • MrT says:

            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…

  9. Greg says:

    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)

  10. Pingback: Speed Up Your Apps With Bitmap Caching In Delphi XE5 Firemonkey On Android And IOS | Delphi XE5 Firemonkey, Delphi Android, Delphi IOS

  11. Tyson says:

    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.

  12. Pingback: XE5: TSprite lasst sich nicht installieren ?! - Delphi-PRAXiS

  13. zaha says:

    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 🙂

    • Admin says:

      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.

    • Admin says:

      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.

  14. Fred says:

    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.

  15. Aristide says:

    I am getting this error:

    [DCC Error] OpenViewUrl.pas(48): E2003 Undeclared identifier: ‘StrToNSUrl’

    any idea where I can find it?

  16. Pingback: Ten Tips And Tricks For Building Games With Delphi XE5 And XE6 On Android And IOS | Delphi XE5 Firemonkey, Delphi Android, Delphi IOS

  17. xsus says:

    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.

  18. Fibon says:

    Nice. Hopefully the XE6 update will perform well on IOS

  19. Pingback: Ten Tips And Tricks For Building Games With Delphi XE5 And XE6 On Android And IOS | Firemonkey eXplorer

  20. Pingback: Rectangle And Circle Collision Detection In Delphi XE6 Firemonkey On Android And IOS | Delphi XE5 XE6 Firemonkey, Delphi Android, Delphi IOS

  21. Pingback: Free Game Audio Manager Wrapper Class In Delphi XE6 Firemonkey For Android, IOS, Windows, and OSX | Delphi XE5 XE6 Firemonkey, Delphi Android, Delphi IOS

  22. Pingback: Flappy Firemonkey (Flappy Bird) Demo For Delphi XE6 Firemonkey | FMX Demos

  23. Pingback: Year In Review: Top 10 Most Popular Delphi Firemonkey Posts For 2014 | Delphi XE5 XE6 XE7 Firemonkey, Delphi Android, Delphi IOS

  24. gerkyll says:

    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

  25. Ninjai says:

    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.

Leave a Reply

Show Buttons
Hide Buttons
Read previous post:
Easily Use Threads In Delphi XE5 Firemonkey On Android And IOS

There is a unit that comes with Delphi XE5 Firemonkey called AnonThread.pas which easily allows you to use threads in...

Close