Dividing up spritesheet in Javascript
Posted
by
hustlerinc
on Game Development
See other posts from Game Development
or by hustlerinc
Published on 2012-03-18T15:01:05Z
Indexed on
2012/03/18
18:24 UTC
Read the original article
Hit count: 301
JavaScript
|html5
I would like to implement an object for my spritesheets in Javascript.
I'm very new to this language and game-developement so I dont really know how to do it.
My guess is I set spritesize to 16, use that to divide as many times as it fits on the spritesheet and store this value as "spritesheet". Then a for(i=0;i<spritesheet.length;i++)
loop running over the coordinates.
Then tile = new Image();
and tile.src = spritesheet[i]
to store the individual sprites based on their coordinates on the spritesheet.
My problem is how could I loop trough the spritesheet and make an array of that? The result should be similar to:
var tile = Array(
"img/ground.png",
"img/crate.png"
);
If possible this would be done with one single object that i only access once, and the tile array would be stored for later reference.
I couldn't find anything similar searching for "javascript spritesheet".
Edit: I made a small prototype of what I'm after:
function Sprite(){
this.size = 16;
this.spritesheet = new Image();
this.spritesheet.src = 'img/spritesheet.png';
this.countX = this.spritesheet.width / 16;
this.countY = this.spritesheet.height / 16;
this.spriteCount = this.countX * this.countY;
this.divide = function(){
for(i=0;i<this.spriteCount;i++){
// define spritesheet coordinates and store as tile[i]
}
}
}
Am I on the right track?
© Game Development or respective owner