Multi-level HTML5 game layout loading

Get help using Construct 2

Post » Wed Sep 04, 2013 10:33 am

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! Algrig2013-09-04 15:59:10
B
4
S
1
Posts: 5
Reputation: 360

Post » Sat Sep 07, 2013 12:12 am

@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).
B
12
S
3
G
1
Posts: 347
Reputation: 2,866

Post » Sat Sep 07, 2013 12:23 pm

@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.
B
4
S
1
Posts: 5
Reputation: 360

Post » Sat Sep 07, 2013 12:58 pm

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.
B
12
S
3
G
1
Posts: 347
Reputation: 2,866


Return to How do I....?

Who is online

Users browsing this forum: Darth Crusher and 2 guests