Sunday, September 29, 2013

How to create Android Games (.apk file) with HTML5?

I have just updated my list of how to create Android Games, with the newly added HTML5! Yes, i really mean using HTML5 to create Android Games in the format of .apk file which can be uploaded to the Google play store or other app stores. For those who are HTML or HTML5 savvy, I know you have yearned for this possibility. Why learning other languages (such as Java, Lua, Actionscript, etc) while you are already an expert in HTML5? Here, I would have some demo in this post.

Creating Android Games with HTML5 has been made possible and intuitive with the Intel XDK. FYI, the Intel XDK came from the acquisition of AppMobi. It can be downloaded for FREE. In fact, the Intel XDK can be used to create games which are compatible for iOS too.



The XDK is in the format of .jnlp. By following the instructions, you are able to setup the project folder containing the necessary javascript files after registering a new account on the fly. By default, it will use the localhost and port number 58888 as your emulator (better in Chrome browser).


Now, inside the emulator, click "START NEW" to create a new project:


Select "Create a new game app" and Click "Next". Then, to have a reference point, you can choose "Start with an Ejecta*-based Jump and Run sample" and click "Next". Rejoiced, you will reach the screen below:
Basically, you can have a taste on how good / smooth the game is. However, the demo isn't ended yet. Now click the 'Build for app store' (Build only) icon at the toolbar.

 You will reach the appcenter of Intel from where you can build your HTML5 games into an apk file.


Choose "Android Build Test" and click "Build App Now"

Congratulation! You have created an Android Game apk file with Intel XDK successfully! Easy right? Let's start creating Android Games with HTML5!

2 comments:

  1. Can you please tell me how can i add admob account to my html5....

    ReplyDelete
    Replies
    1. That's a good question here. From my understanding (after so much googling), there isn't a direct way to add admob into the html5 app (javascript VS java). Depending on your tool (such as Cordova/Phonegap), maybe there are resources out there, such as https://github.com/AppGyver/phonegap-admob-plugin to help you. Will keep an eye on the latest update and post here.

      Delete