Offline loading screen between each layout?

Hi all,

Thanks for taking a look at this. I have searched the forum and googled, but I could not find a solution.

If you could help or point me in the right direction, it would be fantastic.

I'm making an offline desktop game (using node devkit) that uses a lot of images, it works well

but between each layout it pauses for about 6 seconds as the images from the next layout are loaded into memory.

The 6 second load time is not a problem, but currently it just shows a blank screen.

I need to show a loading graphic to reassure the player the game is loading and it hasn't crashed.

I know how to make a customized project pre-loader, but how can I make one that shows between

each layout transition?

I would really appreciate your help here,

thanks.

Maybe try to create a layout with loading screen and then after a second load all images needed offscreen. Once loaded they should cache and you can just go to the layout after - lets say - estimate 6 seconds.

This could help a lot...

I was researching this issue before as well and didn't found answer, maybe someone have better idea.

Yes!, use a loader layout. you said it is an offline game, so load everything at the beginning of the game using loader layout.

Or, when you call the next layout, show a loader and invisible it at the last line of onload event or load completed event in next layout.

funkyy tharindutpd thanks for the suggestions.

tharindutpd

First, loading everything into memory at the beginning of the game using 1 loader layout <img src="{SMILIES_PATH}/icon_eek.gif" alt=":shock:" title="Shocked"> that isn't going to work.

I'm making a big game and it would eat up vast amounts of memory. With layout by layout memory management it is fine, but loading everything on

start up will never work. (this is our game: http://www.indiedb.com/games/tokyo-dark)

"show a loader and invisible it at the last line of onload event or load completed event in next layout"

This is what I want to do, but actually it appears to be more difficult than you make it seem.

If you look here: https://www.scirra.com/tutorials/318/ho ... ng-screens

you fine this: " Loader layouts are only ever shown the very first time the game is being downloaded from the web. Since Construct 2 games save to disk so they can work offline, the next time the user plays the game it will load instantly. Even if you update your game, it will still load instantly."

The problem is that due to having a lot of images it is no longer instant.

funkyy

Yeh, I was thinking about something along those lines <img src="{SMILIES_PATH}/icon_idea.gif" alt=":idea:" title="Idea"> , make a separate layout, that starts with only a 'loading image' then in the background, create copies of the large sprites and images from the layout I want to load. -doesn't matter if this causes jank, as it's a loading screen. (Am I right in thinking if images are the same between layouts they stay in memory?) If so, then once I create the bulk of my images in my 'loading layout' I can load up the actual layout without much of a delay? <img src="{SMILIES_PATH}/icon_question.gif" alt=":?:" title="Question">

something like this.

[Layout 1] -> [ Layout 2A - display loading icon -(create copies of Layout 3's images, loading them into memory)] -> [Layout 3] -> [ Layout 2B - display loading icon -(create copies of Layout 4's images, loading them into memory)]-> [Layout 4]

Can anyone see any reason why this wouldn't work? The images can't start inside the loading layout [layout2] and must be loaded (created) into it. otherwise you'd need a loader for the loader. <img src="{SMILIES_PATH}/icon_e_wink.gif" alt=";)" title="Wink"> but if I create them in the loader layout [layout2] will they stay in memory for the next layout [Layout 3]?

Humm... or maybe I'm far off track and talking nonsense?

Any more suggestions on better ways to do this would be great!

StaticCloud Hey Static, noticed this last message was from 2014. Did you ever find a solution to your problem? I have the same issue and Construct requires the frame to freeze when switching between layouts. Not even an animated loader works. Wish there was a way to load other layouts on a function versus at the beginning of the whole app.

Any news or solutions, guys? I faced the same problem.

There were several topics regarding this issue, but no perfect solution. What work best for me is:

1. create a global layer "Layout Loader" as a top layer (it can be a blank layer or layer with pretty sprite saying "loading in progress" - whatever suits your app)

2. set its "initial visibility" to "visible" by default

3. just before jumping to the next layout set its "initial visibility" to "visible" (no it's not a mistake, yes I know I just wrote that in point 2, but just keep on reading)

4. On start of layout (every layout) loading screen is still visible because "Layout Loader" is visible by default. Thanks to this user won't even notice when the layout switches. At this time C2 engine loads everything what's below the loading screen (so it basically loads a layout).

Now the good question is "when should I hide the loader screen?". Well you can set some static time with wait function and hide it after - let's say - 6 seconds.

OR

You can be a bit smarter and check when the loading process is done. There is no built in solution to check that (at least I am not aware of it), but you may use the "fps" value. On start of every layout FPS drops drastically because of loading and rendering initial objects.

So you can do something like:

Every 0.3 seconds -> add 1 to "timesChecked" (this is some local static variable)

if FPS >= 30 (let's assume 30 FPS as a minimum fine framerate)

OR

timesChecked >= 20 -> hide "Layout Loader"

So the "Layout Loader" will be hidden as soon as the FPS will get high enough to play game smothly OR after 6 seconds (timesChecked*0.3s). Second condition is important because some devices (older mobiles for instance) might never get 30 FPS even if everything gets loaded and would be stucked with loading screen forever.

This is ofcourse a short example and you can upgade it a bit in a various ways, but I believe you get the point now.

—, it works perfect for me. Thank you very much for the elegant and intelligent solution!

Glad you found it useful — . I've extended it a little bit, and added example screen shot of how I use it in my projects and made a tutorial of it: https://www.scirra.com/tutorials/4832/how-to-smoothly-switch-between-layouts. I think others might find it useful as well since it is pretty common problem.

Thank — I'm going to try it out. I think it will work for me ^ ^

It worked beautifully Thank you so much —

Thank you — ! Always wondered to go about doing this

— - Nice method for that.

But I have my own solution for a "mid-game" layout loader:

• Create a new layout as the loader
• Create an animated sprite for the loading indicator inside the layout
• Create a variable for the sprite and name it "load" or anything you think best
• Create a global text variable and name it "target_layout" or anything else

Then, add these events to the layout's event sheet:

== loader.load < 6000

--- Add fps to loader.load

== loader.load >= 6000

--- Go to layout "target_layout"

Finally, in the event when it should go to the loader and load the desired layout, set the "target_layout" variable to the name of the layout you want to enter, and go to the loader layout.

I hope it could work.

Hmm. Does it work? It doesn't sound like it should.

First of all your loader layout is in between those you want to switch from/to. So once you jump to the destination layout, engine has to load the destination layout assets anyway.

Also you are checking if the loader.load is 6000 so on the fastest mobile it will take 100 seconds.

The third thing is that you use a global variable. I personally try to avoid polluting global scope as much as I can.

Or I don't understand your point.

— - Sorry for the late reply.

Probably you can change the value from 6000 to, I dunno, 500?