Screen With Multiple Inputs

[parttimestorier]

I'm trying to code a screen where the player chooses a first name and a last name for the main character, but I'm not especially familiar with coding custom screens, and I've run into a slight issue. I'm basing my code on what's in this thread, but I want to add a second input for the last name. So my slightly modified version of that code looks like this:

Code: Select all

vbox:
	ypos 100
	xalign 0.5
	spacing 10
	xsize 200
	label "First Name"
	frame:
		xalign 0.5
		xfill True
		padding (10,10)
		input value ScreenVariableInputValue("mcfirst") pixel_width 200 length 30
	$ mcfirst = mcfirst.strip()
vbox:
	ypos 100
	xalign 0.5
	spacing 10
	xsize 200
	label "Last Name"
	frame:
		xalign 0.5
		xfill True
		padding (10,10)
		input value ScreenVariableInputValue("mclast") pixel_width 200 length 30
	$ mclast = mclast.strip()

I like the way that screen looks, and it seems to mostly be working, but I'm currently unable to actually change the default last name - the screen seems to only let me change the first one, and I can't click over to the other input box for the last one. Is there something specific I need to change that will allow for multiple inputs on one screen? Thanks!

[hell_oh_world]

Use the `InputValue.Toggle()` or `InputValue.Enable()` action in activating multiple inputs: https://www.renpy.org/doc/html/screen_p ... inputvalue
A sample implementation:

Code: Select all

screen your_screen():
  default fn = ""
  default ln = ""
  default fn_value = ScreenVariableInputValue("fn")
  default ln_value = ScreenVariableInputValue("ln")
  
  vbox:
    button:
      action fn_value.Toggle()
      input:
        value fn_value

    button:
      action ln_value.Toggle()
      input:
        value ln_value
        

Be aware that in order to type on the input, you need to have your cursor placed within the `input`'s `button`, since the `input`s are encapsulated inside them.

[parttimestorier]

Be aware that in order to type on the input, you need to have your cursor placed within the `input`'s `button`, since the `input`s are encapsulated inside them.

Thanks for your help! This is mostly working now, but it seems to me like needing to keep the cursor right on the button will also be an issue. Is there a way to change that so that the player can move their mouse away from it and still type stuff in? I imagine most people probably won't naturally keep their cursor right on top of what they're typing.

[hell_oh_world]

For that, you need to have the input outside the button. The problem with that is you have to position the button that will activate that specific input and the input separately. You will also need to manually set the size of the button so that it's the same as the size of the input, so it will look like a normal input field.

[Kia]

I remember doing something like this by toggling inputs and buttons, something like

Code: Select all

default active_input = 1
	if active_input == 1:
		hbox:
			input ...
			textbutton "[input_2_value] action SetscreenVariable("active_input", 2)
	else:
		hbox:
			textbutton "[input_1_value] action SetscreenVariable("active_input", 1)
			input ...
		

you just have to change a button to look like an input

[parttimestorier]

I remember doing something like this by toggling inputs and buttons . . .

I finally got back to working on this, and I wanted to let you and anyone else who might come across this thread with a similar issue know that this comment was exactly what I needed to figure it out! My code ended up looking like this:

Code: Select all

default mcfirst_value = ScreenVariableInputValue("mcfirst")
default mclast_value = ScreenVariableInputValue("mclast")
default active_input = 1
vbox:
    ypos 100
    xalign 0.5
    spacing 10
    xsize 200
    label "First Name"
    frame:
        xalign 0.5
        xfill True
        padding (10,10)
        if active_input == 1:
            input value ScreenVariableInputValue("mcfirst") pixel_width 200 length 30
        else:
            textbutton "[mcfirst]" action SetScreenVariable("active_input", 1)
vbox:
    ypos 100
    xalign 0.5
    spacing 10
    xsize 200
    label "Last Name"
    frame:
        xalign 0.5
        xfill True
        padding (10,10)
        if active_input == 2:
            input value ScreenVariableInputValue("mclast") pixel_width 200 length 30
        else:
            textbutton "[mclast]" action SetScreenVariable("active_input", 2)

Thanks everyone for your help!

[EchoEcho]

Wow! This looks great! I've been thinking of how to do this for a while. Definitely going to do something similar to this in a project of mine! Can't wait to try it out.

Thanks!