DailyJS

PhantomJS, load.js, Phantom Limb, OpenOdyssey

28 Jan 2011 | By Alex Young | Tags games webkit server dependencies loading

PhantomJS

PhantomJS by Ariya Hidayat is a WebKit-based JavaScript tool for exploiting the power of WebKit. Let’s say you want to generate a PNG from an SVG file:

if (phantom.state.length === 0) {
  if (phantom.args.length !== 2) {
    console.log('Usage: rasterize.js URL filename');
    phantom.exit();
  } else {
    var address = phantom.args[0];
    phantom.state = 'rasterize';
    phantom.viewportSize = { width: 600, height: 600 };
    phantom.open(address);
  }
} else {
  var output = phantom.args[1];
  phantom.sleep(200);
  phantom.render(output);
  phantom.exit();
}

This will produce a PNG when run through phantomjs on the command line:

phantomjs rasterize.js http://ariya.github.com/svg/tiger.svg tiger.png

This example is from the PhantomJS QuickStart.

What really interests me about this project is generating nice PDFs from HTML. WebKit has been ported to quite a few platforms, and PhantomJS should run on Linux, Windows, and Mac OS X, so it could be a great tool to have on your server.

load.js

load.js by Chris O’Hara is a small lazy-loading and dependency management library:

load('jquery.js').then('jquery-ui.js', 'jquery-ui-theme.js')
  .then('myscript.js')
  .thenRun(function () {
    alert('Loaded.');
  });

load('underscore.js');

I like the chained API, which just so happens to be created with chain.js by the same author.

Phantom Limb

Phantom Limb by Brian Carstensen makes desktop browsers to simulate touchscreen device events:

A mousedown fires a touchstart. A mousemove fires a touchmove if the mouse is down, and a mouseup fires a touchend. These custom events are also assigned a touches array containing a reference to the event, just like a real touch event in a mobile browser.

Brian pointed out that this makes debugging mobile apps easier, because you’re not limited to Mobile Safari’s limited debugging tools. There’s also a bookmarklet for activating Phantom Limb, which means you could use it on any page.

WebGL Model Viewer

Christopher Chedeau sent us a link to jDataView, a library for reading binary files in browsers. His blog post, Javascript – jDataView: Read Binary File includes some background on the project and a great demo: a World of Warcraft Model Viewer. You’ll need a WebGL-enabled browser to view this demo.

Dealing with binary data is inherent to games development, so it’s worth taking a look at jDataView if you’re working in that area.

OpenOdyssey

OpenOdyssey by Michal Budzynski for the Mozilla GameOn Competition is a simple browser-based game that uses the Mibbu game framework. The basic gameplay mechanics are fairly solid, so it’ll be interesting to see what Mibbu is like when Michal releases it.


blog comments powered by Disqus