General Updates

Busy busy busy! The freaking Christmas season is almost here! Ok at least at good ole wally world it is. Yes yes, I'm still working two jobs one of which is for Walmart ... hey they have benefits! Just about anyone working in the computer field as a web programmer will tell ya ... unless you get a great gig working for Google or some other large company you probably won't get benefits anywhere. Getting ready to move soon again! ugh! but at least now with this move I will be 1.6 miles from work! which means more time to do the stuff I want to be doing (aka, this game design thing)

Was reading through a forum news feed archive and came across this: http://news.ycombinator.com/item?id=751075 Instead of resurrecting an old thread (3 months at the time of this writing) I figured i would cover one of the topics that someone their suggested.

CSS Sprites and Javascript Canvas ...

The long story short ... don't waste your time using CSS to clip the sprites from a large png image ... all the browsers have big performance issues when clipping and if your going to build a GUI or game of any real scale this alone will kill any good performance you would get. This isn't to day that the persons idea was so off either ... the advantage to using fewer files is faster load times especially if you are using xmlHTTP requests to tell it what files to load.

A simple tile prototype ...

function Tile()

{

this.img = new Image(); // create a new Image object.

this.width = 128; // width of the tile. defaults to 128

this.height = 64; // height of the tile. defaults to 64

this.offX = 0; //X offset for drawing abnormal sized tiles

this.offY = 0; //Y offset for drawing abnormal sized tiles

}

From the above i think you can get the picture here already ... you simply load the big file then you piece it out into actual tile objects thus pre-clipping everything. You get the speed performance from using smaller images that don't require clipping and reduce server latency time because you are pulling fewer files.

Also another way to get great performance increase ... use multiple canvas's! ... How many you use and what each of these layers does is of course entirely up to you just remember that the top most layer is the layer the user actually interacts with for your event processing.

If their is interest i will discuss this in greater detail with actual numbers to back up my claims here. I've done quite a bit of testing and this is the fastest way to process canvas games of any real size or scale.

M. Hagston