Preloader screen

Hello, everybody! I'm thinking about "preloader screen" in projects. So what i'm need for that?

1. I need to draw something BEFORE loading everything else (especially "high weight"), like "Loading...";
2. Will be nice to get some value of progress, like 3/5Kb loaded, or 0.1 complete (as 10%) etc.

Search for forum & examples - not found a thing pointing me to find solution... Maybe someone do such a thing?

About (1) part: currently i'm try 2 ways:

• Drawtext on init before everything else
• same thing, but in ondraw But putting "big" sprites (much of them, specially to check this moment) getting black screen currently for a few sec and only then text...

To point 1:
One can reassign the draw and update loops. That allows to create multiple screens where each has its own 'main' loop. Keeps everything nicely structured and they don't interfere with each other. Many ways to do that, here one example:

https://microstudio.dev/i/TinkerSmith/rndmaze/

To point 2: By what I am aware off the loading info is not available, maybe worth a feature request?
When I had a lot to load I took a 'guess' and delayed accordingly.

@TinkerSmith thanks! Will be experimenting with this. Looks promising :)

@TinkerSmith, maybee i misunderstand something, but can't make it works in this way...

A simple preloader project:

https://microstudio.io/i/WolfDigital/preloader/

The main goal is:

• at least draw/print something on-screen before loading pictures/sounds/music
• if possible draw some progress bar (searching for such suggestion, if there are not - write one)

On the phone atm, so can't do much. But if you'd like to show the text for some time before that game starts you could get away by adding a sleep command between it and the game init.

In that case you wouldn't even need the extra _update and _draw redirect and could put it all in the main.

The way I split it was because I wanted some animation on my title screen. What in your case could be the loading screen with some homemade loading animation instead.

Hope it makes sense :)

Put this into your 'init' loop, is this what you imagine?

init = function()
  // fake loading screen
  for count=0 to 100 by 1
    screen.clear()
    screen.drawText("Loading",0,15,14,"#fff")    
    screen.drawText(count+"%",0,-15,14,"#fff")
    screen.fillRect(0,0,count,8,"#f00")
    screen.drawRect(0,0,100,8,"#fff")
    sleep 50 milliseconds // delay
  end
  screen.clear()
  game_init()
end

Live Long and Tinker

TinkerSmith, not really...

Fake loading not interested, because some users can have "slow" internet and this should be too long or work incorrectly...

Maybe there will be such value in future updates, will be wait.

And all content (pictures, sounds etc) loaded first as i can see, so i see "loading" only after blacksreen (in which loading resources processing)

Already older thread, but...

Not sure if this is what you are looking for, but sprites and maps have a "ready" state.

init = function()
  /// VERY simplified for demonstration purposes - probably want to loop through all your sprites and maps.
  while not mysprite.ready 	// ready == 1 when the sprite is fully loaded, 0 otherwise.
    ShowLoadingScreen()
  end
end

Can't seem to find the equivalent for SOUND and MUSIC, tho...

@Martellus

Oh, yes!

That should do! Nice!

Thank!

@Martellus

Can you make some more explaned code example?

Looks like i'm stuck with sprites:

init = function()
  screen.drawText("Preloading!", 0, 0, 30, "#FFF")

  while "sprite1".ready < 1
    screen.fillRect(0, -30, 80, 20, '#000')
    pp = "sprite1".ready * 100
    screen.drawText(pp + '%', 0, -25, 12, '#DD3')
  end

  game_init()
end

Makes loading eternal (always shows 0%)

When i put:

init = function()
  screen.drawText("Preloading!", 0, 0, 30, "#FFF")

  while sprite1.ready < 1
    screen.fillRect(0, -30, 80, 20, '#000')
    pp = sprite1.ready * 100
    screen.drawText(pp + '%', 0, -25, 12, '#DD3')
  end

  game_init()
end

It throws an errors:

Warning: sprite1 is not defined, defaulting to zero, in file "main" at line 4, column 15
Warning: sprite1 is not defined, defaulting to zero, in file "main" at line 6, column 16

Example project is still here:

https://microstudio.io/i/WolfDigital/preloader/

There is no sprite1 in your project. Also, the 'ready' parameter only returns 0 or 1. Best would be to loop through all sprites and use the sprite count itself.

Had a quick test with your sprites. Initially I thought I just use 'sprites.length', but that didn't work. So I had to count the elements manually. Ended up like this:

init = function()
  screen.drawText("Preloading!", 0, 0, 30, "#FFF")

  startTime = system.time()  // just for testing
  
  count = 0  
  for i in sprites
    count +=1
  end  
  
  while check != count
    check = 0
    for i in sprites
      if sprites[i].ready then check +=1 end
    end
  end
  
  print("Loaded "+count+" sprites in "+(system.time()-startTime)+" ms")  // for testing
  
  game_init()
end

It returns for me between 2 and 4 milliseconds. Too short for a loading screen, but might change with bigger sprites.

On second thought, I think that doesn't work. Not sure if the global 'sprites' is properly set up before the init has done it's job. Just checked it on one of my projects that has heaps of sprites to load. One where one actually has to wait a bit and it still tells me between 2 and 4 milliseconds.

Experts please?

At the very beginning of microStudio, resource loading (sprites, maps) was asynchronous and you could use sprite.ready to check whether a particular sprite was loaded. I wanted things to be simpler for beginners though, thus at some point I revisited the launch sequence of the apps and made it so that all sprites and maps have to be fully loaded before the game code starts executing. Thus in this current version, you will never meet a sprite.ready which would not be true. The main drawback is that loading time can be long and you cannot make a real custom loading screen.

Here is what I have been thinking to improve this:

1. I can add a built-in, non-customizable progress bar when loading a project ; it's always better to have some visual feedback

2. I would also add a new project option [X] Asynchronous loading ; when this is checked, your program starts immediately, but resources may not be all loaded yet ; you can use sprite.ready and map.ready to check whether resources are loaded. You could also use a field system.loading_progress which value would move from 0 to 100 when loading resources. When this option is checked, the built-in progress bar is disabled, thus allowing you to create your own loading screen.

Let me know if I am forgetting something :-)

@gilles, as always great! Nice idea.

Yes, preloader indeed needed, some people still have very low internet (always by region or locally by disturbance in the force :3 ) down to 64Kb/sec (sometimes lower, brocken packets & stuff).

@TinkerSmith - thanks, this was make it more clear :)

@gilles Maybe also there could be a new function that is only used when asynchronous loading is enabled: preload(). It would essentially act as draw(), but it's called when there are still things that aren't loaded.

@gilles, I've see preloader screen appears :) Thanks! Should be "roadmap" topic for this I think (if there are planned some functionality to work with it, like color change, or some drawing works, etc...) :)