Multi-level HTML5 game layout loading

C2 is just fantastic for html5 games development. However, now I have been stuck to a problem. I am creating a multi-level (multi-layout) html5 game, with lots of different graphics on each layout and the player can choose which one to play.

THE PROBLEM: Since it is an html5 game, I need to optimise bandwidth usage of the game (so that it is always small, to be easily played on 3g devices). So, I do not need all the layouts, together with their graphics, to be pre-loaded at the very start. However, in C2 it seems impossible, since all the layouts are loaded at start, hence, a lot of unnecessary traffic is used. Even, when I load sprites at run-time, the game still grows in size as events and layouts are added.

THE DESIRED SOLUTION: Is there any way to tell the project to do a layout-by-layout loading. So that the traffic is used and the layout loaded, only when player has chosen the corresponding layout. I just do need it for html5, not for CocoonJS or so on.

ALTERNATIVE SOLUTION: Is there any way to call another project(game) within a project, without reloading the page. So that I could have created separate games (instead of separate layouts) and each game is loaded, when called within the main choice menu layout, which is a separate project by itself.

Thanks a lot!

Algrig if you create many separate projects the user will have issues if he goes offline and tries to visit a link to an unexplored project since it won't be cached.

Whats the size of you whole exported project? 3 or 5 megs is easily doable. And it has the advantage that layouts(and their files) get priority loaded as they are visited (so it is auto optimizing itself).

ghost thank you so much for the reply!

What I am now working on is not a standard game. It's more a bunch of special animations (layouts) of various sizes (300kb-8mb). When the user visits the website the starting layout is shown, where s/he can input some info and get a random animation for that day. The start layout itself is only 200kb, but should be visited daily to receive a random animation of the day. Animations are added and replaced in the project on a daily basis and I do not need the game to be playable offline.

Now you see, it is senseless that the user download the whole 8+mb project each day, when re-visiting the web-site. Taking into consideration the 3g connection on mobile devices, it turns out 240+mb of traffic a month, which is rather expensive. That is why layout-by-layout loading is so much important for me.

Anyway, your reply made me think on two aspects:

1. If the project has been downloaded to cache, won't it be downloaded once more if the user visit the web-site the next day?

2. If I add new layouts to the same project (c2runtime.js is changed), will the whole project be downloaded into cache or will only the updated elements be downloaded?

Besides, I am currently working on a scheme of tying different projects through the use of iframes and Browser object JavaScript execution capability. Seems to be ok. I will post here, as soon as I have a workable solution (hope by the end of weekend).

P. S. It is strange that in one of the C2 updates it was mentioned that layout-by-layout loading was working by default, if the browser supports WebGl. However, oddly, it is not the case with the Chrome, as my own tests has shown.

First you need to add the Browser object.

If you reupload the export folder, the current offline.appcache gets overwriten, and the browser downloads the files again.