Ren'Py Need help with displaying a custom textbox for a password puzzle

[DiscipleOfVirginia]

I am doing this password puzzle, and I want the textbox that appear when you put in the password to look different than the standard textbox.

This is my working code:

style my_input_box:
        xpadding 16
        ypadding 16
        background Frame("my_input_box.png", 16, 16)
        focus_mask "my_input_box_focus_mask.png"
    python:
        password = "raccoon"

        guess = renpy.input("Tivoli is a", length=32)
        guess = guess.strip()



    if guess == password:
        jump v06_puzzlecleared
    else:
        jump v06_puzzlelost

Yet, as you can see, the "style" is not activated. Everytime I try to add it, I get a crash. When I tried what ChatGPT told me, to add it like so: guess = renpy.input("Tivoli is a", length=32, style=my_input_box)

Ren'Py says it does not recognise the style. Any help appreciated ^^

 

[79flavors]

Yet, as you can see, the "style" is not activated. Everytime I try to add it, I get a crash. When I tried what ChatGPT told me, to add it like so: guess = renpy.input("Tivoli is a", length=32, style=my_input_box)

You can't override the style for that individual input box, but you can override the screen it uses. (Well, you could override the input box layout using the default style, but it would affect ALL input boxes).

$ renpy.input() uses screen input() within the screens.rpy file.
It will also allow you to override the screen used.
See:

You must be registered to see the links

So you could just copy/paste the screen input() as something like screen pwd_input() and rewrite it to do whatever you like... including overriding the style definitions.

So maybe:

screen pwd_input(prompt):
    style_prefix "pwd_input"

    window:

        vbox:
            xalign gui.dialogue_text_xalign
            xpos gui.dialogue_xpos
            xsize gui.dialogue_width
            ypos gui.dialogue_ypos

            text prompt style "pwd_input_prompt"
            input id "pwd_input"

style pwd_input_prompt is default

style pwd_input_prompt:
    xalign gui.dialogue_text_xalign
    properties gui.text_properties("input_prompt")

style pwd_input:
    xalign gui.dialogue_text_xalign
    xmaximum gui.dialogue_width
    mask "*"

# ... much later...

    $ guess = renpy.input("Tivoli is a", length=32, exclude="{}[]", screen="pwd_input")

(Dunno if that code actually works, you may need to tweak it a little)

 

[DiscipleOfVirginia]

You can't override the style for that individual input box, but you can override the screen it uses. (Well, you could override the input box layout using the default style, but it would affect ALL input boxes).

$ renpy.input() uses screen input() within the screens.rpy file.
It will also allow you to override the screen used.
See:

You must be registered to see the links

So you could just copy/paste the screen input() as something like screen pwd_input() and rewrite it to do whatever you like... including overriding the style definitions.

So maybe:

screen pwd_input(prompt):
    style_prefix "pwd_input"

    window:

        vbox:
            xalign gui.dialogue_text_xalign
            xpos gui.dialogue_xpos
            xsize gui.dialogue_width
            ypos gui.dialogue_ypos

            text prompt style "pwd_input_prompt"
            input id "pwd_input"

style pwd_input_prompt is default

style pwd_input_prompt:
    xalign gui.dialogue_text_xalign
    properties gui.text_properties("input_prompt")

style pwd_input:
    xalign gui.dialogue_text_xalign
    xmaximum gui.dialogue_width
    mask "*"

# ... much later...

    $ guess = renpy.input("Tivoli is a", length=32, exclude="{}[]", screen="pwd_input")

(Dunno if that code actually works, you may need to tweak it a little)

I see!

And would I put the "first part" of the code (i.e. the part before "much later") somewhere special, or just before I call upon the command?

 

[79flavors]

And would I put the "first part" of the code (i.e. the part before "much later") somewhere special, or just before I call upon the command?

