On Screen Text Input

A place for Ren'Py tutorials and reusable Ren'Py code.
Forum rules
Do not post questions here!

This forum is for example code you want to show other people. Ren'Py questions should be asked in the Ren'Py Questions and Announcements forum.
Message
Author
User avatar
namastaii
Eileen-Class Veteran
Posts: 1350
Joined: Mon Feb 02, 2015 8:35 pm
Projects: Template Maker for Ren'Py, What Life
Github: lunalucid
Skype: Discord: lunalucid#1991
Soundcloud: LunaLucidMusic
itch: lunalucid
Location: USA
Contact:

On Screen Text Input

#1 Post by namastaii »

Update: I added a second version (click to type) There are more ways to do this but I chose my own way since I found it to be the most simple and it works. It is attached below


So forever ago I agreed to put up a cookbook version of an on-screen text input but I put it off for a while so I just whipped up a really simple version that you should easily be able to spice up to your games standards. Any questions or errors, please let me know.

You can change around the positions, use images and make it look super cool.

This text input works by hovering over the box and then typing while your cursor is still over the box. Then you can move your cursor to the next box to begin typing there. You don't need to click. Though if anyone knows the specific code to make it so you click instead of hover, please also let me know about that :)

I will paste the code into here but I will also upload the files for you to manipulate directly.

This simple version looks like this:
11111.PNG
Define the functions for creating the string and also the variables you will be assigning the strings to

Code: Select all

init python:
    def name_func(newstring):
        store.firstname = newstring

        
    def lastname_func(newstring):
        store.lastname = newstring

init:
    default firstname = " "
    default lastname = " "
This is just a button that opens the screen

Code: Select all

screen open_screen:
    textbutton "open" action Show("text_input_screen")
Then finally, the screen with the text input

Code: Select all

screen text_input_screen():
    frame:
        #xysize (300,200)
        xpos 250
        ypos 100
        vbox:
            hbox:
                text "{size=+5}First Name"
                button:
                    id "input_1"
                    xysize (250,25)
                    action NullAction()
                    #hover_sound ""
                    add Input(hover_color="#3399ff",size=28, color="#000", default=firstname, changed=name_func, length=10, button=renpy.get_widget("text_input_screen","input_1")) yalign 1.0
            hbox:
                text "{size=+5}Last Name"
                button:
                    id "input_2"
                    xysize (250,25)
                    action NullAction()
                    #hover_sound ""
                    add Input(hover_color="#3399ff",size=28, color="#000", default=lastname, changed=lastname_func, length=10, button=renpy.get_widget("text_input_screen","input_2")) yalign 1.0
            hbox:
                textbutton "Done" action Hide("text_input_screen")
It's pretty simple! I hope this helps for anyone who was wondering how to add input without putting it in the dialogue box.



Click to type version:
textttttttt.PNG
textttttttt.PNG (6.65 KiB) Viewed 11482 times
text_input_2.zip
(586.84 KiB) Downloaded 808 times
first version:
Attachments
cookbook on-screen text input.zip
(293.64 KiB) Downloaded 485 times
Last edited by namastaii on Mon May 02, 2016 5:05 pm, edited 4 times in total.

User avatar
MimirollCookie
Miko-Class Veteran
Posts: 725
Joined: Sat May 23, 2015 5:05 am
Completed: Best Friends (DRAMA), Sweet and Spices (NaNo16)
Projects: Cupid's Wish, Best Friends Deux
Organization: Pastelle Studios
Deviantart: MimirollCookie
Location: A place where rainbows and unicorns collide. ^0^
Contact:

Re: On Screen Text Input

#2 Post by MimirollCookie »

Ooh! This is really amazing. Time to make a practice project.
Thanks for sharing the code!! :D
Image
"If they can do it, you can do it too! make them do it. They can do it, right?" :lol:
Getting a new laptop. Hopefully going back to VN making! (BWAHAHA)

User avatar
xela
Lemma-Class Veteran
Posts: 2481
Joined: Sun Sep 18, 2011 10:13 am
Contact:

Re: On Screen Text Input

#3 Post by xela »

namastaii wrote:Though if anyone knows the specific code to make it so you click instead of hover, please also let me know about that :)
Try:

Code: Select all

init:
    style my_input:
        is default
        color "#000"
        hover_color "#3399ff"
        size 28
        
    style input_button:
        is button
        yalign 1.0
        key_events True
        xysize (250, 25)
        
    python:
        class MyInputValue(InputValue):
            def __init__(self, var, default=""):
                self.var = var
                
                if not hasattr(store, var):
                    setattr(store, var, default)
                    
            def get_text(self):
                return getattr(store, self.var)
                
            def set_text(self, s):
                setattr(store, self.var, s)
                
            def enter(self):
                renpy.run(self.Disable())
                raise renpy.IgnoreEvent()


screen test():
    frame:
        align .5, .5
        has vbox

        $ input = Input(value=MyInputValue("firstname", "Name"), style="my_input", length=10)
        button:
            style "input_button"
            action input.enable
            add input
                
        $ input = Input(value=MyInputValue("lastname", "Surname"), style="my_input", length=10)
        button:
            style "input_button"
            action input.enable
            add input
        
        textbutton "Done":
            xalign .5
            action Return()
    
label start:
    call screen test
    "Hello, I am [firstname] [lastname]!"
    return
This will also automatically create change functions and variables so you don't have to. If you do create the variable(s), they will be used as default.
Last edited by xela on Mon Apr 11, 2016 11:20 am, edited 1 time in total.
Like what we're doing? Support us at:
Image

User avatar
xela
Lemma-Class Veteran
Posts: 2481
Joined: Sun Sep 18, 2011 10:13 am
Contact:

Re: On Screen Text Input

#4 Post by xela »

