As the title suggests, I’m working on putting together a simple game engine using vanilla js. I’ve taken on this project to redo the Dungeon Crawler assignment now that I’ve improved in my skill level. The following code is my asset loader. Please take a look and let me know if you think there are things I could be doing better, or things I should add. Thanks.
/*
AssetManager.js - (module)
Simple asset loading and storage for tilebased game engine.
By: Josh Sanders
Last edit: 3/18/21
*/
class TileSet {
constructor(img,tileWidth,tileHeight,cols,rows){
this.img = img;
this.size = { width:tileWidth, height: tileHeight };
this.sheet = { cols:cols, rows:rows };
}
getTile(index){
let row = Math.floor(index/this.sheet.cols);
let col = index%this.sheet.cols;
return { img:this.img, sx:col*this.size.width, sy:row*this.size.height, width:this.size.width, height:this.size.height };
}
}
const Assets = {};
export default class AssetMan {
constructor(){
this.loadingCnt = 0;
}
/*
loadAsset(data,cb)
cb = function(string){} // Called when asset is loaded
data for images = { type:"Image", id:string, path:string }
data for TileSheets = { type:"TileSheet", id:string, tileWidth:number, tileHeight:number, cols:number, rows:number, amount:number, path:string };
data for Sound = { type:"Sound", id:string, loop:boolean, autoplay:boolean, volume:Number(0.0-1.0), path:string }; //Uses Howler Lib for audio
*/
loadAsset(data,cb){
if(data.type=="Image"){
Assets[data.id] = new Image();
Assets[data.id].src = data.path;
Assets[data.id].addEventListener("load",()=>{ this.loadingCnt-=1; cb(data.id); });
} else if ( data.type=="TileSheet" ){
Assets[data.id] = new TileSet(new Image(),data.tileWidth,data.tileHeight,data.cols,data.rows);
Assets[data.id].img.src = data.path;
Assets[data.id].img.addEventListener("load",()=>{ this.loadingCnt -=1; cb(data.id); });
} else if( data.type=="Sound") {
Assets[data.id] = new Howl({ src:data.path, loop:data.loop, autoplay: data.auto, volume: data.volume });
Assets[data.id].once('load',()=>{ this.loadingCnt -=1; cb(data.id); });
}
}
assignAsset(data,id){ Assets[id]=data; }
batchLoad(data,cb){
let cnt = data.length;
data.forEach((cv)=>{
this.loadAsset(cv,(id)=>{ console.log("Loaded: "+id); cnt-=1; if(cnt==0){ cb(); }; });
});
}
getAsset(ID){ return Assets[ID]; }
loading(){ return !this.loadingCnt; }
}