HTML5 is my Arcade.

Akihabara is a major Tokyo shopping area for electronic, computer, anime, and otaku goods. You can find any sort of old & new videogames, starting from the 8-bit era to modern motion-sensing videogames. But is also the promised land for nostalgic gamers who has left the heart in their Super Nintendo and actually sees the world in pixels.

The Akihabara which you can download here is my personal dream too. It is a set of libraries, tools and presets to create pixelated indie-style 8/16-bit era games in Javascript that runs in your browser without any Flash plugin, making use of a small small small subset of the HTML5 features, that are actually available on many modern browsers.

I wrote this for fast game developing/prototyping, since Javascript is not only a funny scripting language but is also available quite anytime during the day, for some coding-on-lunch-break (my unique spare time). The engine is not very refined but results are enjoyable on Google Chrome, Safari, Firefox, Opera, Konqueror and Internet Explorer 9 Beta in IE9 mode. Games run in the same way on all these browsers and on all the supported platforms, that are virtually all ;). Using Javascript gives you a nice side effect too: games are also playable on modern mobile devices like the iPhone/iPod, Nintendo Wii via Internet Channel, Android devices and the just arrived iPad.

Show me the pixels.

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 FSEs. Games can also store some kind of data easily using cookies and load/unload resources at start or while the game is running. Audio is provided via the HTML5 audio tag and allow volume/muting/seeking/tracking of multiple audio files.

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, audio crossfading 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, landscape 320x240 resolution with double-sized display for non-mobile devices, dynamic frameskip. This default behaviour can be changed with its arguments. Also setup different settings depending on the used browser.

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 in a direction or following a round path.

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

Download

Since version 1.3 in-depth documentation is available into the "akihabara" directory of the package and all this was possible thanks to Darius and Darren. The five included demos (Hall Of Fame, a simple credits scroller, Leave me alone a multiple scrolling platform with intro and ending, Solitude, a quite simple SHMUP with in-game narration, The Legend of Sadness, a quite inspired action-RPG with NPCs, quests, multiple weapons and complex HUD, T-Spin, a collection of many reproductions of a classic puzzle game, Capman, a reproduction of a well known classic and Akiba Hero, a stripped down music game written using Akihabara) shows a number of use cases so you can peep their source code if you've any doubt. You can also have a look to Capman's sources for a quick walkthrought to the major features of Akihabara.

Demos shown here are using a snapshot of the Github version but the older version are available here:

• Version 1.3
• Version 1.2.1
• Version 1.1
• Version 1.0

Who? Me?

I'm KesieV and you can contact me here (strip the numbers) and follow my adventures on Twitter. Please, contact me for anything but ABSOLUTELY mail me if you have any suggestion or - better - any patch or improvement of Akihabara and its demos. Obviously direct commits on Github are WAY better.

Credits.

Starting from 1.2 version, Akihabara has sound. If I was able to make some sound effect with the great CFXR, I'm quite unable to put together a music so I've asked some help for the demos - and I was really lucky, since I've found the kind collaboration of great artists. Artists for each game are credited on staff rolls at the end of the games but, since I've stripped down their masterpieces, I'd like to credit them also here, linking the original quality version of their works. All stuff that your audio player needs! Thank you all guys!

~ . ~

The Hall Of Fame
Pixel Heart by Cathode Rays ©2009

~ . ~

Leave Me Alone
Night Falls On The Boardwalk by Greenleo ©2010
Foamy Pixel Wave by Greenleo ©2010
A Dream of the Sea by Smiletron ©2010

~ . ~

Solitude
Expandamonium! by AndyExpandy ©2009
I Bid Ye Farewell by AndyExpandy ©2009
Seven by Rich Vreeland ©2008
I miss those days by NE7 ©2008

~ . ~

The Legend Of Sadness
Legend Of Sadness (intro) by Robert Jaret ©2010
The Heroes (Famitracker) by Greenleo ©2010
Caves by Andy Graulund ©2010
Legend Of Sadness (ending) by Robert Jaret ©2010

