Choosing the right Graphics Technique for a Browser Based Game

Whether if you are doing a puzzle game, a tricky jump ‘n run or a full fledged mmorpg, be it a simply casual or a long term persistent browser based game, you’ll certainly need one thing: images and animations.

As mentioned in last weeks article, you have the choice of implementing the right drawing technique. However, there are vast performance differences. So there is no technique that fits them all, merely you’ll need to decide on a case by case basis what you are going to use.

Since trying out everything only to realize that there were some tiny details you weren’t aware of in the first place isn’t actually fun, I am providing an in depth review of each technique.

We’ll go into detail about each techniques pro’s and con’s and you’ll learn how you would go about animating your game graphics in the technique of your choice.

At the end of this article you’ll also find a matrix containing the most important facts from this review.

A Short side-note for Those Looking to Create Flash Games:

This article won’t include information about Flash or Actionscript. There are already a lot of really great tutorials and articles on this topic out there. I don’t think I need to be making another tutorial containing the same information. Have a look at GotoAndPlay.it which is an awesome source for anyone interested in making Flash games.

(more…)

Tags: code performance, game engine, Games, JavaScript Library, tile graphics

Animating with Scroll Properties, A view on Performance

Having had some time to polish up the AnimSprite Object of the game engine I had a chance to make a small performance test. I decided to give some insights on ow this style of animation works and to post the code that goes along with it for your personal joy.

The following html is generated by the script for each sprite that is placed on the stage.

Of course there is a stylesheet having defined the sprite class:

Utilizing the ScrollTop and ScrollLeft properties of the sprite box (the surrounding div) I can display 50 animated sprites @ 25fps on a page using Firefox 3 Beta 4 with a processor load of about 98% on my MBP 2.16GHz Core Duo.

Safari on the other hand is quite fast and has only 19% processor load for 50 sprites.

Having 100 sprites lets Firefox peak out at 100.9% load and slows down the animation to about 50% speed.

I'd say this is still not optimum, but it's quite a good start.

Here's my JS code for the sprites.

As you can see, I make extensive use of AJS. You can get the stock version of it at the official website: AJS JavaScript Library.

The code shown here should be fully functional. I just removed the methods and members which aren't used in this example. And as a little caveat, there is no depth management as of yet.
The image I used in my code is the same as in the Javascript Sprite Animation post.

The classes to use would be:

1. CGE.Sprite - which is a single not animated sprite
2. CGE.AnimSprite - which is an animated sprite running in a loop
3. CGE.MirroredAnimSprite - which is an animated sprite that plays in reverse when it's last/first frame is reached
4. CGE.Game - which coordinates the loop in which all animations are run

Have fun

Tags: code performance, Firefox, Games, JavaScript Library, pbbg, Safari, tile graphics

Game Engine Preview

Since the class hierarchy is almost finalized I thought I post a little sneak peek of what is to be expected.
Not everything shown here will make it into the first release, unfortunately. But be assured that development is in progress...

You might notice that this looks a lot like pseudo code, but I just don't want to throw around pieces that aren't finalized yet.
So without further ado, here's some code to stick your nose in...

(more...)

Tags: code performance, Games, JavaScript Library, pbbg, tile graphics

Dynamically loading external Javscript Files

Some weeks ago I read a short tutorial over at JavaScript Kit about how to load JavaScript files into your document on demand. This was a thought that I already pursued for some time as I had seen something similar already in the Scriptaculous Library. The difference on the Scriptaculous side was that you appended the additional files you wanted to load as a parameter to the main scripts url (scriptaculous.js?load=effect,dragdrop).

The idea is basically great. In modern languages you have the ability to import or include files for compilation (i.e. the C Family Languages, Java and Actionscript) or at runtime (i.e. Python and PHP).

So why should JavaScript be any different ?

Mainly it is because JavaScript wasn't designed with such behavior in mind . JavaScript wasn't supposed to build big applications like the now so popular Web 2.0 Apps (i.e. Google Maps, Google Calendar and others).

Why would I want that?

Once you start to develop larger Applications with JavaScript (or other languages for that matter) you usually end up having the same functionality in different places. But you also have bits of code that are unique to certain parts.

What makes sense in my opinion is to split up your monolithic JavaScript files into pieces that are:

1. easier to maintain
2. faster to load
3. more reusable

But once you split up your files it can get messy rather quick too. On some occasions I had 6 or more Script nodes in one HTML file. Also keeping track of dependencies gets difficult.

Wouldn't it be a lot easier to have just a single script node where you would define what you need? Or better yet, let the script itself take care of what it needs.

How to do it?

I stumbled upon a great concept today that takes the initial idea a bit farther.  A few days ago Remy Sharp blogged how to do On Demand Script Loading. Since I was working on the same idea I found this extremely interesting.

His idea is basically  probes for the existence of an object and if it isn't found loads it.

My idea however was more similar to the initially mentioned Scriptaculous or Java approach.

You would need just a single script node in your html file to load either some

for all your scripts.

Okay, up until now this doesn't work different from Scriptaculous. So what I did further was to add a check for script dependencies.

For example I have one script that deals solely with event handling. Though this script is dependent on methods to check for different browsers and searching for nodes. I make a check if this object exists and if not I'll simply load it.

These checks are implemented in each file to make sure all dependencies are met. And since these checks are performed only when the script is loaded there is no performance hit.
The include function in turn looks like this:

Only the script name is submitted as parameter. Anything else is already stored in the object at the initial load.
Also note the fallback for browsers that have problems with inserting nodes via DOM.

This is just part of the whole script, though you could use this function independently. Once I have removed the kinks and quirks of this library I'll post the full version here too.

Tags: dynamic loading, JavaScript Library