Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Menu Structure
Started by chandler767 Jan 29 2012 03:11 AM

- - - - -
36 replies to this topic
[TOPIC CONTROLS]
Page 1 of 2 1 2
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

chandler767

[GLOBAL: userInfoPane.html]
chandler767
  • Contributor

  • 106 posts
  • Corona SDK

I have noticed that several games made with Corona SDK have a Level selection menu with a tile type interface. How exactly do I go about making this sort of thing? There isn't much documentation about that kind of thing. Any suggestions?
uid: 104852 topic_id: 21095 reply_id: 321095


[TOPIC: post.html]
#2

KenRogoway

[GLOBAL: userInfoPane.html]
KenRogoway
  • Contributor

  • 272 posts
  • Corona SDK

@chandler767,

I'm not sure if I understand what you mean by tile type interface, but our game has a level select screen where the user can select from 20 levels per page. If this is what you are talking about then I can post some sample code.
uid: 16734 topic_id: 21095 reply_id: 83476


[TOPIC: post.html]
#3

chandler767

[GLOBAL: userInfoPane.html]
chandler767
  • Contributor

  • 106 posts
  • Corona SDK

Hi,
I would appreciate it if you shared your sample code.

As for a tiled type of menu this is what I am looking for:
http://www.angrybirds-game-online.com/wp-content/uploads/2011/07/angry-birds-christmas-2.png

-Chandler Mayo
uid: 104852 topic_id: 21095 reply_id: 83531


[TOPIC: post.html]
#4

mila.habaer

[GLOBAL: userInfoPane.html]
mila.habaer
  • Enthusiast

  • 84 posts
  • Corona SDK

Hi KenRogoway ,

Yes, I also need level selection/unlock level kind thing, please share some sample code.

Thank you in advance.

uid: 83418 topic_id: 21095 reply_id: 83549


[TOPIC: post.html]
#5

richard9

[GLOBAL: userInfoPane.html]
richard9
  • Corona Geek

  • 1,118 posts
  • Enterprise

Doesn't seem like anything too hard, just use iterators to build the level buttons and storyboard to flip pages?

local maxLevel = 20 -- if you had a table of levels you could use #levels
local xPos = 20
local yPos = 40
local buttonGroup = display.newGroup() -- holds all of the buttons

-- Iterator time
for i = 1, maxLevel do
 -- Make the button. This is a fictional function but it would be very easy to make it
 local button = makeButton(i)

 -- Set its position
 button.x = xPos
 button.y = yPos

 -- Add it to the display group
 buttonGroup:insert(button)

 -- Increment the xPosition
 if i == 5 or i == 10 or i = 15 then
    -- If it's a new row, you gotta update xPos and yPos
    xPos = 20
    yPos = yPos + button.height + 16
 else
    -- Just update xPos
    xPos = xPos + button.width + 16
 end
end

Obviously you'd have to fine tune a lot of it, but that's a fairly simple way to build that sort of visual array.
uid: 41884 topic_id: 21095 reply_id: 83550


[TOPIC: post.html]
#6

chandler767

[GLOBAL: userInfoPane.html]
chandler767
  • Contributor

  • 106 posts
  • Corona SDK

Your missing an = sign,

if (i == 5 or i == 10 or i = 15) then


It should be,

if (i == 5 or i == 10 or i == 15) then

-Chandler Mayo
uid: 104852 topic_id: 21095 reply_id: 83555


[TOPIC: post.html]
#7

chandler767

[GLOBAL: userInfoPane.html]
chandler767
  • Contributor

  • 106 posts
  • Corona SDK

What can I do with
makeButton(i)
? I am having some issues getting something to work without an error.
uid: 104852 topic_id: 21095 reply_id: 83557


[TOPIC: post.html]
#8

chandler767

[GLOBAL: userInfoPane.html]
chandler767
  • Contributor

  • 106 posts
  • Corona SDK

@KenRogoway I plugged this in and after sorting through a ton of errors I am stumped by this:

