Wednesday, 30 January 2013

Voxel Invaders ported to javascript using emscripten

We just released a javascript version of our game voxel invaders that can run on any browser with webgl support.

Turns out the port was pretty easy, and I didn't have to write a single line of javascript.

So how did we do it? Since our game was written entirely in C, we used emscripten to compile our source code directly to JavaScript. For those who don't know, emscripten is an LLVM backend that generates JavaScript code, so if a project is written in a language that can be compiled by clang, then it is in theory possible to make it run on a browser.

Of course there are a few restrictions, and in our cases we had to make some changes to the code before we could have it running properly on a browser:

  • Emscripten has no support for client side arrays in OpenGL. Even though it has a pretty good support for OpenGL ES2 via webgl, using client side arrays is not supported. This is not really a problem: we just used array buffer everywhere we had client side arrays.

  • Some standard C functions are missing. The one that really hit me was strsep that we used in the levels parsing code. In that case I just modified the code to use strtok_r instead. As a bonus, it turns out the code using strtok_r was actually cleaner than the original one.

  • Sound. When doing a portable game, sound is probably the most complicated part. For the graphics, using Opengl ES2 pretty much works on every possible platforms, but for the sounds, there is still no clear standard library that can be used everywhere. So, as we already had an openAL and an OpenSL ES backends for the desktop and android versions, we created an other sound backend using SDL_mixer for the javascript version. [By the way, I always find it funny that OpenSL ES -that has been done by the same company behind OpenGL- is such a complicated mess compared to OpenAL].

All in all, it wasn't that hard to port the game to JavaScript. The performances are probably not as good as it would have been if we had rewritten the game manually in javascript, but the amount of work done was negligible.

Sunday, 7 October 2012

Video Game in C: using X macros to define game data

As my brother and I recently released our last video game voxel invaders on android and symbian, I though I would share some of the technical details about it. For my the first post I will talk about a quite useful, although rarely used, C trick known as "X macros", and how we can use it to simplify game code.

The code is written in plain C, and the original design was very simple: all the elements of the game are stored in a structure (called obj_t in the code) that looks like that:

struct obj_t { 
    int type;
    float pos[3];
    float speed[3];
    sprite_t *sprite;
    // A lot of other attributes follow...
};

The important attribute of the structure is the first one: int type. This value allows us to differentiate all the kinds of objects in the game (in C++ I would have probably used subclassing instead). We can see it as a pointer to the object class, except that it is not a real pointer but an index on an array of a structure obj_info_t that contains all the information about a type of object (the game equivalent of a C++ class).

file objects.h:

struct obj_info_t {
   const char *sprite_file;
   float initial_speed[3];
   void (*on_hit)();
   // Lot of other attributes...
};

enum {
   PLAYER,
   ENEMY_A,
   ENEMY_B,
   // And so on...
   OBJ_COUNT
};

file objects.c:

obj_info_t obj_infos[] = {
    // PLAYER
    {
        "data/img1.png",  // sprite_file
        {0, 1, 0},        // initial speed
        NULL             // on hit
    },
    // ENEMY_A
    {
        "data/img2.png",  // sprite_file
        {1, 2, 2},        // initial speed
        enemy_a_on_hit    // on hit
    },
    // And so on..
};

By the way, this kind of design was mostly inspired by the code of the original doom game by John Carmack.

The first improvement we can do is to realize that since we are using C98, we can make the array declaration look better using designated initializers:

file objects.c:

obj_info_t obj_infos[] = {
    [PLAYER] = {
        .sprite_file = "data/img1.png",
        .initial_speed = {0, 1, 0},
    },
    [ENEMY_A] = {
        .sprite_file = "data/img2.png",
        .initial_speed = {1, 2, 2},
        .on_hit = enemy_a_on_hit,
    },
    // And so on.
};

See how the code already looks nice and simple. Although this is how our code looked like for a while, at some point we started to get annoyed by a problem with this pattern. The problem is that every time we define a new enemy, we need to modify too files: the file containing the object types enum, and the file containing the object infos array. Beside, since there is no way to separate the array or the enum into several files, those two files got bigger and bigger. This might not seem too bad, but really it is, specially when you have to find the definition of a given object in the thousand of lines of code containing the obj_infos array.

As I mentioned, the original doom engine also used this kind of pattern, and I think the way they overcame this problem was to use a special tool that would automatically generate the C code for both the enum and the array.

In our case I though writing a C generator tool would be overkill. That is where I realized that there is a simple way to have the C preprocessor generates those two parts (enum and global array) for us. Later when I searched for occurrences of this pattern online I found out this is known as "X macros", there is a very comprehensive article about it from Randy Meyers.

The idea behind C macros is to use a C preprocessor macro that, depending on the context, will expand to either the enum part, either the array initializer part.

