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:
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.
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.
Thanks for the tip. It needed “position: relative” as well, then the overflow masking works as expected.
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
Awesome, thanks for the links.
Yes, it needed both overflow: hidden; AND position: relative, my mistake was to only try the first without the second.
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
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.
The demos are open sourced at https://github.com/dionjwa/Hydrax
Pingback: Pushbutton Engine and Haxe: a natural fit. | Dion Amago