HTML5 is pretty much the web 3.0 standard these days, and there are plenty of neat neat HTML5 tutorials out there to prove it. In fact, there are even a few game engines out there that are built for HTML5. A recent development in this area was the release of the Pulse developer preview. Here is a short demo of what is possible with pulse:
Pulse is a game engine built in Javascript and utilizes HTML5 canvases to render content. It offers a lot of neat features, including:
- Sprites
- Sprite sheet animations
- Bitmap & native fonts
- Keyboard and mouse events
- Drag & drop
- Layers
- Scenes
The Pulse website actually features a nice little megaman platformer demo that shows that the engine is more than capable of rendering high frame rates.
I could talk about Pulse all night, but let’s skip the talking and get to a small code example:
// will be fired when the DOM is loaded – a lot like
// jQuery’s ready callback.
pulse.ready(function() {
// Create a pulse engine and tell it what element(div)
// will contain the rendered content. The element can
// either be the id or the actual DOM object itself.
var engine = new pulse.Engine({ gameWindow: "myElement" });
// Create a scene. Each game has a minimum of one scene.
// Names are optional, but are useful when debugging or
// retrieving node by name at a later time.
var scene = new pulse.Scene({name: ‘cybertron’});
// Add the scene to the engine and activate it.
engine.scenes.addScene(scene);
engine.scenes.activateScene(scene);
// Create a layer. Each game has a minimum of one layer.
var world = new pulse.Layer({name: ‘layer’, x : 320, y : 240});
// Add the layer to the scene.
scene.addLayer(world);
// Create a sprite with a diamond image.
var diamond = new pulse.Sprite({ src: ‘img/diamond.png’ });
diamond.position = {x: 320, y: 240};
// Add the sprite to the layer.
world.addNode(diamond);
// Tell the engine to go and specify the delay between
// frames (33 milliseconds) and an optional callback
// that will be invoked on each update.
engine.go(33, function (sceneManager) {
// Rotate the diamond by 1/2 degree.
diamond.rotation += 0.5;
});
});
The following will produce a spinning diamond which looks a little bit like:
As you can see it is extremely simple to use, and I would suggest heading over to the website, signing up, and checking out the super sweet megaman demo.