[SOLVED] Need Some Help With the Logic Behind a Select Screen

[Crazy Li]

Sorry for the vague title, but I'm not sure how to explain it in just a few words... xP

Basically, I'm trying to throw together a character selection screen of sorts where you can choose the character to play as in the game. I'm not sure the best way to handle this, but what I've started on for the time being was creating an image for each each character that has their name, stats, a short bio, and a picture of them to give the player a general idea of the character to make a selection. All well and good, but I need to figure out how to throw it all together from there.

I had these little right/left selection arrows on either side that would ideally be clicked on to cycle through the screens and a "Select" button to choose one... but I figure that's inefficient to be part of the actual image. Maybe in ancient times, doing it that way and running as an imagemap would be ideal, but I can't imagine this is the case in modern Ren'py with the flexibility of screen language these days.

I suppose what I really want to do is make those buttons separate images that just lay over the base (probably BG) image of the current displayed character... positioning in screen language has always been difficult for me though. It feels like a lot of random, arbitrary trial-and-error is required to get anything to be in something close to resembling the right spot (and even then, it often creates other positioning issues). Anyone know of any good tricks to better figure out the desired coordinates? I guess my main problem is that I only know how to do things through stuff like xalign and yalign which doesn't really correlate directly to any specific coordinates of the desired image. I'm not sure how people generally get their values. I'm sure I'm missing something, so advice here would be greatly appreciated.

Also, I'm not entirely sure how to handle all of the variable manipulation to make stuff work as intended. If the character bio stuff is a background image, I need that to dynamically change as the left or right arrow is clicked. Do I need to set the BG image to a ConditionSwitch based on the value of a variable to accomplish this? I don't image just setting it equal to a variable would do the trick, because when the variable changes, it most likely won't refresh without it being defined as a ConditionSwitch (unless I'm mistaken).

My theory is that I will be taking my already established "player" variable that tells the game what character is being used already and making it the core of these selection system. The BG should be equal to "images/[player].png" in effect and clicking left or right changes the value of "player" which in turn shows the respective bio and if they start the game on that variable, it'll just carry through the way it's supposed to. All I need to do is have if statements that tell the arrows what to change the value to based on what the current value is.

The selection button is a simple matter of prompting a menu choice asking the player to confirm their selection and then jumping them to the label for that character's route if yes, or taking them back to the selection process if no. That does bring me to me last question though: can you jump to a variable label? See, my labels for each character's start is the same as their name anyway, so it would be equal to the value of "player" in every case. Thus if I could just tell it to jump to a label named the same as the value of "player", that would make a lot less coding work on me, but I don't know if this is possible in Ren'py or how exactly one would do it... jump [player]?

In general, I'd like some input from more experienced users about the process I'm taking right now before I really dive into it. If you see any obvious flaws in my approach or just know of more efficient methods of accomplishing the task, I'd love to know.

[Per K Grok]

-----
In general, I'd like some input from more experienced users about the process I'm taking right now before I really dive into it. If you see any obvious flaws in my approach or just know of more efficient methods of accomplishing the task, I'd love to know.

I put together a select screen using some old images.
This is what i came up with. Nothing very sophisticated, but it works.

Code: Select all

default player="bub01"

screen select():
    frame:
        xysize (100, 150)
        text "Select Player" xalign 0.5
        if player=="bub01":
            add "images/bub01.png" pos(30,20)
            imagebutton idle "images/arrowL.png" pos(10,70) action SetVariable("player", "bub14")
            imagebutton idle "images/arrowR.png" pos(70,70) action SetVariable("player", "bub07")
        elif player=="bub07":
            add "images/bub07.png" pos(30,20)
            imagebutton idle "images/arrowL.png" pos(10,70) action SetVariable("player", "bub01")
            imagebutton idle "images/arrowR.png" pos(70,70) action SetVariable("player", "bub14")
        elif player=="bub14":
            add "images/bub14.png" pos(30,20)
            imagebutton idle "images/arrowL.png" pos(10,70) action SetVariable("player", "bub07")
            imagebutton idle "images/arrowR.png" pos(70,70) action SetVariable("player", "bub01")
        text player xalign 0.5 ypos 110
        textbutton "Select" xalign 0.5 yalign 1.0 action Jump(player)
 

label start:
    scene bg background
    show screen select
    $ renpy.pause(hard = True)

label bub01:
    hide screen select
    "Hello bub01"
    jump start

label bub07:
    hide screen select
    "Hello bub07"
    jump start

label bub14:
    hide screen select
    "Hello bub014"
    jump start

Pushing any of the imagebuttons will refresh the screen, so if/elif using the variable will work fine.

For more precise positioning I find xpos, ypos, pos() to be easier to use, than xalign or yalign.

I usually can find the exact spot in two or three times, just looking and making an estimation on what the numbers should be.

An option could be to take screen shot and open that image in an image editor with the function to give the position of the cursor.

[Crazy Li]

Ok, so that's similar to how I was thinking about it... but with more of the exact details of how to do certain things.

One question I have on your example code is that you do "scene bg background" is that just the idea of whatever background is supposed to be there, or did I miss a definition in the code? I think I can just ignore that portion in mine since my images take up the full window anyway and require no BG behind them. Just wanted to confirm that's not referencing anything special.

[Per K Grok]

Ok, so that's similar to how I was thinking about it... but with more of the exact details of how to do certain things.

One question I have on your example code is that you do "scene bg background" is that just the idea of whatever background is supposed to be there, or did I miss a definition in the code? I think I can just ignore that portion in mine since my images take up the full window anyway and require no BG behind them. Just wanted to confirm that's not referencing anything special.

Yes, you can ignore scene bg background

[Crazy Li]

Thanks a lot! That worked perfectly for me. It was so clean and simple code-wise too.

I did condense it a little further by starting with add "images/[player].png" rather than making a separate statement within each if check... because of the way I named my variables and files, I can just make the game itself figure out what image to display based on the variable like this. Positioning was definitely some trial and error... but I got it about where I want.