Imagebutton with foreground text and outlines

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
asta128
Newbie
Posts: 8
Joined: Sun Dec 10, 2017 11:56 am

Imagebutton with foreground text and outlines

#1 Post by asta128 »

deleted
Last edited by asta128 on Thu Nov 01, 2018 5:25 pm, edited 1 time in total.

asta128
Newbie
Posts: 8
Joined: Sun Dec 10, 2017 11:56 am

Re: Imagebutton with foreground text and outlines

#2 Post by asta128 »

deleted
Last edited by asta128 on Thu Nov 01, 2018 5:25 pm, edited 1 time in total.

User avatar
Remix
Eileen-Class Veteran
Posts: 1628
Joined: Tue May 30, 2017 6:10 am
Completed: None... yet (as I'm still looking for an artist)
Projects: An un-named anime based trainer game
Contact:

Re: Imagebutton with foreground text and outlines

#3 Post by Remix »

A few pointers in an alternate direction... (using TextButton)

Code: Select all

style inventory_button is button:
    xpadding 15 # plus other stuff if you want (for more control remove the ' is button' bit)

style inventory_button_text: # optionally ... is button_text:
    text_align 0.0
    color "#DDD"
    hover_color "#FFF"
    outlines [ (2, "#333", 0, 0) ] # <--- oooh
    yfill True

# paddings, margins, anchors, aligns in the above can place the text where you want
# Personally I find it easier to not extend button ( no 'is ....' in the declares)

screen inventory_screen:
    # you could use style_prefix "inventory" here (or just style in each button)

    fixed: # more likely a grid I guess...

        textbutton "[item]":
                # text_slow_cps 16.0 # hehe, don't put this

                style style.inventory_button # <--- also sets button_text

                xsize None
                ysize None # might not need/use
                size_group "inv_buttons" # name not important, just makes all with same name same width

                # focus_mask Frame / Image / whatever - only need/want if clickable
                background Frame( "some_idle_image.png", left=Borders(27, 31, 29, 25),
                        yminimum=57, xminimum=57, yfill=True)

                hover_background Frame( "some_hover_image.png", left=Borders(27, 31, 29, 25),
                        yminimum=57, xminimum=57, yfill=True)
Hope that makes sense as a nudge in a possible route to take.
Frameworks & Scriptlets:

asta128
Newbie
Posts: 8
Joined: Sun Dec 10, 2017 11:56 am

Re: Imagebutton with foreground text and outlines

#4 Post by asta128 »

deleted
Last edited by asta128 on Thu Nov 01, 2018 5:25 pm, edited 1 time in total.

User avatar
Remix
Eileen-Class Veteran
Posts: 1628
Joined: Tue May 30, 2017 6:10 am
Completed: None... yet (as I'm still looking for an artist)
Projects: An un-named anime based trainer game
Contact:

Re: Imagebutton with foreground text and outlines

#5 Post by Remix »

Just for info, a textbutton is simply a wrapper that puts a Text and Button widget together in an easy to use object.

Have you also tried just setting outlines in the Text? foreground Text("[item]", outlines=....) # might be text_outlines=

The main issues you might encounter by using a fixed with an imagebutton and text together is the focus_mask possibly registering an unhover when over the text part (image=active, text=inactive) if you needed a hover or click action to occur. Textbutton doesn't have that problem, so might still be a better solution

Note: Though the name is textbutton, remember that the text and background are separate, so the text can appear small, italic at top-right if wanted, can have outlines (I know I use them in my choice menu buttons), can change colour on hover (button hover, not just text hover) etc...
Frameworks & Scriptlets:

asta128
Newbie
Posts: 8
Joined: Sun Dec 10, 2017 11:56 am

Re: Imagebutton with foreground text and outlines

#6 Post by asta128 »

deleted
Last edited by asta128 on Thu Nov 01, 2018 5:25 pm, edited 1 time in total.

asta128
Newbie
Posts: 8
Joined: Sun Dec 10, 2017 11:56 am

Re: Imagebutton with foreground text and outlines

#7 Post by asta128 »

deleted
Last edited by asta128 on Thu Nov 01, 2018 5:24 pm, edited 1 time in total.

User avatar
xavimat
Eileen-Class Veteran
Posts: 1460
Joined: Sat Feb 25, 2012 8:45 pm
Completed: Yeshua, Jesus Life, Cops&Robbers
Projects: Fear&Love, unknown
Organization: Pilgrim Creations
Github: xavi-mat
itch: pilgrimcreations
Location: Spain
Contact:

Re: Imagebutton with foreground text and outlines

#8 Post by xavimat »

You could use also a "Button" ( https://www.renpy.org/doc/html/screens.html#button ) that accepts "children" and puts them in a "fixed". So, you can put text, images, labels... all of it inside the button (you need to position them).
Comunidad Ren'Py en español: ¡Únete a nuestro Discord!
Rhaier Kingdom A Ren'Py Multiplayer Adventure Visual Novel.
Cops&Robbers A two-player experiment | Fear&Love Why can't we say I love you?
Honest Critique (Avatar made with Chibi Maker by ~gen8)

Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot], Ocelot