In our simple case, it would be something like this:

file object_defs.h:

OBJ(PLAYER,
    .sprite_file = "data/img1.png",
    .initial_speed = {0, 1, -},
)

OBJ(ENEMY_A,
    .sprite_file = "data/img2/png",
    .initial_speed = {1, 2, 2},
    .on_hit = enemy_a_on_hit,
)

file object.h:

#define OBJ(name, ...) name,

enum {
    #include "object_defs.h"
}

file objects.c:

#define OBJ(name, ...) [name] = {__VA_ARGS__},

obj_info_t obj_infos[] = {
    #include "object_defs.h"
}

And so, thanks to this trick, we just need to modify the objects_def.h file to add or remove an object type. Both our enum and our global array will be automatically updated by the preprocessor at compile time. As a bonus, this makes it easy to split the object definitions into several files. For that we just need to #include all the needed files instead of just object_defs.h.

Sunday, 23 September 2012

Voxel Invaders : space invader + 3d voxels



This week we (noctua software) released our new video game for android phone: voxel invaders.
This is the sequel of our previous game Retrocosmos, and it follows the same principle (making a fun space invader game for touch screen devices).  Only this time we used 3d voxels (the equivalent of pixels in 3d) for all the graphics.

Voxels based games are starting to appear more and more and are particularly interesting for independent developers because it is much easier to generate a voxel model than a traditional 3d model.

Anyway back to the game:  this has been written almost entirely in C using android ndk, with just a few java code for some of the stuffs the ndk does not allow to do easily (like controlling the device vibrator). I wrote the engine from scratch, using opengl es 2 for the rendering, and some interesting C hacks using macro for the enemies behaviour state machines (maybe I'll do an other post on that an other time).  The good thing about that is that if the game is a success it will be quite easy to port it to other platforms like iOS or symbian.

From a marketing point of view, we did two versions of the game: a free demo and a full paid version.  We have little experience of this kind of approach so I might do a follow up an other time about how much money we made from that.

Here is a video of the gameplay:



Friday, 23 September 2011

Ascii art Tetris game

I was bored so I wrote this little online tetris game in ascii art.

I hope someone will have fun playing it.

Sunday, 10 July 2011

Voxpaint, an opensource 3d voxels painter

This is the first release of a small 3D voxels painter I had been working on recently.

For the moment it cannot do much, but I am planning to use to create some video game graphics.

The code is hosted on launchpad: https://launchpad.net/voxpaint

Check out the videos:




Tuesday, 28 June 2011

Compiling Qt mobility for Simulator on Windows

These days I am working on a Symbian application using Qt 4.7.3 and Qt mobility 1.2.0.

Since the last version of Qt SDK doesn't ship Qt mobility 1.2.0 for the simulator, I had to recompile it myself. Since it took me some time, I write a step by step how to to help people who are trying to do the same thing.

The only real problem is that the SDK for windows doesn't include all the headers files needed to compile the sources. So I copied them from my linux installation of the SDK.
  1. Make sure you have the latest version of Qt SDK. As I write it it is the version 1.1.2, including Qt 4.7.3 and Qt mobility 1.1.3. In my case the SDK is installed into c:\QtSDK.
  2. Get the sources of qt mobility for the simulator from its git repository. Note that it is not the same repository as for Symbian or desktop version.
  3. Two directories are missing in the the simulator source on windows:
    • c:\QtSDK\Simulator\Qt\mingw\include\private
    • c:\QtSDK\Simulator\Qt\mingw\include\QtGui\private
    So what I did is copied those directory from my linux partition where Qt SDK was installed (from the directory ./QtSDK/Simulator/Qt/gcc/include).
  4. In a windows console, set up the PATH to include all the needed tools. You need qmake from the Simulator SDK, perl, and makew32-make:

    set PATH=c:\QtSDK\Simulator\Qt\mingw\bin;%PATH%
    set PATH=c:\QtSDK\mingw\bin;%PATH%
    set PATH=c:\QtSDK\Symbian\tools\perl\bin\;%PATH%

  5. Run configure. In my case I didn't need the messaging module and since it requires dependencies I removed it from the list of modules using the -modules argument of the command:

    configure -modules "bearer contacts gallery location publishsubscribe multimedia systeminfo serviceframework sensors versit organizer feedback connectivity"

  6. Run the make command:

    mingw32-make

  7. Finally install everything:

    mingw32-make install
After this I was able to compile and run applications using qt mobility 1.2.0 on the simulator.

Monday, 2 May 2011

Gedit plugin to emulate emacs alt-q

Here is a small gedit plugin for all the people who are like me on an emacs rehab.

If there is one emacs feature I really miss when using gedit -which is by the way a great text editor- this is the alt-q command (fill-paragraph), that automatically reformats the current paragraph according to the margin width.