Porting Libgdx Applications to HTML5

Porting Libgdx Applications to HTML5

MAR 13TH, 2012 | COMMENTS

Yet another reason to love libgdx, you can now port your libgdx applications straight to HTML5 (official post)! If your app doesn’t use box2d or any fancy library, you can easily port it to HTML5 with the gwt-backend for libgdx. List of supported classes.

Here is a step-by-step guide to porting your libgdx apps to HTML5 and being awesome.

Setup your environment

• Checkout the libgdx source code from the svn
  I recommend getting the whole source, but you only really need gdx, gdx-backends-gwt and the superjumper demo.

• Install the Google plugin for eclipse

• Import the libgdx projects(checked out from svn) into your workspace in eclipse.

Create your project

• In eclipse, select “Create new Web Application Project”.

• Give the project name and package, uncheck “Use Google App Engine” and “Generate sample code” and click finish.

• Open project properties -> java build path. In the projects tab, add gdx, gdx-backends-gwt and your libgdx project.

Time to code

• In your libgdx code, create a file YourGame.gwt.xml.
  Here’s the file for the SuperJumer example In the example below, the xml file is in com.badlogic package, and the source path is relative to this package (this effectively tells gwt to look in com.badlogic.superjumper package).

SuperJumper.gwt.xml (SuperJumper.gwt.xml) download

1 2 3 4 5 6 7

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit trunk//EN" "http://google-web-toolkit.googlecode.com/svn/trunk/distro-source/core/src/gwt-module.dtd"> <module> <source path="superjumper"> <exclude name="**/SuperJumperDesktop.java"/> </source> </module>

• Open your newly created project. In the base package, create a file named YourGameGwt.gwt.xml
  Here’s the file for SuperJumper. The inherits tags tell gwt the places to look for code, and the entry-point tag tell gwt the starting point of the application. Change the first inherits tag to point to the xml file created in the previous step. We will create the entry point class in the next step.

SuperJumperGwt.gwt.xml (SuperJumperGwt.gwt.xml) download

1 2 3 4 5 6 7

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit trunk//EN" "http://google-web-toolkit.googlecode.com/svn/trunk/distro-source/core/src/gwt-module.dtd"> <module> <inherits name='com.badlogic.gdx.backends.gdx_backends_gwt' /> <inherits name='com.badlogicgames.SuperJumper' /> <entry-point class='com.badlogicgames.superjumper.client.SuperJumperGwt' /> </module>

• Create a new class named YourGameGwt.java (preferrably in the package your.base.package.client)
  Here’s this class for the SuperJumper example

SuperJumperGwt.java (SuperJumperGwt.java) download

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

package com.badlogicgames.superjumper.client; import com.badlogic.gdx.ApplicationListener; import com.badlogic.gdx.backends.gwt.GwtApplication; import com.badlogic.gdx.backends.gwt.GwtApplicationConfiguration; import com.badlogicgames.superjumper.SuperJumper; public class SuperJumperGwt extends GwtApplication { @Override public GwtApplicationConfiguration getConfig () { GwtApplicationConfiguration config = new GwtApplicationConfiguration(320, 480); return config; } @Override public ApplicationListener getApplicationListener () { return new SuperJumper(); } }

• Right click on your project in the package explorer, select “Google” -> “GWT Compile”. If everything goes right, you console should output something like “Compiling 6 permutations”, and create a folder with your package name in the “war” folder.

• Copy your data folder to “war”.

• Create a file called “assets.txt” in the “war” folder, which loads all your assets.
  Here’s the assets file for the SuperJumper example,

assets.txt (assets.txt) download

1 2 3 4 5 6 7 8 9 10

i:data/background.png t:data/font.fnt i:data/font.png i:data/help.png i:data/help1.png i:data/help2.png i:data/help3.png i:data/help4.png i:data/help5.png i:data/items.png

Note that i represents image, and t represents any other data.

• Lastly, create an html file in the “war” folder (you can name it anything).
  Here’s the file for the SuperJumper example, replace the src tag for script with the script generated for you by gwt.

superjumper.html (superjumper.html) download

1 2 3 4 5 6 7 8 9

<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" language="javascript" src="com.badlogicgames.superjumper.SuperJumperGwt/com.badlogicgames.superjumper.SuperJumperGwt.nocache.js"></script> </head> <body> </body> </html>

• Run your project, it should start a webserver and give you a url. Open the url in a browser, and voila! your app is now running in the browser with webgl!
  If your app seems a little slow, fear not. Its the server thats slow.

• Copy the war folder to your webserver, and share your app with the world!

Thats all you need to port your apps to HTML5. Its really that simple!

Do let me know if I missed anything.

Happy coding!
      http://moldedbits.com/blog/2012/03/13/porting-libgdx-applications-to-html5/