2010-11-30

CanvasLayers - A Layer Library for the HTML5 Canvas Tag

Wouldn’t it be neat if the canvas tag supported layers? Now it does!

This uses the layering engine from CanvasUI, modified to support transparency and transparent sections (if required). Unlike other layer libraries for javascript, this uses a single canvas rather than a stack of several. Something this library gives you that a stack of canvases can’t is nested layers.

I changed the CanvasUI library so that it uses the latest Woopsi layout technique (damaged rects) instead of the old method (BSP trees). It doesn’t appear to have had any impact on performance, but it does make the code simpler. The new CanvasLayers library uses the latest version of the CanvasUI as its basis. I’m hoping to strip the duplicate functionality out of CanvasUI and use the CanvasLayers library as the canvas engine.

The CanvasLayers library sourcecode can be downloaded from BitBucket:

2009-10-04

Networked PacMan and Embedding Video

Adding video to a blog not hosted on one of the main blog providers is a real pain. WordPress has about a dozen plugins that handle video, most of which haven’t been updated in a while and are tricky to configure. The worst offenders are the plugins that handle anything other than FLV format videos or streamed videos hosted on sites like YouTube. That’s a shame, because actually creating FLV videos is itself far more work than it should be. A simple plugin that played MOV or AVI files would be greatly appreciated.

I eventually decided upon the FLV Embed plugin. It seems to be reasonably up-to-date and is very easy to use. Unlike the YouTube streaming plugins, it lets me keep the video files hosted on my own server.

Once I’d installed the plugin I needed to get my video into FLV format. This, as previously mentioned, is a huge pain. My version of Flash is PPC-only and I don’t want to have to install Rosetta on my nice clean Snow Leopard install, so using Flash is out. FFmpegX depends on a binary that is also PPC-only (and hasn’t been updated in over a year) so that’s out too. All of the other FLV converters for both the Mac and Windows are either crap shareware applications, look like they contain malware, or both.

(As a side note, why is it that all of these crappy shareware programs insist on creating skinned UIs? They all look like the kind of shovelware that gets installed on new PCs that anyone with any sense uninstalls before they even attempt to use the computer.)

Anyway, the only FLV converter I found that was remotely useful was iVideoConverter. It is a shareware app, but it’s got a good UI and it actually works, which is more than I can say for the rest. As it’s just a front-end for ffmpeg, you’d expect nothing less from it. I nearly resorted to using the HTML5 video tag, but since the browser manufacturers refuse to agree on a video standard, it’s rather pointless. (EDIT: After some testing, it seems that Safari will play Ogg Theora - though that may be because I’ve got all sorts of video players installed, including Perian - whilst Firefox refuses to play anything at all, despite me having configured the appropriate MIME types.)

Anyway, the whole purpose of this waste of a weekend was to post a video of a project I wrote a while ago. I created a networked version of PacMan as part of a five week group project for my master’s degree. The project as it was submitted was rather larger - it had a second game and a database behind it. I’ve stripped out just about everything that I didn’t personally write (barring the XML config file stuff) and the database (simply to make it easier to distribute).

In this version, the first player to connect to the server plays as PacMan; the other players control the ghosts. By default, it supports 2, 4, 6 or 8-player games, but the code itself will support any number of players. Here’s the video of it in action; it shows two networked clients running on the same host:

The game can be downloaded here:

PacMan

This includes the NetBeans project with full sourcecode, plus Java binaries and instructions on how to run them. Note that in order to play the game you need to have the JVM 1.5 (at least) installed.