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

Filed under:
|

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

Related posts about JavaScript

Related posts about html5