Need a second set of eyes on my code. Trying to make buttons that switch screens.

[paulyboyx]

For my own education in Ren'Py, I'm coding a prototype that's supposed to advance one at a time through pages of images. (Currently, the images are represented by a placeholder called "squarey.png.") Like a gallery, but all the gallery tutorials I've seen use a list of different pages you can go to, rather than allowing the player to advance a page at a time.

The first screen below, callPageMain, appears as an icon during gameplay. You press the icon and it takes you to the "gallery" itself. This is working as intended.

The "gallery" consists of the screen pageMain for navigation ("Return," "Next" [next page], "Previous" [previous page]) and uses several screens (sheetOne, sheetTwo, sheetThree) in turn to display each page of images. Here's where the code doesn't work. The first page of images displays fine when the screen opens, but the button to advance doesn't work.

Also, mysteriously, the button to advance highlights properly when hovered-- but the button to dismiss the screen ("Return") does not highlight when hovered... though it still functions when pressed.

Code below. (Actual code contains proper indentations, which I don't know how to render on here.) If anyone can help me stop bashing my head against the wall, it'd be much appreciated.


image overlayBeige = Solid("F5F5DC")

screen callPageMain():
zorder 90

imagebutton:
hover "butty_hover.png"
idle "butty_idle.png"
xalign 1.0
yalign 0
action [Show("pageMain", transition=Dissolve(.2)), ToggleVariable("quick_menu", False)]

screen sheetOne():
tag menu
zorder 95
modal False
grid 2 2 at truecenter:
spacing 20
xspacing 100

image "squarey.png"
image "squarey.png"

image "squarey.png"
image "squarey.png"

screen sheetTwo():
tag menu
zorder 95
modal False
grid 2 2 at truecenter:
spacing 20

image "squarey.png"
image "squarey.png"

image "squarey.png"
image "squarey.png"

screen sheetThree():
tag menu
zorder 95
modal False
grid 2 2 at truecenter:
spacing 20

image "squarey.png"
image "squarey.png"

image "squarey.png"
text Null()

screen pageMain(passedPage="pageone"):
modal True
$currentPage = passedPage
zorder 100
add "overlayBeige"
sensitive True
if currentPage=="pageone":
use sheetOne
if currentPage=="pagetwo":
use sheetTwo
if currentPage=="pagethree":
use sheetThree
textbutton "Return":
align (.5,.9)
action [ToggleScreen("pageMain", transition=None), ToggleVariable("quick_menu", True)]
if currentPage=="pageone" or currentPage=="pagetwo":
textbutton "Next":
align (.75, .9)
if currentPage=="pageone":
action SetLocalVariable("currentPage","pagetwo")
if currentPage=="pagetwo":
action SetLocalVariable("currentPage","pagethree")
if currentPage=="pagetwo" or currentPage=="pagethree":
textbutton "Previous":
align (.25,.9)
if currentPage=="pagetwo":
action SetLocalVariable("currentPage","pageone")
if currentPage=="pagethree":
action SetLocalVariable("currentPage","pagetwo")

[Per K Grok]

For my own education in Ren'Py, I'm coding a prototype that's supposed to advance one at a time through pages of images. (Currently, the images are represented by a placeholder called "squarey.png.") Like a gallery, but all the gallery tutorials I've seen use a list of different pages you can go to, rather than allowing the player to advance a page at a time.

The first screen below, callPageMain, appears as an icon during gameplay. You press the icon and it takes you to the "gallery" itself. This is working as intended.

The "gallery" consists of the screen pageMain for navigation ("Return," "Next" [next page], "Previous" [previous page]) and uses several screens (sheetOne, sheetTwo, sheetThree) in turn to display each page of images. Here's where the code doesn't work. The first page of images displays fine when the screen opens, but the button to advance doesn't work.

Also, mysteriously, the button to advance highlights properly when hovered-- but the button to dismiss the screen ("Return") does not highlight when hovered... though it still functions when pressed.

Code below. (Actual code contains proper indentations, which I don't know how to render on here.) If anyone can help me stop bashing my head against the wall, it'd be much appreciated.


image overlayBeige = Solid("F5F5DC")

screen callPageMain():
zorder 90

imagebutton:
hover "butty_hover.png"
idle "butty_idle.png"
xalign 1.0
yalign 0
action [Show("pageMain", transition=Dissolve(.2)), ToggleVariable("quick_menu", False)]

screen sheetOne():
tag menu
zorder 95
modal False
grid 2 2 at truecenter:
spacing 20
xspacing 100

image "squarey.png"
image "squarey.png"

image "squarey.png"
image "squarey.png"

screen sheetTwo():
tag menu
zorder 95
modal False
grid 2 2 at truecenter:
spacing 20

image "squarey.png"
image "squarey.png"

image "squarey.png"
image "squarey.png"

screen sheetThree():
tag menu
zorder 95
modal False
grid 2 2 at truecenter:
spacing 20

image "squarey.png"
image "squarey.png"

image "squarey.png"
text Null()

screen pageMain(passedPage="pageone"):
modal True
$currentPage = passedPage
zorder 100
add "overlayBeige"
sensitive True
if currentPage=="pageone":
use sheetOne
if currentPage=="pagetwo":
use sheetTwo
if currentPage=="pagethree":
use sheetThree
textbutton "Return":
align (.5,.9)
action [ToggleScreen("pageMain", transition=None), ToggleVariable("quick_menu", True)]
if currentPage=="pageone" or currentPage=="pagetwo":
textbutton "Next":
align (.75, .9)
if currentPage=="pageone":
action SetLocalVariable("currentPage","pagetwo")
if currentPage=="pagetwo":
action SetLocalVariable("currentPage","pagethree")
if currentPage=="pagetwo" or currentPage=="pagethree":
textbutton "Previous":
align (.25,.9)
if currentPage=="pagetwo":
action SetLocalVariable("currentPage","pageone")
if currentPage=="pagethree":
action SetLocalVariable("currentPage","pagetwo")

$currentPage = passedPage

should be

default currentPage = passedPage
or
default currentPage ="pageone"


There might be other things as well, but that is what I can see right off the bat.

[rayminator]

Removed

[paulyboyx]

Thanks for the replies! I changed "$currentPage = passedPage," but I'm still having the exact same problem: the "Return" button works but doesn't highlight when hovered, whereas the "Next" button highlights but does nothing when clicked.

I'm not concerned over how to make a gallery. I just want to know why this code doesn't work which, to my eyes, should.

I could present the code indented and easier to read, but I still don't know how to get it to properly format on here and the FAQ doesn't tell me.

[Dark12ose]

I could present the code indented and easier to read, but I still don't know how to get it to properly format on here and the FAQ doesn't tell me.

I can't help with figuring out what's wrong with the code but I can tell you how to format it into a code on the forum. You simply write [code.][/code.] (without the period) with the code between it or if you are in the full editor you just copy and paste than highlight the codes and press the </> button.

[Per K Grok]

Thanks for the replies! I changed "$currentPage = passedPage," but I'm still having the exact same problem: the "Return" button works but doesn't highlight when hovered, whereas the "Next" button highlights but does nothing when clicked.

I'm not concerned over how to make a gallery. I just want to know why this code doesn't work which, to my eyes, should.

I could present the code indented and easier to read, but I still don't know how to get it to properly format on here and the FAQ doesn't tell me.

This is a simple code for a next/previous function.

Code: Select all

screen rotate():
    default numb=1

    if numb==1:
        text "one"
    elif numb==2:
        text "two"
    elif numb==3:
        text "three"

    if numb<3:
        textbutton "Next" ypos 30:
            action SetLocalVariable("numb", numb+1)
    if numb>1:
        textbutton "Previous" ypos 50:       
            action SetLocalVariable("numb", numb-1)
            
 

One source of error in your code is that you have a number of if-statements for the action of the buttons where the first statement will make the second statement come true


If you have a code like below, pushing the button will not get you numb2==2 but numb2==4, since all if statements will be run one after each other.
If you use if/elif/elif you will not have this effect.

Code: Select all

screen rotate():
    default numb2=1

    text str(numb2) 

     textbutton "numb2" ypos 30:
        if numb2==1:
            action SetLocalVariable("numb2", 2)
        if numb2==2:
            action SetLocalVariable("numb2", 3)
        if numb2==1:
            action SetLocalVariable("numb2", 4)

[paulyboyx]

Thanks so much! After studying your example, I finally got my code to work.

The main problem was I had my "current page" variable defined when calling the screen. This, it seems didn't just set that to the variable's default as I had assumed it would, but kept the variable from being changed.

Still don't know why the "Return" imagebutton didn't inherit the standard UI idle/hover colors while the "Next" and "Previous" buttons did. I fixed it by specifying idle/hover colors in the "Return" imagebutton's code.

My fixed code:

Code: Select all

screen pageMain(): 

    modal True
    zorder 100
    add "overlayBeige"
    default thisPage = "pageone"
    if thisPage=="pageone":
        use sheetOne
    elif thisPage=="pagetwo":
        use sheetTwo
    elif thisPage=="pagethree":
        use sheetThree
    
    textbutton "Return":
        align (.5, .9)
        action [ToggleScreen("pageMain", transition=None), ToggleVariable("quick_menu", True)]
        text_color "#888888"
        text_hover_color "#66e0c1"
        
    if thisPage=="pageone" or thisPage=="pagetwo":
        textbutton "Next":
            align (.75, .9)
            if thisPage=="pageone":
                action SetScreenVariable("thisPage","pagetwo")
            elif thisPage=="pagetwo":
                action SetScreenVariable("thisPage","pagethree")
    if thisPage=="pagetwo" or thisPage=="pagethree":
        textbutton "Previous":
            align (.25, .9)
            if thisPage=="pagetwo":
                action SetScreenVariable("thisPage","pageone")
            elif thisPage=="pagethree":
                action SetScreenVariable("thisPage","pagetwo")