Change textbox look several time during the game

[Ayael]

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 !

[Andredron]

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

[James_Bytes]

While this code works great for this case, changing the look of a textbox, I found that styles were not the most efficient way to change settings on the fly in the case of changing the theme of a game.

In the case of changing the theme of a game, I have found it easier to run an if statement wherever I am.

This is an example, when I shortly later wanted to change menu frame:

Code: Select all

(code placed in script: $hacker_theme="hacker") 

(code in screens.rpy:)
init python: 
    hacker_theme = "normal" 
if hacker_theme =="hacker":
    style main_menu_frame:
        xsize 280
        yfill True

        background "gui/overlay/new_menu.png"
else:
    style main_menu_frame:
        xsize 280
        yfill True

        background "gui/overlay/main_menu.png"

Rather than attempt to use the style system, more universal to just change whatever code you want with an if statement on the fly. Note that if it's all for the same theme, you don't have to make new variables all the time when you make changes. You can just call the same universal variable again and again. You could use
if hacker_theme =="hacker":
in ten more places.

An extra example of this changing gui.rpy:
This would be considered bad code, but here I didn't even bother with an else statement to change the colors all at once:
(note that in this case
init python:
hacker_theme = "normal"
and
$hacker_theme="hacker"
are already set elsewhere)

Code: Select all

define gui.accent_color = u'#a28351'
define gui.idle_color = u'#888888'
define gui.idle_small_color = u'#aaaaaa'
define gui.hover_color = u'#a28351'
define gui.selected_color = u'#ffffff'
define gui.insensitive_color = u'#8888887f'
define gui.muted_color = u'#3d5166'
define gui.hover_muted_color = u'#5b7a99'
define gui.text_color = u'#ffffff'
define gui.interface_text_color = u'#ffffff'
if hacker_theme =="hacker":
    define gui.accent_color = u'#89de00'
    define gui.idle_color = u'#89de00'
    define gui.idle_small_color = u'#00cf00'
    define gui.hover_color = u'#FF0000'
    define gui.selected_color = u'#FF0000'
    define gui.insensitive_color = u'#FF0000'
    define gui.muted_color = u'#3d5166' 
    define gui.hover_muted_color = u'#5b7a99' 
    define gui.text_color = u'#FF0000'
    define gui.interface_text_color = u'#FF0000'

Hope this helps someone out there.

-JB
Building The Life Game at https://thelifega.me, an android and ios app focused on helping the user make life decisions.