Game Development Stack Exchange is a question and answer site for professional and independent game developers. It only takes a minute to sign up.
Sign up to join this community
Usually, resource manager is needed for desktop/mobile games. But is it needed for HTML5 (browser) games?
Resource manager's main responsibility is to make sure there is no clone of a resource in memory. But in browser, when you request something, the request is usually cached. So when you make another request to the same resource, the resource is not loaded anymore. You immediately get it. (CMIIW).
So, do you need resource manager for html5 browser games?
Thanks.
Unless you go beyond what can reasonably be stored in memory you don't need an advanced resource manager. That is true for desktop games as well, most "small" games get away with just loading everything into memory at launch, and then it's there when needed.
In HTML and JavaScript you don't have direct control of resources in the same way, the browser has a built in resource manager working for you. However, it may be a good idea to help it a bit in order to achieve having all images loaded at launch and preventing them from getting unloaded when not in use.
For this purpose you can create a bunch of image elements and attach the needed images to them, this will cause the images to get loaded and stay in memory. You don't even need to attach them to the document, they can simply exist as virtual entities in your script.
Here is the loading part of a game I wrote. It loads 27 images in the manner described, it continually checks if they are all loaded along with the document body, it displays a counter to the user telling how far the loading has progressed and finally calls a function to render the menu when all assets are loaded.
<body onload="bodyloaded=1">
<div id='maindivid'>
<p id='loadtext' style='text-align:center;'>
Loading 0/28
</p>
</div>
<script type="text/javascript">
bodyloaded=0
prlimg=new Array
for(a=0;3>a;a++){
prlimg[a]=new Array
for(b=0;3>b;b++){
prlimg[a][b]=new Array
for(c=0;3>c;c++){
prlimg[a][b][c] = new Image
prlimg[a][b][c].src = a+(b+(c+".png"))
}
}
}
function updateload(){
elementsloaded=bodyloaded
for(a=0;3>a;a++){
for(b=0;3>b;b++){
for(c=0;3>c;c++){
elementsloaded+=prlimg[a][b][c].complete
}
}
}
document.getElementById('loadtext').innerHTML="Loading "+elementsloaded+"/28"
if(elementsloaded==28){menu()}
else{setTimeout("updateload()",100)}
}
updateload()
</script>
//Further code goes here
</body>
When I look at it again there is a couple of things I could have done differently, but it should suffice to demonstrate the functionality.
