The author mentions some of the features:

WOLF1K features a 32×32 map ( a 1024 cells grid ) with textured walls colored by orientation ( North, South, East, West ), fog, 3 transparent bitmap graphics in 8×8, 15 rainbow characters steering smoothly across the map, collision detection, probably the most crazy optimization tricks I ever wrote.

In order to get this into 1K some crazy things had to be done:

WOLF1K works exactly like the original Wolfenstein 3D and Wolf 5k. It is using the raycasting technique. The world is built from a uniform grid of walls and corridors. In order to draw the world, a single ray is traced for every column of screen pixels and a vertical slice of wall texture is selected, scaled and colored according to where in the world the ray hits a wall and how far it travels before doing so.

The sprites and graphics are stored in a small space using a clever trick:

The world of WOLF1K is a regular grid of 32×32 cells. Obviously storing these 1024 cells in one byte or one bit each is not feasible. It would use the 1024 bytes or 128 bytes if stored as bits. It actually is the result of a binary operation applied to the ASCII codes of the source code of WOLF1K plus a mural on each edge of the world.

[via Paul Kinlan]

TechCrunch reports on a Googler, Paul Truong, who created an HTML5-based game for Gmail called Galactic Inbox using his 20% time:

When you start it up, a little Gmail logo envelope guy pops out of a “20% Projects Lab” and starts flying. Essentially, he’s a spaceship and can shoot objects coming his way. It’s simple, but fun.

Read more on the Gmail Blog.

Play the game yourself (note that you must be using a modern browser)!

[via Bryan Neuberg]

Interest in Canvas, as well as mobile apps, has led to a renaissance of old-school 8-bit graphics. Joe Huckaby of Effect Games has been playing around with color cycling, leading to some stunning effects.

Anyone remember Color cycling from the 90s? This was a technology often used in 8-bit video games of the era, to achieve interesting visual effects by cycling (shifting) the color palette. Back then video cards could only render 256 colors at a time, so a palette of selected colors was used. But the programmer could change this palette at will, and all the onscreen colors would instantly change to match. It was fast, and took virtually no memory.

There’s a neat optimization going on here too: instead of clearing and redrawing the entire scene with each frame, he only updates the pixels that change:

In order to achieve fast frame rates in the browser, I had to get a little crazy in the engine implementation. Rendering a 640×480 indexed image on a 32-bit RGB canvas means walking through and drawing 307,200 pixels per frame, in JavaScript. That’s a very big array to traverse, and some browsers just couldn’t keep up. To overcome this, I pre-process the images when they are first loaded, and grab the pixels that reference colors which are animated (i.e. are part of cycling sets in the palette). Those pixel X/Y offsets are stored in a separate, smaller array, and thus only the pixels that change are refreshed onscreen. This optimization trick works so well, that the thing actually runs at a pretty decent speed on my iPhone 3GS and iPad!

How hex geeky do you feel today? Take a sec to guess the hex!

Do you remember being really impressed by the initial Aves game engine that uses Canvas and HTML5 technology to deliver a compelling social gaming platform on Web technology? Well, now the Dextrose crew are back in action having released their second prototype of their upcoming browser-game middleware at E3 2010 in Los Angeles:

The new prototype is shown live to interested licensees and magazine editors on the exhibition floor. Additionally, a video with six minutes of in-game footage has been released on YouTube. Compared to the medieval-styled prototype from some weeks ago, Dextrose introduces even more innovation and performance boosts not yet seen in the browsergames industry.

• unbelievable performance in the browser: Aves Engine renders hundreds of players in realtime in one viewport
• introduces innovative Action Surface-Technology which allows the integration of any Web 2.0 or custom widget into your game
• high-scalable viewports to any screen resolution size with nearly no performance impact
• very large optimizations towards the mobile market. Technical stunning games now possible on WebKit-based Smartphones and iPad
• a refurbished and extended realtime world editor
• sprite animation classes

I had a chance to play with the prototype, and man was it nice. The iPad is fairly underpowered when it comes to intensive tasks like this, and it works very well indeed. The team had to spend a lot of time optimizing the engine for that form factor, and they are now in good steed for other mobile devices.

Moving around the world with iPad and laptops alike showed how well the UI keeps up with goings-on. This is because good old Mr. NodeJS is behind the scenes scaling up nicely for the crew. The multiplayer engine is smart enough to gracefully failback from WebSockets to long polling to standard boring polling that the iPad requires. All seamless to the programmer. The developer just gets to riff on top of the simple to hack on game engine.

Since the engine is built on the Web, the team could create Web surfaces with ease. This enables you to create mashups of content to embed directly into the game. Walk up to a laptop monitor in the game and see that it has a real browser window embedded and play with it. The world is truly your oyster with this engine.

If you are interested in building up a large player world, and want to get across a myriad of devices thanks to the Web platform, look this up to give it a roll.

Great work guys!

Jacob Waller created an addictive word came in Golingo. What sets it apart?

