[SOLVED] Coloring buttons in styles

[goldo]

Hi all,

So I'm used to the "old way" of coloring a black button to something else, it used to look something like this:

Code: Select all

style my_button:
    idle_background Frame(im.MatrixColor("gui/button/button.webp", im.matrix.colorize(c_lightorange, c_white)), tile=False)
    hover_background Frame(im.MatrixColor("gui/button/button.webp", im.matrix.colorize(c_orange, c_white)), tile=False)
    selected_background Frame(im.MatrixColor("gui/button/button.webp", im.matrix.colorize(c_darkorange, c_white)), tile=False)

Bear with me a moment and consider that button.webp is a black picture of a button, while c_orange, c_lightorange and c_darkorange are color strings.

However, the current documentation says that using image manipulators should be abandoned:

Warning

The use of image manipulators is historic. A number of image manipulators that had been documented in the past should no longer be used, as they suffer from inherent problems, and in general (except for im.Data()), the Transform() displayable provides similar functionality while fixing the problems.

However, I am not aware of a way to use a transform and a style together. How can I then change the code above to match the new pattern?

Thank you!

(Before you ask, yes, I have many colored buttons in game, and no I don't want to have dozens of duplicate images in the GUI folder with different hues. )

[m_from_space]

However, I am not aware of a way to use a transform and a style together. How can I then change the code above to match the new pattern?

The way to go is using the matrixcolor style property of an image object: https://www.renpy.org/doc/html/matrixcolor.html

In your specific case you would use the ColorizeMatrix(black, white) class.

Code: Select all

image my_button_idle:
    "gui/button/button.webp"
    matrixcolor ColorizeMatrix(c_lightorange, c_white)
    
image my_button_hover:
    "gui/button/button.webp"
    matrixcolor ColorizeMatrix(c_orange, c_white)
    
image my_button_selected:
    "gui/button/button.webp"
    matrixcolor ColorizeMatrix(c_darkorange, c_white)
    
screen myscreen():
    imagebutton auto "my_button_%s":
        action NullAction()

[goldo]

It works perfectly! Brilliant, thank you!

Edit - Quick recipe to quickly color multiple UI elements easily for anyone interested:

1) Get black pictures of the buttons, bars etc. that you wish to recolor as templates

2) Set up a function like this:

Code: Select all

def colorize_images(root_name, img_path, color_list): # color_list is a list of tuples (suffix, color code)
	for _prefix, _color in color_list:
                renpy.image(_prefix + root_name, Transform(img_path, matrixcolor=ColorizeMatrix(_color, "#FFFFFF")))

3) Then declare images using statements like these:

Code: Select all

init python:
    colorize_images("_button", "gui/button/button.webp", color_list = [("lightorange", "#FFCC66"), ("orange", "#FF9900"), ("darkorange", "#D67229")])
    colorize_images("_bar_left", "gui/bar/left.webp", color_list = [("lightorange", "#FFCC66"), ("orange", "#FF9900"), ("darkorange", "#D67229")])

You can then use these images in styles and screens: "lightorange_button", "orange_bar_left", etc.