[SOLVED!] With Renpy theme, any way to change/use multiple colors for Button using tags?

OhWee

Forum Fanatic
Modder
Game Developer
Jun 17, 2017
5,661
28,500
OK, so long story.

I'm currently working on a minor interface mod for a game. And I've hit a snag.

So, here's the image that the Renpy theme uses. I'm guessing it might be doing an alpha mask, or maybe it's changing the black to some other color through a transform somehow...

cry_box.png

Essentially it's a box.png with irregular edges, that gets stretched all sorts of ways to make buttons. It's from the 'crayon' theme that ships with Renpy. So yeah, this .png has irregular transparent edges.

So Renpy currently has this set (via gui.rpy etc.) to be a darker orange, and highlight to a lighter orange. But I want to have different colors for different buttons, as in this case button is essentially a clickable background with some stuff overlayed (text, images, etc.). Kinda like a save slot, but more like an inventory that I want color coded 'background buttons' for rather than just the orange ones.

This inventory has a 'sort' function, btw (type, level, etc.), but that's not really relevant, other than to note that you may end up with a multicolored jumble depending on the sort option.

I've tried applying color tags to the button, Renpy hates that (error). I can assign a background color, but then the entire frame/box that contains the button is colored, and I lose the ragged edges/it becomes perfectly square.

I've checked the folders, and there aren't any 'orange' buttons that use this shape. Just this black one, and a gray version.

I tried setting up a style tag to assign the colors during init, but Renpy just ignored my style tag/turned the buttons/button slot backgrounds white with no color change during hover.

I can't find a good example of the Alpha mask tag, and I think you need a baseline image for that anyays (i.e. an imagebutton), but obviously Renpy has a way to change the color of this black box that I'm not seeing, as people can change the baseline interface colors via gui.rpy.

There's the IM Matrix thing, but that looks overly complicated for a simple RGB color shift. And I'm not understanding how the matrix is coded in the first place...

In short, Google has failed me, the Lemmasoft forums haven't been very helpful so far...

I COULD create a bunch of 'background' imagebuttons of different colors, but this seems unnecessary if Renpy has found an easier way to assign baseline colors already via themes and gui.rpy. My plan would be to assign various colors during init to a few variables, then call them via a variable string comparison as needed on the inventory screen (I think I have this part figured out).

I could create a bunch of 1 pixel images of various colors, then apply the mask to them, but at that point I might as well just make imagebuttons (masking an image adds to CPU/GPU overhead)...
:rolleyes:

BTW, here's some relevant 'baseline' code for my button. Note that I've commented out the highlighted background tag for now, in order to allow the 'default' button configuration to work as intended.
Code:
for item in itemlist:
                    button:
                        xsize 185
                        ysize 113
                        xfill False
                        xalign 0.0
                        #selected_background c_neongreen

                        action (SetVariable("selected_item", item),

                                  (snip, another screen is called by the action,
                                      various text descriptions and pics are added
                                      at this point, similar to a load/save slot,
                                      no issues here, stuffed being positioned
                                      via xy/hbox/vbox.  The fact there's both images
                                      and text, and since the item image changes based
                                      on the item in the slot, well that's why a basic
                                      'button' is currently being used here instead of
                                       textbutton or imagebutton.)
So, does anyone know an easy way to change that irregular black box purple, light purple, green, light green, pink, light pink, etc. etc. on the fly inside of Renpy to different colors as needed, that doesn't involve Photoshop?

Either via some 'hue' thing (preferable), or maybe via an 'alphamask' on a colored background frame?

I suck at understanding how to implement stuff from Renpy documentation/dictionary, so I need specific coding examples showing the variables as they are being used in the code, not as just some nebulous tag from a dictionary.
 

Palanto

Active Member
Game Developer
Oct 4, 2017
964
1,835
background_color "#hexcode" ?

Or to be more precise:
Code:
style button:
   background "#006"
   insensitive_background "#444"
   hover_background "#00a"
that's one of the standart settings as seen in the renpy documentation

you "could" go with different styles for the different buttons or change the colors of the background states for each button on it's own, overwriting the one in the styles.

i.e.
Code:
style purple_button:
   background "#800080"
   insensitive_background "#D3D3D3"
   hover_background "#9400D3"
now inside the "purple button" you just write:
style_prefix "purple_button"

tada it takes this style instead of the standart one ;)
 
  • Like
