Menu

General
1

I am designing an app that I plan to publish. I have the basics done, but need to make a menu screen or a tap to start.

2

Here is something I posted long ago. This might give you some ideas.


displayMode(FULLSCREEN)
supportedOrientations(PORTRAIT)        -- set for portrait mode

function setup()
    func=menu
end

function draw()
    func()
end

function menu()
    background(0,0,200)  
    
    w=WIDTH/2            -- set width value
    eh=HEIGHT-400        -- set height of different options
    nh=HEIGHT-600        -- eh easy, nh normal, hh hard
    hh=HEIGHT-800
     
    fontSize(48)            -- set font size
    fill(255,0,0)            -- set font color
    
    menuTitle1="Main Menu"            -- main title
    menuTitle2="Select Option"    
    text(menuTitle1,w,HEIGHT-100)     -- display titles 
    text(menuTitle2,w,HEIGHT-200)      
 
    fill(0,255,0)           -- set easy values
    
    t1="Easy"
    text(t1,w,eh)
    w1,h1=textSize(t1)     -- width and height of easy text 
     
    t2="Normal"            -- set normal values
    text(t2,w,nh)
    w2,h2=textSize(t2)      -- width and height of normal text
    
    t3="Hard"                -- set hard values
    text(t3,w,hh)  
    w3,h3=textSize(t3)      -- width and height of hard text  
end

function easy()
    background(40,40,50)
    text("EASY screen",WIDTH/2,HEIGHT/2)
    text("tap screen for menu",WIDTH/2,HEIGHT/2-200)
end

function normal()
    background(40,40,50)
    text("NORMAL screen",WIDTH/2,HEIGHT/2)
    text("tap screen for menu",WIDTH/2,HEIGHT/2-200)
end

function hard()
    background(40,40,50)
    text("HARD screen",WIDTH/2,HEIGHT/2)
    text("tap screen for menu",WIDTH/2,HEIGHT/2-200)
end

function touched(t)
    if t.state==BEGAN then
        if func ~= menu then
            func=menu
            return
        end
        if func==menu then
            if t.x>w-w1/2 and t.x<w+w1/2 and t.y>eh-h1/2 and t.y<eh+h1/2 then
                func=easy
            end
            if t.x>w-w2/2 and t.x<w+w2/2 and t.y>nh-h2/2 and t.y<nh+h2/2 then
                func=normal
            end
            if t.x>w-w3/2 and t.x<w+w3/2 and t.y>hh-h3/2 and t.y<hh+h3/2 then
                func=hard
            end  
       end
    end  
end
3

@GamerGuysGames - you can see another example here: http://codeatuts.blogspot.com.au/2012/07/tutorial-6-minesweeper-part-1.html

4

Personally, I would just have the app start a screen that has the text “Game Name” and set it so that when you tap it “playing = true” for example, and then simply have the game execute as it does now only if playing = true.

5 

displayMode(FULLSCREEN)

function setup()
    playing=false
end

function draw()
    background(40, 40, 50)    
    if not playing then
        menu()
    else
        playGame()
    end
end

function menu()
    background(3, 174, 253, 255)
    fontSize(40)
    text("Your Game Name Here",WIDTH/2,HEIGHT/2)
    fontSize(25)
    text("tap to start",WIDTH/2,HEIGHT/2-100)
end

function playGame()
    background(255, 255, 255, 255)
    fontSize(40)
    text("Playing game",WIDTH/2,HEIGHT/2)
end

function touched(t)
    if not playing then
        if t.state==BEGAN then
            playing=true
        end
    end
end
6

Design a state machine for this, keep main() lean.

This is more code than I usually want in main() but it’s a quick sample. I usually pack all this stuff into a global class.

Changing the GAMESTATE variable will immediately change the state of the app to whatever screen you want it to go to, all defined in the GAMESTATES table.

Note that this change is IMMEDIATE, so if you didn’t set up some values in the destination screen, you’re likely to get frustrated quickly. That’s why I have a call to ScreenSplash:init() BEFORE I change the GAMESTATE variable.

Also, the screens that you redirect to WILL get the draw() and touched() calls, unlike the comments that Codea generates when you create a new class :slight_smile:

--
-- Main.lua
-- 
-- Sample of Cofender's main()
function setup()

    displayMode(FULLSCREEN)
     -- define consts
    GAMESTATE_MENU = 1
    GAMESTATE_PLAYING = 2
    GAMESTATE_SHIPEXPLODE = 3
    GAMESTATE_LEVELCOMPLETE=5
    GAMESTATE_ENDED = 4
    GAMESTATE_SPLASH =6
    GAMESTATE_OPTIONS =7
    GAMESTATE_PAUSED = 8
        
    GAMESTATES = { ScreenTitle, ScreenGame, ScreenShipExplode, ScreenEnd, 
    ScreenLevelComplete, ScreenSplash, ScreenOptions , ScreenPaused }
       
    ScreenSplash:init()
    
    GAMESTATE = GAMESTATE_SPLASH 

    
end


-- This function gets called once every frame
function draw()
    -- This sets a dark background color 
    background(0, 0, 0, 255) 

    --state machine
    GAMESTATES[GAMESTATE]:draw()
end

function touched(touch)
    --state machine
    GAMESTATES[GAMESTATE]:touched(touch)      
end

--to send keys to proper screen for processing
function keyboard(key)
    GAMESTATES[GAMESTATE]:keyboard(key)      
end
7

@aciolino What do you mean by setting up a public class?

8

btw brilliant way to run the state machine. I had been doing a whole lot messier. This made cider so much easier for me to use. I was using a ton of if statements in a ui class.

9

Glad it was helpful.