Thursday, April 22nd, 2010

HTML5 is my Arcade. Akihabara.

Category: Canvas, Games

Akihabara is a set of libraries, tools and presets to create pixelated indie-style 8/16-bit era games in Javascript. What does it consist of?

Akihabara is composed of a number of libraries that use HTML5 canvas tag and some standard hooks.

Gamebox module is complete and compact enough for making games: it allows multiple grouped objects moving simultaneously, it helps with collisions, rendering and moving objects. It provides monospaced pixel-fonts rendering too. It handles keyboard, double buffering and evenutally FSEs. For now do not support audio via the HTML5 audio tag but only because I don’t any skill on music/SFX for adding audio to the shipped demos :). I’m going to add this kinda soon.

Gamecycle module provides a complete generic game cycle: intro, menus, crossfading between stages/lifes, gameover and ending. You can use the same game cycle for many games and implement only the main game.

Toys module provides lots lots of common routines during the game developing: from effects for screen titles to HUD handling to platform/SHMUP/RPG oriented routines, like jumping characters, Z-Indexed objects, bullets, sparks, staff rolls, bonus screens, dialogues etc.

Help module provides some Javascript-specific functions, such object copying, randomizing functions, string/array handlers and the akihabaraInit function, that automatically sets a comfortable preset of configurations: 25fps, double-sized display for non-mobile devices, dynamic frameskip.

Tool module provides simple developing tools. Actually there is only a cel-composer: it can compose an image stacking a set of frames for animating objects, applying a number of filters to each frame.

Trigo module provides some math stuff for moving objects toward a direction or following a round path.

Iphopad module provides a touchpad for touch-based device (for now, Android and iDevices).

When you are debugging a game you can simply add some parameters to give you great new info (debug bars, double buffering, touch UI events, set FPS, and much more).

View source on the games to see state machines and info such as:


  1. kill: function(by) {
  2.   this.frame=8;
  3.   this.accz=-8;
  4.   maingame.addSmoke(this,"flame-red");
  5.   this.killed=true;
  6.   maingame.playerDied({wait:50});                  
  7. }

Awesome work Francesco.

Posted by Dion Almaer at 6:40 am

3 rating from 3 votes


Comments feed TrackBack URI

So nice. Try the URL with your iPhone. Touch support is great and the speed is pretty good too.

Comment by nyteschayde — April 22, 2010

Awesome stuff :)

Comment by Skilldrick — April 26, 2010

Leave a comment

You must be logged in to post a comment.