Highlighted

html5 canvas - how to manually manage asset loading?

Community Beginner ,
Jul 30, 2019

Copy link to clipboard

Copied

I'm producing an online animated children's storybook, with voice over, music, and animated graphics, so the assets are quite large over the entire project. I have been working on it with each scene (double page spread) being a separate animate file, and therefore loading a new html page for each scene. The reason for this method was to limit the amount of assets loaded at the start, and only load when needed. However I've now come across the problem that the audio will require the user to click to accept on each new html file load, due to browser autoplay limitations, which is not the sort of experience anybody would want once they've started.

Therefore if I am to build all scenes into one animate file, how can I manage the loading of the assets to only load when needed, to improve initial loading?

If I use spritesheets can I manage what each spritesheet contains and load it when required? It appears that the spritesheets function is fully automated, as is the loading of assets.

At the moment the download sizes looks like about 87Mb total, with initial load for cover needing to be only about 7Mb, and subsequent scenes about 13Mb each.

While 87Mb doesn't seem huge, we don't want to alienate people on slow connections, as some early childhood centres and rural communities have poor internet speeds.

Views

80

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

html5 canvas - how to manually manage asset loading?

Community Beginner ,
Jul 30, 2019

Copy link to clipboard

Copied

I'm producing an online animated children's storybook, with voice over, music, and animated graphics, so the assets are quite large over the entire project. I have been working on it with each scene (double page spread) being a separate animate file, and therefore loading a new html page for each scene. The reason for this method was to limit the amount of assets loaded at the start, and only load when needed. However I've now come across the problem that the audio will require the user to click to accept on each new html file load, due to browser autoplay limitations, which is not the sort of experience anybody would want once they've started.

Therefore if I am to build all scenes into one animate file, how can I manage the loading of the assets to only load when needed, to improve initial loading?

If I use spritesheets can I manage what each spritesheet contains and load it when required? It appears that the spritesheets function is fully automated, as is the loading of assets.

At the moment the download sizes looks like about 87Mb total, with initial load for cover needing to be only about 7Mb, and subsequent scenes about 13Mb each.

While 87Mb doesn't seem huge, we don't want to alienate people on slow connections, as some early childhood centres and rural communities have poor internet speeds.

Views

81

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 30, 2019 0

Have something to add?

Join the conversation