Max Did It
Coding
,Wed
Post the First Comment
Tagged , ,

Testing Rubberband Racing on Android Devices

Even though I am currently concentrating on developing and optimizing Rubberband Racing for desktop browsers, publishing it to mobile devices is an interesting option that I like to keep in mind.

Before I worked as an independent developer, one of my assignments was to test how fluent Flash games that have been ported to mobile devices ran. At that point, I was introduced to the AIR Development Tool for the first time, which, among other things, allows you to package SWF files as iOS or Android apps.

I fell back on that knowledge in the last couple of days to test how well the game would run on my Nexus 4. And considering that I barely changed or even optimized the desktop version of the game for mobile devices, the answer is: surprisingly well.

Rubberband Racing Title Screen on a Nexus 4

The title screen of Rubberband Racing on an Android Phone. (Click to enlarge)

Below, you will find a video of the game running on my Android phone and some details on how I packaged it.

Running a Stage3D Game on Mobile Devices

The User Interface

I think that in this case, the effort of building the UI with 3D vector graphics instead of putting them in as bitmaps has payed off.

I didn’t need to worry about whether the elements would look good on a certain resolution or whether I would need to scale them down so I wouldn’t use up memory unnecessarily.

Rubberband Racing Car Select Menu on an Android Phone

The car select screen on an Android phone.

If I actually publish the game on the respective Android or Apple markets, I would have to further adapt the interface. The buttons would have to be a little bigger, depending on the mobile device. Doing that would be simple, however, since I only need to scale up the objects.

Rubberband Racing on an Android Tablet

The car select screen on an Android tablet. (Thanks, Hannes!)

Gameplay

I had to make a couple of minor changes to the rendering of the gameplay itself so it would work better on my mobile phone.

Rubberband Racing gameplay on an Android Phone

Rubberband Racing gameplay on an Android Phone (Click to enlarge)

For some reason, the shadows were drawn incorrectly on Android (the shadow was drawn across the entire screen) so I switched off shadows. I also deactivated anti aliasing, hoping it would improve performance.

Performance

The performance is decent, but not great.

As far as I can tell, the animations in the menus are playing without any stuttering.

The gameplay itself has a noticeably lower framerate. It is still playable, but doesn’t feel as fluent as the relatively simple animations in the UI. If you keep in mind that the Nexus 4 has pretty strong hardware, you can imagine how the game runs on slower devices.

To make the game run better on mobile devices, I would have to profile it with software like Monocle, but I haven’t gotten around to do that yet.

Packaging a Stage3D Game for Android

Most of the steps I’ve taken to get the game to run on my Android phone are taken from this tutorial on the official Adobe site.

I have made some changes, though, that accommodate the structure of my project.

You package a SWF file as an Android application by using the AIR Development Tool (ADT) which you will find in the AIR SDK.

The ADT is a command line tool which lets you package your Flash application for several different platforms. The ADT expects an AIR application descriptor file, even if your project only produces a standard web Flash SWF.

Application Descriptor File

The application descriptor file is a XML file containing settings and informations about your project, which will be used to create the, in this case, Android app.

The root node of the XML is the node, where you specify the version of the AIR runtime you would like to target.

1
<application xmlns="http://ns.adobe.com/air/application/3.5">

Stage3D features are supported by AIR on mobile platforms since version 3.2, so you should obviously choose a version equal or higher.

Within the application tag you set a couple of general properties.

2
3
4
5
6
7
	<id>de.maxdidit.rubberbandracing</id>
	<name>Rubberband Racing</name>
	<filename>RubberbandRacing</filename>
 
	<versionNumber>1.0.0</versionNumber>
	<versionLabel>Iteration 2</versionLabel>

Then, there’s the initialWindow tag. Here, you can adjust some settings concerning the presentation of your app.

8
9
10
11
12
13
14
15
16
	<initialWindow> 
		<content>rubber-band-racer.swf</content>
		<aspectRatio>landscape</aspectRatio>
		<autoOrients>false</autoOrients>
		<depthAndStencil>true</depthAndStencil>
		<fullScreen>true</fullScreen>
		<renderMode>direct</renderMode>
		<visible>true</visible>
	</initialWindow>

The content and the renderMode tags are very important here. The content tag indicates which SWF file is the basis for the app. The renderMode tag has to be set to direct in order for the Stage3D features of AIR to work.

I also chose to set the app to landscape mode and deactivate auto orientation, since it would be only distracting if the screen readjusted if the player turned the phone.

Then, you can set the device profiles supported by the application. In this case I obviously choose the mobileDevice profile.

17
	<supportedProfiles>mobileDevice</supportedProfiles>

You can add further, Android specific settings in the application descriptor file as well.

The Command Line Tool

Before you can package the app itself, you have to generate a certificate which is used for that process.

adt -certificate -validityPeriod 25
-cn SelfSigned 1024-RSA rubberbandRacingCert.pfx 

I have called my certificate file rubberbandRacingCert.pfx in this example.

With this certificate file, the application descriptor file and all your assets and SWF files in place, you can now package your game as an APK file.

adt -package -target apk-captive-runtime
-storetype pkcs12 -keystore rubberbandRacingCert.pfx
rubberBandRacing.apk rubberband-racing.xml
rubber-band-racer.swf assets.xml.gz cars logo tracks ui

This is the command I’ve used to package Rubberband Racing for Android. I recommend to put the command line into a BAT file, once you’ve set all the parameters you need.

How to Create an App That Doesn’t Require a Separate AIR Installation

In the tutorial I’ve linked above, the target chosen is apk. However, if you run this app on your mobile device, you will find that it needs to download and install AIR on your phone as well in order to run.

If you want your app to run out-of-the-box, without further, separate installations necessary, then you should switch to apk-captive-runtime as a target. In that case, the AIR runtime is packaged into the app as well. This will increase the size of your app, but should be more comfortable for the end user.

How to Include External Asset Files in the Packaged App

The Rubberband Racing project includes several external assets that are loaded during runtime when the game is played in the browser. This isn’t very desireable for an Android app, since it can lead to extensive loading times, depending on the connection the user currently has.

You could embed all assets in Actionscript and access them that way, but that can be tiresome if done manually. There is an even simpler way.

The ADT gives you the option of putting external files and even entire directories into the packaged app. To do this, you simply have to attach the names of the files and directories, separated by spaces, at the end of the command.

In the example above, the ADT will package the rubber-band-racer.swf file (this is a given), the assets.xml.gz file and the cars, logo, tracks and ui folders, including their contents, into the app.

You can then keep your loading pipeline the way it is without changing it and then let the app load the files on your Android device as if they were in the local filesystem. I would recommend working with relative paths in this case.

Leave A Comment

Your email address will not be published. Required fields are marked *

Connect with Facebook

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>