Unified game engine demos for flash, HTML5 (and more)

In my previous post, I outlined the benefits of a platform agnostic language and game engine. Here are some demos, showing basic sprite movement via scripts, and mouse/touch+gesture (iOS only sorry) input on a parallax enabled view:

  1. Flash
  2. Html5 Canvas
  3. Html5 Css

There is no change in the game code in these demos. The only differences are compiler switches, and the HTML page that embeds each of them. I’m going to repeat for emphasis: there is no change in the code for device input (or anything else). The mouse pans the parallax scene identically on flash, HTML5 canvas, and CSS transformed div and image elements.

Where needed, individual game components use platform specific methods that are aware of the target platform, but these are well isolated and are kept as low level as possible.

As you can see, CSS transforms are pretty performant, and definitely better on iOs devices. Touch screen phones and ipods etc have pretty good screens, meaning the canvas element has to be pretty large to fit the entire screen, which then runs like a dog. By using CSS transforms, you can use static images or animate using mini canvas elements, and avoid having to redraw large swathes of the screen.

Other projects aimed at cross platform rendering copy the flash API for javascript (Jeash) and C++ (NME). I think this is too much work and inflexible. If you are going to make games, use a game engine, and make that platform agnostic. Reimplementing the flash API is largely unnecessary and means that you have to write a lot of code to do a little, and you’ll also end up fitting all the resource loading, device input etc etc into the flash way, with the big assumption that it’s the best way.

If another platform came along tomorrow, the only classes to write anew would be a resource loading class, raw device input, and raw rendering (and sound). The higher level stuff is all handled by haxe itself then the game engine on top of that. It means as a developer, you are not chained to a particular platform, and can move to other platforms with relative ease.

Were these examples actual playable games, they are deployable almost anywhere: desktop computers/laptops (flash, c++), android phones (flash), iOS devices (HTML5 stuff). Did I mention Haxe compiles to multiple server-side languages as well?

It seems that the paradigm of write once/run anwhere is served better by a platform agnostic language, rather than a platform needs to be developed for all platforms.

The source for the engine and these demos are available here.

If I can find a javascript frames-per-second counter, I’ll add them to the demos.

This entry was posted in Games, HaXe, Uncategorized and tagged , , . Bookmark the permalink.

9 Responses to Unified game engine demos for flash, HTML5 (and more)

  1. Hi,

    Looking great. Have you tried setting overflow:hidden for your CSS test to get the cropping/masking working for that ? Should work fine as far as I can tell.

  2. Philippe says:

    Looking good.

    Just add { overflow: hidden; position: relative; } to the css container and it’s perfect.

    Here’s mrdoob’s Javascript FPS monitor:
    https://github.com/mrdoob/stats.js

    And Flash and Haxe versions:
    https://github.com/mrdoob/Hi-ReS-Stats

  3. keef says:

    I tried it on firefox 4 beta 7
    flash worked
    the canvas demo had those faces outside of the box,
    the CSS demo didnt work

    • Dion says:

      The masking issue for the css example has been fixed (at least on Safari and Chrome, I haven’t tried firefox beta 4).  There should be no way for the faces to show outside the canvas example though, that’s like seeing the faces drawn outside the swf container for the flash example.

  4. Dion says:

    The demos are open sourced at https://github.com/dionjwa/Hydrax

  5. Pingback: Pushbutton Engine and Haxe: a natural fit. | Dion Amago

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>