Level selector

Hi guys.

I’m trying to make a “level selector” screen.

I’ve made a start screen, and I’m making a level selector screen, using Storyboard.

EX:

If you tap on the first image you got to Lvl1
tap the second image you go to lvl 2 etc etc.

How would I approach this ? 

Thanks for any reply.
 

local object = display.newImage( "level1.png" ) object.id = "level1" local function onObjectTouch( event ) if event.phase == "began" then storyboard.gotoScene( "level1", "fade", 400 ) end return true end object:addEventListener( "touch", onObjectTouch )

Would this be the correct way to go ? 

Hi @sindrekristiansen,

You are almost there but you may add event.target.id.

try this

local object = display.newImage( "level1.png" ) object.id = "level1" local object = display.newImage( "level2.png" ) object.id = "level2" local function onObjectTouch( event ) local level = event.target.id if event.phase == "began" then storyboard.gotoScene( level, "fade", 400 ) end return true end object:addEventListener( "touch", onObjectTouch )

Good Luck!

burhan

Thanks for the reply burthan.

I want multiple level’s on the " Level selector screen " 

Ex:

5 levels, if you press on picture 1 you go to level 1, picture 2 you go to level 2 etc etc

Do I need to add this multiple times ? 

 

local function onObjectTouch( event ) local level = event.target.id if event.phase == "began" then storyboard.gotoScene( level1, "fade", 400 ) local function onObjectTouch( event ) local level = event.target.id if event.phase == "began" then storyboard.gotoScene( level2, "fade", 400 ) 

And how does Corona / Lua know that when you press the first picture, you go to level 1 etc

There’s nothing in that function " onObjectTouch " that tells it when you press pic 1,
you go to Level.Lua

I’m sorry if I’m writing this complicated, I just want to understand this.

Thanks again!

hi,

You just need to create your display objects. 5 pictures in your case.

You add the object.id to them. level1 to level5

in your onObjectTouch  function (created just once) you have

local level = event.target.id .

level will change depending on which image(display object) you clicked.

Then gotoscene will go to the level which you clicked.

burhan

Hi @sindrekristiansen,

If you’re using level director (which i think your are) can you not just add 5 button objects to your scene?

In code you simply attach the onPress event handler to each button which in turn will have the code to launch each level?

2rdcdig.png

I’m getting this error, what could it be ? 
I’m just trying out one button for now.

@retrofitProductions

I’m not using level director right now, I just want to learn basic lua before I jump into LD again.
It’s a verry nice software, but I need to learn the basics first I think.
 

Yes learning the basics is a good idea.

I think from the screenshot it appears that newImage is failing therefore your object var is nil.

Are you sure your image is named correctly and is not in a sub folder?

Yes, the image is named correctly and is not in a sub folder.    Thanks for replying

So I’m now able to go to the levels.lua, 

local object = display.newImage( “level1btn.jpeg”) is wrong, when I changed to jpg it worked.
local object = display.newImage( “level1btn.jpg”)  is correct

But the level selection “buttons” is not visible.

Try setting a position too;

object :translate( x, y )

local object = display.newImage( "Shape1.jpg") object.id = "level1" object:translate( 150, 50)

I tried that ? Is that correct ? 
It’s still not showing.

Is there another image in front of that one? Corona layers images from back to front, so creating an alien display object and then creating a background display object means the alien won’t be seen.

Also, are you see in any error messages?

 Jay

Actually, I noticed from your screenshot that you are creating a new scene via storyboard but have not setup any storyboard events such as enterScene or createScene.

If your coming to this scene from another via storyboard.goto then this will confuse it because it will load your module, display your image, then create the scene.view which will not have your object inside it.

Take a look at the Corona storyboard example and use it as a template. 

You can then move for you code to load the image in createScene and add it to the scene group.

