Create an Android Application with PhoneGap

In this section, we’ll see how to create Android applications from games created with TyranoBuilder.

Install the Android SDK, Eclipse, and the ADT Plugin
Download and install the Android SDK from the below link:

http://developer.android.com/sdk/index.html

and-1.jpg

Make a note of the SDK installation folder when it shows up in the confirmation window of the installer – you’ll need this to complete the Eclipse installation.

If prompted to install the Java Development Kit (JDK) by the installer, go ahead and follow those instructions before proceeding.

…then download install Eclipse from here:


http://eclipse.org/mobile/

and-2.jpg

If Eclipse doesn’t run, there is a possibility that Java isn’t installed on your computer.
In this case, install Java from the below URL, then try installing eclipse again.

http://java.com/download/

From the Eclipse folder, run the program eclipse.exe, then install the ADT plugin by following the steps listed here:
http://developer.android.com/sdk/installing/installing-adt.html

Create a Project
When Eclipse opens, we’ll create an Android application project.
To do this, from the menu at the top of the screen select [File] => [New] => [Project] From the New Product window, click the arrow next to Android and select Android Application Project.

and-3.jpg

Now decide a project name. We’ll use ‘myapp’ for this tutorial.
Fill out the names as per the screenshot below and click Next.

and-4-1.jpg

Then just click through and click Finish.
And with that, we’ve created our project!

Check that the Android Emulator is Running
We’ll need the Android Emulator up and running, so let’s enable it now.

From the top of the program window, select [Window]=>[Android Virtual Device Manager]

If you see AVD displayed in the window that opens as below, then you’re all set.

and-10.jpg

If you don’t see this displayed, click the Create button and add an Android device.

Now we’re ready to fire up the emulator.
Right click ‘myapp’ at the left of the screen and select [Run As] =>[Android Application]

If the emulator started, then our preparation is complete!
Next we’ll create an Android application from our exported TyranoBuilder game.
Before we do, you can now delete the project we created above.

Create a Project Folder
Create your project folder in a location of your choice on your computer’s hard drive.
For our tutorial, we’ll create a folder in D: drive called ‘myproject’.

Install NodeJS
We’ll need NodeJS to create our application, so download and install it from the below URL.

http://nodejs.org/

and-5 (1).jpg

Set the Environment Variables
Open Control Panel → System and Security → System → Advanced system settings (at the left of the screen) → Environment Variables (at the bottom of the Advanced Tab).

Then, add the below to the PATH variable (revise the locations to reflect the locations that you installed Eclipse and the Android SDK and their respective versions):

C:\Program Files\eclipse-java-luna-SR2-win32-x86_64\eclipse\plugins\org.apache.ant_1.9.2.vXXXXXXXXXXXX\bin;C:\Users\XXXXX\AppData\Local\Android\Sdk\platform-

tools;C:\Users\XXXXX\AppData\Local\Android\Sdk\tools;%JAVA_HOME%\bin

Next, we’ll set JDK in %JAVA_HOME%.

Right click My Computer and select Properties.
Then, on the Advanced tab, select Environment Variables, and then edit JAVA_HOME to point to where the JDK software is located, for example, C:\Program Files\Java\jdk1.7.0_75.

Revise index.html

Open index.html from your game project folder and add the below code immediately

 

before the ‘</body>’ tag.

 

<script type="text/javascript" src="cordova.js" ></script>

 

Install PhoneGap
At the time of writing, the latest version of PhoneGap is v3.3, so we’ll explain based on that version.
Open the project folder that you created earlier and select [File] > [Open Command Prompt] to open a console window.

and-9.jpg

Type the following commands into the window in order.

npm install -g phonegap@3.3.0-0.19.6

*This specifies which version of PhoneGap to install to avoid instability.

phonegap create myapp cd myapp phonegap plugin add org.apache.cordova.media

The above commands will create a folder called ‘myapp’.
Copy all of the files and folders from your exported TyranoBuilder project into the folder ..\myapp\www\

Then return to the console screen and type the following:

phonegap build android

 

Tip 

If you receive the error ‘Error: Please install Android target “android-19”, follow the steps at the link below to install the Android API v19, then repeat the above step.
http://stackoverflow.com/questions/24931155/cordova-3-5-0-install-error-please-install-android-target-19

Now, open Eclipse again and select [File] → [Import]→ [Android] →[Existing Android Code Into Workspace]

and-6-1.jpg

Browse to ..\myapp\platforms\android\ and select Finish to import the project to Eclipse.

and-7.png

Now all you need to do is run this project as an Android application.

and-11.png

How was that? The game started up, right?

Tips 

Use the –useaudio option if you would like to enable audio for your game.

We will post tutorials about how to run the game on an Android device and upload to Android marketplace in a later update.

Our tutorial ends here for now, but there are many sites that provide instructions about how to run the app on your own Android device, or how to set up and sell your game on the Android Marketplace. (We’ll expand this tutorial to provide instructions for these soon!)