Jump to content


Photo

Tutorial to package your HTML5 game


  • Please log in to reply
23 replies to this topic

#1 alexandervrs

alexandervrs

    GMC Member

  • GMC Member
  • 659 posts
  • Version:GM:Studio

Posted 21 February 2012 - 04:43 AM

Can't wait for GameMaker Studio to develop for Android? This is a tutorial that will help you put your GameMaker HTML5 games on Android as native looking applications, right now!

How this works?

What this tutorial will help you to do is to compile an Android executable (apk) with an embedded WebView control.
A WebView control is actually like a web browser inside your application. That means it can display all sorts of web content.
GameMaker HTML5 exports to web format so it's possible to package it this way in order to execute it as an Android app.

Drawbacks

However, this application is not entirely native like the ones GameMaker Studio will export in the future so note the following downsides:
You cannot access the device's native features such as the accelerometer using GM:HTML5 alone (you might need a framework like PhoneGap which I may cover later)
Your game might suffer from performance issues on specific devices that have a low-end processor
Not all devices have an up-to-date WebView control, so some features might not work (I had problems with sound on some Android 2.1 devices)

Installing the Android SDK and Eclipse IDE

First, you need to download and install the Android SDK from the Adroid Developers website ( http://developer.and.../sdk/index.html )
Choose the package which says (Recommended) at the side of the link, download and install it.

Next up, you need to download the Eclipse IDE ( http://www.eclipse.org/downloads/ )
Choose the one that says "Eclipse IDE for Java Developers", download and install it as well.

Finally, there's one more thing to install, the ADT plugin for Eclipse ( http://developer.and...clipse-adt.html )
Follow the instructions provided in that page under "Downloading the ADT Plugin" in order to install it to the Eclipse IDE and after that restart Eclipse.

Configuring the Eclipse IDE

Open up the Eclipse IDE and you'll see a Welcome panel. You now need to provide your Android SDK install location. Choose the "Use existing SDKs" option and browse for folder to choose your SDK folder ( Usually it's "C:\Program Files\Android\android-sdk" ). Choose "Next" and then "Finish".
Next choose Window > Android SDK Manager and make sure you have downloaded the available API packages & USB drivers.
That's it! We're done installing the SDK and our IDE!

Creating a new Android project

Download and extract this zip file: download here
Now you're ready to start creating your Android project. Choose File > New > Project... and a panel will come up. You will notice under the folder list, there's one that says "Android", expand it and choose "Android Project". Next choose "Create project from existing source" and browse to the extracted project folder you downloaded previously.

At "Select Build Target" panel choose "Next". Next choose a custom application and package name for your application (it's good idea to keep the "com" naming convention for the package like com.mygamename) and click "Finish".

Testing your game

First you'll need to export your game from GameMaker:HTML5. Inside the html5game folder rename your game's js file as "game.js"
Navigate to your Android project folder and you'll find a folder called "assets". Place the "html5game" folder inside and keep the index.html file that's in there.
Connect your Android device through USB cable. On your device, go to "Settings > Applications > Development > USB Debugging" and make sure it's checked.
If Eclipse throws errors, then your PATH variable might need the Android SDK folder defined ( Check here at the section "How to update your PATH" http://developer.and...installing.html ), you haven't downloaded the Google drivers or your device might not be supported for USB debugging. If all goes well, your application will start and the game will load on your connected Android device!

Exporting an Android executable

First navigate to the application directory and in there you will see a folder called "res". Inside that there are 3 subfolders that all have PNG files in them. You will need to change those in order for your apk to use a custom application icon. Change the icon look but don't change their dimensions.
From the Eclipse IDE you will need to Run the game once on your device (Run > Run Ctrl+F11) then you will need to navigate inside your project folder, inside the "bin" subfolder and find an .apk file. This is what you need to distribute to other people so they can play your game on their device, however you cannot distribute this apk through the Android Market without a keystore file. Android development costs one time fee around $25 and you can start making an account here: https://market.andro.../publish/signup

Have fun and consider waiting for GameMaker Studio if you need best performance and functionality for your game! :)

Edited by alexandervrs, 10 April 2012 - 09:51 PM.

  • 1

#2 AJArmstron

AJArmstron

    GMC Member

  • GMC Member
  • 159 posts
  • Version:GM:HTML5

Posted 24 February 2012 - 05:23 PM

Hi - I have been following your tutorial with much interest. However, I am stuck! An application is installed on my mobile, however, I just get a blank screen.

I would be grateful for any ideas?
  • 0

#3 alexandervrs

alexandervrs

    GMC Member

  • GMC Member
  • 659 posts
  • Version:GM:Studio

Posted 25 February 2012 - 06:54 PM

Care to share your device's specs?

Also make sure your game works correctly in desktop browsers first. The Eclipse IDE won't check for any errors in your HTML5 game.

Edited by alexandervrs, 25 February 2012 - 06:59 PM.

  • 0

#4 autukill

autukill

    GMC Member

  • GMC Member
  • 21 posts
  • Version:GM:Studio

Posted 26 February 2012 - 01:22 AM

OH,MY GOD ,it is very lengthy ;
Rexsee is an open-source and free framework for Android development:
WYSWYG website-like developement process and pure HTML5+CSS3+JavaScript.
1500+ Rexsee APIs enable your accesses to the device.
Amount of extensiones and enhancement to Android SDK.
Build-in all pages in APK or just leave those online, support both C/S and B/S.
Support all server-side languages such as Java,PHP,Python,.NET,etc.
Support all 3-party Javascript framework.
Support all languages by programmatically configuration.
http://www.rexsee.com/
:medieval:
  • 0

#5 autukill

autukill

    GMC Member

  • GMC Member
  • 21 posts
  • Version:GM:Studio

Posted 26 February 2012 - 02:32 AM

Posted Image
ok, I success through the use of [http://www.rexsee.com/ ],use window_set_fullscreen(full) or f10 to set_fullscreen
:biggrin:

Edited by autukill, 26 February 2012 - 06:23 AM.

  • 0

#6 alexandervrs

alexandervrs

    GMC Member

  • GMC Member
  • 659 posts
  • Version:GM:Studio

Posted 27 February 2012 - 08:01 PM

OH,MY GOD ,it is very lengthy


Well it is lengthy because it is detailed. After you've done the SDK & IDE setup once, then you only have to do the steps under "Creating a new Android project" every time you need a new apk project. It's not hard really. :)

Edited by alexandervrs, 27 February 2012 - 08:01 PM.

  • 0

#7 YellowAfterlife

YellowAfterlife

    GMC Member

  • Global Moderators
  • 3825 posts
  • Version:GM:Studio

Posted 27 February 2012 - 08:55 PM

Since I cannot test this now, a question - did you manage to get it working with multi-touch (for GameMaker seen only as virtual keys)?
I've been experimenting with PhoneGap earlier, however compiled apps remained single-touch, and were rather downed performance-wise, comparing to running same game in a browser.
  • 0

#8 alexandervrs

alexandervrs

    GMC Member

  • GMC Member
  • 659 posts
  • Version:GM:Studio

Posted 01 March 2012 - 08:03 PM

Since I cannot test this now, a question - did you manage to get it working with multi-touch (for GameMaker seen only as virtual keys)?
I've been experimenting with PhoneGap earlier, however compiled apps remained single-touch, and were rather downed performance-wise, comparing to running same game in a browser.


I believe the multitouch issue is a limitation of the WebView control itself. Also yes, PhoneGap apps kind of suffer from performance issues as well as they use WebView, and since the Javascript engines on mobile devices are still not very fast, especially on low-end Android devices.
  • 0

#9 sridharsundaram

sridharsundaram

    GMC Member

  • New Member
  • 1 posts
  • Version:GM:HTML5

Posted 13 March 2012 - 07:01 PM

Hi - I have been following your tutorial with much interest. However, I am stuck! An application is installed on my mobile, however, I just get a blank screen.

I would be grateful for any ideas?


I am having the same problem. On Android 2.2 and 2.3 browser it works but on Android 4 browser, the screen is blank.
However, the game seems to be working because when I press on the blank screen, the sounds corresponding to the game are audible.

Any ideas?
  • 0

#10 alexandervrs

alexandervrs

    GMC Member

  • GMC Member
  • 659 posts
  • Version:GM:Studio

Posted 13 March 2012 - 08:26 PM

I cannot test this as I don't have an Android 4 compatible device. Does your game work in the Android browser when you view it from the browser itself, could be a bug of the renderer of GM:HTML5. (online or/and executed from the SD card)

Edited by alexandervrs, 13 March 2012 - 08:27 PM.

  • 0

#11 RaynoVox

RaynoVox

    GMC Member

  • GMC Member
  • 97 posts
  • Version:GM:Studio

Posted 10 April 2012 - 08:23 PM

The game pauses as long as the screen is being touched, is there a way to make it continuous?
  • 0

#12 alexandervrs

alexandervrs

    GMC Member

  • GMC Member
  • 659 posts
  • Version:GM:Studio

Posted 10 April 2012 - 09:57 PM

The game pauses as long as the screen is being touched, is there a way to make it continuous?


Are you using any click events? You might also want to look into the YoYo multitouch functions if mouse click has issues. Haven't tried those yet, but they might work better.
  • 0

#13 RaynoVox

RaynoVox

    GMC Member

  • GMC Member
  • 97 posts
  • Version:GM:Studio

Posted 10 April 2012 - 10:25 PM

Oh wow look at that. Great tutorial btw, Im having a ton of fun with it now, just stay away from click events, other then that I havnt had any performance problems I just put in 100 moving objects to test. Question though, how do we change the splash for the load screen?

Edit, Im using Virtual keys, but on the browser everything works great, the movement buttons are 200 wide on the top bottom and right and left. All the way on the sides of the screen. But on the Android they are all smooshed together in the center of the screen... thoughts?

Edited by RaynoVox, 10 April 2012 - 11:29 PM.

  • 0

#14 Fireball16

Fireball16

    Indie Developer

  • GMC Member
  • 1015 posts
  • Version:GM:Studio

Posted 23 May 2012 - 08:37 PM

Ive tried doing this and am pretty sure ive got it all setup properly, however when i run it on my phone all that comes up is a blank grey screen :( help?
  • 0

#15 daz

daz

    GMC Member

  • GMC Member
  • 800 posts
  • Version:GM:Studio

Posted 23 May 2012 - 08:51 PM

Ive tried doing this and am pretty sure ive got it all setup properly, however when i run it on my phone all that comes up is a blank grey screen :( help?

What version of android are you running? GM's HTML5 games just don't work on some of the newer versions of android.
  • 0

#16 Fireball16

Fireball16

    Indie Developer

  • GMC Member
  • 1015 posts
  • Version:GM:Studio

Posted 23 May 2012 - 09:56 PM


Ive tried doing this and am pretty sure ive got it all setup properly, however when i run it on my phone all that comes up is a blank grey screen :( help?

What version of android are you running? GM's HTML5 games just don't work on some of the newer versions of android.

Android 2.2.1 the games run on a webpage but not via this method... What could I be doing wrong? (will post pictures if needed)
  • 0

#17 NakedPaulToast

NakedPaulToast

    GM Studio/Mac/Win

  • GMC Member
  • 8146 posts
  • Version:GM:Studio

Posted 23 May 2012 - 10:13 PM



Ive tried doing this and am pretty sure ive got it all setup properly, however when i run it on my phone all that comes up is a blank grey screen :( help?

What version of android are you running? GM's HTML5 games just don't work on some of the newer versions of android.

Android 2.2.1 the games run on a webpage but not via this method... What could I be doing wrong? (will post pictures if needed)

Can you download and run any of the games that others have published using this method?

If you can, then the problem is likely your set up.
If you can't, then the problem is likely your phone.

Edited by NakedPaulToast, 23 May 2012 - 10:14 PM.

  • 0

#18 Fireball16

Fireball16

    Indie Developer

  • GMC Member
  • 1015 posts
  • Version:GM:Studio

Posted 24 May 2012 - 06:12 AM




Ive tried doing this and am pretty sure ive got it all setup properly, however when i run it on my phone all that comes up is a blank grey screen :( help?

What version of android are you running? GM's HTML5 games just don't work on some of the newer versions of android.

Android 2.2.1 the games run on a webpage but not via this method... What could I be doing wrong? (will post pictures if needed)

Can you download and run any of the games that others have published using this method?

If you can, then the problem is likely your set up.
If you can't, then the problem is likely your phone.

Ok, what games have been produced using this method?
  • 0

#19 NakedPaulToast

NakedPaulToast

    GM Studio/Mac/Win

  • GMC Member
  • 8146 posts
  • Version:GM:Studio

Posted 24 May 2012 - 02:01 PM





Ive tried doing this and am pretty sure ive got it all setup properly, however when i run it on my phone all that comes up is a blank grey screen :( help?

What version of android are you running? GM's HTML5 games just don't work on some of the newer versions of android.

Android 2.2.1 the games run on a webpage but not via this method... What could I be doing wrong? (will post pictures if needed)

Can you download and run any of the games that others have published using this method?

If you can, then the problem is likely your set up.
If you can't, then the problem is likely your phone.

Ok, what games have been produced using this method?

I have no idea, ask the OP to publish one of his.

Personally I think this method is silly now that Studio is released. If you want to release an Android game publish it natively with Studio's Android export. Hack's like this are no substitute, you end up with poor performance and incompatibility issues.
  • 0

#20 alexandervrs

alexandervrs

    GMC Member

  • GMC Member
  • 659 posts
  • Version:GM:Studio

Posted 26 May 2012 - 02:42 PM

I have no idea, ask the OP to publish one of his.

Personally I think this method is silly now that Studio is released. If you want to release an Android game publish it natively with Studio's Android export. Hack's like this are no substitute, you end up with poor performance and incompatibility issues.

I agree, it's best to get the Android module. Remember that your game is dependent to your phone's internal browser/HTMLViewer so some features might not work and performance will be slower than a native apk made with the GM:S module. Usually this "embedding" method is enough for mobile HTML5 apps, but games have even more complex functionality.

You're welcome to play around with this method but I wouldn't recommend it for publishing anything on Google Play. I've made some small games with it prior GameMaker:Studio beta for fun but that's it. :)

Edited by alexandervrs, 26 May 2012 - 02:42 PM.

  • 0

#21 Gametester1000

Gametester1000

    GameTester1000

  • GMC Member
  • 149 posts
  • Version:GM:Studio

Posted 27 May 2012 - 02:37 AM

terrible this does not work get it off the forum, this topic is trash, :whistle:

Nice!!!!! thanks for the tutorial, :smile:
super slow android platform here i come!!!!! :whistle:

lol
  • 0

#22 Dom83

Dom83

    GMC Member

  • GMC Member
  • 138 posts

Posted 13 May 2013 - 01:00 AM

Download and extract this zip file: download here

link is dead :( please reup


  • 0

#23 NoahWL1

NoahWL1

    GMC Member

  • New Member
  • 13 posts
  • Version:GM:HTML5

Posted 27 July 2013 - 07:19 PM

I cannot seem to find my Android SDK file (The one that's supposed to be here: C:\Program Files\Android\android-sdk).  What should I do?  I would get GM Studio to export to Andriod, but can't afford it :(


  • 0

#24 NoahWL1

NoahWL1

    GMC Member

  • New Member
  • 13 posts
  • Version:GM:HTML5

Posted 27 July 2013 - 07:21 PM

And the link is dead.  Please fix it :(


  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users