• Not a single line of Objective-C written, courtesy of Titanium Mobile
• Only one (!) image ingame – the rest is CSS3 magic
• Fluid gameplay thanks to CSS Transitions and Animations
• All logic using pure, beautiful JavaScript
• Multitouch draggables using iPhone Touch API
• Logic encapsulated using Low Pro – meaning split screen mode was easy pie
• jQuery 1.4.2 for development speed (and sanity of developer)
• CouchDB as highscore storage, with storage logic in JavaScript
• Predictable randomness means replayable games, all courtesy of excellent seedrandom

Jacob dives into deeper into the full tool chain that he used in his post about open sourcing the code behind the game. That’s right, he wants you to fork it and do something amazing with the game. Pretty awesome if you ask me.

His tool chain:

• Titanium Mobile
• CSS3 with Webkit extras
• jQuery 1.4.2
• Low Pro for jQuery
• Glyphish icons
• Uri-parser
• Swedish word list
• CouchDB
• Flag icons

He then goes on to talk about the initial construction of the game:

Most of the actual game was made in a few weeks time, but from scratch to published app it took almost six weeks of part time work. A lot of this time was spent banging my head into various walls. Again, Titanium is great, but it’s a young framework with all the kinks that follows. There has been quite a few bugs, and the documentation hasn’t always been up to date – but this is much better nowadays. What more – since most other developers are as clueless as yourself, It’s been hard finding good resources and getting help. I did however get a trial for Appcelerator’s Premium Subscription, with 48-hours guaranteed response, and I must say it’s really good stuff. The developers themselves answers all your stupid questions and relieves most of the wall banging. If you can afford it, go for it!

By releasing the code for Golingo, we hope to relieve some of the headaches surrounding developing packaged HTML5 apps. I do not say that it’s not full of faults, because it is, but at least it is a working example full of faults. Please don’t hesitate to dig through the code to see what is going on. We believe we’ve solved some common problems that you too will run in to when using Titanium, for example transparently calling native functions from a webview (and vice versa) using callbacks and trickery. Here’s a quick recap of that:

• Connecting Titanium Contexts
• Low Pro like a low pro: $(‘<div/>’).attachAndReturn(Letter, this, letter, specialLetter);
• Sexifying: including templating with mustasche

Thanks for the great info and resource Jacob!

Slither is a Web port of the age old Snake game.

Erik Johnson wrote the game, and had this to say about the project (available here on GitHub):

We’ve seen a million varieties of snake/nibbles games over the years, especially in Flash; however, I haven’t come across many that are implemented using Canvas. I’ve used it to simply draw the game area and used standard CSS2 and jQuery animation techniques to provide the rest of the UX support. The game itself uses an interesting combination of class-based components that allow for rich support of extensibility and ease of maintenance. The performance has proven quite well on all the current A-grade browsers (except IE of course :P)

Nearly 4 years ago, Ben Joffe created a fun Tetris-like game called Torus that takes the classic and makes it cylindrical. He just updated the game now that browsers can power his canvas game sooo much better.

• Smooth falling motion
• Smooth left/right motion
• Row clear animation
• Slightly higher playing field
• Visual indication of death zone
• “Sparkling” blocks
• New points system
• New piece types (you’ll have to wait a while to see these appear).

Nice work Ben!

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:

Awesome work Francesco.

Louis Gorenfeld some very detailed explanations on how to fake 3D including some of the formulas used in the days of 8 bit.

He is also working on some demo code which you can help him with by providing some JS/Canvas demos:

Tim de Koning has done what folks do best with their winter holidays.... created something fun :)

With JSC64 he has ported the Flash version to give us an emulator for the Commodore 64 in JavaScript.

Tim's work uses Canvas and he provides a jQuery plugin if you are that way inclined. It is fun to check out the source on GitHub.

The games are powered by the "Effect Engine", Joseph's JavaScript/DHTML library that provides the framework for displaying and animating all the graphics, playing all the sounds & music, handling the keyboard & mouse, and sprite collision detection. It can smoothly render multiple layers of parallax scrolling tiles and sprites using pure DHTML. HTML 5 Audio is used where supported (currently Safari on Mac OS X 10.5 only, 10.6 and Firefox coming soon), and 3rd party extensions used elsewhere. All modern browsers and platforms are supported, including IE 6+, Firefox 3+, Safari 3+, Chrome 1+, and Opera 9+.

The team has also created a suite of online tools to allow developers to prepare and design their game online including managing graphics & audio, creating levels for their games and manipulating graphics in real-time using non-destructive filters (scaling, rotation, and a number of other transforms).

Developers can build their games locally on their Macs or PCs, and don't have to upload any code until they are ready to publish. Once ready, developers can compile their code automatically using Google Closure, and receive a unique URL and embed code to share the game on their own site, blog, or anywhere they want.

In looking through the documentation, it looks like the whole API is very well laid out clearly documenting the breadth of methods available and the Getting Started guide is very comprehensive.

