Page 1 of 1
Imagebutton Animation or Transition
Posted: Sun Sep 26, 2021 8:06 pm
by red-NINE
Hi
I created an image button in the middle of the main menu screen. I have the idle image and the hover image and they work as expected. What I want to do is when I hover over the the button the hovered image should appear with a dissolve (or any other) transition and when I unhover the button the idle image should appear with same transition. See attached gifs
This is my code (Its in the screens.rpy file). It runs fine without any errors or exceptions.
Code: Select all
screen main_menu():
tag menu
add gui.main_menu_background
use navigation
imagebutton:
idle ("gui/discord_idle.png")
hover ("gui/discord_hover.png")
xpos 960 ypos 540 xanchor 0.5 yanchor 0.5
hovered [Play("sound" , "gui/sound-hover.wav")]
action [OpenURL("https://discord.gg/"), Play("sound" , "gui/sound-select.wav")]
What It currently looks like
What I want it to look like
Re: Imagebutton Animation or Transition
Posted: Sun Sep 26, 2021 9:19 pm
by jeffster
I think you can define an image with transition, like
Code: Select all
image disc_idle:
"gui/discord_idle.png" with Dissolve(1.0)
image disc_hover:
"gui/discord_hover.png" with Dissolve(1.0)
or something like that. See
https://www.renpy.org/doc/html/atl.html
PS. Perhaps something along the lines:
Code: Select all
image disc_idle:
"gui/discord_idle.png"
image disc_hover:
"gui/discord_idle.png"
"gui/discord_hover.png" with Dissolve(1.0)
Re: Imagebutton Animation or Transition
Posted: Sun Sep 26, 2021 11:25 pm
by jeffster
If ATL wouldn't give the desired effect, then it's possible to do with Creator-Defined Displayables:
https://www.renpy.org/doc/html/cdd.html
But I'm not sure that it's an easy way. It would be something like:
Code: Select all
init python:
class SmoothHover(renpy.Displayable):
""" Gives animated hovering / unhovering.
Usage: add SmoothHover(idle_image, hover_image)
"""
def __init__(self, i_idle, i_hover, **kwargs):
super(SmoothHover, self).__init__(**kwargs)
self.i_idle = renpy.displayable(i_idle)
self.i_hover = renpy.displayable(i_hover)
self.width = 0
self.height = 0
self.hover = False
#self.time = 0.0 - can be used to customize alpha changing function
self.alpha = 0.0
def render(self, width, height, st, at):
# Create idle picture and store its size:
idle_render = renpy.render(self.i_idle, width, height, st, at)
self.width, self.height = idle_render.get_size()
# Put that picture into RenPy canvas:
render = renpy.Render(self.width, self.height)
render.blit(idle_render, (0, 0))
# Check if hover overlay is necessary:
if self.hover:
# Make a (less & less transparent) hover overlay:
self.alpha += 0.1
if self.alpha > 1.0:
self.alpha = 1.0
t = Transform(child=self.i_hover, alpha=self.alpha)
# Put it into RenPy canvas too:
hover_render = renpy.render(t, width, height, st, at)
render.blit(hover_render, (0, 0))
else:
# If not hovered (maybe not quite transparent hover overlay yet?)
if self.alpha > 0:
t = Transform(child=self.i_hover, alpha=self.alpha)
hover_render = renpy.render(t, width, height, st, at)
render.blit(hover_render, (0, 0))
self.alpha -= 0.1
if self.alpha < 0.0:
self.alpha = 0.0
return render
def event(self, ev, x, y, st):
# Detect mouse hovering and request redraws:
if 0 <= x <= self.width and 0 <= y <= self.height:
self.hover = True
if self.alpha < 1.0:
renpy.timeout(0.05)
renpy.redraw(self, 0.05)
else:
self.hover = False
if self.alpha > 0.0:
renpy.timeout(0.05)
renpy.redraw(self, 0.05)
screen main_menu():
tag menu
add gui.main_menu_background
use navigation
button:
add SmoothHover("gui/discord_idle.png", "gui/discord_hover.png")
xpos 960 ypos 540 xanchor 0.5 yanchor 0.5
Re: Imagebutton Animation or Transition
Posted: Sun Sep 26, 2021 11:37 pm
by jeffster
Re: Imagebutton Animation or Transition
Posted: Mon Sep 27, 2021 6:06 am
by red-NINE
jeffster wrote: ↑Sun Sep 26, 2021 11:25 pm
If ATL wouldn't give the desired effect, then it's possible to do with Creator-Defined Displayables:
https://www.renpy.org/doc/html/cdd.html
But I'm not sure that it's an easy way. It would be something like:
Code: Select all
init python:
class SmoothHover(renpy.Displayable):
""" Gives animated hovering / unhovering.
Usage: add SmoothHover(idle_image, hover_image)
"""
def __init__(self, i_idle, i_hover, **kwargs):
super(SmoothHover, self).__init__(**kwargs)
self.i_idle = renpy.displayable(i_idle)
self.i_hover = renpy.displayable(i_hover)
self.width = 0
self.height = 0
self.hover = False
#self.time = 0.0 - can be used to customize alpha changing function
self.alpha = 0.0
def render(self, width, height, st, at):
# Create idle picture and store its size:
idle_render = renpy.render(self.i_idle, width, height, st, at)
self.width, self.height = idle_render.get_size()
# Put that picture into RenPy canvas:
render = renpy.Render(self.width, self.height)
render.blit(idle_render, (0, 0))
# Check if hover overlay is necessary:
if self.hover:
# Make a (less & less transparent) hover overlay:
self.alpha += 0.1
if self.alpha > 1.0:
self.alpha = 1.0
t = Transform(child=self.i_hover, alpha=self.alpha)
# Put it into RenPy canvas too:
hover_render = renpy.render(t, width, height, st, at)
render.blit(hover_render, (0, 0))
else:
# If not hovered (maybe not quite transparent hover overlay yet?)
if self.alpha > 0:
t = Transform(child=self.i_hover, alpha=self.alpha)
hover_render = renpy.render(t, width, height, st, at)
render.blit(hover_render, (0, 0))
self.alpha -= 0.1
if self.alpha < 0.0:
self.alpha = 0.0
return render
def event(self, ev, x, y, st):
# Detect mouse hovering and request redraws:
if 0 <= x <= self.width and 0 <= y <= self.height:
self.hover = True
if self.alpha < 1.0:
renpy.timeout(0.05)
renpy.redraw(self, 0.05)
else:
self.hover = False
if self.alpha > 0.0:
renpy.timeout(0.05)
renpy.redraw(self, 0.05)
screen main_menu():
tag menu
add gui.main_menu_background
use navigation
button:
add SmoothHover("gui/discord_idle.png", "gui/discord_hover.png")
xpos 960 ypos 540 xanchor 0.5 yanchor 0.5
This somewhat works but there is one problem in this. Normally when i hover over the button the hover image is shown and the idle image is hidden. But by using this code when i hover over the button the hover image shows on top of idle image with dissolve transition but idle image is not hidden when i hover over the button, its displayed under the hover image. I can tell this because the images i am using for the imagebutton are transparent.
Re: Imagebutton Animation or Transition
Posted: Mon Sep 27, 2021 8:30 am
by jeffster
Yes, that's how this example works. I assume we can adjust images to look well with that transformation, or we could apply the same alpha-transformation to the idle image, only reversed. Its alpha would be (1 - self.alpha), and the idle image would go through its own Transform before "blit". If you understand the code you could modify it accordingly.