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.
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.
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.
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.