Imagebutton Animation or Transition

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
red-NINE
Newbie
Posts: 13
Joined: Thu Jun 24, 2021 12:54 am
Contact:

Imagebutton Animation or Transition

#1 Post 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
Image

What I want it to look like
Image

jeffster
Veteran
Posts: 361
Joined: Wed Feb 03, 2021 9:55 pm
Contact:

Re: Imagebutton Animation or Transition

#2 Post 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)

jeffster
Veteran
Posts: 361
Joined: Wed Feb 03, 2021 9:55 pm
Contact:

Re: Imagebutton Animation or Transition

#3 Post 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

jeffster
Veteran
Posts: 361
Joined: Wed Feb 03, 2021 9:55 pm
Contact:

Re: Imagebutton Animation or Transition

#4 Post by jeffster »

PPS. Also BGQueue can be used:

https://patreon.renpy.org/python-tricks-2.html

red-NINE
Newbie
Posts: 13
Joined: Thu Jun 24, 2021 12:54 am
Contact:

Re: Imagebutton Animation or Transition

#5 Post 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.

jeffster
Veteran
Posts: 361
Joined: Wed Feb 03, 2021 9:55 pm
Contact:

Re: Imagebutton Animation or Transition

#6 Post 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.

Post Reply

Who is online

Users browsing this forum: Semrush [Bot]