Outlines for imagebuttons, with code

[Chiligoat]

Hallo everyone!
I've been making double versions of images for on-hovers with a border, to show that they're special in some way. While that works just fine - especially for permanent things like an inventory button - in the long run it's going to make for quite a lot of extra size when the project is bundled. Would it be possible to create a style for these special kind of image buttons the way that one can for text, and create an outline around it similar to a focus mask, only visible?

I've not had to work with style properties much other than basic size and placement on a case by case basis, so I wouldn't know how to stick that in nor where that kind of code would go (GUI? Script? Screens?) My buttons exist on a modal screen, so the most basic version looks like this:

Code: Select all

    imagebutton: #laptop
        idle "images/obj_laptop.png" xpos 900 ypos 180 focus_mask True
        action [Hide("loc_cmid"),Jump("desc_laptop")]

[ISAWHIM]

I do not know of any "code" which can be easily used in RenPy, to do what you want. The normal way would be to use styles to alter the appearance of the button. (Either directly by altering attributes of the style, or by swapping styles.)

However, you can style a generic "basebutton", which you can then have unique variations of.

The style you want will include the code for the outline-image, which can be a simple 9x9 solid color image. Using the top/bottom/left/right to create the outline border. It would auto-expand, or it can be a fixed size, depending on the contents within it. For the various borders, you simply load the appropriate image which the border uses. (A full transparent PNG as the default "unbordered" image.)

You just have to define it with a style, like you see in the "screens.rpy" file. Where it shows code that uses the text... "style basebutton:" Essentially it is like copy-paste for an object, except that you can obviously change the attributes of that individual object, without altering any other button object.

EG... (Not actual code, entirely)
https://www.renpy.org/doc/html/style.html
https://www.renpy.org/doc/html/displayables.html#Frame
https://www.renpy.org/doc/html/displaya ... ml#Borders

===========

style basebutton:
--- attributes of your generic button
--- Frame(... ... ...)
--- Borders(... ... ...)

style MySpecificButton is basebutton
style MyOtherButton is basebutton

style MyOtherButton:
--- New attributes for "Other button"

===========

Now, with that specific format, you can alter whatever attributes you want, or just leave them default, for display.