javascript - Formatting a multidimensional array of image sprites -

javascript - Formatting a multidimensional array of image sprites -

i making function loads sprites game , not quite sure know how it. still feeling way around javascript , oop it's kind of lost on me. need select sprites spritesheet they're in, , index corresponds sprites location in spritesheet. want refer spritesheet letter , xy position number. tile("a", 132); spritesheets 512x512 pixels containing sprites each 32x32 pixels big making 256 sprites total per sheet multiple sheets. here have far:

function tileset(spritesheet, index){ this.spritesheet=spritesheet; this.index=index; this.spritesheetlist=["tileseta.png","tilesetb.png","tilesetc.png"]; this.tile=image; this.loadtiles = function(){ (sheet in spritesheetlist){ var dummyimage= new image; dummyimage.src=this.spritesheetlist[sheet]; spritesheetlist[sheet]=[]; (var y=0; y<16; y++){ (var x=0; x<16; x++){ this.spritesheetlist[sheet][y*16 + x]=dummyimage.getsubimage(x*32, y*32, 32, 32); }; }; }; homecoming this.spritesheetlist[spritesheet][index]; }; homecoming this.spritesheetlist[spritesheet][index]; };

there issues in code. don't know if using library, if tiles have size of 32x32 pixels, lastly 2 arguments of getsubimage should 32.

you should seek load tiles 1 time , not every time access tile.

i refactored code bit create more oop , reusable.

function tileset(spritesheetimages) { this.spritesheetimages = spritesheetimages; this.spritesheetlist = {}; } tileset.prototype.loadtiles = function() { (var = 0, len = this.spritesheetimages.length; < len; i++) { var image = new image(); image.src = this.spritesheetimages[i]; this.spritesheetlist[this.spritesheetimages[i]] = []; (var y = 0; y < 16; y++) { (var x = 0; x < 16; x++) { this.spritesheetlist[this.spritesheetimages[i]].push(image.getsubimage(x*16, y*16, 32, 32)); } } } }; tileset.prototype.gettile = function(spritesheetimage, tileindex) { homecoming this.spritesheetlist[spritesheetimage][tileindex]; }; var tileset = new tileset(["tileseta.png","tilesetb.png","tilesetc.png"]); tileset.loadtiles(); tileset.gettile("tileseta.png", 132);

now can create tilemap every time need to. used prototype methods, because functions aren't copied every instance. hope that's intended.

edit

to add together new spritesheet image can utilize method

tileset.prototype.addspritesheetimage = function(spritesheetimage) { var image = new image(); image.src = spritesheetimage; this.spritesheetlist[spritesheetimage] = []; (var y = 0; y < 16; y++) { (var x = 0; x < 16; x++) { this.spritesheetlist[spritesheetimage].push(image.getsubimage(x*16, y*16, 32, 32)); } } };

if want utilize spritesheet index can alter gettile method to

tileset.prototype.gettile = function(spritesheetindex, tileindex) { homecoming this.spritesheetlist[object.keys(this.spritesheetlist)[spritesheetindex]][tileindex]; };

javascript arrays multidimensional-array sprite