~ . ~

T-Spin
T-Spin Tarantella by Robert Jaret ©2011

~ . ~

Capman
Only Heroes Win at Skee Ball by Greenleo ©2010

~ . ~

Akiba Hero
The Fifth Markup by Arnaldo Brenna ©2010
Only Heroes Win at Skee Ball by Greenleo ©2010
The Test Song by Arnaldo Brenna ©2010

~ . ~

Thanks for playing.

Many thanks to Bianca (my GF) for being my GF also during these hard development days and keeping the things tidy during music selection and artists contact. Thanks to Giuseppe Valenti and Valerio Barrilà for the trigo module, Fabio Maffioletti for some GFX and Flavio Ricci for being himself. And the Gimp, for helping me with the demo sprites.

Hacking.

If you're going to help me on Akihabara, you will probably find useful these url arguments for testing performances and compatibility on-the-go:

• statusbar=1 Show debug statusbar.
• noautoskip=1 Disable dynamic frameskip.
• fps=xxx Change game speed. Default is 25fps. T-Spin scales gameplay to the given FPS, so it becomes a more accurate simulator increasing FPS value.
• db=1 Enables double buffering.
• touch=yes|no Skips the user agent detector and forces the touch/normal version.
• fskip=xxx Sets the frameskip. Usually 2 for touch devices and 0 for others.
• zoom=xx Sets the zoom factor. Usually 1 for touch devices, 2 for others. You can use decimals, so 0.5 will means half size.
• forcedidle=xxx Forces some idle time between the frame render and the next frame schedule, making frame rate softer.
• canaudio=yes|no Forces audio compatibility. Use yes for enable audio on untested devices or no for muting.
• audiocompatmode=0|1|2 Set audio compatibility mode. 0 for how should be done mode. 1 for browsers with audio pipelining issues (earlier versions of Chrome). 2 with partial implementations of audio tag (iPad/iPhone)
• audiocompatmode=0|1|2 Set audio compatibility mode. 0 for how should be done mode. 1 for browsers with audio pipelining issues (earlier versions of Chrome). 2 with partial implementations of audio tag (iPad/iPhone)
• audioissinglechannel=yes|no Uses just a single channel for audio (i.e. background music only). Useful when browsers can't handle many audio tags at the same time.
• loweraudioteam=xxx Changes the number of audio elements for music audio file. Makes audio more responsive on slower browsers but games loads slower.
• audiocreatemode=xxx Set the audio team creation mode. 1 for reloading audio for each member (slower, compatible), 0 for cloning the first audio element (faster, less compatible)
• audiodequeuetime=xxx Set the delay between each action on audio elements, making audio handling softer but less responsive.
• audiopositiondelay=xxx Float value. Sets the gap between the audio position told by audio elements when using the getAudioPosition command. Is automatically 0.3 on current Firefox release. Will be fixed once a new release will be out.

The most complete demo is The Legend of Sadness so, here they are some presets for your testing purposes:

• Forced touch device. Use this to test new touch devices.
• Forced normal version. For wrongly detected desktop browsers.
• Forced touch device and forced frameskip = 0. Full throttle performance for touch devices.
• Forced touch device and forced frameskip = 4. For slower touch devices.
• Forced touch device and 0.5 zoom. Another test for slower touch devices.
• Forced touch device and zoom = 2. For testing big touch screens.
• Forced normal version, x3 zoom. Usually most of the games runs well on desktops.

All these presets have the statusbar enabled for checking performances, you can remove the statusbar=1 part for better performances. You can apply the same parameter set for any game that uses the akihabaraInit command, like all the included demos.

Some browsers need to focus an input box or a textarea for picking keyboard input: click on the first 30 pixels of the screen to open a small textarea to capture the keyboard focus.

There is a little prize for having reached the bottom of this page. Want to hack a bit more? Have a look to the Dark side of Akihabara for some beta demos.