automatically change text box size based on text

[sugar]

hey all, hope you're doing well!

we are working on a vn and currently, we are manually defining the size of the text box based on the amount of lines of narration/text. as we were going along, adjusting font size and all, we realized that constantly fixing text box sizes would become quite the nuisance (we have 10+ more chapters to go ).

here are some examples:

our smallest text box

our medium sized text box

how its coded:

Code: Select all

ns "You don't understand why..."
nm "This is for a sentence that has 2-3 lines, as you can see the text box is a bit bigger."

how ns and nm are defined:

Code: Select all

init:
## Narration boxes
    $ ns = Character(
    window_background="GUI/textbox/ns.png",
    window_top_padding=633,
    what_xpos=110,
    what_ypos=5)

    $ nm = Character(window_background="GUI/textbox/nm.png", window_top_padding=633, what_xpos=110, what_ypos=5)
    $ nl = Character(window_background="GUI/textbox/nl.png", window_top_padding=633, what_xpos=110, what_ypos=5)
    $ nxl = Character(window_background="GUI/textbox/nxl.png", window_top_padding=633, what_xpos=110, what_ypos=5)

what we would like to do is essentially automate the narration boxes based on the length of the string they go into. i was going to create a new variable that can hold a string, then based on the string length we could show the corresponding text box size:

some pseudocode i came up with:

Code: Select all

def ne(string):
	if len(ne) > 50:
		renpy.show(image for medium text box)

any help would be appreciated! thank you in advance <3

[Alex]

...

Try to make texbox background as a frame instead of just an image.

Code: Select all

define nm = Character(window_background=Frame("GUI/textbox/nm.png", 5, 50), window_top_padding=633, what_xpos=110, what_ypos=5)

https://www.renpy.org/doc/html/displayables.html#Frame

[lindsay-jb]

Hey, so I've used the code that you suggested and have also looked all over the web for how to do this, and the textbox doesn't stretch. It just stays the same size. I have:

Code: Select all

define n = Character(window_background=Frame("GUI/textbox/n.png", 5, 50), window_top_padding=100, what_xpos=110, what_ypos=5)

but it does nothing. I also tried this:

Code: Select all

style window:
    xalign 0.5
    xfill True
    yalign gui.textbox_yalign
    ysize gui.textbox_height

    background Frame("gui/textbox/n.png", 3,3, xalign=0.5, yalign=1.0)

style namebox:

but again, nothing. And I've searched for tutorials and instructions but can't find anything. It is in the historical ren'py page, but I tried doing what they show there and the program didn't recognize the syntax. It's probably old. Could you help me or guide me to somewhere that would give more detail/examples of how to stretch the texbox? Thanks!

[lindsay-jb]

I've messed around with this some more and have made some progress. However, I'm having an issue I'd like help with if possible. You see, I was able to get the textbox to resize. However, I want to make the namebox a separate window so that it won't get stretched with everything else. The resizing works when it's by itself, but once I add the namebox it gets all messed up. I've attached some screenshots.

Here's my code:
in screens:

Code: Select all

screen say(who, what):

    window:
        id "left"
        style "left"

        if who is "":

            window:
                id "namebox"
                style "namebox"

        text what id "what"


    ## If there's a side image, display it above the text. Do not display on the
    ## phone variant - there's no room.
    if not renpy.variant("small"):
        add SideImage() xalign 0.0 yalign 1.0


## Make the namebox available for styling through the Character object.
init python:
    config.character_id_prefixes.append('namebox')

style window is default
style say_label is default
style say_dialogue is default
style say_thought is say_dialogue

style namebox is default
style namebox_label is say_label

style left:
    xalign 0.5
    xfill True
    yoffset 500
    yminimum 91

    background Frame("gui/textbox/n.png", left=5, top=0, right=5, bottom=50)

style window:
    xalign 0.5
    xfill True
    yoffset 500
    yminimum 91

    background Frame("gui/textbox/n.png", left=5, top=0, right=5, bottom=50)

