[SOLVED] Adding text input to character creation screen

[DoubleProlix]

So far my intro asks the player for their first and last name, and then calls the character creation screen where they select other options. What I'd like to do is simplify things so that the character creation screen is a one-stop shop for all this info.

Current code:

Code: Select all

    vbox:
        #label "Character Select"
        null height (4 * gui.pref_spacing)
        hbox:
            null width 300
            box_wrap True

            imagebutton:
                ypos 70
                idle "button leftarrow"
                hover "button leftarrow active"
                action [If (gender == 'male', true = [SetVariable("gender",'female')], false=[SetVariable("gender",'male')])]
            null width (4 * gui.pref_spacing)
                
                
            if gender == 'male':
                    add "ico brick male profile" size (300, 300)
            else:
                    add "ico brick female profile" size (300, 300)
            null width (4 * gui.pref_spacing)
            imagebutton:
                    ypos 70
                    idle "button rightarrow"
                    hover "button rightarrow active"
                    action [If (gender == 'male', true = [SetVariable("gender",'female')], false=[SetVariable("gender",'male')])]
    
        hbox:
                box_wrap True
                null width 640
                vbox:
                    null height (4 * gui.pref_spacing) 
                    imagebutton:
                        idle "button ok"
                        action Return()

Looks like this:



So I want some text fields up top. Something like

First Name: [box into which text can be added] -> goes into firstName when user hits ok
Last Name: [box into which text can be added] -> goes into surName when user hits ok

I'd like the boxes to be visible to the player, to make it more obvious that they have to enter text there, rather than just a cursor.

[kivik]

You can do this with screen's input:

https://www.renpy.org/doc/html/screens.html#input

Annoyingly there isn't an example with the values, so this is how you do it:

Code: Select all

input value VariableInputValue('firstName', returnable=True)
input value VariableInputValue('surName', returnable=True)

I'd suggest you put it inside a frame with background to show that it's an input field. You may also want to create a blinking cursor:

Code: Select all

image caret:
    "gui/caret.png" # use your own image
    linear 0.5 alpha 1.0
    linear 0.5 alpha 0.0
    repeat

init:
    $ style.input.caret = "caret"

[DoubleProlix]

Okay, I like this so far:



But while I can enter text in the top "First Name" field, I can't seem to switch over to the second input. Clicking on the box does nothing, tab won't do it, etc.

[Imperf3kt]

I found that only one field can be used on a screen. I found a way around this last night, but its not optimal - it involves hiding the input field until you click a button.

Example:
(sorry about it being just an image, I don't have access to the code I used at the moment)
https://i.imgur.com/DOLRYUb.png

You can try it for yourself here:
Rock Paper Scissors 0.2.5

Note: the passwords are currently all just
1.048596

[kivik]

Oh interesting... maybe you can only have one input per screen as it takes over your keyboard, I just had a play and I can't figure it out.

Here's my way around the problem, use a screen variable to determine what you're inputting, and have a textbutton set that variable so that your screen either displays the firstname input or the surname input:

You'll want to create a style for the textbutton to match the input if you're a bit OCD:

Code: Select all

default firstName = "firstname"
default surName = "surname"

screen test:
    default input_name = ""
    frame:
        xalign 0.5
        yalign 0.5
        xsize 400
        ysize 400
        vbox:
            frame:
                background "#444"
                if input_name == "fn":
                    input value VariableInputValue("firstName")
                else:
                    textbutton firstName action(SetScreenVariable("input_name", "fn"))
            frame:
                background "#444"
                if input_name == "sn":
                    input value VariableInputValue("surName")
                else:
                    textbutton surName action(SetScreenVariable("input_name", "sn"))


label start:
    call screen test

[DoubleProlix]

I dig it! Don't suppose there's a way to tweak it so that the player can click on anywhere in the frame and not just the text itself?



As is, if I click on the frame to the right of "Hiro" or "Protagonist" (default name), nothing happens... I have to click on the text itself. Can I somehow "extend" the button to the end of the frame, perhaps?

[philat]

viewtopic.php?f=51&t=38080#p412055

[kivik]

You can extend that in theory but you'll have to creating padding to line it up properly. It may be a bit fiddly to do but I don't see why it won't work so long as your button doesn't have a background.

Also, if you set the screen variable to "firstname" at the start of the screen, it'll default to the firstname field, and surname for the surname one. You may want to do that just to indicate player can start typing straight the way.

[DoubleProlix]

Something like "Padding = (frame's width) - (my width)" would work. The frame's width is a known quantity, but how do I get the button's current width?

[kivik]

You may be better off doing an xfill True, not sure how your screen is setup but it stretches the element to the width of the parent element. Then apply xpos to the text inside the textbutton to line it up, I think that'd be text_xpos inside the textbutton.

[DoubleProlix]

Well, here's what I have:

Code: Select all

hbox:
            box_wrap True
            null width 515
            vbox:

                label "First Name:"
                frame:
                    xsize 300
                    if input_name == "fn":
                        input value VariableInputValue("firstname")
                    else:
                        textbutton firstname action(SetScreenVariable("input_name", "fn"))
                label "Surname:"
                frame:
                    xsize 300
                    if input_name == "sn":
                        input value VariableInputValue("surname")
                    else:
                        textbutton surname action(SetScreenVariable("input_name", "sn"))

Would I put xfill True at the end of the input statements? or the textbutton? Neither seems to work.

[DoubleProlix]

Nevermind, I got it to work with textbutton firstname xfill True action(SetScreenVariable("input_name", "fn"))

Thanks for all your help!