HTML5 Game Tutorial: How to Use LimeJS

HTML5 is quickly becoming the “gold standard” of cross-platform gaming solutions. Just about every major platform (both desktop and mobile) supports games developed using HTML5 so it makes sense from a development standpoint because your games can easily be distributed across multiple channels for maximum profit potential and exposure.

If you’re unfamiliar with HTML5, it is a combination of HTML, CSS, and JavaScript. Unlike some of the other game development platforms such as GameSalad and Construct 2, LimeJS does require some programming experience (particularly in JavaScript) for success. If you are unfamiliar with using JavaScript to create games in HTML5, check out the Javascript for Beginners course.

There are quite a few reasons why LimeJS is a good framework choice when developing 2-D games. First, it’s free to use and there are no extra licenses to purchase when publishing your game to a specific platform. Of course, free doesn’t always mean better, but in this case it seems that LimeJS actually offers more features than many of the third-party, premium framework options.

It’s also very capable, LimeJS offers mouse and keyboard support, box 2-D and other frameworks for 2-D graphics drawing. It also supports HTML and Canvas rendering. More recently, the development team added support for WebGL to provide even more functionality. LimeJS offers support for basic drawing, images, sprites and other assets as well as object interactions through events and a host of other features that are simply not available on other frameworks (especially free ones).

LimeJS is built using the Closure Library; a JavaScript library built by Google. It has been used to create many of Google’s products including Gmail and Drive. Closure is an excellent framework and provides a very efficient runtime for your games built using the LimeJS environment.

Installing LimeJS

Unlike many of the other game development engines available for 2-D HTML5 games, LimeJS does take a little bit more effort to install. The first step is to download the project from the LimeJS development page. Installation instructions are provided at the bottom of the download page and include installing Python 3.X (although Python 2.6+ is listed as the minimum requirements for set up).

In most cases, it is easiest to run the command line option for installation which means you need to add the Python location to the Windows PATH environment variable.

Creating a New Project

After you have installed LimeJS successfully, you can create a new project by navigating to the LimeJS folder using the terminal and typing the following command:

Bin/lime.py create game_tutorial

This command creates a folder called “game_tutorial” in the LimeJS folder. That is where all of your game files will reside. Please remember that if you move this folder anywhere else, your game will not run until it has been compiled as it relies on libraries in the LimeJS folder during development.

Now that your game folders have been created, you can actually begin developing your HTML5 game using LimeJS. To get started, check out HTML5 Mobile Game Development for Beginners. This course explains in detail how to create actual 2-D games using this open-source platform.

Unique Features of Closure

There are a couple of things that make LimeJS unique in terms of game development environments. For instance, one of Closure’s most notable features is its unique name spacing system.

Unlike some other code libraries, Closure code is separated between files and each file can request other files during execution. While you are developing using Closure in LimeJS, you only have to include the base.js file. This file gives you the functions goog.provide (namespace) and goog.require (namespace).

The Provide function declares that all code in the file can be requested. The Require function requests another file with the same name. Closure uses a built-in deps.js file to map namespaces to specific file paths. In other words, if you add new namespaces you need to run the following code to update the deps.js file so that your new file can be accessed:

Python bin/lime.py update

Although it is not required that you use the Provide function for your own projects, it is highly recommended because it provides more reliable results during compiling.

As you can see, creating HTML5 games using LimeJS is slightly more advanced and relies on JavaScript extensively. It also helps if you have a basic understanding of Python. The Python for Beginners course is an excellent resource.

If you are new to programming, you might consider using a different HTML5 engine such as GameSalad. This engine provides a drag-and-drop interface that eliminates the need for programming. You can learn more about developing with GameSalad in the Introduction to Mobile Games Development course.

Whether you choose to use LimeJS or a more graphically oriented game development environment, HTML5 is the future of cross-platform gaming. Just about every new game development engine released uses HTML5 because it is supported by so many platforms and is a very efficient way to create 2-D games quickly and easily.

The good news is that LimeJS is completely free to use and you can have it installed in less than 20 minutes meaning that it’s definitely worth trying if you are at all comfortable using JavaScript. The fact that it is based on the Closure Library (the same library that powers Gmail and Drive) means that you can expect high performance and low overhead when creating games using LimeJS.

There is also a very strong development community that supports LimeJS. Most of these people will be more than happy to answer any questions you have along the way and help you create fun and engaging 2-D games for just about any platform you want.