I didn't find anything that discussed licensing or a potential pricing model so that's something that you may want to look into before diving into this but from what I've seen, the engine looks very promising.

Notice the moz-opaque attribute. Evidently this showed up in Firefox 3.5 and:

...lets the canvas know whether or not translucency will be a factor.  If the canvas knows there's no translucency, painting performance can be optimized.

Hopefully the other browsers and the HTML5 spec can pick up this useful property.

Another unique aspect of this sample is that many free, open source tools were used to create all the images and sounds. All the graphics were created with the Gimp and Blender, and the sounds were made with csound.

BTW, if you are graphically challenged like me but need resources like this for applications and games I always recommend either grabbing images, video, and illustrations through the Creative Commons search engine, Wikimedia Commons, or iStockPhoto.com (you could grab an Illustrator file from iStockPhoto, for example, and then convert it into SVG using Adobe Illustrator to bring into your fancy web page).

Scott Schiller, favourite DHTML hax0r, pointed us to Vanthia "a browser based Massive Massively Multiplayer Online Role-Playing Game in development."

The game appears to use Mootools for the underlying library, the UI is quite well done and the map uses an isometric, pixel-based style.

Check out the forum.

Martin Kool describes some of the long process it took to get these into the shape they are:

In 2003, I created Good Old Adventures. It was a chat environment set in the Sierra worlds without actual gameplay. All images were manually crafted, copy/pasting from WinAGI Game Development Studio. A time consuming process.

Four years later I wrote a few conversion tools in .NET to extract Sierra's in-game images and objects from the original games, and display them properly on the web. The "only thing" left to do then was to export and understand all in-game logics.

I was able to convert the logic to javascript, but there was one big problem: Sierra's code used GOTO statements, and those could jump anywhere in the code, even inside a nested "if"-statement. It seemed unsolvable in javascript.

I sat down together with Sjoerd Visscher, one of my collegues at Q42, and we came up with a solution. Using a decompilation approach to get rid of nested "if"-statements and putting the whole shebang inside a huge switch/case statement, we could mimic line numbers and GOTO's while maintaining performance. World domination was within reach :-D

It was halfway 2008 when I started to work on it, and Sarien.net is the result.

Play it now

Jeffrey Rosen has taken a look at a preview of WebGL landing in the WebKit project. The demo above is an example of this work (here in HD):

WebGL is basically an initiative to bring 3D graphics into web browsers natively, without having to download any plugins. This is achieved by adding a few things to HTML5, namely, defining a JavaScript binding to OpenGL ES 2.0 and letting you draw things into a 3D context of the canvas element.

It is interesting to compare this low level API to O3D which is a scene graph API from Google (Google also supports WebGL, via the O3D team also, and sees the APIs as complimentary). They are very different APIs taking drastically different approaches. One gives you a new API but a higher level one that may appeal to JS developers more, whilst the other is very familiar to a certain set of developers and would be easier to port work. Ideally, someone will Processing/jQuery-inize WebGL to give it some nice high level love too.

Fun times with 3D and the Web! Great to see WebKit and Gecko doing great things with WebGL already.

Have a great weekend, and a quick reminder:

• Think that we have missed a story? Please share news with us. Don't assume that we missed it on purpose! Want to contribute a full story? Please!
• The crew hangs out on Twitter, and a lot of tips and tricks show up there first:
  • Dion
  • Ben
  • Rey
  • Christian
  • Michael
  • And our news is syndicated through @ajaxian

John has been working on a very fun scrabble typing game called Deep Leap and although he hasn't finished it yet, people found it (John, time to learn about .htaccess ? ;)

Just to tease him a little more and get the word out before it is finished, check it out!

Wouldn't it be nice if you could play classic old games such as these easily online? Martin Kool thought so, and wanted to create an open source adventure game system, and just released Sarien.net "the portal for reliving the classic Sierra On-Line adventure games. With its focus on instant fun and a unique multiplayer experience, Sarien.net hopes to win new gamers' hearts and promote the adventure game genre."

Features

Completely browser based, runs in IE, FF, Opera, Safari, Chrome

• Works on the iphone and Wii (both needs fixing at the moment I believe)
• Games are completely playable using mouse or keyboard input. A lot of effort has been put into the user interface to make it work for the era that we’re in
• Multiplayer! This was not in the original games, but what you can do now is; when you are playing your own game at your own pace, and are in game X room Y, you’ll see other players in that same game X room Y doing their things
• You can talk to eachother and replay scenes together
• All game areas are accessible directly through the address bar, and bookmarkable. Giving players the instant kick of replaying a certain scene
• While playing, you encounter other npc’s. These add up to your own list of avatars that you can choose to be, not influincing the gameplay but it adds up to the fun (especially in multiplayer)
• There’s even an extra Studio tool to let you view all game resources, similar to existing tools such as AGI Studio

Check out some of the games and then delve into the resource explorer studio and build your own stuff.

Thanks for doing this Martin! What games would you like to see / create? :)