Reactions: OhWee

OhWee

Forum Fanatic
Modder
Game Developer
Jun 17, 2017
5,661
28,500
background_color "#hexcode" ?
As I mentioned, background color changes the color of the entire cell/background, and the irregular shape of the button disappears/it becomes square. I can do that if nothing else works (I'd probably go the imagebutton route instead that point and make a bunch of buttons), but there's GOTTA be a way to change the color of the 'crayon' button.png, after all Renpy is already doing this via gui.rpy. The 'crayon' png button is black in the theme folder, and changing the 'base' UI colors changes the color of said button from black to whatever the default UI colors are.
 

Palanto

Active Member
Game Developer
Oct 4, 2017
964
1,835
As I mentioned, background color changes the color of the entire cell/background, and the irregular shape of the button disappears/it becomes square. I can do that if nothing else works (I'd probably go the imagebutton route instead that point and make a bunch of buttons), but there's GOTTA be a way to change the color of the 'crayon' button shape, after all Renpy is already doing this via gui.rpy. The 'crayon' png button is black in the theme folder, and changing the 'base' UI colors changes the color of said button from black to whatever the default UI colors are.
Oh sorry X_x didn't read the first post to the end... should do that next time... really sorry give me a minute to read it completely :D
 
  • Like
Reactions: OhWee

OhWee

Forum Fanatic
Modder
Game Developer
Jun 17, 2017
5,661
28,500
Oh sorry X_x didn't read the first post to the end... should do that next time... really sorry give me a minute to read it completely :D
No need to apologize! Sometimes I get a bit wordy in my posts, and my clarification seems to be more succinct anyways.
 

Palanto

Active Member
Game Developer
Oct 4, 2017
964
1,835
I can't even find the box.png I know I did something like this once... but I can't find how I did it anymore X_x

try:
Code:
image purple_box = im.MatrixColor(box.png, (128, 0, 128, 1.0))
Or maybe show me the original code in the gui.rpy because I can't find a box.png or any entry like that in the gui.rpy X_x


g2g to work, brb in about 40 minutes then I'll try to figure out how to do that :D There has to be a way ;)
 
  • Like
Reactions: OhWee

OhWee

Forum Fanatic
Modder
Game Developer
Jun 17, 2017
5,661
28,500
I can't even find the box.png I know I did something like this once... but I can't find how I did it anymore X_x

try:
Code:
image purple_box = im.MatrixColor(box.png, (128, 0, 128, 1.0))
Or maybe show me the original code in the gui.rpy because I can't find a box.png or any entry like that in the gui.rpy X_x


g2g to work, brb in about 40 minutes then I'll try to figure out how to do that :D There has to be a way ;)
The 'theme' pics are buried in the /renpy folder (not the /game folder), under common somewhere.

No hurry, I'm trying the style tag again in the meantime. When you return, as for this newer suggestion, I'm guessing that the (128, 0, 128, 1.0) is RGB plus opacity?

Edit: well the updated style tag is working, but it's still on the entire background and not just on the button.png as I mentioned before. Thanks for sharing that code at least, I have it for posterity now...

So, assuming I can get im.matrix to work, how do I specify idle, hover, and selected to have different colors?
 

OhWee

Forum Fanatic
Modder
Game Developer
Jun 17, 2017
5,661
28,500
@Palanto

OK, so I finally found the color values that the code for the game I'm messing with (Brothel King) is using. They are in the options.rpy file (/game), under the theme.crayon section.

Using an online RGB picker, yeah those are DEFINITELY the colors that the 'default' UI is using.

It's assigning colors to widget states.
Code:
    theme.crayon(
        ## Theme: Crayon
        ## Color scheme: Creamsicle

     
## The color of an idle widget face.
        widget = "#D96B00",

        ## The color of a focused widget face.
        widget_hover = "#FD9B1C",

        ## The color of the text in a widget.
        widget_text = "#FCE6B1",

        ## The color of the text in a selected widget. (For
        ## example, the current value of a preference.)
        widget_selected = "#ffffff",
OK, so try to try something stupid... nope! Tried using 'widget' to assign the color, but Renpy didn't like that (error: widget is not a style property).

But, maybe if I can see where widget is deffined in the 00files (renpy/common)...

Anyways, my previous question still stands, i.e. your tuple (pretty sure it's 0-255 RGBAlpha), and how to assign multiple states.
 
  • Like
Reactions: Palanto

Palanto

Active Member
Game Developer
Oct 4, 2017
964
1,835
@Palanto

OK, so I finally found the color values that the code for the game I'm messing with (Brothel King) is using. They are in the options.rpy file (/game), under the theme.crayon section.

Using an online RGB picker, yeah those are DEFINITELY the colors that the 'default' UI is using.

It's assigning colors to widget states.
Code:
    theme.crayon(
        ## Theme: Crayon
        ## Color scheme: Creamsicle

    
## The color of an idle widget face.
        widget = "#D96B00",

        ## The color of a focused widget face.
        widget_hover = "#FD9B1C",

        ## The color of the text in a widget.
        widget_text = "#FCE6B1",

        ## The color of the text in a selected widget. (For
        ## example, the current value of a preference.)
        widget_selected = "#ffffff",
OK, so try to try something stupid... nope! Tried using 'widget' to assign the color, but Renpy didn't like that (error: widget is not a style property).

But, maybe if I can see where widget is deffined in the 00files (renpy/common)...

Anyways, my previous question still stands, i.e. your tuple (pretty sure it's 0-255 RGBAlpha), and how to assign multiple states.
hmmm correct it was r, g, b, opacity and the different states would be changed like I wrote somewhere above:
Code:
style purple_button:
   background purple_box
   insensitive_background purple_insensitive_box
   hover_background purple_hover_box
the names are just crappy examples, you can call them however you want if you defined them previously, or you use them without an image definition like this:
Code:
style purple_button:
   background im.MatrixColor(box.png, (128, 0, 128, 1.0))
should work as well, but what's happening if you do it like this? Does the box get straight edges if you do it like this?
Else you could try changing the theme a little... actually never worked with a theme in renpy before but I suppose will just take style like arguments (going to read up on it a bit, give me some minutes ;) )
 
  • Like
Reactions: OhWee

Palanto

Active Member
Game Developer
Oct 4, 2017
964
1,835
Well at least now I know why I never worked with themes before X_x they are old and outdated :D
I'll look into it a little more, maybe I can find something that helps you get it to work as you want it ;)
 
  • Like
Reactions: OhWee

OhWee

Forum Fanatic
Modder
Game Developer
Jun 17, 2017
5,661
28,500
hmmm correct it was r, g, b, opacity and the different states would be changed like I wrote somewhere above:
Code:
style purple_button:
   background purple_box
   insensitive_background purple_insensitive_box
   hover_background purple_hover_box
the names are just crappy examples, you can call them however you want if you defined them previously, or you use them without an image definition like this:
Code:
style purple_button:
   background im.MatrixColor(box.png, (128, 0, 128, 1.0))
should work as well, but what's happening if you do it like this? Does the box get straight edges if you do it like this?
Else you could try changing the theme a little... actually never worked with a theme in renpy before but I suppose will just take style like arguments (going to read up on it a bit, give me some minutes ;) )
So, yeah it just color fills the background cell, which is square.

I FINALLY figured out how to get the image box into the style tag and have it show up as the button (struggling with assigning dimensions to it at the moment, this is what happens when you only mess with Renpy occasionally, you forget things).
Style tag looks like this:
Code:
init:
    style whorebutton:
        idle_background Frame ("UI/cry_box.png", 185, 113)
Which of course gives me a black background (which is an improvement actually) Now to figure out how to apply the im.matrix thing. Still not sure how the Alphamask thing works on a background frame, that could work too maybe but I've never messed with those.
 

Palanto

Active Member
Game Developer
Oct 4, 2017
964
1,835
damn, I can't find anything on themes anymore X_x That's crazy.... maybe @anne O'nymous has some experience with themes or can help you in another way :)
 

OhWee

Forum Fanatic
Modder
Game Developer
Jun 17, 2017
5,661
28,500
@Palanto

OK, first off...

THANK YOU THANK YOU THANK YOU!!!

You helped me head down the right path, and I have something that works now...

Here's my current style tag:

Code:
init:
    style whorebutton:
        idle_background Frame (
            im.MatrixColor(
                "UI/cry_box.png",
                im.matrix.colorize("#f00", "#00F")))
Obviously, I need to add the other states (easy to do) but this works! Box is showing up as red. The second part of the colorize tuple specifies the 'white' color, so I suppose if I wanted to add a border to the black .png using white or some shade of grey, I'd get a different color for the border, but I have the irregularly shaped red buttons in the background now!

Yay team!
snoopy.gif

This might be the 'harder' way to do this, but at least now I can change the 'background' button colors on the fly!!!
 
  • Like
Reactions: Palanto

Palanto

Active Member
Game Developer
Oct 4, 2017
964
1,835
Thank god and here I was still searching for how to edit themes or specific things in a theme :D
 
  • Like
Reactions: OhWee

OhWee

Forum Fanatic
Modder
Game Developer
Jun 17, 2017
5,661
28,500
Thank god and here I was still searching for how to edit themes or specific things in a theme :D
Probably a good thing I posted up the thank you then. No sense having you search all day only to find out that we already figured it out together...

Hopefully this may be useful to you (and others) as well in the future!
 
  • Like
Reactions: Palanto

Palanto

Active Member
Game Developer
Oct 4, 2017
964
1,835
Maybe somebody else, not me though :D I started with ren'py when there was the new gui system already :D So I wouldn't use themes since I wouldn't know how to :D
I'd just go with the new stuff and leave the old stuff far away from my code :D
 

OhWee

Forum Fanatic
Modder
Game Developer
Jun 17, 2017
5,661
28,500
Maybe somebody else, not me though :D I started with ren'py when there was the new gui system already :D So I wouldn't use themes since I wouldn't know how to :D
I'd just go with the new stuff and leave the old stuff far away from my code :D
Yeah, but this solution isn't really 'theme' based anymore. This allows someone to use a single black & white .png for their menu buttons, etc. and change the color on the fly! This way they don't have to make a bunch of different colored .pngs just for a generic button with an unusual shape.
 
  • Like
Reactions: Palanto

Palanto

Active Member
Game Developer
Oct 4, 2017
964
1,835
Yeah, but this solution isn't really 'theme' based anymore. This allows someone to use a single black & white .png for their menu buttons, etc. and change the color on the fly! This way they don't have to make a bunch of different colored .pngs just for a generic button with an unusual shape.
Ah of course X_x yes you did it as a style now sorry totally confused atm working on too many different things at the same time :D Yes that would really be helpful, I actually do have an idea where I could use that in the near future :D
 
  • Like
Reactions: OhWee

anne O'nymous

I'm not grumpy, I'm just coded that way.
Modder
Respected User
Donor
Jun 10, 2017
10,131
14,812
damn, I can't find anything on themes anymore X_x That's crazy.... maybe @anne O'nymous has some experience with themes or can help you in another way :)
The answer is . Something like :
Code:
screen myScreen:

            for item in itemlist:
                   button:
                       xsize 185
                       ysize 113
                       xfill False
                       xalign 0.0
                       selected_background AlphaMask( Solid( "#F0F", "gui/cry_box.png" )
                       action (SetVariable("selected_item", item),
It will apply the color (first parameter) to the mask (second parameter) taking in count the alpha channel of the said mask. It let you have all the fantasy you want, from simply giving the shape of the button (0 and 255 for the alpha channel), to a shape with some king of anti-aliasing (0 to 255 for the alpha channel).
 
  • Like
Reactions: OhWee and Palanto

Palanto

Active Member
Game Developer
Oct 4, 2017
964
1,835
The answer is . Something like :
Code:
screen myScreen:

            for item in itemlist:
                   button:
                       xsize 185
                       ysize 113
                       xfill False
                       xalign 0.0
                       selected_background AlphaMask( Solid( "#F0F", "gui/cry_box.png" )
                       action (SetVariable("selected_item", item),
It will apply the color (first parameter) to the mask (second parameter) taking in count the alpha channel of the said mask. It let you have all the fantasy you want, from simply giving the shape of the button (0 and 255 for the alpha channel), to a shape with some king of anti-aliasing (0 to 255 for the alpha channel).
sooooo all the im.MatrixColor stuff could be avoided by just using an AlphaMask X_x and it looks so simple... hmmmmm
 
  • Like
Reactions: anne O'nymous