Outlines for imagebuttons, with code

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
Chiligoat
Regular
Posts: 25
Joined: Thu Mar 21, 2019 7:42 pm
Projects: Witches 4 Hire
Location: Sweden
Contact:

Outlines for imagebuttons, with code

#1 Post by Chiligoat » Thu May 16, 2019 1:31 pm

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")]

User avatar
ISAWHIM
Veteran
Posts: 284
Joined: Sun Nov 06, 2016 5:34 pm
Contact:

Re: Outlines for imagebuttons, with code

#2 Post by ISAWHIM » Sun May 19, 2019 9:57 pm

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.

Post Reply

Who is online

Users browsing this forum: Google [Bot]