Giving players control of the dialogue box transparency
Dialogue box transparency
In Red Embrace, mobile/Android version, the preference menu is slightly different from the desktop version.
Desktop prefs
Mobile prefs
The mobile version switches out the option for fullscreen/window mode to a textbox opacity slider (bottom left).
Apparently, Ren’Py does not like it if you have a nested window with outer window information after the nested window, so getting the opacity slider to work correctly was rather difficult.
This works and will change the opacity of both the namebox and the textbox.
screen say(who, what):
style_prefix "say"
imagemap:
ground TransitionConditionSwitch(Dissolve(0.2, alpha=True), "greyscale == False", "gui/xbox_idle.png", "True", im.Grayscale("gui/xbox_idle.png"))
idle TransitionConditionSwitch(Dissolve(0.2, alpha=True), "greyscale == False", "gui/xbox_idle.png", "True", im.Grayscale("gui/xbox_idle.png"))
hover TransitionConditionSwitch(Dissolve(0.2, alpha=True), "greyscale == False", "gui/xbox_hover.png", "True", im.Grayscale("gui/xbox_hover.png"))
hotspot (1205,438,54,54) focus_mask True action HideInterface()
window:
id "window"
if renpy.mobile:
text what id "what" color "#fff" outlines [ (absolute(1), "#000", absolute(1), absolute(0)) ]
background Transform(ConditionSwitch("greyscale == False", Transform("mobile_textbox", xalign=0.5, yalign=1.0, alpha=persistent.say_window_alpha), "True", Transform(Image(im.Grayscale("gui/mobile_textbox.png",), xalign =0.5,yalign=1.0))),alpha=persistent.say_window_alpha)
else:
text what id "what"
background ConditionSwitch(
"greyscale == False", Transform("gui/textbox.png", xalign=0.5, yalign=1.0),
"True", Transform(Image(im.Grayscale("gui/textbox.png"), xalign =0.5,yalign=1.0)))
if who is not None:
if _preferences.language == 'russian':
$ w = who.encode('utf-8')
else:
$ w = who
window:
style "namebox"
if renpy.mobile:
text w id "who" color "#fff" outlines [ (absolute(1), "#000", absolute(1), absolute(0)) ]
background Transform(ConditionSwitch("greyscale == False", Frame("gui/namebox.png", gui.namebox_borders, tile=gui.namebox_tile, xalign=gui.name_xalign,alpha=persistent.say_window_alpha), "True", Frame(im.Grayscale("gui/namebox.png"), gui.namebox_borders, tile=gui.namebox_tile, xalign=gui.name_xalign)), alpha=persistent.say_window_alpha)
else:
text w id "who"
background ConditionSwitch("greyscale == False", Frame("gui/namebox.png", gui.namebox_borders, tile=gui.namebox_tile, xalign=gui.name_xalign), "True", Frame(im.Grayscale("gui/namebox.png"), gui.namebox_borders, tile=gui.namebox_tile, xalign=gui.name_xalign))
This does not work and will change only the opacity of the namebox, not the dialogue box.
screen say(who, what):
style_prefix "say"
imagemap:
ground TransitionConditionSwitch(Dissolve(0.2, alpha=True), "greyscale == False", "gui/xbox_idle.png", "True", im.Grayscale("gui/xbox_idle.png"))
idle TransitionConditionSwitch(Dissolve(0.2, alpha=True), "greyscale == False", "gui/xbox_idle.png", "True", im.Grayscale("gui/xbox_idle.png"))
hover TransitionConditionSwitch(Dissolve(0.2, alpha=True), "greyscale == False", "gui/xbox_hover.png", "True", im.Grayscale("gui/xbox_hover.png"))
hotspot (1205,438,54,54) focus_mask True action HideInterface()
window:
if who is not None:
if _preferences.language == 'russian':
$ w = who.encode('utf-8')
else:
$ w = who
window:
style "namebox"
if renpy.mobile:
text w id "who" color "#fff" outlines [ (absolute(1), "#000", absolute(1), absolute(0)) ]
background Transform(ConditionSwitch("greyscale == False", Frame("gui/namebox.png", gui.namebox_borders, tile=gui.namebox_tile, xalign=gui.name_xalign,alpha=persistent.say_window_alpha), "True", Frame(im.Grayscale("gui/namebox.png"), gui.namebox_borders, tile=gui.namebox_tile, xalign=gui.name_xalign)), alpha=persistent.say_window_alpha)
else:
text w id "who"
background ConditionSwitch("greyscale == False", Frame("gui/namebox.png", gui.namebox_borders, tile=gui.namebox_tile, xalign=gui.name_xalign), "True", Frame(im.Grayscale("gui/namebox.png"), gui.namebox_borders,
tile=gui.namebox_tile, xalign=gui.name_xalign))
id "window"
if renpy.mobile:
text what id "what" color "#fff" outlines [ (absolute(1), "#000", absolute(1), absolute(0)) ]
background Transform(ConditionSwitch("greyscale == False", Transform("mobile_textbox", xalign=0.5, yalign=1.0, alpha=persistent.say_window_alpha), "True", Transform(Image(im.Grayscale("gui/mobile_textbox.png",), xalign =0.5,yalign=1.0))),alpha=persistent.say_window_alpha)
else:
text what id "what"
background ConditionSwitch(
"greyscale == False", Transform("gui/textbox.png", xalign=0.5, yalign=1.0),
"True", Transform(Image(im.Grayscale("gui/textbox.png"), xalign =0.5,yalign=1.0)))
The reason for the code being structured with the split in it originally is because graphically, the say screen contains a single window (the dialogue box), and we add a namebox window on top, so reading top to bottom, the namebox comes first, and then info for the dialogue box comes second.
Hooking up the opacity slider to the window transparency is straightforward otherwise.
Add this to your preference screen:
bar value FieldValue(persistent, 'say_window_alpha', 1.0, max_is_zero=False, offset=0, step=1):persistent.say_window_alpha.
Questions or Comments?
Feel free to send in any AG-related questions! Our Ask Box is always open.
Thanks so much for all of your amazing support, and stay safe out there!