How To Port Your Browser-Based Game To Android The Simple Way

Developers of browser-based games, especially newcomers, may not realize just how easily a browser-based game can be turned into an Android app. I’m talking about hybrid apps, of course - basically, presenting your game’s website page in a full-screen, native Android browser, complete with installable .apk file (which can be uploaded to Google Play Store) and app icon.


The magnificent thing about this approach is that you’re targeting two separate devices, without developing for both platforms. You will never need to touch the Android SDK. We are literally turning your website URL into an app through 3rd-party software. The end result is the equivalent of opening your game’s URL on Chrome browser for Android, except it will be entirely full-screen, with no URL bar, giving it the appearance of a completely native Android app.

Furthermore, you can use ad network plugins, like Google’s own AdMob, to monetize the app version of your browser-based game, on top of any revenue from website page hits (though you need to be careful about this - for example, make sure it’s cool with whoever is hosting your browser-based game, if you’ve worked out a revenue sharing deal with a game portal website).

To accomplish this, we’ll be working with PhoneGap, which is one of the simplest hybrid app frameworks to work with.


Prerequisites
To begin, you’re going to need a GitHub account, a PhoneGap account, and a text-editor that can recognize code, like Notepad++.
Now for the purpose of this guide, I’m going to provide basic skeleton templates for PhoneGap to turn your browser-based game URL into an Android app. You will need:

Getting Started
So first you should create a new folder on your desktop, named www. This is going to be the main directory of your project, where PhoneGap will expect to find all of your resource files. Place the config.xml and index.html files inside this folder.
Now open the config.xml file, and you’ll see these lines at the top:


You want to update the first 3 lines with your own information, but leave the <preference> information alone. At the bottom of the config.xml, you’ll see this line:
<allow-navigation href=”http://yourwebsite.com/xxxxx” />
Change this to your actual browser-based game’s URL. For example, let’s say I was the owner of popular browser-based game World’s Hardest Game. I would put “https://www.crazygames.com/game/worlds-hardest-game” inside of the tag.
What this basically does is tell the native Android browser / container that the user can only access that specific page  - thus, the app will not function as an actual web-browser (it’s a bit of a huge security risk to allow users to go surfing around the web inside a framework container).
Of course, if you owned a game portal and wanted to turn your entire website into a hybrid app, you would paste these lines instead:
<allow-navigation href=”http://yourwebsite.com/*” />
For example, if I wanted to create an app that allowed the user to browse the entire .IO game portal on CrazyGames.com, and navigate to each separate game URL, I would put “https://www.crazygames.com/c/io*” inside of the tag.

The * wildcard simply means that the user can access any page on the URL given, so they would be able to browse your entire website, but not outside of the website. It’s not that huge of a concern, because the container framework will not have a URL bar for the user to input different website addresses, but its still worth the precaution, especially if you want to give the appearance of your browser-based game being a full-screen, native app.

Now we’re going to edit the index.html file, which basically tells PhoneGap exactly how to present the browser container. Normally you would build this template entirely from scratch, but for the purpose of this guide, I’ve done the bulk of the work for you. The tags I’ve included in the template will remove the browser container’s URL bar, allow the phone hardware buttons to exit the app (which is actually a Google Play Store requirement), and launch the app after a short splash screen (we’ll get to that later).

So inside index.html, just find and change this line to your game’s URL:
var url = ‘http://yourwebsite.com/xxxx’
What this does is tell PhoneGap that this is the URL to be loaded when the app launches. The “homepage”, basically.

Creating a Splash Screen and App Icons
In a software like Photoshop or GIMP, create a new project with this template:


You could theoretically do 192x192 instead of 144x144, since 192x192 is the highest resolution possible for Android app icons (640dpi / XXXHDPI scale, which is basically tablet-size), and you can resize it into smaller versions for different screen resolutions. Remember, you always want to start at the highest resolution possible and shrink down, not the other way around, because enlargement equals quality loss.

Here are the various icon sizes according to screen resolution:
  • 36×36 (120dpi / LDPI)
  • 48×48 (160dpi / MDPI)
  • 72×72 (240dpi / HDPI)
  • 96×96 (320dpi / XHDPI)
  • 144×144 (480dpi / XXHDPI)
  • 192×192 (640dpi / XXXHDPI)

So after you’ve created your app icons (I’m not going to tell you how, because if you’re a game developer, you probably already know how to work with graphics editing software), save it as Icon.png and place it inside your main www folder.

If you want to have different icon sizes, resize your icon into the various sizes above, and save them as Icon144.png, Icon96.png, etc. Then you will need to edit the config.xml file to point to each icon.

Now we’ll create a splash screen (which will display while your app “loads”). It’s the same principle as creating an icon, but here are the canvas sizes you’ll need:

LDPI:
Portrait: 200x320px
Landscape: 320x200px
MDPI:
Portrait: 320x480px
Landscape: 480x320px
HDPI:
Portrait: 480x800px
Landscape: 800x480px
XHDPI:
Portrait: 720px1280px
Landscape: 1280x720px
XXHDPI:
Portrait: 960px1600px
Landscape: 1600x960px
XXXHDPI:
Portrait: 1280px1920px
Landscape: 1920x1280px

So again, create your splash screen at the largest resolutions on that list, and save it as Splash.png. Then do the same thing you did with icons for the smaller sizes - Splash960.png, Splash720.png, etc, and edit the config.xml accordingly.

Putting it all together and building your app in PhoneGap

Log into your GitHub account, and go to your main repository for this project. Click the “Upload Files” button and drag your Www folder onto the screen, and commit the changes.

Now navigate to the PhoneGap build page, and click “New App”. It will ask for your GitHub repository path, so provide that information, and then click “Pull from .git repository”. Then click “Update Code” and “Pull Latest”


Finally, click “Build”. It will compile your app, and give you the option of downloading an .APK file that can be installed on your Android phone. Go ahead and download it, save it to your phone’s SD card, and install it. Then launch it, play around, and fix / tweak whatever you like. 

From this point forward, any updates to the “app” you want to do must be updated to the GitHub repository, then you must go through the “Update Code” / “Pull Latest” process on PhoneGap to receive a new .apk file. When you’re completely satisfied, you can upload the .apk file to an app store like Google Play!

(To get really in-depth into PhoneGap app building, such as how to include ad network plug-ins in your app, be sure to read through the PhoneGap tutorial documentation.)

Author: Katie

No comments