Pip-Boy style GUI customization

Discuss how to use the Ren'Py engine to create visual novels and story-based games. New releases are announced in this section.
Forum rules
This is the right place for Ren'Py help. Please ask one question per thread, use a descriptive subject like 'NotFound error in option.rpy' , and include all the relevant information - especially any relevant code and traceback messages. Use the code tag to format scripts.
Post Reply
Message
Author
User avatar
SinSisters
Regular
Posts: 97
Joined: Sat Sep 20, 2014 11:07 am
Completed: The Spanish Privateer
Projects: The Spanish Privateer
Tumblr: sinsisters
itch: sinsisters
Location: Canada
Contact:

Pip-Boy style GUI customization

#1 Post by SinSisters »

My goal is to have various screen elements changeable based on RGB sliders (the same way F4 has HUD and Pip-Boy RGB sliders).
This requires:
  • Persistent variables/objects of some kind
  • Bar value that changes said persistent variables
In the past I've used register_style_preference to switch between three different styles, but this won't work for something requiring dynamic variables (I think). I can't figure out if there's some kind of preference variable that can be registered and also changed by a bar the same way CPS or voice volume might (and if there is, hopefully in a way that doesn't require going into the preferences.py).

I haven't seen any threads that might fall into this, but perhaps someone has an idea of the best way to tackle this.

EDIT:
I've create a system that works, but it does require restarting the application (renpy.restart_interaction/renpy.style.rebuild/screen refreshes don't have an impact), allowing Ren'Py to use the new values of the persistent data. I can't think of another refresh function that might work, so for now I'll rely on a confirm screen and renpy.quit(relaunch=True,save=True) for the current option.
Image

Code: Select all

init offset = -2
#Default Dark Mode
default persistent.rgb = [255,255,255] #Highlight Colour (radio, checks, bars, etc.)
default persistent.rgbbg = [0,0,0] #BG Colour
default persistent.rgbt = [255,255,255] #Text Colour

Code: Select all

init python:
    def render_image(img,rgb): #Screen elements are all black. Grey elements are left alone as they work with most colour schemes
        return(im.MatrixColor(img,im.matrix.colorize((rgb),(rgb)))) #Recolours black and white pixels to the passed tuple
#These are all temp values
    r_val = 0
    g_val = 0
    b_val = 0
    r_valbg = 0
    g_valbg = 0
    b_valbg = 0
    r_valt = 0
    g_valt = 0
    b_valt = 0

Code: Select all

#Relevant Text Colours
define gui.text_color = tuple(persistent.rgbt)
define gui.name_text_color = tuple(persistent.rgbt)
define gui.choice_button_text_hover_color = tuple(persistent.rgbt)

Code: Select all

#On Pref Screen
textbutton "Dark mode" action [SetVariable("persistent.rgb",[255,255,255]),SetVariable("persistent.rgbbg",[0,0,0]),SetVariable("persistent.rgbt",[255,255,255])]
textbutton "Light mode" action [SetVariable("persistent.rgb",[0,0,0]),SetVariable("persistent.rgbbg",[255,255,255]),SetVariable("persistent.rgbt",[0,0,0])]
textbutton "Custom" action [ShowMenu('customgui')]


#Custom GUI
            hbox:
                label _("Highlights")
                add Solid((r_val,g_val,b_val),xsize=240, ysize=30) xpos 30 #A little rectangle so the user can more easily see the new colour
            vbox:
                xpos 60
                hbox:
                    bar value FieldValue(store,"r_val",255,step=1) #Temporary stored values for r g b values
                    textbutton "[r_val]"
                hbox:
                    bar value FieldValue(store,"g_val",255,step=1)
                    textbutton "[g_val]"
                hbox:
                    bar value FieldValue(store,"b_val",255,step=1)
                    textbutton "[b_val]"
                    
#Above is repeated for the BG and T values as well.
#Below is a sample for the user to see how their colour combinations work with a background, bar using the highlight colour, and text are next to each other
        hbox: 
            add Solid((r_valbg,g_valbg,b_valbg),xsize=600, ysize=90)
            textbutton "Test text" xpos -580 ypos 20 text_color (r_valt,g_valt,b_valt)
            bar value 50 range 150 xpos -570 ypos 25 left_bar Frame(Solid((r_val,g_val,b_val)),gui.bar_borders,tile=gui.bar_tile)

#Textbutton: Changes persistent RGB, RGBBG, and RGBT to values user has selected on this screen
#It also gives a warning for user to save and accept prompt, or click no and restart on their own
        textbutton "Save changes and restart" ypos -120 action [SetVariable("persistent.rgb",[r_val,g_val,b_val]),SetVariable("persistent.rgbbg",[r_valbg,g_valbg,b_valbg]),Confirm("Warning: You will lose any unsaved data. GUI changes will not be properly implemented until game is restarted.",save_restart)]

#renpy.quit was being called as soon as the screen showed, so a separate definition was created to prevent this. Not sure why this was happening
init python:
    def save_restart():
        renpy.quit(relaunch=True) #Not implementing save=True in this case since players can adjust from main menu

Code: Select all

#Example of how the different styles were modified
style slider:
    ysize gui.slider_size
    base_bar Frame("gui/slider/horizontal_[prefix_]bar.png", gui.slider_borders, tile=gui.slider_tile) #Unchanged
    thumb "horizontal_[prefix_]thumb" #New image

#Examples, uses render_image to recolour the original image with appropriate RGB values.     
image horizontal_hover_thumb = render_image("/gui/slider/horizontal_hover_thumb.png",tuple(persistent.rgb))
image horizontal_idle_thumb = render_image("/gui/slider/horizontal_idle_thumb.png",tuple(persistent.rgb))

Post Reply

Who is online

Users browsing this forum: Bing [Bot]