I participated in an app jam (AppJam2014) recently and I managed to win it with a simple android game. We had 6-7 hours to do it so I had to be modest and start a small project.

Here is a gameplay video:

I saw this as the perfect opportunity to do my first programming tutorial as I will explain some easy steps in setting up an android project with libGDX and then building the actual game using the framework. You won’t need much experience in programming to do this, but you should have a bit of knowledge in using Java and have an understanding of object-orientation.

LibGDX, in my opinion is one of the best frameworks in terms of game development on Android devices. It is also cross-platform and that’s a plus for some of you. You can code once and port the game on Android, iOS, Web, Desktop. Being able to test it on Desktop is very advantageous because it lets you test your game really fast without having to use an emulator or install the app on your phone – click run, wait 5 seconds, test! (depends on the size of the project)

The framework provides API’s for OpenGL ES, 2D and 3D graphics, Box2D(physics), Math and I/O. It also has a great community and if you’re stuck with something you can just google it and find the answer right away.

If you want to know more about the things I mentioned before, go on the link I provided and you will learn all you need to know. So let’s start this tutorial now!

1. Setting up libGDX

I presume you have Java SDK installed, if you don’t then quickly install it and don’t tell anyone you did not have it! You will also need the ADT bundle from google. Now download libGDX and extract it (doesn’t matter where, but I usually place it near my projects). Now go in the folder you have unziped the files and double-click “gdx-setup-ui.jar”. If it does not use java to open it, choose ‘open with’ and browse for “program files/java/jdk/bin/java.jar” or something like that. When it opens, click on create and this window will appear. On step 1 give the names you want for the ‘Name’, ‘Package’ and ‘Game class’ and make sure you have the desktop project ticked. On step 2, click on the night build button, which is the box with an ‘N’ on it and wait for it to download. Next, click on the button at step 4 and then ‘Launch’. In about two seconds your projects are created. You can now close this window.

Next, let’s open eclipse from the ADT bundle you have downloaded. If it’s the first time using it you may need to download all the necessary API’s from the SDK manager which can be found in Eclipse or in the bundle folder. Now set up a workspace in Eclipse and then File>Import>General>Existing Projects, select the folder you used in libGDX setup tool and finish. This is what you should have.

If you don’t have that, try to go again through the steps, or watch this video.

You should be able to run your project now. Right-click on your foodgame-desktop and select Run As>Java Application and then select Main from the list and click ok. If you get a screen with libGDX logo then all is fine. Now right-click on the android project Run As> Android Application, but first check if your phone is connected or if you have an emulator set up. Again, you should see the logo on the device. Nothing too fancy, it’s our job to make it look like that.

Alright, setting up is done!

2. Game talk

So if you watched the video in the introduction you noticed that the game is really simple. It has a background, food entities appearing on the screen, touch events and some particle effects to show the collision between the touched area and the food. The user interface consists only of the score on the top-left corner and the lives in the top-right corner.

The goal of the game is to reach a high score by snatching food from the screen. You should be careful about the bad food, though. If you get bad food you will lose a life and eventually lose the game. There is also covered food which is collectible only when it uncovers (for a brief moment). You get extra points if you collect it, but there will be a chance that the food will be bad and you will lose a life instead. So that’s it! Simple, isn’t it?

We will concentrate on the actual game now and leave the menu screen and the ending screen at the end. At the AppJam I realized a bit late that I had no ending screen and I had to race through it to make one. I was lucky it all went according to plan and the errors decided not to show up, phew!

Go here to download the models we are going to use in the game (sprite sheet, sounds, buttons, fonts, etc). Unzip the folders inside foodgame-android>assets. That is the main folder for assets in the project, by the way.

Before going into details about how the game will be structured, let’s play a bit with the code! All the work will be done in the main project “foodgame”. Add new packages like this:  (right-click on project New>package)eclipse3

This is structured after the MVC model, only that the game doesn’t really need a controller in this state. In the model package we will place all our game models(in our case, the food), in the screen package we’ll place the screens and inside view we will place the code for drawing the models on screen.

Go into foodgame-android>src>package and find MainActivity.java. Double-click on it and modify the line below. Now go into foodgame-Desktop and do the same. This will enable openGL 2.0 which will make things easier for us.

Now create a new class in screen called GameScreen under the screen package:

This is just the skeleton of the class and it won’t do anything. The constructor sets the game attribute and I will explain later why. The class implements the ‘Screen’ interface so all the methods are part of it. Render is where the game loops, resize() is called when you resize the window, show() is called at the beginning and usually it is used to load items, hide() when the game goes in the background, pause() and resume() are self-explanatory and dispose() is used to clean the resources.

Now let’s draw something on the screen. Create a new class in the view package called GameRenderer:

Our game renderer class has two methods: loadItems() and render(). The first one loads the resources we need to start drawing, like the background texture. It also creates a new SpriteBatch object which will enable us to draw the texture on screen. In render() we have the code used for drawing. All the drawing must be done between batch.begin() and batch.end().

Now that we have the renderer set up, let’s call it in our GameScreen.

Add this before the constructor.

Add this inside show() to create our renderer object:

And lastly, add these two lines inside render():

The render() method inside GameScreen gets called every frame and the game runs at about 60 frames/s.

Now all we need to do is to create the screen from our main java file that gets called when we launch the app. Go to the foodgame>first package>FoodMain.java (or how you called it) and replace the code there with this one:

You may wonder why we didn’t just keep the previous code and work with that. Well, when I first built a game using this framework I encountered some issues with the screens. It was tedious to switch between them so I found about the Game interface and that you can switch to new screens just by calling this method: setScreen(newScreen). So this is why I pass the game object to the GameScreen (setScreen(new GameScreen(this)). Now if we want to set another screen from GameScreen, we need to do this: game.setScreen(newScreen) and the new screen will appear on the device. Pretty handy, isn’t it?

So enough talk, run the game and see if it works. The app doesn’t do anything, it will just display the background image on the screen.

This was all I had in plan for the first part. In the second part we will finish building the game and on the third part we will add other screens and discuss other improvements.

Let me know if you are having any issues with the app so far and I’ll try my best to help you. If you have any questions, again, don’t hesitate to ask me. The next part will be up in a few days.