Dividing up spritesheet in Javascript
- by hustlerinc
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?
