7
\$\begingroup\$

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.

Improve this question
\$\endgroup\$

1 Answer 1

Reset to default
6
\$\begingroup\$

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>

See the code in action.

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.

Improve this answer
\$\endgroup\$
1
  • \$\begingroup\$ Thanks, it turns out that I need a resource manager anyway. Besides doing like you did, my resources need some initialization before it's ready to use. For example, shaders in webgl. If resources need initialization, we can't just rely on browser. \$\endgroup\$
    – eckyputrady
    Jan 1, 2012 at 9:12

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .