A word on JavaScript sprite performance

I’m not one for performing calculated tests across different machines but I thought it might be useful to share a few performance observations with my JS sprite library.

The laptop that I do most of my development on has an Intel Centrino Duo sticker on it. I guess that means it’s at least 2 years or so old. I also know that it has 1Gb of RAM and apart from that the GPU is probably some standard on board affair. I test my JavaScript against IE7 and Firefox 3.

I started off by creating around 10 or 20 sprites. I should add that each sprite is actually an object that I create as an element and place inside the document at run time. I have a number of methods that I can then manipulate the object with and one such method is movement. I have 3 movement methods: SnapTo, MoveBy and Move.

SnapTo is quite simply move Sprite to X,Y.
MoveBy is the most useful method in that it moves the selected sprite in the direction identifed by it’s Direction property. (Hopefully that makes sense!) In short I simply perform the following to move the sprite:


and the code does the rest.
Move is more of a “give the instruction then sit back and watch it move” type approach. I simply specify the target X and Y and also the amount that I want it to move by. When the sprite hits the desired location it’s TargetHit property gets populated.

So for the first few sprites that I created I decided to run each through the above methods and I found that they all performed quickly with no visible jerkiness. I was very pleasantly surprised and rather delighted that my initial estimate at on-screen sprites required for a good game had been met. (I never really designed anything that would require more than a couple of dozen sprites on screen at once).

So eager to push the limit I upped the threshold for sprites on screen by quite a bit. I also decided to create a scrolling starfield backdrop that consisted of around 150 individual sprite objects no bigger than 2×2 pixels.

On top of that starfield I created 50 alien sprites and added a player ship. Every sprite had it’s directional properties set and I ran them all through the game loop.

There was no visible difference in performance between this set of 200+ sprites running simultaneously and the initial test of around 20. The game design possibilities that this presents are enormous and very exciting.

But then I haven’t coded any production standard collision detection yet !

Post a comment or leave a trackback: Trackback URL.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: