It is quite interesting to see how technology moves in circles. With canvas being the new fun toy to play with for creating browser-based games we have to find solutions to fake a 3D environment to be really fast (sure there is Canvas 3D but it is overkill for most games). The trick is to dig into the tricks arsenal of old-school game development on machines full of win like the Commodore 64 or Amiga.
We received an email from Joesph Huckaby about his new JS-based game rendering engine and I have to admit that when I first read about it, I was a little skeptical about it mainly because I've been disappointed with many that I've seen in the past. As I dug into his site, Effectgames.com, my whole opinion changed as I saw some very robust demos that clearly demonstrated the capabilities of this engine.
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.
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.
The week is almost over, and that means it's Fun Friday! Ajax and HTML5 aren't just for serious business apps ("business in the front, party in the back"):
There are a couple of unique things about this game that makes it a good educational resource for developers. First, the code is GPLed so you can easily study it for your own needs. Next, I noticed a new attribute on the canvas tag I had not seen before:
...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).
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.
We usually post these on Friday, but who says a little fun on Monday is wrong? Paul Brunt has put together a nifty game using the Canvas tag. It's pretty impressive. He is also using Chrome Frame to have the game work on IE as well.
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.
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!
Ben loves to talk about old games such as Dark Castle. I personally love remembering old Sinclair ZX Spectrum games but also fondly remember Leisure Suit Larry.
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
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
Martin Kool of Q42 let us know that his company decided to open source the Q42 multiplayer engine which is "a lightweight, generic multi-user solution, allowing developers to create their own browser-based application or game over port 80."
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.
We often get games sent our way, and try to keep those posts for Fridays. This one is different though. Thomas Kjeldahl Nilsson didn't just write another Tetris clone in JavaScript, he documented his experience. He posted a series of articles on the various steps, and not only do you learn how to build a nice Tetris game, but you get to see how to develop nice testable code. Thomas comes from the Ruby world and it shows.
Take some time to poke through his series on JavaScript Tetris:
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.
