HTML and CSS Reference
In-Depth Information
Listing 5-1.
The SpriteProto definition
function SpriteProto(){
this.filename="";
this.imgHandle=null;
this.size={w:0,h:0};
this.load= function(filename,w,h)
{
var targetSpriteProto = this;
this.size.w = w;
this.size.h = h;
var img = new Image();
img.onload = function(){
targetSpriteProto.imgHandle = img;
}
img.src = filename;
}
}
For most game build-chains, you'll generally create some sort of designer or artist-centric view of the world
ahead of time. That is, before this level is actually loaded by the user, you have a pretty good idea what assets will be
needed to load, simulate, and display this level. As such, you don't define a complex asset dependency hierarchy here,
but rather brute-force the loading of your basic proto-sprites so that they can be used by object instances later. During
your initialization, you fill the globally accessible
protoSprites
array using the
loadProtos
function (see Listing 5-2).
Listing 5-2.
Loading a set of prototype images
var protoSprites = new Array();
//--------------
function loadProtos()
{
//technically, this should be an atlas definition!
var imgs=[
{nm:"0.png",w:66,h:42},
{nm:"1.png",w:66,h:52},
{nm:"2.png",w:66,h:46},
{nm:"3.png",w:70,h:65}
];
for(var i =0; i < imgs.length; i++)
{
var sp = new SpriteProto();
sp.load(imgs[i].nm,imgs[i].w,imgs[i].h);
protoSprites.push(sp);
}
}
Note that for your purposes, you don't just list the path to the image, but also the width and height of the bitmap
in pixels. These image-specific bounding conditions are important for gross-level picking that we'll discuss a bit later
in the bounding boxes section.
