Canvas ACT viewer

[outofcuriosity]

This is of course by no means as interesting as what KeyWorld is doing with HTML5 canvas, but I thought I'd share it anyway.

I've made a little demo to view SPR and ACT pair in the web browser. It's mostly a result of me wanting to learn a little Javascript and try to work with canvas. At the moment it looks something like this:

You can view the current progress online here: http://www.curio.byethost10.com/spritecanvas.php (don't know how reliable to host is, unfortunately I don't have a my own web space these days)

What you should see is an animated Baphomet idling a bit and walking around on the map.

This is a very rough demo, and at the moment I believe it might crash if the SPR and ACT files don't load quickly enough (I don't think I handle the asynchronous execution properly yet). So if it doesn't start, wait till the page is fully loaded and refresh! The demo should run fine Firefox, Opera and Chrome. No idea about Internet Explorer.

If I get around to it I'll try to expand it into an online character viewer or try to incorporate it into an online monster database.

Todo:

- Sprite frame scaling

- Sprite frame rotation

- ACT attachments (to view composite ACT frames; characters sprites with head, items, mounts etc.)

- Composite ACT animations

- Sub sprite RGB colour levels (only alpha is set at the moment!)

- RGBA sub frame transparency (don't know how this is calculated yet as you have neither alpha values nor an indexed background colour)

- Increase efficiency. Currently the SPR frame, and in turn ACT frame, is processed for every iteration, which is obviously a waste

- Animation delay (currently static at 80ms)

- Resolve issues with old SPR and ACT versions

You may, of course, download the scripts and play around with them. They're very messy though, be warned!

[Maki]

Cannot wait for this to finish, especially frame rotation Will be super useful!

[KeyWorld]

Good job

Just two things:

- It seems that you use a hack to clean the canvas

canvas.width = canvas.width;

. But it cause problem on some browser (tested on webkit): it's the same value, so it doesn't clean the context, use :

<canvas2D>.clearRect(0,0,<width>,<height>);

- To improve perf, you should use canvas2D method (rotate, scale, globalAlpha, drawImage, ...) instead of manipulating all pixels for each frames.

Keep it up

[outofcuriosity]

Thanks, I'll definitely look into that! Built-in rotation and scaling will make this a whole lot simpler.