Change textbox look several time during the game

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.
Post Reply
Message
Author
User avatar
Ayael
Regular
Posts: 57
Joined: Fri Apr 07, 2017 2:17 pm
Projects: Anoldor, medieval fantasy otome game.
Contact:

Change textbox look several time during the game

#1 Post by Ayael » Sun Jun 02, 2019 5:51 pm

Hello guys, don't know if it will be useful to someone but since I spent some time on it to help someone, I wanted to share it with you.

So as say on the title, the idea is to change the look of the textbox during the game. The example is to change thing when we change the room we are in, but it can be used in various context, like for example displaying a different textbox during a fight scene to enlight the action etc.
Here we will see how to change the background image of the textbox, but once you understand it, you can change everything you want using the method, the text color, the size etc. I tried to explain it very slowly so it can help to learn style, variable, and if statement^^.

Okay let's go, so for this example let's say we want by default a blue textbox. But when we come in the bedroom we want it purple, and when we come in the living room we want it red.

Let's go !

So we will need 3 textbox images (you can find those used in this example as attachments), all put in our gui file.

Then, we are going to create a variable to indicate in which room we are, by default, I will set it up as normal.

Code: Select all

init python:
    setup_textbox = "normal"
It can be put almost everywhere but by commodity, I will put it just before the big part of the code^^.

Then, in the screen.rpy file, I need to find what define the window display, so you need to find this code :

Code: Select all

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

    window:
        id "window"

        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


## 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 window:
    xalign 0.5
    xfill True
    yalign gui.textbox_yalign
    ysize gui.textbox_height

    background Image("gui/textbox.png", xalign=0.5, yalign=1.0)
Then we will add a condition. Basically, what we want is "if the variable is set on this, you display this style, else you display the default one". (I am not sure if the id need to be change too, but I changed it accordingly to avoid problems).

Be carefull, the most important is that the variable names match, so do spell them very carefully. Plus, since the underscore, is used in style, don't use them for your name. For exemple write "livingroom" and not "living_room" it can lead to error in this particular context.

Code: Select all

window:
        if setup_textbox =="bedroom": #if the variable is "bedroom"
            style "window_bedroom" #then we display the style "window_bedroom". 
            id "window_bedroom"
        elif setup_textbox == "livingroom": #if the variable is "livingroom". 
            style "window_livingroom" #then we display the style "window_livingroom"!
            id "window_livingroom"
        else: #If the variable is neither bedroom, or livingroom, or whatever thing we have set before, then we display the default one. 
            id "window"
            style "window"
okay so now, we have say which style we wanted to used, we need to create the different style we are speaking about.

First off all, we are going to modify the default one to put our blue textbox on it !
So

Code: Select all

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

    background Image("gui/textbox.png", xalign=0.5, yalign=1.0)
become :

Code: Select all

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

    background Image("gui/textbox_blue.png", xalign=0.5, yalign=1.0) #we change the name of the picture accordingly of the name in the gui.
we will basically do the same with the too other, but changing the name too.

Code: Select all

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

    background Image("gui/textbox_purple.png", xalign=0.5, yalign=1.0)

Code: Select all

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

    background Image("gui/textbox_red.png", xalign=0.5, yalign=1.0)

Sooo, if we take everything together, we now have this code :

Code: Select all

init python:
    setup_textbox = "normal"


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

    window:
        if setup_textbox =="bedroom": #if the variable is "bedroom"
            style "window_bedroom" #then we display the style "window_bedroom". 
            id "window_bedroom"
        elif setup_textbox == "livingroom": #if the variable is "livingroom". 
            style "window_livingroom" #then we display the style "window_livingroom"!
            id "window_livingroom"
        else: #If the variable is neither bedroom, or livingroom, or whatever thing we have set before, then we display the default one. 
            id "window"
            style "window"

        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


## 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 window:
    xalign 0.5
    xfill True
    yalign gui.textbox_yalign
    ysize gui.textbox_height

    background Image("gui/textbox_blue.png", xalign=0.5, yalign=1.0)


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

    background Image("gui/textbox_purple.png", xalign=0.5, yalign=1.0)


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

    background Image("gui/textbox_red.png", xalign=0.5, yalign=1.0)
of course we can add as many style as we want by creating them and adding a elif statement to the window !

Okay! But now, how can we decide when we want to change screen ?

Well, it's simple, we will just have to change the variable in the game, so in the script.rpy file !

For example, we will add

Code: Select all

 setup_textbox = "bedroom"
the line before we enter the bedroom !

if you want to try, here a quick code :

Code: Select all

label start:

    "Normal set up"
    "Now we are going on the living room"
    $setup_textbox = "livingroom"
    "Now we are in the living room"
    "Now we are going in the bedroom"
    $setup_textbox ="bedroom"
    "Now we are in the bedroom"
    "Well, let's go in another place"
    $setup_textbox ="normal" #don't forget to take it back by default when we don't need the special ones anymore !
    "Things get back to normal !"


    return
This will give it back to normal

Code: Select all

    setup_textbox = "normal"
And we are done ! Hope it will be useful to some of you !
Attachments
textbox_red.png
(4.27 KiB) Not downloaded yet
textbox_purple.png
(4.27 KiB) Not downloaded yet
textbox_blue.png
(4.27 KiB) Not downloaded yet

User avatar
Andredron
Veteran
Posts: 340
Joined: Thu Dec 28, 2017 2:37 pm
Location: Russia
Contact:

Re: Change textbox look several time during the game

#2 Post by Andredron » Mon Jun 03, 2019 8:36 pm

Another option from Ruslana Nebykova.

http://renpyfordummies.blogspot.com/201 ... t.html?m=1

Download
Just changing the background of the seibox while playing is not enough. Because the next time you start the game and save the background will be reset to the one that was by default. The easiest way out is a picture that depends on a variable. And variables are saved and loaded along with the rest of the data.

Code: Select all

init:
    # this variable is responsible for the background of the text box (seaybox)
    $ frame = "steam"
    # create two stretching images for seibox backgrounds
    image frmF = Frame ("frame future", 100, 100)
    image frmS = Frame ("frame steam", 160, 160)
    # create a picture that changes if you change variables
    image frm = ConditionSwitch ("frame == 'future'", "frmF", "frame == 'steam'", "frmS")

init -1 python:
    # assigning our changing background to saibox
    style.window.background = "frm"

    OPTIONAL BEAUTY:
    # font sizes
    font_size (36, 48, 48, 64)
    # justified alignment
    style.default.justify = True
    # indents for text
    style.window.xpadding = 120
    style.window.ypadding = 90
    style.window.yminimum = 320
    style.window.xmargin = 140
    # indents for menu buttons
    style.mm_button.xpadding = 72
    style.gm_nav_button.xpadding = 36

label start:
    scene bg jail2
    show sen normal
    "Default design."

    $ frame = "future" # change the sidebox background
    show bg pab2 behind sen
    with dissolve
    "Another design. \ NIf you save, then after loading it, the background of the text box will not be reset to the original one, as it would have happened if you just changed the style of the window with the command {b} {i} style.window.background = 'saybox' { / i} {/ b}. "

    "Cause now the background depends on the frame variable, and it is saved and loaded along with all the other data. And the style.window.background is set at startup."

    $ frame = "steam" # change the seibox background
    show bg jail2 behind sen
    with dissolve
    "Again the default design."
    return

I know, I'm writing terribly in English.

I'm writing a Renpy textbook (in Russian). https://yadi.sk/d/ZX_DonP63USRru Update 22.06.18

Honest Critique

Post Reply

Who is online

Users browsing this forum: Clef