Rathores blog

I've mentioned before in an earlier post that with some initial matchmaking, PhoneGap can work pretty well with the HTML5 game creation toolkit Construct 2 to allow non-programmers to make mobile games and maybe even sell them. I also promised a guide, so here it is. This setup worked for me, but it might need to be slightly different for you, I cannot be sure - if you meet with any problems, write in the comments and I'll do my best to help. Also, I'm not an iPhone user, so this tutorial will be dealing with Android - however I believe the process is not all that different across PhoneGap supported platforms, so this tutorial should be of help even if you were intending to develop for Blackberry or iPhone.

Step 1: Get PhoneGap running

Much of the technical aspects of getting PhoneGap itself to work without Construct 2 is covered comprehensively in this tutorial, so follow the steps to get the hello world program running on your Android device before coming back and reading the rest.

Step 2: Edit your Android Manifest

There are some variables in the Android Manifest you may want to edit to make PhoneGap more Contruct friendly. Most of my information for this and the next step is sourced from this website, so if you are really curious and techy you can go check it out. I repurposed the stuff I found to work specifically for Construct 2 - You need to look for the main "activity" tag with your application's name in it. For example, assuming I made an application called "MySillyGame", I would look for my main activity tag and edit it as such:

<application
android:label="@string/app_name"
android:icon="@drawable/icon">
<activity
android:name=".MySillyGame"
android:label="@string/app_name"
android:configChanges="keyboardHidden"
android:screenOrientation="landscape">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>

As you may have noticed, I changed the "ConfigChanges" variable to "keyboardHidden", so the game remains a full screen app at all times without the virtual keyboard. I also added a variable called "screenOrientation" and set it to "landscape". As the name suggests, this variable locks the orientation of the screen to landscape and keeps it there despite the player tilting the device. Vice versa, if you happen to make a portrait-orientated game, feel free to specify it as such in the field.

Step 3: Edit your Java Source file

Okay, this one gets a little bit programer-ey, so you are going to need a little patience here. You can find the Java source file of the application if you open up the project file in Eclipse and navigate to src > (Process Name) > (App Name).java. Still confused? Take a look at this picture:


Once you managed to open up the Java source file, we can start editing it to make the marriage between PhoneGap and Construct easier. This is how my Java source file looks like, the functions are explained with in-code comments:

package com.package.name;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import com.phonegap.*;
import android.view.Display;
import android.view.WindowManager;
import android.webkit.WebSettings.RenderPriority;

public class AppName extends DroidGap {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");

// Enable Fullscreen (no status bar).
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN |
WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);

// Disable Scrolling and Scrollbars.
this.appView.setHorizontalScrollBarEnabled(false);
this.appView.setHorizontalScrollbarOverlay(false);
this.appView.setVerticalScrollBarEnabled(false);
this.appView.setVerticalScrollbarOverlay(false);

// Get actual screen size.
Display display = ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay();
int width = display.getWidth();

// Calculate target scale (only dealing with portrait orientation).
double globalScale = Math.ceil( ( width / 480 ) * 100 );

// Set some defaults on the web view.
this.appView.getSettings().setBuiltInZoomControls( false );
this.appView.getSettings().setSupportZoom( false );
this.appView.getSettings().setRenderPriority( RenderPriority.HIGH );

// Set the scale.
this.appView.setInitialScale( (int)globalScale );
}
}

Step 4: Download and install Construct 2

If you haven't already done so, download Construct 2 from this website and install it.

Step 5: Configure Construct 2


Actually the only thing you need to configure is the window size. Set it to 480 x 320. The actual layout size of the game level can be as big as you want, you only need to change the window size. Don't worry if it is not the native resolution of the device you are using, because the steps above make the program resize itself to whatever screen it finds itself on. The primary reason for that screen size choice is that it's the most common one, so it should appear native on most devices.

Step 6: Make a Construct 2 game

I'm not going to teach you how - check out the excellent tutorial found on Scirra's website. Just remember one key thing: DO NOT USE THE MOUSE EVENTS. Replace what you would do with mouse events with the touch events instead - mouse events are not registered on Android touch screens. Once you are done, export the game into HTML5 using the built in exporter found in Construct's home menu.

Step 7: Copy the exported files over to the Eclipse assets folder.

Copy all the exported files into the Eclipse asset folder of your project (likely to be "(project name)/assets/www").

Step 8: Edit index.html

Edit the exported index.html to remove all the unnecessary clutter and also make the game reference the local jQuery runtime instead of the online one. The cleaned up index.html looks like this:

<!DOCTYPE html>
<html>
<head>
<title>My Project</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="c2runtime.js"></script>
<script type="text/javascript">
// Start the Construct 2 project running on window load.
jQuery(document).ready(function ()
{
// Create new runtime using the c2canvas
cr.createRuntime("c2canvas" );
});
</script>
</head>
<body leftmargin="0px" topmargin="0px" marginwidth="0px" marginheight="0px">
<canvas id="c2canvas" width="480" height="320" oncontextmenu="return false;">
Your browser does not appear to support HTML5. Try upgrading your browser to the latest version.
</canvas>
</body>
</html>

Step 9: And... You're almost done.

Pat yourself on the back and playtest your newly created application. Compile the App by going to the File > Export.. in Eclipse, then selecting Android > Export Android Application from the list. Follow the instructions and click through the process. Once finished, drag the exported .apk into your android phone's SD Card and use an App like Apps Installer to install the game.

For future updates to your game, you just need to replace the c2runtime.js file with the new one exported from Construct 2, no need to redo all the steps again.