Write a Flappy Bird Clone using Basic4Android and LibGDX – Part 1

If this is the first thing you’ve heard of Basic4Android, then welcome! Welcome to the world of easier Android development. Basic4Android (or B4A for short) makes it much easier and faster to get your apps or games up and running. In this series of posts, I will go through the process of writing a simple Flappy Bird style game, using b4a and the brilliant LibGDX games library.

B4A is not free, but is well worth the investment for the benefits it gives you, you can have a simple app written and running on your phone in minutes! Don’t believe me? Check out this video:

You’ll need a full version of B4A to follow this tutorial, but as I said, it’s well worth the investment, and if you buy it through this site, then you will save 30% off the full price!

Anyway, let’s get on with the tutorial…..

by the end of this series, you’ll have written a game like shown in the video below, and have the skills to change it to what ever you want!

Part 1 – Drawing an image

What you need

Basic4Android (obviously)

LibGDX library – Download here

Phone / Tablet that runs Android 3.0 and up

Download the source code for this tutorial here:

Source Code Download

Project Activities

#SupportedOrientations: portrait

It will be much easier for you to write games that just support one orientation, the LibGDX engine can handle the orientation changing, but for simplicity we will stick to one orientation. The Flappy Bird game using portrait, so for our tutorials we will also use portrait.

Activity Attributes

#IncludeTitle: False

Let’s exclude the title bar for the activity, you never see this in games so we don’t want to see it in ours. We’ll keep the status bar at the very top of the screen though so leave the FullScreen option set to false.

Process Globals

We don’t need to declare anything here as our entire game will just be within one module.

Globals

This is where we declare our game veriables, like score, any types we’re using, and anything else we’ll mwant to refer to. This is also where we declare our LibGDX objects.

Dim myBacking As lgTexture

Declaring myBacking as a texture creates a texture in the devices graphics memory, this is where we will store our background image.

Dim surface As View

The surface is where we will draw our libGDX accelerated graphics. We will spread this surface object across the whole screen before we draw on it.

Dim vpW As Float = 720

Dim vpH As Float = 1134

We want to be able to draw to the same screen coordinates to make it easier to write our games. So we will set up a viewport for the camera with the above dimensions. We can then say that drawing to something like 310x by 560y will be around the middle of the screen no matter what device screen we’re running on.

We now setup the LibGDX  objects themselves

Dim lGdx As LibGDX

This line tells B4A to load the LibGDX library, giving us access to the whole LibGDX command set, for drawing our graphics, playing sound effects and handling inputs.

Dim GL As lgGL

This line’s required due to LibGDX using OpenGL to accelerate the graphics functions.

Dim Camera As lgOrthographicCamera

This is our camera that looks at our surface we’re drawing to in order for us to see the graphics we’re drawing. Cameras can be zoomed in and out, rotated and moved around just like a real camera.

Dim Batch As lgSpriteBatch

When drawing our graphics, we’ll use a batch section, this enables LibGDX to draw all the graphics at once which is much faster, and helps LibGDX games run smoothly on older devices.

Activity Create

This is where we initialise our LibGDX graphics engine and tell Android where to draw it

surface = lGdx.InitializeView(“LG”)

The above line has changed after a recent library update, if you are running version 0.95 or earlier of the libGDX library then use: surface = lGdx.InitializeView(true,”LG”)

Activity.AddView(surface, 0, 0, 100%x, 100%y)

So we initialise the surface object as a lGdx view with the name LG. We then add this view to the activity filling the whole screen excluding the status bar as the activity property is set to non-fuillscreen.

Activity_Resume

This simply tells the LibGDX engine to resume running if it’s been initialised previously.

Activity_Pause

Here we tell the LibGDX engine to pause if it’s been initialised previously.

LG_Create

This is where we load any graphics or sounds for our game and initialise any other objects we need. In our example here we Initialise the sprite batch for drawing graphics in our main render method, we also load the png graphics file into our myBacking texture ready to draw to the screen.

myBacking.InitializeWithFile(lGdx.Files.internal(“day_background.png”))

This file must exist in your files folder within the project folder. The file can be any size and resolution as LibGDX will scale it to match what ever scale we draw it to. Obviously, the smaller the image then the less memory it will take to draw it. So if you’re planning on a game that has a lot of graphics then you’ll want to keep those graphics file sizes down.

LG_Resize

This is called when the surface changes size, mostly this is when the orientation changes. As we’ve set our activity to only support portrait then this won’t be called at all.

LG_Render

This is the meat of our game! This is where we draw the actual game to the screen!

We start by clearing the screen

GL.glClearcolor(0,0,0,1)

GL.glClear(GL.GL10_COLOR_BUFFER_BIT)

 

We set the clear colour, this is set using Red,Green,Blue,Alpha values between zero and one. So here we are just setting it to a totally black screen with no transparency. We then call the command to clear the screen.

We call the camera update command.

Set the batch projection matrix to match the camera combined type. I’m not going to try to explain how this line works, as I don’t honestly, know, all I can say is it makes the graphics commands we use in our batch match the screen coordinates of the viewport we configured earlier.

We then start the batch section to draw the graphics.

Batch.DrawTex2(myBacking,0,0,vpW,vpH)

This line tells LibGDX to draw the myBacking image to the screen, starting at 0,0 (the bottom left of the screen) to the top left of the screen at vpX,vpY

We then finish the batch.

There is then the LG_Pause, LG_Resume, and LG_Dispose methods are declared to handle those events. We’re not covering using these in this tutorial.

Download the source code here!