Honestly, Renpy doesn't care where the code is located.
Renpy will scan the whole /game/ folder for *.rpy files and pre-process certain command (like screen and handle them before the game even starts.

The $ guess = renpy.input("Tivoli is a", length=32, exclude="{}[]", screen="pwd_input") would be anywhere in your game where you want to use the password input box... which would normally be somewhere after the label start:.

The new screen pwd_input(): could go in the screens.rpy file, or you could create a new file named something like custom_screens.rpy if you wanted to keep the standard renpy ones and your ones separate. Or you can put it near the top of your script.rpy file or practically anywhere else (including just before you use it).

Putting screen code just before you use it works - but is probably a bad idea. It's fine until realise you could use the same screen in multiple places within your game. For the most part you just want to be consistent, top of the script... in it's own file... doesn't matter... just wherever makes sense to you (so you'll know where to look for it later).

Personally, I'd put them in a custom_screens.rpy file. Especially if I were adding other custom screens.

btw. $ just means python: - but for a single line of code.

    $ guess = renpy.input("Tivoli is a", length=32, exclude="{}[]", screen="pwd_input")
    $ guess = guess.strip()

    # same as:

    python:
        guess = renpy.input("Tivoli is a", length=32, exclude="{}[]", screen="pwd_input")
        guess = guess.strip()

 

[DiscipleOfVirginia]

Honestly, Renpy doesn't care where the code is located.

Two questions:

1 . The issue ren'py is having atm, is that it keeps telling me

