Multiple Screens

WilliamHouten

Hi everyone. I would like to be able to swap between two screens. i.e. I have a main screen with a chart on it and would like to have a second screen (a Settings screen) - selected when clicking on a "settings" button (or sprite) so the user can select a colour for the chart and text etc. then after clicking a "Done" button (or sprite) swap back to the Main screen. I have looked at the Codea samples but can't find anything (or maybe I missed it) Can anyone help me with a solution. Some sample code or steer me in the right direction. I would be very grateful.

Cheers

Will

dave1707

@WilliamHouten Here’s a simple example of multiple screens. Tap the screen to switch between the 2 screens. A lot more control and info can be added to the screens, but this is just a quick example.

viewer.mode=FULLSCREEN

function setup()
    scrn1=true
    s1=image(WIDTH,HEIGHT)
    setContext(s1)
    background(67, 179, 236)
    sprite(asset.builtin.Planet_Cute.Character_Horn_Girl,WIDTH/2,HEIGHT/2)
    setContext()
    s2=image(WIDTH,HEIGHT)
    setContext(s2)
    background(236, 106, 67)
    sprite(asset.builtin.SpaceCute.Beetle_Ship,WIDTH/2,HEIGHT/2)
    setContext()
end

function draw()
    background(0)
    if scrn1 then
        sprite(s1,WIDTH/2,HEIGHT/2)
    else
        sprite(s2,WIDTH/2,HEIGHT/2)
    end
end

function touched(t)
    if t.state==BEGAN then
        scrn1=not scrn1
    end    
end

dave1707

Here’s another example for multiple screens. Tap screen to switch. I just did simple sprites, but you can do anything you want on each of the screens.

viewer.mode=FULLSCREEN

function setup()
    rectMode(CENTER)
    x1,y1=100,100
    xv1,yv1=2,3
    x2,y2=200,300
    xv2,yv2=-2,3
    x3,y3=100,200
    xv3,yv3=2,-3
    dspl=1
end

function draw()
    background(0)
    if dspl==1 then
        screen1()
    elseif dspl==2 then
        screen2()
    else
        screen3()
    end
end

function touched(t)
    if t.state==BEGAN then
        if t.x>WIDTH/2-75 and t.x<WIDTH/2+75 and t.y>175 and t.y<225 then
            dspl=(dspl+1)%3+1
        end
    end
end

function screen1()
    background(236, 166, 67)
    sprite(asset.builtin.Planet_Cute.Character_Boy,x1,y1)
    x1=x1+xv1
    y1=y1+yv1
    if x1<1 or x1>WIDTH then
        xv1=-xv1
    end
    if y1<1 or y1>HEIGHT then
        yv1=-yv1
    end
    fill(67, 162, 236)
    rect(WIDTH/2,200,150,50)
    fill(255)
    text("Switch screen",WIDTH/2,200)
end

function screen2()
    background(67, 200, 236)
    sprite(asset.builtin.Planet_Cute.Character_Princess_Girl,x2,y2)
    x2=x2+xv2
    y2=y2+yv2
    if x2<1 or x2>WIDTH then
        xv2=-xv2
    end
    if y2<1 or y2>HEIGHT then
        yv2=-yv2
    end
    fill(236, 200, 67)
    rect(WIDTH/2,200,150,50)
    fill(255)
    text("Switch screen",WIDTH/2,200)
end

function screen3()
    background(67, 236, 69)
    sprite(asset.builtin.Planet_Cute.Character_Cat_Girl,x3,y3)
    x3=x3+xv3
    y3=y3+yv3
    if x3<1 or x3>WIDTH then
        xv3=-xv3
    end
    if y3<1 or y3>HEIGHT then
        yv3=-yv3
    end
    fill(236, 67, 208)
    rect(WIDTH/2,200,150,50)
    fill(255)
    text("Switch screen",WIDTH/2,200)
end

WilliamHouten

Hi Dave. Thanks for your help. Being a noob, it's really helped. Can you give me some sample code to change screens if the sprite is touched rather than the screen? Would really be helpful..

Thanks mate.

Cheers

dave1707

@WilliamHouten I changed the above program to tap a button to switch screens. A sprite could be used instead by replacing the rect and text statements for the button and changing the values in the touched function for the size of the sprite. I’ll let you try that. If you have trouble, let me know.

WilliamHouten

Hi Dave. That's fantastic. Exactly what I was after. Thanks so much for your help.

Cheers buddy

Will