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!

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • 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.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)