style namebox:
    xalign .44
    xfill False
    yfill False
    xsize gui.namebox_width
    yalign -.107
    ysize gui.namebox_height

    background "gui/namebox.png"

style say_label:
    properties gui.text_properties("name", accent=True)
    xalign gui.name_xalign
    yalign 0.5

style say_dialogue:
    properties gui.text_properties("dialogue")

    xpos gui.dialogue_xpos
    xsize gui.dialogue_width
    ypos gui.dialogue_ypos

in gui:

Code: Select all

## The height of the textbox containing dialogue.
define gui.textbox_height = 91
define gui.textbox_width = 657

## The placement of the textbox vertically on the screen. 0.0 is the top, 0.5 is
## center, and 1.0 is the bottom.
define gui.textbox_yalign = 0.5

## The placement of the speaking character's name, relative to the textbox.
## These can be a whole number of pixels from the left or top, or 0.5 to center.
define gui.name_xpos = 144
define gui.name_ypos = 0

## The horizontal alignment of the character's name. This can be 0.0 for left-
## aligned, 0.5 for centered, and 1.0 for right-aligned.
define gui.name_xalign = 0.0

## The width, height, and borders of the box containing the character's name, or
## None to automatically size it.
define gui.namebox_width = 657
define gui.namebox_height = 217

## If True, the background of the namebox will be tiled, if False, the
## background of the namebox will be scaled.
#define gui.namebox_tile = True


## The placement of dialogue relative to the textbox. These can be a whole
## number of pixels relative to the left or top side of the textbox, or 0.5 to
## center.
define gui.dialogue_xpos = 130
define gui.dialogue_ypos = .1

## The maximum width of dialogue text, in pixels.
define gui.dialogue_width = 500

## The horizontal alignment of the dialogue text. This can be 0.0 for left-
## aligned, 0.5 for centered, and 1.0 for right-aligned.
define gui.dialogue_text_xalign = 0.0

And then the definitions used in the pictures. The n is the one with the nametag that is stretched out, ns does not have a nametag.

Code: Select all

    $ n = Character("")
    $ ns = Character(window_background="GUI/textbox/n.png", window_top_padding=100, window_bottom_padding=100, what_xpos=110, what_ypos=5)

Any help would be greatly appreciated.

[Alex]

...some pseudocode i came up with:

Code: Select all

def ne(string):
	if len(ne) > 50:
		renpy.show(image for medium text box)

...

You can do such calculations inside the say screen.
If all the characters will have the same textbox you could change it like

Code: Select all

screen say(who, what):
    
    style_prefix "say"

    window:
        id "window"

        if len(what) > 100:
            background "GUI/textbox/nxl.png"
        elif len(what) > 50:
            background "GUI/textbox/nl.png"
        else:
            background "GUI/textbox/ns.png"

But if characters will have their own textboxes then you could:
- set the name of characters textbox bg image,
- calculate the textbox bg image suffix depending of the length of text.

Code: Select all

define e = Character("Eileen", show_bg_var="eileen_bg") # the name of the variable is prefixed with 'show_'

image eileen_bg_big:
    Solid("#ccc")
    size(150, 150)
    # "GUI/textbox/nxl.png"
    
image eileen_bg_medium:
    Solid("#ccc")
    size(100, 100)
    
image eileen_bg_small:
    Solid("#ccc")
    size(50, 50)

in screens.rpy

Code: Select all

screen say(who, what, bg_var=""):
    
    style_prefix "say"

    window:
        id "window"
        if bg_var:
            if len(what) > 10:
                background bg_var + '_big'
                # you could change other properties as well
                # like ysize, etc.
            elif len(what) > 2:
                background bg_var + '_medium'
            else:
                background bg_var + '_small'

        if who is not None:

            window:
                id "namebox"
                style "namebox"
                text who id "who"

        text what id "what"

    ## If there's a side image, display it above the text. Do not display on the
    ## phone variant - there's no room.
    if not renpy.variant("small"):
        add SideImage() xalign 0.0 yalign 1.0

test it, like

Code: Select all

label start:
    e "..."
    e "blah-blah-blah"
    e "~"
    "?!"