I’ve always liked 2d running games. When I first got an Android phone, I played iRunner for hours, and at the time I seriously wanted to develop a game like that. A lot of time has passed since but I finally had the time to put together a simple, running game using libGDX. A final version based on this tutorial is on Google Play.
LibGDX is one of the nicest projects I’ve followed over the past few years and when I began looking into different video game development frameworks, it was definitely the one that provided the most features and provided the best performance for my then crappy phone :). If you have time, I recommend reading its creator’s post on releasing version 1.0.
I developed this game as a learning exercise using libGDX’s scene2d and box2d libraries on my spare time. The code is by no means perfect, but I hope it helps you get on the right track if you are looking to develop The Next Awesome Game. Also, even though libGDX is a cross-platform framework, I only targeted Android as my final release platform and I targeted desktop for testing purposes.
NOTE: I won’t be explaining much related to libGDX or box2d as they already have excellent documentation. I’m only guiding you through my own implementation of a game using these tools. If you don’t understand why I’m using a particular class or what a physics body is I strongly suggest taking a look at libGDX’s wiki before moving forward.
This tutorial guides you through the basics of how I implemented the game. The code from these posts is on GitHub. You are free to use it as you wish.
Before we start writing any code, let’s take a look at the game concept.
This is the silly story I came up with: You are an alien and giant insects are attacking your city! Your goal is to escape by running as much as you can while avoiding all insects.
There are only to ways of avoiding insects: jumping and dodging. The jump button will be the right side of the screen and the dodge button will be the left side of the screen.
With our awesome design done, let’s build the game!
Creating the Project
Let’s set up a new project using the gdx-setup tool they offer. We’ll be using box2d, so make sure to include the extension during the setup. Like I said before, I’m only targeting Android as my build platform and will use desktop for testing, so no iOS or HTML.
This is what my setup looks like:
Once you click on Generate the Gradle
clean task will run and all libraries will be downloaded. You should see an output like the following:
I won’t go over importing the project into an IDE since it’s part of a libGDX project setup and it is up to you which IDE to use (in case you are wondering, I’m using IntelliJ IDEA 14 at the time of this writing).
After successfully running the game in both desktop and Android, I usually clean up the boilerplate code set up by libGDX. That means, deleting the image
badlogic.jpg that is added to the
assets folder and leaving my game class like the following:
The first thing we’ll do is to make our game class extend
Game so we can support multiple screens. We won’t be using multiple screens for this game but I suggest doing this part in case you want to add multiple screens in the future, e.g. for a splash screen, separate menu screen, leaderboards, etc.
My game class now looks like this:
Now create a
GameScreen class inside a newly created
NOTE: Assume all classes/packages are being added/modified inside our core module unless otherwise noted
Once created, we need to make our game class set our
GameScreen on startup.
The last thing we need to do for our setup is to set the height and width of our game. We’ll make this game 480x800. Let’s store these values in a
Constants class inside a
Finally, configure our
DesktopLauncher so it uses the correct measurements:
Go ahead and run the project. So far, we have set up a game with a screen running on a 480x800 window.
A Stage for a Physics World
Now we’ll start creating our physics world. It’ll consist of a ground, a runner, and enemies. Even though our runner will be the one running through the city, we won’t be actually moving our runner body along the x-axis but make the enemies move towards the runner to while giving the illusion he is moving forward with sprite animations.
Box2d makes it easy to control bodies and control their physics, such as jumping, colliding, moving, etc. If you don’t know box2d at all, I recommend taking a quick look at its documentation.
Our bodies will be created as follows:
- Ground: Static body
- Runner: Dynamic body
- Enemies: Kinematic bodies
Let’s make a class that takes care of creating our bodies. Create a
WorldUtils class inside our
utils package and create a function to set up the ground.
The new constants added to our
Constants class are the following:
Let’s take a look at what we just did. We defined a utility class
WorldUtils which will take care of creating our world components. For now we’ll only create the ground and the world itself. The ground is created as a static body with a width of 25 meters and a height of 2 meters and it is created as a box. In fact, all of our bodies will be boxes of different shapes.
The world is created with a gravity of -10 m/s^2. Box2d works best when using real physics values. In fact, the documentation warns the engine to be buggy if using exaggerated world values.
Ok, so we have these functions to create a world and the ground, but where do we use them? We could use them inside our
GameScreen; instead, we will add them to a
Stage which will be added to the
Stage is part of scene2d and is an input processor that can hold many
Actor objects and handle their drawing and input events. We will add Actors later on but it is better to set up the
Stage now so we don’t have to move the code from the
GameScreen later on.
GameStage inside a
stages package. This class will extend libGDX’s
Stage class. In the constructor, we’ll use our
WorldUtils class to create the world and the ground. At this point, we will be using the
Box2DDebugRenderer to display what we have created so far. We’ll use sprites later on once we are comfortable with the physics. The code is the following:
You probably noticed the Fixed timestep comment inside the
render function. Like the libGDX box2d documentation says, stepping the simulation is a topic itself. I followed this article to implement my version of fixed timestep. We probably need to implement interpolation as well, but I’ll leave it as a TODO for now.
Finally, let’s launch our
GameStage inside our
GameScreen. We’ll be calling
draw inside the
Run the game and you’ll see a green line at the bottom which is the outline of the box we added to our world (the ground). Your game should look like the image below:
In the next part, we’ll add our runner with some basic controls.
If you have any questions or comments, feel free to let me know in the comments section.