how to make a button hover transition? [Solved!]

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
beastcarving
Regular
Posts: 63
Joined: Mon May 13, 2019 5:03 pm
Completed: Pulse Cage https://beastcarving.itch.io/pulse-cage-the-full-series
Projects: Your Brother's Religion
Organization: BeastCarving Studio
IRC Nick: BeastCarving
Tumblr: beastcarving
Deviantart: beastcarving
Github: beastcarving
itch: beastcarving
Contact:

how to make a button hover transition? [Solved!]

#1 Post by beastcarving » Sun Sep 01, 2019 6:10 pm

When I hover over a button I want it to dissolve in or fade in when I hover over it.
Image
Last edited by beastcarving on Tue Sep 03, 2019 5:32 am, edited 1 time in total.
Image Pulse Cage (full game)Image Your Brother's Religion (Demo)
PLAY HERE: https://beastcarving.itch.io/
Love my work: https://www.patreon.com/beastcarving

User avatar
isobellesophia
Miko-Class Veteran
Posts: 658
Joined: Mon Jan 07, 2019 2:55 am
Projects: Maddox's Everyday Talk! (13+ Unreal version), Maddox Everyday Talk! (3+ Real-Friendly version)(Upcoming 2020)
Organization: Friendly Teachers series
itch: .......
Location: Philippines, Mindanao
Contact:

Re: how to make a button hover transition? [Help!]

#2 Post by isobellesophia » Sun Sep 01, 2019 11:36 pm

beastcarving wrote:
Sun Sep 01, 2019 6:10 pm
When I hover over a button I want it to dissolve in or fade in when I hover over it.
Image
Try this

viewtopic.php?t=45332#p462828
viewtopic.php?t=45332#p462828
I am a friendly user, please respect and have a good day..


Working on a talking simulation game for everyone, except children.

Maddox Everyday Talk!
Is my very very main project, not contain 13 below.

Main project here viewtopic.php?f=43&t=56564
Image

User avatar
hell_oh_world
Regular
Posts: 175
Joined: Fri Jul 12, 2019 5:21 am
Projects: Pathfinding
Organization: NILA
Contact:

Re: how to make a button hover transition? [Help!]

#3 Post by hell_oh_world » Mon Sep 02, 2019 7:40 am

beastcarving wrote:
Sun Sep 01, 2019 6:10 pm
When I hover over a button I want it to dissolve in or fade in when I hover over it.
Image
You mean you want the image that appears when hovering near the play button to dissolve?
if the image appearing when hovering the button is shown using showif, you can use atl...

Code: Select all

transform img_dissolve:
	on show:
		alpha 0.0
		easein 1.0 alpha 1.0
	on hide:
		easeout 1.0 alpha 0.0

screen main_menu:
	....
	default isShowable = False
	
	showif isShowable:
		add img_name at img_dissolve
	
	textbutton _("Play") hovered ToggleScreenVariable("isShowable")

Your problem is quite vague, you should elaborate it more and show the codes in your main menu screen. I've just assumed this code honestly.

User avatar
beastcarving
Regular
Posts: 63
Joined: Mon May 13, 2019 5:03 pm
Completed: Pulse Cage https://beastcarving.itch.io/pulse-cage-the-full-series
Projects: Your Brother's Religion
Organization: BeastCarving Studio
IRC Nick: BeastCarving
Tumblr: beastcarving
Deviantart: beastcarving
Github: beastcarving
itch: beastcarving
Contact:

Re: how to make a button hover transition? [Help!]

#4 Post by beastcarving » Mon Sep 02, 2019 6:15 pm

Code: Select all


transform img_dissolve:
    on show:
        alpha 0.0
        easein 1.0 alpha 1.0
    on hide:
        easeout 1.0 alpha 0.0



screen main_menu:

    default isShowable = False

    showif isShowable:
        add "idle_ybr.png" at img_dissolve

    imagemap:
        ground "ybrmenu.png"
        idle "1ybrmb.png"

        hotspot (0, 1, 521, 799) action ShowMenu ("avatar") hovered ToggleScreenVariable("isShowable")
        hotspot (513, 626, 196, 78) action ShowMenu("loading")
        hotspot (715, 595, 163, 160) action ShowMenu("options")
        hotspot (1093, 613, 76, 71) action Quit(confirm=True)

init -2:


    style mm_button:
        size_group "mm"
Sorry. This is the code I'm using. The image is dissolving now, but it's now hidden behind the other images in the background. How do I move it to the front?
Image
Image Pulse Cage (full game)Image Your Brother's Religion (Demo)
PLAY HERE: https://beastcarving.itch.io/
Love my work: https://www.patreon.com/beastcarving

User avatar
Kia
Miko-Class Veteran
Posts: 872
Joined: Fri Aug 01, 2014 7:49 am
Deviantart: KiaAzad
Skype: KiaAzad
Contact:

Re: how to make a button hover transition? [Help!]

#5 Post by Kia » Tue Sep 03, 2019 1:12 am

you need to move the lines:

Code: Select all

    showif isShowable:
        add "idle_ybr.png" at img_dissolve
down under the imagemap.
the screens are rendered top to bottom and anything on top will appear behind the next lines

User avatar
beastcarving
Regular
Posts: 63
Joined: Mon May 13, 2019 5:03 pm
Completed: Pulse Cage https://beastcarving.itch.io/pulse-cage-the-full-series
Projects: Your Brother's Religion
Organization: BeastCarving Studio
IRC Nick: BeastCarving
Tumblr: beastcarving
Deviantart: beastcarving
Github: beastcarving
itch: beastcarving
Contact:

Re: how to make a button hover transition? [Help!]

#6 Post by beastcarving » Tue Sep 03, 2019 5:31 am

Thanks it's perfect
Image Pulse Cage (full game)Image Your Brother's Religion (Demo)
PLAY HERE: https://beastcarving.itch.io/
Love my work: https://www.patreon.com/beastcarving

Post Reply

Who is online

Users browsing this forum: Google [Bot]