Screen (click-to-type) User Input Examples

[namastaii]

Okay, I might have gone too far with this one. I wanted to provide some updated examples of my old post here.

So, I created one project that includes examples of a button input, imagemap input, and then I had some fun with the last one which is multiple text inputs on one screen. The last one is a bit more interactive.. a small idea just kept growing at that point and now I think I might have to create a computer desktop template or something for others to have fun with.

Download the project which includes a lot more information and styling (and a third screen themed as a computer desktop for fun)

Download from GitHub




I'll provide the simple version here:


Text Input Button


Variable we'll be using to store the user's input & the function used that does the actual storing.

Code: Select all

init:
    default myinput_1 = ""

init python:
    def change_myinput1(newstring):                                          
        store.myinput_1 = newstring

Screen with a button input

Code: Select all

screen simple_button_input():
    default input_on = False
    modal True


    frame:
        xalign 0.5
        yalign 0.5
        vbox:
            text "Click to type!"
            button:
                background Frame(Solid("#ffc"))
                xsize 400
                if input_on:                                                  
                    input default myinput_1 changed change_myinput1
                    action SetScreenVariable("input_on", False)      
                else:
                    text myinput_1                                           
                    action SetScreenVariable("input_on", True)             


            textbutton "close" action Hide("simple_button_input")

Text Input Imagemap


Nothing new here

Code: Select all

init:
    default myinput_2 = ""

init python:
    def change_myinput2(newstring):                                          
        store.myinput_2 = newstring

Imagemap with text input

Code: Select all

screen simple_imagemap_input():
    default input_on = False
    modal True

    imagemap:
        ground "images/post-it.png"
        hover "images/post-it_hovered.png"

        hotspot(785, 390, 350, 300) action ToggleScreenVariable("input_on", True)

        if input_on:
            input default myinput_2 changed change_myinput2 pos(830,480) xsize 300 length 50
        else:
            text myinput_2 area(830,480, 300,250)


        textbutton "close" pos(785, 735) action Hide("simple_imagemap_input")

Some good things to know:
default - the default value of the input (in this case, the variable itself)
length - maximum amount of characters user is allowed to input
pixel_width - maximum pixels wide for user input
allow - string list of characters that user is allowed to input
exclude - string list of characters that user is not allowed to input

Also: If you have any questions about the examples in the github/ZIP version, feel free to ask and I can explain them more in depth. All assets in the ZIP are free to use, they include PSD files for the imagemaps as well. You do not need to credit me if you use anything, but if you would like to then credit LunaLucid or Namastaii

[isobellesophia]

Okay, I might have gone too far with this one. I wanted to provide some updated examples of my old post here.

So, I created one project that includes an examples of a button input, imagemap input, and then I had some fun with the last one which is multiple text inputs on one screen. The last one is a bit more interactive.. a small idea just kept growing at that point and now I think I might have to create a computer desktop template or something for others to have fun with.

Download the project which includes a lot more information and styling (and a third screen themed as a computer desktop for fun)
Text Input Examples.zip or
Download from GitHub




I'll provide the simple version here:


Text Input Button


Variable we'll be using to store the user's input & the function used that does the actual storing.

Code: Select all

init:
    default myinput_1 = ""

init python:
    def change_myinput1(newstring):                                          
        store.myinput_1 = newstring

Screen with a button input

Code: Select all

screen simple_button_input():
    default input_on = False
    modal True


    frame:
        xalign 0.5
        yalign 0.5
        vbox:
            text "Click to type!"
            button:
                background Frame(Solid("#ffc"))
                xsize 400
                if input_on:                                                  
                    input default myinput_1 changed change_myinput1
                    action SetScreenVariable("input_on", False)      
                else:
                    text myinput_1                                           
                    action SetScreenVariable("input_on", True)             


            textbutton "close" action Hide("simple_button_input")

Text Input Imagemap


Nothing new here

Code: Select all

init:
    default myinput_2 = ""

init python:
    def change_myinput2(newstring):                                          
        store.myinput_2 = newstring

Imagemap with text input

Code: Select all

screen simple_imagemap_input():
    default input_on = False
    modal True

    imagemap:
        ground "images/post-it.png"
        hover "images/post-it_hovered.png"

        hotspot(785, 390, 350, 300) action ToggleScreenVariable("input_on", True)

        if input_on:
            input default myinput_2 changed change_myinput2 pos(830,480) xsize 300 length 50
        else:
            text myinput_2 area(830,480, 300,250)


        textbutton "close" pos(785, 735) action Hide("simple_imagemap_input")

Some good things to know:
default - the default value of the input (in this case, the variable itself)
length - maximum amount of characters user is allowed to input
pixel_width - maximum pixels wide for user input
allow - string list of characters that user is allowed to input
exclude - string list of characters that user is not allowed to input

Also: If you have any questions about the examples in the github version, feel free to ask and I can explain them more in depth. All assets in the ZIP are free to use, they include PSD files for the imagemaps as well. You do not need to credit me if you use anything, but if you would like to then credit LunaLucid or Namastaii

Oh this is great! Perfect for my game i was making!

Is this also work for talking to the charcater?

Like an AI chat bot for example.

[namastaii]

I would imagine so. Anything that requires a user's input I haven't worked with AI though. Do you have any code for that? Since I'm not sure how your variables or functions work.

[isobellesophia]

I would imagine so. Anything that requires a user's input I haven't worked with AI though. Do you have any code for that? Since I'm not sure how your variables or functions work.

Umm.. not really an AI type, just like the player will input anything, just like typing their names..

like saying blah blah or whatever, textbox input is not enough for me so...

Maybe i can send some screenshots tomorrow or later, so you can see what exactly i am gonna show.