Screen With Multiple Inputs

Discuss how to use the Ren'Py engine to create visual novels and story-based games. New releases are announced in this section.
Forum rules
This is the right place for Ren'Py help. Please ask one question per thread, use a descriptive subject like 'NotFound error in option.rpy' , and include all the relevant information - especially any relevant code and traceback messages. Use the code tag to format scripts.
Post Reply
Message
Author
User avatar
parttimestorier
Veteran
Posts: 398
Joined: Thu Feb 09, 2017 10:29 pm
Completed: No Other Medicine, Well Met By Moonlight, RE:BURN, The Light at the End of the Ocean, Take A Hike!
itch: janetitor
Location: Canada
Contact:

Screen With Multiple Inputs

#1 Post by parttimestorier » Sat Feb 27, 2021 1:23 pm

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!
ImageImageImage

User avatar
hell_oh_world
Miko-Class Veteran
Posts: 677
Joined: Fri Jul 12, 2019 5:21 am
Projects: The Button Man
Organization: NILA
Github: hell-oh-world
Location: Philippines
Contact:

Re: Screen With Multiple Inputs

#2 Post by hell_oh_world » Sat Feb 27, 2021 2:02 pm

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.

User avatar
parttimestorier
Veteran
Posts: 398
Joined: Thu Feb 09, 2017 10:29 pm
Completed: No Other Medicine, Well Met By Moonlight, RE:BURN, The Light at the End of the Ocean, Take A Hike!
itch: janetitor
Location: Canada
Contact:

Re: Screen With Multiple Inputs

#3 Post by parttimestorier » Sat Feb 27, 2021 3:09 pm

hell_oh_world wrote:
Sat Feb 27, 2021 2:02 pm
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.
ImageImageImage

User avatar
hell_oh_world
Miko-Class Veteran
Posts: 677
Joined: Fri Jul 12, 2019 5:21 am
Projects: The Button Man
Organization: NILA
Github: hell-oh-world
Location: Philippines
Contact:

Re: Screen With Multiple Inputs

#4 Post by hell_oh_world » Sat Feb 27, 2021 5:41 pm

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.

User avatar
Kia
Miko-Class Veteran
Posts: 959
Joined: Fri Aug 01, 2014 7:49 am
Deviantart: KiaAzad
Skype: KiaAzad
Contact:

Re: Screen With Multiple Inputs

#5 Post by Kia » Fri Mar 12, 2021 1:56 pm

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

User avatar
parttimestorier
Veteran
Posts: 398
Joined: Thu Feb 09, 2017 10:29 pm
Completed: No Other Medicine, Well Met By Moonlight, RE:BURN, The Light at the End of the Ocean, Take A Hike!
itch: janetitor
Location: Canada
Contact:

Re: Screen With Multiple Inputs

#6 Post by parttimestorier » Fri May 14, 2021 1:56 pm

Kia wrote:
Fri Mar 12, 2021 1:56 pm
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!
ImageImageImage

Post Reply

Who is online

Users browsing this forum: PyTom