Simple 2D platformer engine (SFML2+HTML5)

Kaala

Kaala was the name given to the little engine.

The above picture says a thousand words along with the title of this post, of course. To hear a million words, go try out the HTML5 demo yourself right away in your browser. Use WASD for movement.

I am sure having fun trying to provide some helpfulness this LD around! So far, I’ve written about how I set up SFML 2.0 for cross-compilation and made a little rectangle collision demo in SFML 2.0 for you to use. I have now spent the evening fixing some bugs in my old, simple 2D platformer engine that I wrote in June last year using SFML 2.0, which I later converted to HTML5 using Canvas some time in September or so the same year. I transferred the bug fixes to that version as well and then I packaged into a grand present the following:

  • Four subfolders, labelled MacLinuxWindows and HTML5.
  • I compiled the SFML 2.0 version for OS X, Linux and Windows alike and provided those executables in subfolders labelled DEMO.
  • I included the source code, of course. It is the same for OS X, Linux and Windows (C++) and different for HTML5 (JavaScript).

The code is messy at points and very uncommented, but at least the C++ version has a good file hierarchy of subfolders and classes. The JavaScript version has everything in a single file but at least still uses “classes” as JS provides them.

The grand .zip archive containing all four versions can be downloaded here.

If you do want to use it, check the code out and try to play with it. I won’t explain it in detail, but I can give you some clues.

  • WASD movement in all versions.
  • The HTML5 version uses images for graphics. The C++ versions only use SFML to draw rectangles.
  • The Character as well as the Block class both derive from Collidable which derives from Object.
  • Character has set gravity enabled in the constructor through a call to setGravityEnabled()Block has not.
  • Collidables are assigned “masks” as hitboxes. The character’s mask’s size is taken from a loaded .png which isn’t actually used for drawing in itself – either modify this code to set a hardcoded value, or modify the code to use the image, but if you remove the image from the project, it won’t load, the size won’t be retrieved, and the character’s hitbox will be 0x0 in size, making it fall through the ground and be invisible.
  • One can’t hold the jump button (W) down to make the character jump again as soon as it lands. This is manually programmed, and can easily be reverted by going into Character‘s update() function and modify the code there. I commented instructions into the file.
  • There is a simple image loader for the C++ version implemented. You can see the loading of images in Game and the usage of such an asset in Character. I don’t remember if there were actually problems drawing those images, but I wouldn’t think so – try it out yourself.