Runtime error: /Users/Chandler/Desktop/gfg/main.lua:33: attempt to index global 'cSceneLevelSelect' (a nil value)

Its pointing to:
function cSceneLevelSelect:new()

It there a sample project I can download?
uid: 104852 topic_id: 21095 reply_id: 83568


[TOPIC: post.html]
#9

KenRogoway

[GLOBAL: userInfoPane.html]
KenRogoway
  • Contributor

  • 272 posts
  • Corona SDK

Here is a fully functional Level Select scene for use with Director:

--***********************************************************************************************--
-- cSceneLevelSelect

module(..., package.seeall)

-- The max number of levels to show on the screen at a time
NUM_LEVELS_ON_PAGE = 20

local WhatPage = 0

-- Main function - MUST return a display.newGroup()
function cSceneLevelSelect:new()
    local levelSelectGroup = display.newGroup()
    local updateButtons
    local menuBtn
    local ui = ui
    -- For check mark to show level is completed
    local checkImages = {}	

    -- BACKGROUND IMAGE
    local backgroundImage = display.newImageRect( IMAGE_DIR.."SelectLevel.jpg", display.contentWidth, display.contentHeight )
    backgroundImage.x = display.contentCenterX
    backgroundImage.y = display.contentCenterY
    levelSelectGroup:insert( backgroundImage )

    -- Go back to the main game menu
    local onMenuTouch = function( event )
        if event.phase == "release" and menuBtn.isActive then
            
            director:changeScene( "cSceneMainMenu", "fade" )

        end
        return true
    end

    menuBtn = ui.newButton{
        defaultSrc = IMAGE_DIR.."menu_menu_up.png",
        defaultX = ScaleX(200),
        defaultY = ScaleY(80),
        overSrc = IMAGE_DIR.."menu_menu_down.png",
        overX = ScaleX(200),
        overY = ScaleY(80),
        onEvent = onMenuTouch,
        id = "MenuButton",
        text = "",
        font = "Helvetica",
        textColor = { 255, 255, 255, 255 },
        size = 16,
        emboss = false
        }
	
    menuBtn:setReferencePoint( display.CenterReferencePoint )
    menuBtn.x = display.contentCenterX
    menuBtn.y = display.contentHeight - ScaleY(88)

    levelSelectGroup:insert( menuBtn )

    local prevBtn
	
    local onPrevTouch = function( event )
        if event.phase == "release" and prevBtn.isActive then
            if ( WhatPage > 0 ) then
                WhatPage = WhatPage - 1
                updateButtons()
            end
        end
        return true
    end

    prevBtn = ui.newButton{
        defaultSrc = IMAGE_DIR.."help_arrow_left_up.png",
        defaultX = ScaleX(180),
        defaultY = ScaleY(150),
        overSrc = IMAGE_DIR.."help_arrow_left_down.png",
        overX = ScaleX(180),
        overY = ScaleY(150),
        onEvent = onPrevTouch,
        id = "PrevButton",
        text = "",
        font = "Helvetica",
        textColor = { 255, 255, 255, 255 },
        size = 16,
        emboss = false
        }
    
    prevBtn:setReferencePoint( display.CenterReferencePoint )
    prevBtn.x = ScaleX(136)
    prevBtn.y = ScaleY(688)
    prevBtn.isVisible = false
    
    levelSelectGroup:insert( prevBtn )
    
    local nextBtn
	
    local onNextTouch = function( event )
        if event.phase == "release" and nextBtn.isActive then
            WhatPage = WhatPage + 1
            updateButtons()
        end
        return true
    end

    nextBtn = ui.newButton{
        defaultSrc = IMAGE_DIR.."help_arrow_right_up.png",
        defaultX = ScaleX(180),
        defaultY = ScaleY(150),
        overSrc = IMAGE_DIR.."help_arrow_right_down.png",
        overX = ScaleX(180),
        overY = ScaleY(150),
        onEvent = onNextTouch,
        id = "NextButton",
        text = "",
        font = "Helvetica",
        textColor = { 255, 255, 255, 255 },
        size = 16,
        emboss = false
        }
    
    nextBtn:setReferencePoint( display.CenterReferencePoint )
    nextBtn.x = ScaleX(890)
    nextBtn.y = ScaleY(688)

    levelSelectGroup:insert( nextBtn )

    local function onTapTouchGobbler( event )
        return true
    end
    
    local levelPickBtn = {}
	
    local onLevelPickedTouch = function( event )
        if event.phase == "release" then
            local levelNum = tonumber(event.id)

            if ( levelNum  0 ) then
            prevBtn.isVisible = true
        else
            prevBtn.isVisible = false
        end

        if ( ((WhatPage+1)*NUM_LEVELS_ON_PAGE) < MAX_LEVELS ) then
            nextBtn.isVisible = true
        else
            nextBtn.isVisible = false
        end
        
        for i=1,NUM_LEVELS_ON_PAGE do            
            if ( (NUM_LEVELS_ON_PAGE*WhatPage+i) 
uid: 16734 topic_id: 21095 reply_id: 83559


[TOPIC: post.html]
#10

KenRogoway

[GLOBAL: userInfoPane.html]
KenRogoway
  • Contributor

  • 272 posts
  • Corona SDK

I'll put together a sample app. I had just stripped out some items from my actual shipping title. Sorry if there were any errors.

[EDIT]
Here is a fully functional (and tested!) app showing how to do this:

http://www.homebrewsoftware.com/Download/CoronaSDK/HomebrewLevelSelect_v1_00.zip
uid: 16734 topic_id: 21095 reply_id: 83570


[TOPIC: post.html]
#11

chandler767

[GLOBAL: userInfoPane.html]
chandler767
  • Contributor

  • 106 posts
  • Corona SDK

Thanks,
I can't test it right now but later today I will let you know if it works for me.
uid: 104852 topic_id: 21095 reply_id: 83578


[TOPIC: post.html]
#12

KenRogoway

[GLOBAL: userInfoPane.html]
KenRogoway
  • Contributor

  • 272 posts
  • Corona SDK

Minor revision to display the level selected here:

http://www.homebrewsoftware.com/Download/CoronaSDK/HomebrewLevelSelect_v1_01.zip
uid: 16734 topic_id: 21095 reply_id: 83583


[TOPIC: post.html]
#13

richard9

[GLOBAL: userInfoPane.html]
richard9
  • Corona Geek

  • 1,118 posts
  • Enterprise

Sounds like Ken has you covered. TBH I'm interested in the bits there myself

makeButton(i) was merely a fictional function; you could theoretically have something like this

local makeButton = function(text)
  local button = display.newGroup()
  local box = display.newRect(0,0,128,128)
  local title = display.newText(text, 0, 0, nil, 20)
  title:setReferencePoint(display.CenterReferencePoint)
  title.x, title.y = box.x, box.y
  button:insert(box)
  button:insert(title)

  return button
end

By giving it "i" (which ends up being 1-20) each button gets a title of 1, 2, 3, 4, etc.
uid: 41884 topic_id: 21095 reply_id: 83585


[TOPIC: post.html]
#14

chandler767

[GLOBAL: userInfoPane.html]
chandler767
  • Contributor

  • 106 posts
  • Corona SDK

@KenRogoway
Do you know about anyway to make it unlock levels or change the way the images look after their completion?
uid: 104852 topic_id: 21095 reply_id: 83610


[TOPIC: post.html]
#15

chandler767

[GLOBAL: userInfoPane.html]
chandler767
  • Contributor

  • 106 posts
  • Corona SDK

Sorry Double Post.
uid: 104852 topic_id: 21095 reply_id: 83611


[TOPIC: post.html]
#16

Omnigeek Media

[GLOBAL: userInfoPane.html]
Omnigeek Media
  • Corona Geek

  • 2,975 posts
  • Corona SDK

this is totally untested off the top of my head!


local levelsPerRow = 6
local maxLevels = 30
local gridX = 1
local gridY = 1
local iconHeight = 32
local iconWidth = 32
local iconPadding = 16
local levelButtons = {}
local currentUnlockedLevel = 5

local gridGroup = display.newGroup()
local lockedLevel = display.newImageRect("lock.png",iconWidth,iconHeight)

local function gotoLevel(event)
    local lvl = event.target.name
    storyboard.gotoScene(string.format("level%02d",lvl))
    -- director.changeScene(string.format("level%02d",lvl))
    return true
end

for i = 1, maxLevels
    if i > currentUnlockedLevel then
         levelButtons[i] = lockedLevel
    else
         levelButtons[i] = display.newImageRect(iconImages[i]
         levelButtons[i].name = i
         levelButtons[i]:addEventListener("tap",gotoLevel)
    end
    levelButtons[i].x = (gridX - 1) * (iconWidth + iconPadding) + (iconWidth /2 ) -- assuming center reference point
    levelButtons[i].y = (gridY - 1) * (iconHeight + iconPadding) + (iconHeight / 2)
    if i % 6 == 0 then -- end of a row
         gridX = 1
         gridY = gridY + 1
    else
         gridX = gridX + 1
    end
    gridGroup:insert(levelButtons[i])
end
gridGroup.x = display.contentWidth / 2
gridGroup.y = display.contentHeight / 2

-- for storyboard
group:insert(gridGroup) 
-- or for director
-- localGroup:insert(gridGroup)


this assumes you have an array of image filenames called iconImages that hold the icons for different levels and an image for your locked out levels.

uid: 19626 topic_id: 21095 reply_id: 83636


[TOPIC: post.html]
#17

mila.habaer

[GLOBAL: userInfoPane.html]
mila.habaer
  • Enthusiast

  • 84 posts
  • Corona SDK

Hi KenRogoway ,

Thank you so much for the Level Select code.

Can I use your code in my Game?

Thanks again.

Mila

uid: 83418 topic_id: 21095 reply_id: 83639


[TOPIC: post.html]
#18

KenRogoway

[GLOBAL: userInfoPane.html]
KenRogoway
  • Contributor

  • 272 posts
  • Corona SDK

@chandler767,

Here is a version that shows "locks" on levels. Every time you enter a level it unlocks the next one. Go back to the level select and you will see it has been unlocked.

http://www.homebrewsoftware.com/Download/CoronaSDK/HomebrewLevelSelect_v1_10.zip

@mila.habaer,

Yes, you can use the code in any of your projects. You cannot use the images, as they are just sample images taken from the web.
uid: 16734 topic_id: 21095 reply_id: 83647


[TOPIC: post.html]
#19

mila.habaer

[GLOBAL: userInfoPane.html]
mila.habaer
  • Enthusiast

  • 84 posts
  • Corona SDK

Hi KenRogoway ,

Thank you so much for your sample code and kindness.

I have to bother you a question:

I want to do as below:

When Level 1 is selected, the to goto gamelevel1.lua (gamelevel1 is my game for level1), if level 2 is selected, then goto gamelevel2.lua, and so on, how can I do this with your sample code?
Thanks again.

Mila
uid: 83418 topic_id: 21095 reply_id: 84649


[TOPIC: post.html]
#20

KenRogoway

[GLOBAL: userInfoPane.html]
KenRogoway
  • Contributor

  • 272 posts
  • Corona SDK

Try this:

local onLevelPickedTouch = function( event )    if event.phase == "release" then      local levelNum = tonumber(event.id)      if ( levelNum 
uid: 16734 topic_id: 21095 reply_id: 84652


[TOPIC: post.html]
#21

se460

[GLOBAL: userInfoPane.html]
se460
  • Contributor

  • 104 posts
  • Corona SDK

Hi, thank you very much for the code :) ... but is it possible to save the levels you have unlocked, instead of the levels is locked again when reloading the app? :D

thank you in advance :)
uid: 122802 topic_id: 21095 reply_id: 84682


[TOPIC: post.html]
#22

KenRogoway

[GLOBAL: userInfoPane.html]
KenRogoway
  • Contributor

  • 272 posts
  • Corona SDK

@se460,

You just need to add a event handler for system events and do something like this to your main.lua:

USER_SETTINGS_FILE = "user_settings.txt"

-- Save off our completed and unlocked flags
function saveSettings()
    local path = system.pathForFile( USER_SETTINGS_FILE, system.DocumentsDirectory )                
    local file = io.open( path, "w+b" )
    for i=1,MAX_LEVELS do
        if ( gWS.bLevelComplete[i] ) then
            file:write( string.format( "Completed=%d\n", i ) )
        end
        if ( not gWS.bLevelLocked[i] ) then
            file:write( string.format( "Unlocked=%d\n", i ) )
        end
    end
end

-- Load our completed and unlocked flags
function loadSettings()
    local path = system.pathForFile( USER_SETTINGS_FILE, system.DocumentsDirectory )                
    local file = io.open( path, "r" )
    if file then        
        while true do
            local line = file:read()
            if line == nil then break end
            
            if ( line ~= "" ) then
                local nStart = string.find( line, "=" )
                if ( nStart and nStart > 1 ) then
                    local keyStr = string.sub( line, 1, nStart - 1 )
                    local valStr = string.sub( line, nStart + 1 )
                    if ( keyStr == "Completed" ) then
                        gWS.bLevelComplete[tonumber( valStr )] = true
                    elseif ( keyStr == "Unlocked" ) then
                        gWS.bLevelLocked[tonumber( valStr )] = false
                    end
                end
            end
        end
    end
end
local function onSystemEvent( event )
  if ( event.type == "applicationSuspend" or event.type == "applicationExit" ) then
    saveSettings()
  end
end

Runtime:addEventListener( "system", onSystemEvent )


[EDIT] Code above has been tested with the example app I provided.

You can download the complete Example here:

www.homebrewsoftware.com/Download/CoronaSDK/HomebrewLevelSelect_v1_11.zip
uid: 16734 topic_id: 21095 reply_id: 84688


[TOPIC: post.html]
#23

mila.habaer

[GLOBAL: userInfoPane.html]
mila.habaer
  • Enthusiast

  • 84 posts
  • Corona SDK

Hi KenRogoway . really appreciated,

I tried this, I can go to gamelevel1.lua, gamelevel2.lua etc.

But how can I do this:

in gamelevel1.lua, when game in gamelevel1 is done, then how to get back to cScenegame.lua, in gamelevel2.lua, when game in gamelevel2 is done, then how to get back to cScenegame.lua,

how to connect those group?

Can you please give a simple example of gamelevel1.lua and gamelevel2.lua ?

I am very sorry to bother you again and again, you may say "Get Lost" to me.....

Thanks a million....

Mila
uid: 83418 topic_id: 21095 reply_id: 84722


[TOPIC: post.html]
#24

KenRogoway

[GLOBAL: userInfoPane.html]
KenRogoway
  • Contributor

  • 272 posts
  • Corona SDK

@mila,

I don't mind helping, but at some point you are going to have to learn LUA and the CoronaSDK enough to start writing your own code.

All you have to do when you are ready to return to cSceneLevelSelect is this:

director:changeScene( "cSceneLevelSelect", "fade" )


If you don't understand that, then you aren't going to get very far writing your app.
uid: 16734 topic_id: 21095 reply_id: 84724


[TOPIC: post.html]
#25

mila.habaer

[GLOBAL: userInfoPane.html]
mila.habaer
  • Enthusiast

  • 84 posts
  • Corona SDK

Hi KenRogoway ,

Thanks again for your help.

Yes, I am learning Corona and lua, I just got some basic skills on this.

I have several very simple Apps on Apple App store, because very simple ones, I never used Director class and Storyboard, so I have no idea about Direct classes.

Now I am learning Director and Storyboard .

I am really appreciated for your kindness and help.
One of the great thing of Corona SDK is that there are peoples like you offering help generously.

Thanks again.

Mila
uid: 83418 topic_id: 21095 reply_id: 84779



[topic_controls]
Page 1 of 2 1 2
 
[/topic_controls]