--------------------- -- levels.lua --------------------- local storyboard = require ( "storyboard") local scene = storyboard.newScene() --------------------- -- Beginning of code --------------------- local centerX = display.contentCenterX local centerY = display.contentCenterY --local image -- called when the scenes view does not exist: function scene:createScene( event ) local screenGroup = self.view image = display.newImage("BGlvl.jpg", centerX, centerY) image.touch = onSceneTouch print( "n1: createScene event") end local object = display.newImage( "Icon.png" ) object:translate(44, 50 ) object.id = "level1" local function onObjectTouch( event ) local level1 = event.target.id if event.phase == "began" then storyboard.gotoScene( "level1", "fade", 400 ) end return true end object:addEventListener( "touch", onObjectTouch ) -- Called immediately after scene has moved onscreen function scene:enterScene( event ) print( "1: enterScene event" ) -- remove previous scene's view storyboard.purgeScene( "start" ) -- called immediately after scene has moved onscreen function scene:exitScene( event ) print( "1: exitScene event" ) -- remove touch listener for image image:removeEventListener( "touch", image ) end end -- called prior to the removal of scenes view (display group) function scene:destroyScene ( event ) print( "(( destroying start view))") end --------------------------------------------------------------------------------- -- END OF YOUR IMPLEMENTATION --------------------------------------------------------------------------------- -- "createScene" event is dispatched if scene's view does not exist scene:addEventListener( "createScene", scene ) -- "enterScene" event is dispatched whenever scene transition has finished scene:addEventListener( "enterScene", scene ) -- "exitScene" event is dispatched before next scene's transition begins scene:addEventListener( "exitScene", scene ) -- "destroyScene" event is dispatched before view is unloaded, which can be -- automatically unloaded in low memory situations, or explicitly via a call to -- storyboard.purgeScene() or storyboard.removeScene(). scene:addEventListener( "destroyScene", scene ) --------------------------------------------------------------------------------- return scene This is my levels.lua

That code that creates your Icon image and adds the touch event, etc? Throw all that inside a function and then call it from scene:enterScene.

Also, you’ll need to insert any display objects you create into the scene display group, like this:

scene.view:insert(object)

It also looks like you have scene:exitScene() inside of scene:enterScene() – move that out of there to the root of your document.

Start with those and see what happens.

 Jay

Finally guys. 
After going back and forth, I’ve got the Image to display on the screen, I haven’t added the touch listener to the image.
But I’ll try to do that .

New Lua file 

 

-- levels.lua --------------------- local storyboard = require ( "storyboard") local scene = storyboard.newScene() --------------------- -- Beginning of code --------------------- local centerX = display.contentCenterX local centerY = display.contentCenterY local image local object -- called when the scenes view does not exist: function scene:createScene( event ) local screenGroup = self.view image = display.newImage("BGlvl.jpg", centerX, centerY) screenGroup:insert ( image ) object = display.newImage("Icon.png", centerX, CenterY) screenGroup:insert ( object ) print( "n1: createScene event") end -- Called immediately after scene has moved onscreen function scene:enterScene( event ) print( "1: enterScene event" ) -- remove previous scene's view storyboard.purgeScene( "start" ) -- called immediately after scene has moved onscreen function scene:exitScene( event ) print( "1: exitScene event" ) -- remove touch listener for image image:removeEventListener( "touch", image ) end end -- called prior to the removal of scenes view (display group) function scene:destroyScene ( event ) print( "(( destroying start view))") end --------------------------------------------------------------------------------- -- END OF YOUR IMPLEMENTATION --------------------------------------------------------------------------------- -- "createScene" event is dispatched if scene's view does not exist scene:addEventListener( "createScene", scene ) -- "enterScene" event is dispatched whenever scene transition has finished scene:addEventListener( "enterScene", scene ) -- "exitScene" event is dispatched before next scene's transition begins scene:addEventListener( "exitScene", scene ) -- "destroyScene" event is dispatched before view is unloaded, which can be -- automatically unloaded in low memory situations, or explicitly via a call to -- storyboard.purgeScene() or storyboard.removeScene(). scene:addEventListener( "destroyScene", scene ) --------------------------------------------------------------------------------- return scene

Well Done!

As Jay pointed out, your exitScene is in enterScene.

Change to this. ( basically move one end up)

function scene:enterScene( event ) print( "1: enterScene event" ) -- remove previous scene's view storyboard.purgeScene( "start" ) end -- moved here -- called immediately after scene has moved onscreen function scene:exitScene( event ) print( "1: exitScene event" ) end

burhan

Done Burhan.

Thanks again guys.

I’m going to try to add touch listeners to the level selection images, I have all the information in here, so I’ll try to see if I get it working.
 

Doing it yourself is always good, because you’re learning techniques that can be used over and over again. But if you want another option, I sell a library called OGT Level Manager. You can find out about it here: http://masteringcoronasdk.com/ogt-level-manager/

 Jay