Load assets dynamically for HTML5

jzh

Member
My project is for HTML5 platform, and game loading stage takes long time when the webpage loads.
The reason is that the game needs to load (download from web server) all of its resources initially.

So I wonder whether there is a way to make the game load only a minimal required assets during game loading phase, and when moving to different rooms later load the required assets in that room.

This is not particularly an issue of CPU or memory optimisation, but simply for HTML5 platform a problem of pre-downloading too many resources at one go, website viewers have to wait long time till they could see the game GUI.

Thanks.
 
My project is for HTML5 platform, and game loading stage takes long time when the webpage loads.
The reason is that the game needs to load (download from web server) all of its resources initially.

So I wonder whether there is a way to make the game load only a minimal required assets during game loading phase, and when moving to different rooms later load the required assets in that room.

This is not particularly an issue of CPU or memory optimisation, but simply for HTML5 platform a problem of pre-downloading too many resources at one go, website viewers have to wait long time till they could see the game GUI.

Thanks.
Hi there!

You could make use of the asynchronous events (specifically the cloud event or the image loaded event depending on what resources you would like to fetch) You could have a "loading object" that will fetch data based on specific conditions at room start (rather room start than create as this object may need to be persistent for specifying conditions inside of its variables).

Just make sure your game and resources are hosted on the same domain otherwise you may run into cross domain issues.

Further more you could also try lower the size of images that are too large instead of making more work for yourself, that is, if it is needed.

Of course this is an overview, there are little bits of code we can go through as you progress.
 

jzh

Member
Hi there!

You could make use of the asynchronous events (specifically the cloud event or the image loaded event depending on what resources you would like to fetch) You could have a "loading object" that will fetch data based on specific conditions at room start (rather room start than create as this object may need to be persistent for specifying conditions inside of its variables).

Just make sure your game and resources are hosted on the same domain otherwise you may run into cross domain issues.

Further more you could also try lower the size of images that are too large instead of making more work for yourself, that is, if it is needed.

Of course this is an overview, there are little bits of code we can go through as you progress.
Thanks for your reply!

So for loading sprites dynamically, I shall use sprite_add together with asynchronous events. Is my understanding correct?

Normally GMS will process the project sprites and generate texture pages, but if the sprites are not included in the project and will be loaded dynamically, do I have to create the texture pages myself and figure out which sprite is where in the texture page when using them in GML?

Also what about sounds, what APIs are used to load sounds?

Thanks.
 
Thanks for your reply!

So for loading sprites dynamically, I shall use sprite_add together with asynchronous events. Is my understanding correct?

Normally GMS will process the project sprites and generate texture pages, but if the sprites are not included in the project and will be loaded dynamically, do I have to create the texture pages myself and figure out which sprite is where in the texture page when using them in GML?

Also what about sounds, what APIs are used to load sounds?

Thanks.
Yes your understanding is correct!

Yes usually it does create texture pages, if I do have a thorough understanding of how this works, then you don't need to create these texture pages yourself, instead when using sprite_add it will add it to the game normally like how you would when saying new sprite, you can then reference it via the variable you used with the sprite_add. So no trying to map your GML to find what texture page to use and where to look for your sprite.

With regards to API's for sounds, according to the documentation, the image loaded code can apply to sounds as well, not sure if you then have to use the image loaded event or the cloud events but the code used to interpret the result is the same and then using sound_add should do the trick.

You may need to experiment with this a little bit, also, keep in mind this may take up memory and CPU.

Nonetheless, Good Luck and let us know of your result! :D
 

jzh

Member
Thanks Luminous Wizard for your advice.
Regarding to "With regards to API's for sounds, according to the documentation, the image loaded code can apply to sounds as well", just looked at the document but couldn't find the info, would you be able to point me to the right doc please?

Also, sound_add seems to have been deprecated according to the document, and there seems to be no replacement to it in the new audio system...

Thanks.
 
Thanks Luminous Wizard for your advice.
Regarding to "With regards to API's for sounds, according to the documentation, the image loaded code can apply to sounds as well", just looked at the document but couldn't find the info, would you be able to point me to the right doc please?

Also, sound_add seems to have been deprecated according to the document, and there seems to be no replacement to it in the new audio system...

Thanks.
No problem, I'm happy to help anyway I can :D

Oh whoops, sorry that was my fault, completely forgot it was deprecated (I haven't needed to load sounds dynamically for a while)

An alternative then would be to use http_get_file and image_loaded.
 

True Valhalla

Full-Time Developer
GMC Elder
Good luck, this is a fairly challenging system to execute to a high standard. My team is working on a comprehensive framework for this at the moment.
 

jzh

Member
Yeap, it is always worth it to reduce the page load time, visitors are impatient :)
Mine would be good enough for my own projects, won't be as complicated as a framework, but will post what I found out.
 

jzh

Member
Tested the sprites loading dynamically, and the principle works.
Just found sometimes have to click the "clean project assets" button to clean compile caches, otherwise it gives strange errors. I think this GMS's bug.
 

jzh

Member
Good luck, this is a fairly challenging system to execute to a high standard. My team is working on a comprehensive framework for this at the moment.
Hi True Valhalla, just wonder whether you have come across problems with sprite_merge()?
I am using sprite_add to load external sprites but found the sprite width must not be larger than mobile devices texture memory. It normally means for me a 10+ subimages sprite sheet will have problem.
So have to split the sprite sheet, load separately and merge them back with sprite_merge().
However the merged sprite will have wrong sprite width, although the subimage number is correct (sum of the two sprites being merged).

Did you come across the same issue? Any workaround for it?

Thanks,
Jian
 

True Valhalla

Full-Time Developer
GMC Elder
Hi True Valhalla, just wonder whether you have come across problems with sprite_merge()?
Hi Jian - We're taking an entirely different approach. However, if there is a problem with sprite_merge() I'd recommend that you file a bug report.
 
Top