The iPhone has taken the world by storm, but with the backing of Google the Android platform is picking up steam and has a bright future ahead of it. But while there are dozens of tools to create games on the iPhone, Android has only a few examples showing how to make a game, and I could not find any decent engines or middleware on which to build a game on Android.

Flixel is a game engine for Flash that I have used quite a bit lately, and after my experiences porting it to Silverlight I felt confident that Flixel would make a great platform for Android on which to make games. This tutorial series will show you how to make your own simple platform game on Android using the ported Flixel engine.

Step 1

Download a copy of Eclipse from here, and then download both the Android SDK and the Eclipse plugins from the Android site here. You can find step by step instructions on how to do this on the Android developer site.

Step 2

Start Eclipse once the Android plugins for Eclipse have been installed. Open Window->Preferences.

In the Android section browse to the location where you extracted the Andorid SDK and click the Apply button. The SDK should then be listed.

Step 3

Create a new Android Application.

If you get the error below make sure you have completed step 2 successfully.

Fill out the first New Android Project screen like below. You can change the names of the application and packages as long as these changes are made to the rest of the classes where appropriate.

There is no need to create a Test Project, so  do not tick Create a Test Project.

Step 4

Extract the contents of the Android Flixel SDK into your project folder. This will extract a number of standard mp3s and images, along with the Flixel source files (under the org.flixel and flash packages).

Step 5

Create a new class called MenuState in the org.myname.flixeldemo package. It will extend the FlxState class.

In Flixel the various states in a game (like the main menu, the game itself, a high scrore screen etc) are represented by classes that extend the FlxState class. As the player progressed through the game these FlxState classes are created and destroyed to present the different aspects of the game.

Add the following code to the MenuState class. Here we are going to display a text field just so we have something on the screen.

package org.myname.flixeldemo;

import org.flixel.*;

public class MenuState extends FlxState
{
 public MenuState()
 {
  super();
  add(new FlxText(10, 10, 100, "Hello World!"));
 }
}

Step 6

Create a new class called GameView in the org.myname.flixeldemo package. It will extend the FlxGameView class.

Unlike a Flash game made with Flixel, where graphical objects can be added directly to the screen, Andoid has a fairly complicated system for allowing continuously running applications (like games) to draw to the screen. You have to create a thread to contain the render loop and then pass in events like key presses to the thread while maintaining thread safety. You can view the Lunar Landing demo for an example of how this works. Fortunately the FlxGameView class hides all of the underlying logic required to implement the render loop.

Add the following code to the GameView class. Here we pass a new FlxGame, which is the root of every Flixel game, to the FlxGameView constructor. The FlxGame constructor takes a few parameters like the context (which allows Flixel to create graphics and sound resources), the initial state class information of the game (which will be the MenuState we created above) and the R class information (the R object is created automatically to contain references to the graphics and sound resources).

package org.myname.flixeldemo;

import org.flixel.FlxGame;
import org.flixel.FlxGameView;

import android.content.Context;
import android.util.AttributeSet;

public class GameView extends FlxGameView
{
 public GameView(Context context, AttributeSet attrs)
 {
  super(
   new FlxGame(320, 455, MenuState.class, context, R.class),
   context,
   attrs
  );
 }
}

Step 7

In order to display the GameView object we just created we need to modify the main.xml file under the res/layout folder. Change it so it looks like the image below. This will cause the FlixelDemo Activity, created when the project was created, to display the GameView object.

Step 8

Add the line of code

requestWindowFeature(Window.FEATURE_NO_TITLE);

to the FlixelDemo class like the screen shot below. This will remove the title bar from the application.

Step 9

To test the game we need to setup a Android elmulator. Click Window->Android SDK and AVD Manager.

Click the New button. Add in the details for the AVD (Android Virtual Device) like the screenshot below. Click Create AVD.

You should now have a Virtual Device listed.

Step 10

Now we can run the demo. Click the Run button on the toolbar.

Select Android Application and click OK.

The AVD will start up. This can take some time initially, so be patient.

Congratulations – you have created you first Android game.