Time for action – adding the loading screen

We'll place loading screens when the application launches and before the game level starts. This tells the user that more content or information is on its way.

  1. Create a new file called loadmainmenu.lua in your project folder.
  2. Import Composer and add in the composer.newScene() function:
    local composer = require( "composer" )
    local scene = composer.newScene()
  3. Create two local variables called myTimer and loadingImage. Add in the create() event and a sceneGroup display group:
    local myTimer
    local loadingImage
    
    -- Called when the scene's view does not exist:
    function scene:create( event )
      local sceneGroup = self.view
    
      print( "\nloadmainmenu: create event" )
    end
  4. Create the show() event and add in a sceneGroup display group:
      -- Called immediately after scene has moved onscreen:
    function scene:show( event )
      local sceneGroup = self.view
    
      print( "loadmainmenu: show event" )
  5. Introduce the loadingImage display object:
      loadingImage = display.newImageRect( "loading.png", 480, 320)
      loadingImage.x = 240; loadingImage.y = 160
      sceneGroup:insert( loadingImage )
  6. Create another local function called goToMenu() and call composer.gotoScene( "mainmenu", "zoomOutInFadeRotate", 500 ) to change the scene to "mainmenu":
        local goToMenu = function()
          composer.gotoScene( "mainmenu", "zoomOutInFadeRotate", 500)
        end
  7. Use the timer function and have it call goToMenu()once every 1,000 milliseconds. Define it with the myTimer timer ID. Close the show() event with end:
        myTimer = timer.performWithDelay( 1000, goToMenu, 1 )
      end
  8. Call the hide() and destroy() events. In the hide() event, cancel myTimer:
    -- Called when scene is about to move offscreen:
    function scene:hide()
    
      if myTimer then timer.cancel( myTimer ); end
    
      print( "loadmainmenu: hide event" )
    
    end
    
    -- Called prior to the removal of scene's "view" (display group)
    function scene:destroy( event )
    
      print( "destroying loadmainmenu's view" )
    end
  9. Add event listeners for all the scene events and for return scene. Save and close the file:
    -- "create" event is dispatched if scene's view does not exist
    scene:addEventListener( "create", scene )
    
    -- "show" event is dispatched whenever scene transition has finished
    scene:addEventListener( "show", scene )
    
    -- "hide" event is dispatched before next scene's transition begins
    scene:addEventListener( "hide", scene )
    
    -- "destroy" event is dispatched before view is unloaded, which can be
    scene:addEventListener( "destroy", scene )
    
    return scene
  10. Create a new file called loadgame.lua in your project folder. We'll make another loading screen that occurs right before the game scene, maingame.lua. Use composer.gotoScene( "maingame", "flipFadeOutIn", 500 ) to transition scenes. Save and close your file:
    local composer = require( "composer" )
    local scene = composer.newScene()
    
    local myTimer
    local loadingImage
    
    -- Called when the scene's view does not exist:
    function scene:create( event )
      local sceneGroup = self.view
    
      -- completely remove mainmenu
      composer.removeScene( "mainmenu" )
    
      print( "\nloadgame: create event" )
    end
    
    
    -- Called immediately after scene has moved onscreen:
    function scene:show( event )
      local sceneGroup = self.view
    
      print( "loadgame: show event" )
    
      loadingImage = display.newImageRect( "loading.png", 480, 320)
      loadingImage.x = 240; loadingImage.y = 160
      sceneGroup:insert( loadingImage )
    
      local changeScene = function()
        composer.gotoScene( "maingame", "flipFadeOutIn", 500 )
      end
      myTimer = timer.performWithDelay( 1000, changeScene, 1 )
    
    end
    
    -- Called when scene is about to move offscreen:
    function scene:hide()
    
      if myTimer then timer.cancel( myTimer ); end
    
      print( "loadgame: hide event" )
    
    end
    
    -- Called prior to the removal of scene's "view" (display group)
    function scene:destroy( event )
    
      print( "destroying loadgame's view" )
    end
    
    -- "create" event is dispatched if scene's view does not exist
    scene:addEventListener( "create", scene )
    
    -- "show" event is dispatched whenever scene transition has finished
    scene:addEventListener( "show", scene )
    
    -- "hide" event is dispatched before next scene's transition begins
    scene:addEventListener( "hide", scene )
    
    -- "destroy" event is dispatched before view is unloaded, which can be
    scene:addEventListener( "destroy", scene )
    
    return scene
    Time for action – adding the loading screen

In the loadmainmenu.lua file, once loadingImage was added to the screen, we created the goToMenu() function to change scenes to "mainmenu" and use the "zoomOutInFadeRotate" transition that zooms out and rotates the loading screen image as it fades to the background. The myTimer = timer.performWithDelay( 1000, goToMenu, 1 ) statement performs the function in 1,000 milliseconds (one second) and runs it once. This is long enough to view the image and have it fade out.

All display objects enter the scene by function scene:show( event ). The loadingImage object is placed in sceneGroup. To make sure we have no timers running after the scene change, myTimer stops running with the use of timer.cancel(myTimer) under function scene:hide().

The code for loadgame.lua is similar to loadmainmenu.lua. For this file, Composer transitions scenes to maingame.lua, the game play file.