https://dl.dropboxusercontent.com/u/8673694/you%20tube%20files/basic4android/CloneyBirdTutorial/Part1.zip

Proceed to the next tutorial:

Part 2 – Adding in the ground

Advertisements

22 thoughts on “Write a Flappy Bird Clone using Basic4Android and LibGDX – Part 1”

  1. Hi friend,

    I´m trying to execute this first part of your tutorial and i´m receiving the following error :

    java.lang.RuntimeException: Libgdx requires OpenGL ES 2.0

    Do I have to install an separate package with OpenGL ES 2.0 ?

    I´m trying to install it but with no success. Do you have a secure source of a package with this opengl libs ?

    Thank you.

    best regards,

    Sérgio

    1. Hi,
      I’m not sure what the problem is. It may be the phone you are using? Are you using the emulator? If so then you need to enable the host GPU option on the emulator settings. Otherwise, try downloading Genymotion and setting up a new device running Android 4.1 or higher there. If this is a phone then what version of Android are you running?

  2. Thank you Andy !

    I downloaded the Genymotion and the OpenGL problem does not exist anymore.

    But,nenen I execute the code, the screen turns black and do not show any image.

    I Will make some extra tests tomorrow.

    Thank you very much.

  3. Hi! Thank you very very much for this tutorial! I just started to follow it and I hope I’ll learn something new!

    I have 2 issues with this first step: one is related to B4A itself.. when I try to open a new file a popup tell me that: http://i781.photobucket.com/albums/yy99/brainvision/Basic4Android_Issue_01.png
    really B4A cannot work with folders containing space? It seems really weird to e: that’s windows, not Linux! I have similar errors when I’m on my Slackware, but never saw them on Windows!

    The second issues is realted to the following lines:
    Sub Activity_Create(FirstTime As Boolean)
    ‘Initializes libGDX
    surface = lGdx.InitializeView(True, “LG”)
    Activity.AddView(surface, 0, 0, 100%x, 100%y) ‘ fill screen
    End Sub

    the surface = lGdx.InitializeView(True, “LG”) line is highlited as error and with ALT + 2 I’m able to read this description: http://i781.photobucket.com/albums/yy99/brainvision/Basic4Android_Issue_02.png

    I don’t exactly what is it, but I presume that the error depends to the fact that I’m still missing the rest of the tutorial; that’s just a guess, but maybe I’m wrong and this is something I should care about just now..
    Could you please help me?

    Again thanks a lot for sharing your knowledge and thanks for paying attention,
    see you soon!
    Have a nice day! 😉

    1. Hi, I’m not sure why you’re getting the issues you are. I can only advice re-installing the android SDK and checking the paths configured in Basic4android.
      for the second error, can you download and run the example download source code I have posted with the tutorials? If this works, then just compare it to what your writing line by line to find where you’ve gone wrong.
      Also, just check that you’ve downloaded the libgdx library properly and that you can run the libgdx examples that come with the library.

      Thanks for reading the tutorials, I’d love to see what you make for your first full game!

      1. Informatix has updated the LibGDX library and omitted all the OpenGL ES 1.x functions. So the UseGL2IfAvailable As Boolean parameter no longer exists. Change the line to surface = lGdx.InitializeView(“LG”) and it works just fine.

      2. For those commenting that the line
        lGdx.InitializeView(True, “LG”)
        gives an error, change it to lGdx.InitializeView(“LG”)

        and it should work.

  4. Added:
    #IgnoreWarnings: 15

    …to remove the warnings about the added files, Runtime Exception on the first file that’s associated, even on full example which happens to be a .wav file in that case… Has something to do with the added files… All the files are in the “Files” folder in the project… (do I need to associate them in the designer?)

  5. hi Andy i have a problem launching the lib Gdx.jar file i try bug it dosent exceute and the new version of libgdx uses the gradle system so i need to know what to do any help will be appreciated

  6. Try removing the true from the brackets just leaving (“LG”) and that should work. The library was changed after I wrote the tutorial.

  7. Brilliant! Thanks so much Andy, that worked perfectly. Really appreciate your time in responding…and in putting this tutorial online. It is incredibly valuable for those of us who are raw beginners and trying to get a grip on how this all works. Thank you!!

  8. Hi Andy,
    this is error i get when i try to run it.

    ” Sending data to remote compiler. Error
    step: Compiling generated Java code.
    javac 1.7.0_09
    src\com\easyandroidcoding\cloneybirdpart1\main.java:318: error: package anywheresoftware.b4a.libgdx.graphics does not exist
    public anywheresoftware.b4a.libgdx.graphics.lgTexture _mybacking = null; ”

    Please help me resolve this.
    thanks in advance.

    1. The error indicates that it can’t find the image for the background. Or that the libgdx library is broken. Can you zip your project and send it to me to test? You can sedn it to me at: andymcadam@hotmail.com
      To zip it up, use “File / export as zip” in the B4A editor.

    2. The other reason for this error could be that you are using the evaluation version of B4A where it compiles on a remote machine rather than your local PC, you’ll need the full version to add library support to use the LibGDX library, as it needs to be compiled on your local PC.

  9. Looking at the error again. I think you are using the evaluation version of B4A? It’s trying to use a remote compiler rather than compile the app on your PC, external libraries cannot be used on the evaluation version, only the full paid version of B4A.

    1. Can you say what version of Android you’re running, it will need to be 2.1 or higher, also what version of B4A and the LibGDX library.
      Alternatively, download the ready made project file I have put on the post and check if that works.

  10. Hi !
    I am going to create a app which adds a frame to pictures using basic4android but i couldn’t find any source,resource,etc
    could you please guide me?
    tnx

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