“I always say, 'This will be my last 'Metal Gear.'” Hideo Kojima

HOWTO Libgdx, GWT SuperDev and IntelliJ IDEA Community Edition

Hi!

Days ago I was searching for a cross-platform game engine and I came across one of the most interesting pieces of software out there: Libgdx.

After some reading and testing I found out that it’s tied to Eclipse, an IDE I once loved. But, after using Android Studio, I switched to IntelliJ IDEA which is by far way better than Eclipse in terms of performance. But I’m using Community Edition (I’m poor), and it’s slightly limited. For example, it doesn’t support GWT natively, which is part of the requisites of libgdx. So, I had some trouble setting up projects on my new IDE. There are great tutorials on libgdx wiki but they (still) don’t cover HTML5 module. Have a look at that wiki anyway, it’s very useful.

As a result of reading this wiki and other tutorials I decided to write this howto covering a setup that works for me. It’s a mixture of other tutorials. I won’t cover the iOS part as I don’t have any way to test it. Contact me if you want to add info about this.

Pre-requisites:

  • GWT SDK
  • Android SDK
  • JDK <=1.6
  • You want to use IDEA :)

I’m using IDEA. Instructions please.

First of all, we’ll take advantage of Aurélien Ribon’s Project Setup and IDEA support of Eclipse project import. Download the jar file and execute it. I won’t cover here how to use it because it is very simple and there are enough information on the web.

Once finished, you’ll have an Eclipse-compatible project. Open IDEA and choose “Import project”. Select your recently created folder and tell the wizard you want to import using “Eclipse” (not Maven, not any other). Also, don’t forget to configure your JDK when asked.

The only option to take account of in the wizard is the “Link created IntelliJ IDEA modules to Eclipse project files”. Activate it if you are collaborating with people that use Eclipse or if you want to use the two IDEs.

OK. Project imported. Now what?

Now you’ll have five modules, as expected (a common one and versions for desktop, Android, iOS and HTML5). Open “Project Structure”clicking on this button:

Check that every module has a JDK configured, and that Android module has the Android SDK (instead of JDK). If not, use the “New” button to setup everything.

Libraries should be OK, html and ios modules may appear underlined in red but forget about it (it’s because of pointing to Eclipse dependencies). Modules will build without issues. Don’t close the “Project Structure” window yet.

First, to enable GWT SuperDev mode, you have to copy some libraries to your html module. Go to your GWT SDK folder and copy gwt-dev, gwt-user and gwt- codeserver jars to war/WEB-INF/lib folder inside html module. It must look like this:

Now, go back to “Project Structure” and add those three jars to your html module dependencies.

Take note that you can proceed also as noted here and setup folders instead of separate jars. But you will have problems when importing from Eclipse.

Nice. Now, how do I run all this?

OK. Go to “Run -> Edit configurations”. We need to add two “Applications”, one for desktop and one for html. As you’ll see, Android is already set up.

For desktop’s working directory we will follow libgdx wiki advice and use the Android module assets folder. HTML will use assets folder through gwt.xml file.

  • Desktop setup:
    • Main class: com.foo.game.Main
    • Working directory: ~/gameproject/gameproject-android/assets
    • Use classpath of module: gameproject-desktop
  • HTML setup(taken from this blog post, check it for further information):
    • Main class: com.google.gwt.dev.codeserver.CodeServer
    • Program arguments: -workDir build/ -src src/ -src war/WEB-INF/lib -src ../gameproject/src -src ../gameproject/libs com.foo.game.GwtDefinition
    • Working directory: ~/gameproject/gameproject-html
    • Use classpath of module: gameproject-html
    • Add to your .gwt.xml this:
<add-linker name="xsiframe"/>
<set-configuration-property name='xsiframe.failIfScriptTag' value='FALSE'/>
<set-configuration-property name="devModeRedirectEnabled" value="true"/>
    • Download and copy SoundManager2 js files here and here. They go into war/ directory, alongside index.html.
    • Start your index.html like this:
<!doctype html>
<html>
    <script src="soundmanager2-setup.js"></script>
    <script src="soundmanager2-jsmin.js"></script>

Everything else should be correctly configurated. If IDEA does not recognize the CodeServer class (it marks it on red), check if your module dependencies are correct.

How do I know if everything is OK?

If you have used Ribon’s tool and now you run any of the modules , it will build and after some time you will see the following screen:

I don’t see anything when I run my HTML module :S

I don’t understand GWT well. But GWT SuperDev mode is slightly different from classic Dev mode. You have to control it from IDEA (start and stop included). Check IDEA’s “Run” window for possible errors and also for this:

If you see this, your module has just finished compiling. Go to http:// localhost:9876 and follow instructions. For more information on GWT SuperDev mode check again this blog post. It contains information on how to use it and it’s cool features (like on-the-fly debugging!). You can also use Maven to automatize this process, libgdx has support for it, check libgdx wiki.

The CodeServer will run on the background while you change your code, you don’t have to stop it. It will ask you for compile on-the-fly when you access your module through your browser.

UPDATE: I forgot to say that, as we are using the Community Edition, we are forced to copy files to our war folder (at least I don't know how to do this). Community Edition does not support GWT nor web facets. This is the reason for the "-workDir build/" argument to be used. Once you have started your CodeServer, go to build folder and copy the contents of the folder build/ com.foo.gameproject/compile-1/war folder to your project's war/ folder. Now your webserver will be able to deploy GWT modules correctly.

I’m having trouble! Help!

Don’t worry. Leave a comment or contact me : )

Happy coding!

Jordi.

See also: