Ren'Py Dialogue box opacity slider.

MissFortune

I Was Once, Possibly, Maybe, Perhaps… A Harem King
Respected User
Game Developer
Aug 17, 2019
5,379
8,646
Maybe I'm stupid and am missing something, but I can't seem to figure out how to get the dialogue box completely transparent using a slider. I've looked around at a few different options both on the renpy forums and . The latter of which worked.

Well, for the most part. The slider shows up and the opacity of the textbox does go down some, but I'm looking for sort of a darkest/opaque to lightest/transparent. Of which, I can't seem to get the transparency. Tried everything as well. Feels like something's sorta going over my head. Thanks.
 
  • Like
Reactions: UncleNanard

LightmanP

Well-Known Member
Modder
Game Developer
Oct 5, 2020
1,750
16,549
Maybe I'm stupid and am missing something, but I can't seem to figure out how to get the dialogue box completely transparent using a slider. I've looked around at a few different options both on the renpy forums and . The latter of which worked.

Well, for the most part. The slider shows up and the opacity of the textbox does go down some, but I'm looking for sort of a darkest/opaque to lightest/transparent. Of which, I can't seem to get the transparency. Tried everything as well. Feels like something's sorta going over my head. Thanks.
Here you go, the last part goes into your preferences screen.

Python:
default persistent.textbox_transparency = 0.0

screen say(who, what):
    style_prefix "say"
    ###Textbox transparency
    $ l_alpha = 1 - persistent.textbox_transparency
    ###

    window:
        id "window"
        #######Textbox transparency
        background Image(im.Alpha("gui/textbox.png", l_alpha), xalign=0.5, yalign=1.0)
        ######

        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

### Textbox transparency
label _("Textbox Transparency")

bar value FieldValue(persistent, "textbox_transparency", range=1.0, style="slider")
##########
 

MissFortune

I Was Once, Possibly, Maybe, Perhaps… A Harem King
Respected User
Game Developer
Aug 17, 2019
5,379
8,646
Here you go, the last part goes into your preferences screen.

Python:
default persistent.textbox_transparency = 0.0

screen say(who, what):
    style_prefix "say"
    ###Textbox transparency
    $ l_alpha = 1 - persistent.textbox_transparency
    ###

    window:
        id "window"
        #######Textbox transparency
        background Image(im.Alpha("gui/textbox.png", l_alpha), xalign=0.5, yalign=1.0)
        ######

        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

### Textbox transparency
label _("Textbox Transparency")

bar value FieldValue(persistent, "textbox_transparency", range=1.0, style="slider")
##########
Perfect, got it working. Thanks!
 

moose_puck

Active Member
Sep 6, 2021
740
1,677
Here you go, the last part goes into your preferences screen.

Python:
default persistent.textbox_transparency = 0.0

screen say(who, what):
    style_prefix "say"
    ###Textbox transparency
    $ l_alpha = 1 - persistent.textbox_transparency
    ###

    window:
        id "window"
        #######Textbox transparency
        background Image(im.Alpha("gui/textbox.png", l_alpha), xalign=0.5, yalign=1.0)
        ######

        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

### Textbox transparency
label _("Textbox Transparency")

bar value FieldValue(persistent, "textbox_transparency", range=1.0, style="slider")
##########

Thanks for this code. It works great!

I wanted to ask though, is there a way to reverse the value of the bar? Right now, it's 100% opacity on the left and 0 on the right. I wanted to reverse that so it's 0 on the left and as you slide the bar right it gets darker? I tried the bar_invert command but I can't seem to get the syntax correct or I am not using it right.
 

LightmanP

Well-Known Member
Modder
Game Developer
Oct 5, 2020
1,750
16,549
Thanks for this code. It works great!

I wanted to ask though, is there a way to reverse the value of the bar? Right now, it's 100% opacity on the left and 0 on the right. I wanted to reverse that so it's 0 on the left and as you slide the bar right it gets darker? I tried the bar_invert command but I can't seem to get the syntax correct or I am not using it right.
No problem. That code is not ideal, though, it works fine with textboxes that take up the whole width of the screen, but not with partial ones. Use the following instead:

Python:
default persistent.textbox_transparency = 1.0 # Whatever you want the default to be.

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

    window:
        id "window"
        background Transform(style.window.background, alpha = 1 - persistent.textbox_transparency, xalign=0.5)
        if who is not None:

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

        text what id "what" size persistent.pref_text_size


    ## 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

        
# For preferences screen
label _("Textbox Transparency")

bar value FieldValue(persistent, "textbox_transparency", range=1.0, style="slider")
And sure, you can just remove '1 -' in alpha above to reverse the bar.
 

moose_puck

Active Member
Sep 6, 2021
740
1,677
No problem. That code is not ideal, though, it works fine with textboxes that take up the whole width of the screen, but not with partial ones. Use the following instead:

Python:
default persistent.textbox_transparency = 1.0 # Whatever you want the default to be.

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

    window:
        id "window"
        background Transform(style.window.background, alpha = 1 - persistent.textbox_transparency, xalign=0.5)
        if who is not None:

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

        text what id "what" size persistent.pref_text_size


    ## 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

       
# For preferences screen
label _("Textbox Transparency")

bar value FieldValue(persistent, "textbox_transparency", range=1.0, style="slider")
And sure, you can just remove '1 -' in alpha above to reverse the bar.
That worked perfect! TYVM (y)
 
  • Like
Reactions: LightmanP
May 21, 2022
218
558
Here you go, the last part goes into your preferences screen.

Python:
default persistent.textbox_transparency = 0.0

screen say(who, what):
    style_prefix "say"
    ###Textbox transparency
    $ l_alpha = 1 - persistent.textbox_transparency
    ###

    window:
        id "window"
        #######Textbox transparency
        background Image(im.Alpha("gui/textbox.png", l_alpha), xalign=0.5, yalign=1.0)
        ######

        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

### Textbox transparency
label _("Textbox Transparency")

bar value FieldValue(persistent, "textbox_transparency", range=1.0, style="slider")
##########
which file is this added to?
 

osanaiko

Engaged Member
Modder
Jul 4, 2017
2,548
4,631
which file is this added to?
Both of the parts which must be edited are in the screens.rpy file

The first part is an edit of the "say" screen. This is the code that powers the dialogue box. You should compare it and edit so that it includes the relevant changes

The second part (after "# For preferences screen") is added to the "preferences" screen definition in the same file. You can add the snippet where you like in the screen.

If you don't know what "screen" means in renpy context, I suggest you research a bit more and/or come back and ask more questions.
 
May 21, 2022
218
558
Both of the parts which must be edited are in the screens.rpy file

The first part is an edit of the "say" screen. This is the code that powers the dialogue box. You should compare it and edit so that it includes the relevant changes

The second part (after "# For preferences screen") is added to the "preferences" screen definition in the same file. You can add the snippet where you like in the screen.

If you don't know what "screen" means in renpy context, I suggest you research a bit more and/or come back and ask more questions.
wait where's the first part?
 

osanaiko

Engaged Member
Modder
Jul 4, 2017
2,548
4,631
Please post a code snippet of the section you edited, it's hard to diagnose by magic vision :ROFLMAO:.

By "snippet" I mean the whole "say" screen definition, everything from the start screen say(who, what): to the end of the indentation block.
For example. in the screens.rpy file that comes with a game generate using Renpy8.0.3, it's lines 98 to 116
 
May 21, 2022
218
558
Please post a code snippet of the section you edited, it's hard to diagnose by magic vision :ROFLMAO:.

By "snippet" I mean the whole "say" screen definition, everything from the start screen say(who, what): to the end of the indentation block.
For example. in the screens.rpy file that comes with a game generate using Renpy8.0.3, it's lines 98 to 116
did you check it?
 

osanaiko

Engaged Member
Modder
Jul 4, 2017
2,548
4,631
bruhh0_0

You didn't need to send me the whole file! :ROFLMAO:

Also, what on earth are you making with 6000 lines of screen code? there's hundreds of screens defined in there!! Or are you trying to edit someone else's game?

The relevant part of the code is lines 2132 - 2174
Code:
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

default persistent.textbox_transparency = 1.0 # Whatever you want the default to be.

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

    window:
        id "window"
        background Transform(style.window.background, alpha = 1 - persistent.textbox_transparency, xalign=0.5)
        if who is not None:

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

        text what id "what" size persistent.pref_text_size


    ## 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
You've copied the entire new code snippet in to the file without looking for the original "screen say" defintion that needed editing. Now there are two duplicate screens defined, and of course renpy will not work.

If you remove the first "screen say" definition then it should work:

Code:
default persistent.textbox_transparency = 1.0 # Whatever you want the default to be.

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

    window:
        id "window"
        background Transform(style.window.background, alpha = 1 - persistent.textbox_transparency, xalign=0.5)
        if who is not None:

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

        text what id "what" size persistent.pref_text_size


    ## 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
 
May 21, 2022
218
558
bruhh0_0

You didn't need to send me the whole file! :ROFLMAO:

Also, what on earth are you making with 6000 lines of screen code? there's hundreds of screens defined in there!! Or are you trying to edit someone else's game?

The relevant part of the code is lines 2132 - 2174
Code:
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

default persistent.textbox_transparency = 1.0 # Whatever you want the default to be.

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

    window:
        id "window"
        background Transform(style.window.background, alpha = 1 - persistent.textbox_transparency, xalign=0.5)
        if who is not None:

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

        text what id "what" size persistent.pref_text_size


    ## 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
You've copied the entire new code snippet in to the file without looking for the original "screen say" defintion that needed editing. Now there are two duplicate screens defined, and of course renpy will not work.

If you remove the first "screen say" definition then it should work:

Code:
default persistent.textbox_transparency = 1.0 # Whatever you want the default to be.

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

    window:
        id "window"
        background Transform(style.window.background, alpha = 1 - persistent.textbox_transparency, xalign=0.5)
        if who is not None:

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

        text what id "what" size persistent.pref_text_size


    ## 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
well I just wanted to make sure everything was good xD
 
May 21, 2022
218
558
well I just wanted to make sure everything was good xD
The error still occurs.

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


File "game/screens.rpy", line 2897: expected 'name' not found.
label _("Textbox Transparency")
^

File "game/screens.rpy", line 2899: expected statement.
bar value FieldValue(persistent, "textbox_transparency", range=1.0, style="slider")
^

Ren'Py Version: Ren'Py 8.0.3.22090809
Tue Apr 25 07:25:47 2023
```
 

osanaiko

Engaged Member
Modder
Jul 4, 2017
2,548
4,631
Renpy is a python derived DSL (Domain Specific Language).

It follows the same syntax rules as python, including the way that line indentation level defines blocks.

When you pasted the two lines into the "screen Preferences" section, the indentation level is wrong (no indentation) so the Renpy interpreter assumed the two lines were not part of the screen, and that is a syntax error. Try indenting them so they align with the "if" statements in the "vbox:" block in the "screen Preferences" .

lines 2882-2919
Code:
                vbox:

                    if config.has_music:
                        label _("Music Volume")

                        hbox:
                            bar value Preference("music volume")

                    if config.has_sound:

                        label _("Sound Volume")

                        hbox:
                            bar value Preference("sound volume")

                            if config.sample_sound:
                                textbutton _("Test") action Play("sound", config.sample_sound)

                    if config.has_voice:
                        label _("Voice Volume")

                        hbox:
                            bar value Preference("voice volume")

                            if config.sample_voice:
                                textbutton _("Test") action Play("voice", config.sample_voice)

                    if config.has_music or config.has_sound or config.has_voice:
                        null height gui.pref_spacing

                        textbutton _("Mute All"):
                            action Preference("all mute", "toggle")
                            style "mute_all_button"

                    label _("Textbox Transparency")
                    bar value FieldValue(persistent, "textbox_transparency", range=1.0, style="slider")
Also, please remember i can't actually test these fixes to your code because i only have the one file sent, so I'm doing this by reading and guessing only. hopefully this fixes your issue.
 
May 21, 2022
218
558
Renpy is a python derived DSL (Domain Specific Language).

It follows the same syntax rules as python, including the way that line indentation level defines blocks.

When you pasted the two lines into the "screen Preferences" section, the indentation level is wrong (no indentation) so the Renpy interpreter assumed the two lines were not part of the screen, and that is a syntax error. Try indenting them so they align with the "if" statements in the "vbox:" block in the "screen Preferences" .

lines 2882-2919
Code:
                vbox:

                    if config.has_music:
                        label _("Music Volume")

                        hbox:
                            bar value Preference("music volume")

                    if config.has_sound:

                        label _("Sound Volume")

                        hbox:
                            bar value Preference("sound volume")

                            if config.sample_sound:
                                textbutton _("Test") action Play("sound", config.sample_sound)

                    if config.has_voice:
                        label _("Voice Volume")

                        hbox:
                            bar value Preference("voice volume")

                            if config.sample_voice:
                                textbutton _("Test") action Play("voice", config.sample_voice)

                    if config.has_music or config.has_sound or config.has_voice:
                        null height gui.pref_spacing

                        textbutton _("Mute All"):
                            action Preference("all mute", "toggle")
                            style "mute_all_button"

                    label _("Textbox Transparency")
                    bar value FieldValue(persistent, "textbox_transparency", range=1.0, style="slider")
Also, please remember i can't actually test these fixes to your code because i only have the one file sent, so I'm doing this by reading and guessing only. hopefully this fixes your issue.
yeahh true.Thanks for the help!
 

anne O'nymous

I'm not grumpy, I'm just coded that way.
Modder
Donor
Respected User
Jun 10, 2017
10,964
16,210
Now there are two duplicate screens defined, and of course renpy will not work.
This shouln't be an issue for Ren'Py. For screens it will just overwrite the existent one and replace it by the last that have been defined at this name.
This said, I haven't tried this when both screens are in the same file.