Getting Start with Gamalto

Gamalto is a free, lightweight and customizable video game framework which provide essential tools to get start with video game development, targeting desktop and mobile Web browsers, with no external dependencies. To get start with it, simply follow the easy steps explain in this article.

Monday, June 23, 2014 - 16:06

Gamalto is an open source framework and so, it is freely and easily available to everyone wanting to get start with video game development. You can use it at no cost for personal or commercial project.

Downloading Gamalto

Getting into Gamalto is quite easy. The first thing is to download the source going to the GitHub project page. GitHub is a free source code repository for open source projects, you will find a bunch of really cool projects on this site from the simplest JavaScript library to the full massively multiplayer online game!

Once you are on the project page, simply click on the "Download ZIP" button on the bottom of the right column. This will download the latest "master branch" version of the framework containing all the required files to get start with Gamalto. If you are a GitHub user you can also select to clone the project in your desktop by clicking the appropriate button.

When the file is done downloading, unpack the archive and copy the full content of the "source" folder in a folder of your game project and add the following line to your startup page.

<script src="path/to/gamalto.debug.js"></script>

You'll notice that there are quite a few files in the source folder but there is only one script file to be call in you HTML code.

Gamalto is still under development, there is currently only on branch in this GitHub project. Later, after the first version was released, you'll find a list of all the current and previous releases of the framework by clicking the "branch ..." button on the top and selecting the "tags" small tab.

Using the CDN

If you prefer using a CDN, Gamalto can be called directly from code.gamalto.com.

<!-- Debug version -->
<script src="http://code.gamalto.com/gamalto-debug-latest.min.js"></script>

<!-- Development version -->
<script src="http://code.gamalto.com/gamalto-devel.full.js"></script>

There are currently two flavors of Gamalto you can use in the CDN. One minified and lightweight version which include all the debug traces present in the original source code, a good way to pre-test a final version of your game, and another one which is the exact copy of the full source code available on GitHub in a human readable format to ease debugging.

Your First Program

As a very first test, we will simply display some squares on the screen. Let's start with a bootstrap code you can use in all your project.

<!DOCTYPE html>
<html>
    <head>
        <title>Your Game Name</title>

        <!-- Include the framework -->
        <script src="path/to/gamalto.debug.js"></script>

        <!-- Game code -->
        <script src="path/to/game.js"></script>

        <!-- Startup code -->
        <script>

            Gamalto.init(function() {
                new Game().run();
            });

        </script>
    </head>
    <body></body>
</html>

The Gamalto.init() method call is mandatory. This is the first thing you must call in your program in order for the framework to work properly. This method takes a function as parameter which will be called once the initialization is done. In this example we are calling the run() method of a Game object. Here is the code of this object from the game.js file.

/* Constructor */
var Game = function() {
}

/* Startup code */
Game.prototype.run = function() {
    /* Create the game screen */
    var scr = new G.Screen(320, 240);

    /* Set it as the active screen */
    scr.setActive();

    /* Let's draw two squares */
    scr.renderer.fillRect(new G.Rect(0, 0, 32, 32), new G.Color(255, 0, 0));
    scr.renderer.fillRect(new G.Rect(64, 64, 32, 32), new G.Color(0, 255, 0));

    /* Refresh the screen */
    scr.refresh();
};

We are trying to separate as much as possible JavaScript from the HTML code. A good practice is to split your code into multiple files, on for every single object you are going to create and use in your code to keep the game project clear and easily readable.

Compiling your Own Version

As stated earlier, Gamalto is modular. This means that you can select the code modules you need and compile your own version. This step is usually done at the end of your project. When your game is done and you know exactly which modules you need.

To do so, open the gamalto.debug.js file and start removing the useless files. Then try your game with this new file to see if all dependencies are resolved. There are two levels of dependency. One strict, where a module is required by another in order to work, and one lazy which will limit the functions of a given module. Both will produce traces, respectively errors and warnings, in the browser debugging console if a dependency is missing.

If everything is working good, you can edit the compile/config.json file and remove the same files from it to build the minified version of the framework using whether the .bat file on Windows or the .sh file on Unix-based systems. Currently, Gamalto is using the plovr closure compiler but I plan to move to a more common solution using Google Closure Compiler and/or Grunt to ease deployment.

Contributing

To conclude this quick introduction to the Gamalto framework, remember: Gamalto is "your javascript video games framework", so if you have a problem, found a bug or a have feature request, use the links from the home page and don't forget to follow us on Twitter!

Related Files

AttachmentSize
GettingStartWithGamalto.zip1.89 KB

Last updated on

Monday, June 23, 2014 - 19:08
Chrilith's picture
Chrilith