I'd like to add that this is a horrible practice and a mistake:

Code: Select all

init:
    $ firstname = " "
    $ lastname = " "
Edit:

Names will be overwritten and whatever was saved to the save files will be overwritten with " " every time engine is reloaded/restarted. <<== Not True! You (still) should use:

Code: Select all

default firstname = ""
default lastname = ""
Please try not to give poor advice in cookbook in the future!
Last edited by xela on Mon Apr 11, 2016 11:56 am, edited 1 time in total.
Like what we're doing? Support us at:
Image

User avatar
PyTom
Ren'Py Creator
Posts: 16088
Joined: Mon Feb 02, 2004 10:58 am
Completed: Moonlight Walks
Projects: Ren'Py
IRC Nick: renpytom
Github: renpytom
itch: renpytom
Location: Kings Park, NY
Contact:

Re: On Screen Text Input

#5 Post by PyTom »

That won't actually happen, since the init code runs before data is loaded. But default is better, as it explicitly markes the variable as changed for the purpose of saving.
Supporting creators since 2004
(When was the last time you backed up your game?)
"Do good work." - Virgil Ivan "Gus" Grissom
Software > Drama • https://www.patreon.com/renpytom

User avatar
xela
Lemma-Class Veteran
Posts: 2481
Joined: Sun Sep 18, 2011 10:13 am
Contact:

Re: On Screen Text Input

#6 Post by xela »

Right :)

I always save to fields (obj.name, obj.last_name and etc...) so it got mixed up in my head.
Like what we're doing? Support us at:
Image

Erumal
Newbie
Posts: 2
Joined: Mon Apr 11, 2016 4:45 pm
Contact:

Re: On Screen Text Input

#7 Post by Erumal »

How would you make this appear as a screen instead of a button?

User avatar
namastaii
Eileen-Class Veteran
Posts: 1350
Joined: Mon Feb 02, 2015 8:35 pm
Projects: Template Maker for Ren'Py, What Life
Github: lunalucid
Skype: Discord: lunalucid#1991
Soundcloud: LunaLucidMusic
itch: lunalucid
Location: USA
Contact:

Re: On Screen Text Input

#8 Post by namastaii »

Erumal wrote:How would you make this appear as a screen instead of a button?
You would just open the screen directly instead of using the button that opens the screen
For example during the scene, something like

d "Now we need a name for you."
d "What is your name?"
show screen text_input_screen


Is that what you're asking?

User avatar
namastaii
Eileen-Class Veteran
Posts: 1350
Joined: Mon Feb 02, 2015 8:35 pm
Projects: Template Maker for Ren'Py, What Life
Github: lunalucid
Skype: Discord: lunalucid#1991
Soundcloud: LunaLucidMusic
itch: lunalucid
Location: USA
Contact:

Re: On Screen Text Input

#9 Post by namastaii »

And so, wait what? Do I change it to "" with no space then? I figured since it gets replaced that the space won't be there anymore and the other variables never reset when the game is restarted either so

User avatar
xela
Lemma-Class Veteran
Posts: 2481
Joined: Sun Sep 18, 2011 10:13 am
Contact:

Re: On Screen Text Input

#10 Post by xela »

I don't understand the question.
Like what we're doing? Support us at:
Image

User avatar
namastaii
Eileen-Class Veteran
Posts: 1350
Joined: Mon Feb 02, 2015 8:35 pm
Projects: Template Maker for Ren'Py, What Life
Github: lunalucid
Skype: Discord: lunalucid#1991
Soundcloud: LunaLucidMusic
itch: lunalucid
Location: USA
Contact:

Re: On Screen Text Input

#11 Post by namastaii »

Oh geez. I was really tired when I saw all the responses so I didn't even read your correction right. I guess what I'm asking is do I need to change the code to default firstname = "" or is it fine where it's at. Your conversation was confusing to me lol

User avatar
xela
Lemma-Class Veteran
Posts: 2481
Joined: Sun Sep 18, 2011 10:13 am
Contact:

Re: On Screen Text Input

#12 Post by xela »

namastaii wrote:I guess what I'm asking is do I need to change the code to default firstname = ""
You should :)

It will work as it is but default statement is more appropriate.
Like what we're doing? Support us at:
Image

User avatar
namastaii
Eileen-Class Veteran
Posts: 1350
Joined: Mon Feb 02, 2015 8:35 pm
Projects: Template Maker for Ren'Py, What Life
Github: lunalucid
Skype: Discord: lunalucid#1991
Soundcloud: LunaLucidMusic
itch: lunalucid
Location: USA
Contact:

Re: On Screen Text Input

#13 Post by namastaii »

With or without the init? Sorry for the million questions. Just don't want it to be all jacked

User avatar
xela
Lemma-Class Veteran
Posts: 2481
Joined: Sun Sep 18, 2011 10:13 am
Contact:

Re: On Screen Text Input

#14 Post by xela »

I don't think that it matters. I put them on the init because it is very convenient in old JEdit that I still use (you can collapse all the grouped default statements that way).

According to the Doc, it belongs on the first indent so you should prolly remove init to be thorough.
Like what we're doing? Support us at:
Image

User avatar
namastaii
Eileen-Class Veteran
Posts: 1350
Joined: Mon Feb 02, 2015 8:35 pm
Projects: Template Maker for Ren'Py, What Life
Github: lunalucid
Skype: Discord: lunalucid#1991
Soundcloud: LunaLucidMusic
itch: lunalucid
Location: USA
Contact:

Re: On Screen Text Input

#15 Post by namastaii »

uploaded a click-to-type version. (it's a pretty simple version) and I forgot to include a max length for the text but it's pretty easy to add in. Just a heads up. I didn't do it the way Xela presented..sorry.

Post Reply

Who is online

Users browsing this forum: No registered users