```
I'm sorry, but errors were detected in your script. Please correct the
errors listed below, and try again.


File "game/screens.rpy", line 526: style property mask is not known.
    mask "*"
        ^

2. Where in the code you gave me so kindly, do I change values and stuff to make the input for the password look different than the standard textbox?

 

[anne O'nymous]

File "game/screens.rpy", line 526: style property mask is not known.
    mask "*"

It's 79flavors being tired. mask is a statement property, not a style one. It should be put with the input, not its style: input id "pwd_input" mask "*"

2. Where in the code you gave me so kindly, do I change values and stuff to make the input for the password look different than the standard textbox?

In the different style he defined. Most of the change will probably go in "pwd_input".

 

[79flavors]

It's 79flavors being tired.

Nahh. It's 79flavors not really understanding it at first glance.
I wasn't in a position to be able to test when I searched the documentation - so I went with my best guess, after adding " (Dunno if that code actually works, you may need to tweak it a little)" to cover my ass.

As to which style properties to change - that's up to you. Change as little or as much as makes sense for your game. Personally, I think I'd change the bare minimum, except to change the mask.

... which... now I think about it might mean you don't need the extra screen at all.
Maybe...
$ guess = renpy.input("Tivoli is a", length=32, exclude="{}[]", mask="*")
... would be enough.

When I saw your original post, I saw all the padding and my_input_box.png type changes you'd made... and so assumed there were visual changes you hoped to include - which is partly the reason I suggested the alternative screen code.

 

[DiscipleOfVirginia]

It's 79flavors being tired. mask is a statement property, not a style one. It should be put with the input, not its style: input id "pwd_input" mask "*"

And where to put it in my code, this change? I suck at coding, which is why I cannot wait for chatgpt-4.

This is my full code in my screens.rpy

screen pwd_input(prompt):
    style_prefix "pwd_input"

    window:

        vbox:
            xalign gui.dialogue_text_xalign
            xpos gui.dialogue_xpos
            xsize gui.dialogue_width
            ypos gui.dialogue_ypos

            text prompt style "pwd_input_prompt"
            input id "pwd_input"

style pwd_input_prompt is default

style pwd_input_prompt:
    xalign gui.dialogue_text_xalign
    properties gui.text_properties("input_prompt")

style pwd_input:
    xalign gui.dialogue_text_xalign
    xmaximum gui.dialogue_width
    mask "*"

As of now, it is under style pwd_input:

Where do I put it now? Or should I put it with the puzzle?

extra screen at all.
Maybe...
$ guess = renpy.input("Tivoli is a", length=32, exclude="{}[]", mask="*")
... would be enough.

When I saw your original post, I saw all the padding and my_input_box.png type changes you'd made... and so assumed there were visual changes you hoped to include - which is partly the reason I suggested the alternative screen code.

It reads it now thanks. Yet, how do I change the image to what I want? I.E. How do I get it to use this imagebox:


How do I get the font different etc? I do not know where to put these changes. Thanks for all the help so far, my little brain is almost there.

 

[79flavors]

Yet, how do I change the image to what I want? I.E. How do I get it to use this imagebox:

Again, I'm not at a location where I can test RenPy code right now...
But best guess, you'll need to add a background parameter to the window:.

Based on

You must be registered to see the links

, vbox doesn't have an option to add a background image. Whereas window does.

So perhaps...

screen pwd_input(prompt):
    style_prefix "pwd_input"

    window:

        background "my_input_box.png"

        vbox:
            xalign gui.dialogue_text_xalign
            xpos gui.dialogue_xpos
            xsize gui.dialogue_width
            ypos gui.dialogue_ypos

            text prompt style "pwd_input_prompt"
            input id "pwd_input"

... or maybe, leave the basic screen definition alone and do it using the style...
(my screen code coding isn't good from memory, I think it works like this)

style pwd_input_window is default
style pwd_input_window:
    background "my_input_box.png"

... though I think the image used here would need to be a full screen image, drawn to appear where the input box would appear on screen and the majority of the image being transparent. Although maybe copying the xpos/ypos type positioning parameters would sort that.

style pwd_input_window is default
style pwd_input_window:
    background "my_input_box.png"
    xpos gui.dialogue_xpos
    xsize gui.dialogue_width
    ypos gui.dialogue_ypos

... I'm very much guessing here.

How do I get the font different etc? I do not know where to put these changes. Thanks for all the help so far, my little brain is almost there.

That would depend on if you wanted the font to be for all text displayed by the game or just this input box.

Assuming just this password input box... maybe:

style pwd_input_prompt:
    xalign gui.dialogue_text_xalign
    properties gui.text_properties("input_prompt")
    font "my_hideous_font.ttf"

style pwd_input:
    xalign gui.dialogue_text_xalign
    xmaximum gui.dialogue_width
    font "my_other_hideous_font.ttf"

 

[DiscipleOfVirginia]

Again, I'm not at a location where I can test RenPy code right now...
But best guess, you'll need to add a background parameter to the window:.

Based on

You must be registered to see the links

, vbox doesn't have an option to add a background image. Whereas window does.

So perhaps...

screen pwd_input(prompt):
    style_prefix "pwd_input"

    window:

        background "my_input_box.png"

        vbox:
            xalign gui.dialogue_text_xalign
            xpos gui.dialogue_xpos
            xsize gui.dialogue_width
            ypos gui.dialogue_ypos

            text prompt style "pwd_input_prompt"
            input id "pwd_input"

Would depend on if you wanted the font to be for all text displayed by the game or just this input box.

Assuming just this password input box... maybe:

style pwd_input_prompt:
    xalign gui.dialogue_text_xalign
    properties gui.text_properties("input_prompt")
    font "my_hideous_font.ttf"

style pwd_input:
    xalign gui.dialogue_text_xalign
    xmaximum gui.dialogue_width
    font "my_other_hideous_font.ttf"

You my good sir solved my issue. Thank you, and walk with God <3 (tl;dr it now works)

 

[anne O'nymous]

Based on

You must be registered to see the links

, vbox doesn't have an option to add a background image. Whereas window does.

frame too have a background property, and the interesting point is that it also have a has vbox one.

Normally, this should works:

screen whatever():

    frame:
        background "whatever image"
        has vbox
        [...]

Has long has the has vbox is the last property, it should be a frame with all its advantage, but acting like a vbox.