Introducing the Pulse Developer Preview

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:

// Setup the game in the ready callback.  The ready callback
// 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.

Leave a Reply

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