How do I create a Loading screen in Corona SDK?

Question

My game is High Definition, and I use a lot of HD images and spritesheets, taking up a LOT of texture memory. The result is that I get an ugly black screen before my Scene loads, spaning for some seconds. So I want to make a loading screen. Actually two. One for my main menu and one for my main game. I searched a lot the whole day, but I didn't find any steps for making a loading screen.

What I want to do:

-Having a loading screen, with just a text saying "LOADING..." and another text with a percentage that calculates how much my next screen assets have loaded.

-After I'm done, I want to remove my loading screen and start my main menu scene, or my main game scene, with no delay.

I'm developing for Android, but any comments for iPhone as well are welcomed.

How does the storyboard know if my scene following is loaded and in what percentage? Where should I put my newImageRects? I couldn't find a single tutorial.

Answer 1

In your main.lua you should create a function loadAlImages() where you will load all your HD images and spritesheets.

local loadingText = display.newText("LOADING ...", 0, 0, native.systemFont, 24)
myText:setTextColor(255, 255, 255)

local function loadAlImages()
    --create all your images here.

    --remove LOADING text
end

--if you still see black screen at the start try to increase delay > 500 ms  
timer.performWithDelay( 500, loadAlImages, 1 )

---

Now if you want to show and update another text with a percentage that calculates how much your next screen assets have loaded you should create your images, sprites with .isVisible=false and when they are all created change .isVisible=true. You can put some code that updates the percentage text after you created some images.

local loadingText = display.newText("LOADING ...", 0, 0, native.systemFont, 24)
myText:setTextColor(255, 255, 255)

local function loadAlImages()
    --create some images here.
    --update text's percentage to 20%
    --create some images here.
    --update text's percentage to 50%
    --create some sprites here.
    --update text's percentage to 90%
    --change **.isVisible=true** for all your created files but **.alpha=0**
    --update text's percentage to 100%
    --remove LOADING text
    --transition .alpha of all images to 1
end

timer.performWithDelay( 500, loadAlImages, 1 )

I think you can put all your images files in one display group and set .isVisible=false on this group. This will save you some lines of code. The same for .alpha=0

---

There are many ways. You can declare your variables and then create them in loadAlImages() function or you can put them all in a table and use that table to get the image you want. The first example:

local image

local function loadAlImages()
    --create some images here.

    image = display.newImageRect( "image.png", 100, 100 )
    image:setReferencePoint( display.CenterReferencePoint )
    image.x = display.contentCenterX
    image.y = display.contentCenterY

    --create some sprites here.
end

---

Example with the table:

local imagesTable = { }

local function loadAlImages()
    --create some images here.

    local image = display.newImageRect( "image.png", 100, 100 )
    image:setReferencePoint( display.CenterReferencePoint )
    image.x = display.contentCenterX
    image.y = display.contentCenterY
    imagesTable.image = image

    --create some sprites here.
end

More info:
http://lua-users.org/wiki/ScopeTutorial
http://www.coronalabs.com/blog/2011/06/21/understanding-lua-tables-in-corona-sdk/
http://lua-users.org/wiki/TablesTutorial

Answer 2

I assume that, you preload all images before using them in a scene..

display.newImage()

function would do that. So here is what you should do:

1.Do nothing with images but call a loading image with display.newImage() function. This will display a loading screen. After calling that, wait 500ms and call all other images. When the game should go to main menu, remove the loading screen I mean:

local loadImg = display.newImageRect( "loading.png" .. blah blah )

timer.performWithDelay( 500, function() -- load all other images then main() end, 1 )