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? :)

Awesomium lets you embed Chromium/WebKit into 3d worlds and games. Check out the video above and half fun looking at the transparent search results and the shadows from the content on the grass.

What could it be used for?

• Powering an in-game GUI using HTML/JS/CSS
• Rendering a live web-page to a 3D object and interacting with it
• As a framework for an advanced, 3D web-browser
• As an offscreen renderer for snapshots of web-pages
• For the implementation of in-game advertisting.

The engine is written in C# on the backend, and of course, JavaScript on the front end.

You can check out the sample chat client that leads you to the following code:

Each user asynchronously pings a url on the central server at a given interval, sending its changes and retrieving changes of other visitors. The retrieved changes are dispatched through the javascript library, so the clientside application may act upon it.

The client consists of a single 5k javascript file, and the server is a single C# class library that can be embedded as source, or as a dll.

Focus of the q42 multiplayer engine was to give developers full control and not come up with any restrictions to the type of application that is being developed.

Features

• Easy customization and full control. Example project included
• Easy grouping of users that can see eachother by means of virtual "rooms"
• Automatic room upscaling when a certain amount of users is reached
• Automatic cleanup of empty rooms and idle users
• Persistent user properties (for example: name, x or y position)
• Nonpersistent user events, such as chat messages
• Full control over rooms, names, properties, events and its values
• Moderating features can be implemented easily
• Optionally allowing multiple users per session, so each browser-tab can represent a new user.

Take some time to poke through his series on JavaScript Tetris:

1. Rationale
2. Planning
3. Infrastructure
4. Graphics & Input
5. The Life Of A Piece
6. Lights, Action, Music!
7. Gameplay
8. Javascript Tetris Pt 8: Post Mortem & References

Steve Mattison let us know about a new AJAX game has been released by the makers of that old popular PHP-based village building game Travian. This one is more like Sims meets Cultures, and it is called Travians:

"Travians is a browser game in which you rise to the challenge of
everyday life as a villager. This means more than just specializing in
your occupation, building your own home or deciding whether you enjoy
games more than fighting: The most important thing is communication
within the huge village community. This is the only way to get fun
clubs and strong guilds. Become a Travian and experience a whole new
online world!

As an added twist, the game uses Digg to provide a sort of unique twist; enemies in the game are based on stories in the Digg API feed and their ratings.

The API

GameJS.framework.Game - This is the main game class you extend when creating the game. It has the following methods which you have to override: initialize, loadContent, update and draw. This is all very similar to the XNA framework. Tetris.js is an example of how to extend this class.

GameJS.content.ContentManager - This class handles the asynchronous loading of resources saving you some headaches. The following code loads a new texture which can be drawn in the games draw() method:

PLAIN TEXT

JAVASCRIPT:

1.  
2. loadContent: function() {
3.     // set the screen rect
4.     this.screenRect = new Rectangle(
5.         0, 0,
6.         this.screenWidth,
7.         this.screenHeight
8.     );
9.  
10.     // Create the background texture. The third argument argument
11.     // makes this texture is not redrawn every frame (gives
12.     // performance boost since the background doesn't change)
13.     this.backgroundTexture = new Texture(
14.         this.graphics,
15.         this.content.load('Textures/BackgroundTexture.png'),
16.         false
17.     );
18.  

GameJS.graphics.GraphicsDevice - This file sets up the main canvas. It also manages the Z-buffering, and has a method that creates a new resource context which individual textures can use. You can easily change its properties. A simple example:

PLAIN TEXT

JAVASCRIPT:

1.  
2. constructor: function() {
3.     var ds = this.graphics.deviceSettings;
4.  
5.     ds.screenWidth = this.screenWidth;
6.     ds.screenHeight = this.screenHeight;
7.     ds.target = document.getElementById('tetris-container');
8.     ds.fullScreen = false;
9.     ds.applyChanges();
10.  

GameJS.graphics.SpriteBatch - This class acts as a wrapper around the canvas element. It has a draw method which allows you to draw a texture to the graphicsDevice. You can pass it a destination and source rectangle. Code example:

PLAIN TEXT

JAVASCRIPT:

1.  
2. draw: function(gameTime) {
3.     // clear the device
4.     this.graphics.graphicsDevice.clear();
5.  
6.     var spriteBatch = new GameJS.graphics.SpriteBatch(this.graphics);
7.     spriteBatch.begin();
8.  
9.     // Draw the background
10.     spriteBatch.draw(this.backgroundTexture, this.screenRect);
11.  
12.     // Draw the gamefield.
13.     spriteBatch.draw(this.gameFieldTexture, this.gameFieldRect);
14.  

GameJS.input.Keyboard and GameJS.input.KeyboardState - These classes handle the keyboard input. Since JavaScript is an event based language and a game cycle is something continues, the framework takes care of storing the pressed keys. This looks something like the following:

PLAIN TEXT

JAVASCRIPT:

1.  
2. update: function(gameTime) {
3.     // Get the current input state.
4.     var keyboardState = this.keyboard.getState();
5.     if(this.isGamePaused) {
6.         if (keyboardState.isKeyPressed(Keys.ENTER)) {
7.             this.isGamePaused = false;
8.         }
9.     }
10.  

You can't build a game frameworking without creating a game, and Tommy did the old favourite, creating Jetris as a clone of Tetris.

Kyle McGregor took a look at the JavaScript games for Life out there and decided to write a Canvas version that ends up being a lot snappier. The entire game is pretty small:

As a follow-up to our recent posting of a JavaScript Pac-Man clone, we bring you a JavaScript Space Invaders clone: Invaders from Mars. Only this time, in addition to a link to the game itself, we've got a link to the author's blog (one Mark Wilcox) in which he goes into detail on the various design issues he faced whilst creating his game and discusses the lower-level framework he created to drive his game.

Invaders from Mars does it old-school, as did the Pac-Man clone: divs and images, baby. Performance is pretty good, but I can't wait to see people realize that if they go with <canvas>, they can really do some interesting stuff. What do you think on the Canvas vs. DOM rendering model for games, etc.?

I got to play an old school, sit down, Pacman at Google Developer Day, London, so it only seems appropriate to keep playing it thanks to Harry Guillermo and his new Pacman port to JavaScript.