[SOLVED] Hover animation with imagebutton?

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.
Message
Author
User avatar
Black Cat 2412
Regular
Posts: 74
Joined: Wed Aug 16, 2017 10:10 am
Projects: Rapunzel: A classic retold
Deviantart: BlackCat2412
Location: Vietnam
Contact:

[SOLVED] Hover animation with imagebutton?

#1 Post by Black Cat 2412 » Thu Aug 24, 2017 2:10 pm

Good day ladies and gentlemen!
I have this button and I want it to animate when hovered. So far I have managed this:

Code: Select all

image start_hover:
      "start h1"
      pause 0.3
      "start h2"
      pause 0.3 
      "start h3"
      pause 0.3
      "start h4"
      pause 0.3
      repeat
     
imagebutton:
   idle "start_idle" hover "start_hover"
   xpos 0 ypos 0 focus_mask None
   action Start()
      
I want to tell renpy: " If this button is hovered, then play the animation "start_hover" once, then stop at the last image. When the button is unhovered, return to use the "start_idle" image for it. But if the button is hovered again, then repeat the process above- meaning playing the animation again from the beginning -"start h1" and stop at the last image".

How can I do that? Right now with the code above the animation will loop indefinitely and the animation does not restart when I move the mouse away from the button: when I hover over it again, the animation will just play from where it left off.

Please please help me, thank you very much.
Last edited by Black Cat 2412 on Fri Sep 01, 2017 1:23 pm, edited 1 time in total.

User avatar
Imperf3kt
Lemma-Class Veteran
Posts: 3000
Joined: Mon Dec 14, 2015 5:05 am
Location: Your monitor
Contact:

Re: Hover animation with imagebutton?

#2 Post by Imperf3kt » Thu Aug 24, 2017 4:57 pm

Take "repeat" out of your ATL to stop it playing indefinitely.
I'm not sure about the other bit.
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

Twitter
Imperf3kt Blackjack - a WIP blackjack game for Android made using Ren'Py
Free Android GUI - Updated occasionally

User avatar
TellerFarsight
Veteran
Posts: 230
Joined: Sun Jun 04, 2017 8:09 pm
Projects: Vora, Secrets Untold
Location: Toronto, ON
Contact:

Re: Hover animation with imagebutton?

#3 Post by TellerFarsight » Thu Aug 24, 2017 5:49 pm

You can use "hovered" and "unhovered" as action calls instead of "hover." It's described here and I think that'll help you.
Current Project: Vora
Also Check Out: Devil Survivor [Reverse-Engineered]

User avatar
Black Cat 2412
Regular
Posts: 74
Joined: Wed Aug 16, 2017 10:10 am
Projects: Rapunzel: A classic retold
Deviantart: BlackCat2412
Location: Vietnam
Contact:

Re: Hover animation with imagebutton?

#4 Post by Black Cat 2412 » Fri Aug 25, 2017 5:01 am

How do I use hovered and unhovered in code? I have also thought about this but I have no idea how to actually code them.
Imperf3kt wrote:
Thu Aug 24, 2017 4:57 pm
Take "repeat" out of your ATL to stop it playing indefinitely.
I'm not sure about the other bit.
I tried that, the result is the animation did not even play, instead stuck at "start h4"

User avatar
TellerFarsight
Veteran
Posts: 230
Joined: Sun Jun 04, 2017 8:09 pm
Projects: Vora, Secrets Untold
Location: Toronto, ON
Contact:

Re: Hover animation with imagebutton?

#5 Post by TellerFarsight » Fri Aug 25, 2017 8:34 pm

It should be the same as using hover:

Code: Select all

image start_hover:
      "start h1"
      pause 0.3
      "start h2"
      pause 0.3 
      "start h3"
      pause 0.3
      "start h4"
     
imagebutton:
   idle "start_idle"
   hovered "start_hover"
   unhovered "start h4"
   xpos 0 ypos 0 focus_mask None
   action Start()
Give it a try and see what happens. And I don't know about the loop not working.
Current Project: Vora
Also Check Out: Devil Survivor [Reverse-Engineered]

User avatar
Black Cat 2412
Regular
Posts: 74
Joined: Wed Aug 16, 2017 10:10 am
Projects: Rapunzel: A classic retold
Deviantart: BlackCat2412
Location: Vietnam
Contact:

Re: Hover animation with imagebutton?

#6 Post by Black Cat 2412 » Sat Aug 26, 2017 12:44 pm

It crashed and gave me an error message : (

Code: Select all

I'm sorry, but an uncaught exception occurred.

While running game code:
TypeError: 'unicode' object is not callable

-- Full Traceback ------------------------------------------------------------

Full traceback:
  File "renpy/common/_layout/screen_main_menu.rpym", line 28, in script
    python hide:
  File "D:\CHI\CHI_STUFF\renpy-6.99.12.4-sdk\renpy\ast.py", line 814, in execute
    renpy.python.py_exec_bytecode(self.code.bytecode, self.hide, store=self.store)
  File "D:\CHI\CHI_STUFF\renpy-6.99.12.4-sdk\renpy\python.py", line 1719, in py_exec_bytecode
    exec bytecode in globals, locals
  File "renpy/common/_layout/screen_main_menu.rpym", line 30, in <module>
    ui.interact()
  File "D:\CHI\CHI_STUFF\renpy-6.99.12.4-sdk\renpy\ui.py", line 285, in interact
    rv = renpy.game.interface.interact(roll_forward=roll_forward, **kwargs)
  File "D:\CHI\CHI_STUFF\renpy-6.99.12.4-sdk\renpy\display\core.py", line 2526, in interact
    repeat, rv = self.interact_core(preloads=preloads, trans_pause=trans_pause, **kwargs)
  File "D:\CHI\CHI_STUFF\renpy-6.99.12.4-sdk\renpy\display\core.py", line 3201, in interact_core
    rv = renpy.display.focus.mouse_handler(ev, x, y)
  File "D:\CHI\CHI_STUFF\renpy-6.99.12.4-sdk\renpy\display\focus.py", line 343, in mouse_handler
    return change_focus(new_focus, default=default)
  File "D:\CHI\CHI_STUFF\renpy-6.99.12.4-sdk\renpy\display\focus.py", line 305, in change_focus
    rv = widget.focus(default=default)
  File "D:\CHI\CHI_STUFF\renpy-6.99.12.4-sdk\renpy\display\behavior.py", line 752, in focus
    rv = run(self.hovered)
  File "D:\CHI\CHI_STUFF\renpy-6.99.12.4-sdk\renpy\display\behavior.py", line 306, in run
    return action(*args, **kwargs)
TypeError: 'unicode' object is not callable

Windows-7-6.1.7601-SP1
Ren'Py 6.99.12.4.2187
Prototype 1.0
Since I don't known about coding I have no idea why, what and how to fix this. By this point, I think I should mention that I'm using the new GUI interface, and that this button is in the navigation screen, so it looks something like this:

Code: Select all

screen navigation():

    vbox:
        style_prefix "navigation"

        xpos gui.navigation_xpos
        yalign 0.5

        spacing gui.navigation_spacing

        if main_menu:

            #textbutton _("Start") action Start()
            imagebutton:
               idle "start_idle" 
               hovered "start_hover"
               unhovered "start h4"
               xpos 0 ypos 0 focus_mask None
               action Start()

        else:
The part from "else:" downward is left exactly the same, so I don't think it cause any problem.

User avatar
Black Cat 2412
Regular
Posts: 74
Joined: Wed Aug 16, 2017 10:10 am
Projects: Rapunzel: A classic retold
Deviantart: BlackCat2412
Location: Vietnam
Contact:

Re: Hover animation with imagebutton?

#7 Post by Black Cat 2412 » Mon Aug 28, 2017 10:40 am

Okay, quick update: I tried to use ATL with the button, the code look like this:

Code: Select all

image start_hover1:
      "start h1"
      0.3
      "start h2"
      0.3 
      "start h3"
      0.3
      "start_h4"
      0.3
      repeat 1
imagebutton:
       idle "start_idle"  
       xpos 0 ypos 0 focus_mask None action Start() at button_eff
init -2:
    transform button_eff:
        on hover:
            "start_hover1"
        on selected_idle:
            "start_idle"
        on selected_hover:
            "start_idle"
The result? This time the animation did play only one, but:
1. The whole button is deactivated! Clicking on it do nothing
2. Hover away from the button does not make it revert back to the "star_idle"
3. After the animation played once the button is stuck at "start_h4" image and will stay like that all the time
I feel like I can make this happen with ATL, I just don't know how!

User avatar
Divona
Miko-Class Veteran
Posts: 678
Joined: Sun Jun 05, 2016 8:29 pm
Completed: The Falconers: Moonlight
Organization: Bionic Penguin
itch: bionicpenguin
Contact:

Re: Hover animation with imagebutton?

#8 Post by Divona » Mon Aug 28, 2017 11:55 am

Use button instead of imagebutton for this case.

Code: Select all

image start_hover:
    "start h1"
    pause 0.3
    "start h2"
    pause 0.3
    "start h3"
    pause 0.3
    "start_h4"

image start_button:
    "start idle"
    on idle:
        "start idle"
    on hover:
        "start hover"
    on selected_idle:
        "start hover"
    on selected_hover:
        "start hover"

button:
    xysize (300, 80)     # to do: adjust the size width and height to match the size of the image
    add "start_button"
    action Start()
Completed:
Image

User avatar
Black Cat 2412
Regular
Posts: 74
Joined: Wed Aug 16, 2017 10:10 am
Projects: Rapunzel: A classic retold
Deviantart: BlackCat2412
Location: Vietnam
Contact:

Re: Hover animation with imagebutton?

#9 Post by Black Cat 2412 » Mon Aug 28, 2017 1:06 pm

Wow it worked, it worked like MAGIC. You are a SAVIOR! I can't thank you enough!
One problem remains though (; _ ; ) The first time the button is hovered, nothing happens (the button still keep it "start idle" image even though I can still hear the hover sound coming from it) and the animation only works smoothly from the second time the button is hovered.

User avatar
Divona
Miko-Class Veteran
Posts: 678
Joined: Sun Jun 05, 2016 8:29 pm
Completed: The Falconers: Moonlight
Organization: Bionic Penguin
itch: bionicpenguin
Contact:

Re: Hover animation with imagebutton?

#10 Post by Divona » Mon Aug 28, 2017 2:28 pm

Black Cat 2412 wrote:
Mon Aug 28, 2017 1:06 pm
One problem remains though (; _ ; ) The first time the button is hovered, nothing happens (the button still keep it "start idle" image even though I can still hear the hover sound coming from it) and the animation only works smoothly from the second time the button is hovered.
I haven't run into this problem. From my test, it works right from the start. Perhaps try test it out on a new project and see that nothing else from the old code causing that issue?
Completed:
Image

User avatar
Imperf3kt
Lemma-Class Veteran
Posts: 3000
Joined: Mon Dec 14, 2015 5:05 am
Location: Your monitor
Contact:

Re: Hover animation with imagebutton?

#11 Post by Imperf3kt » Mon Aug 28, 2017 5:29 pm

It may benefit you to place the ATL in a lower init block so it is generated before you hover the button, rather than on the fly as you hover it.

Code: Select all

init -2:
    image start_hover:
        "start h1"
        pause 0.3
        "start h2"
        pause 0.3
        "start h3"
        pause 0.3
        "start_h4"

image start_button:
    "start idle"
    on idle:
        "start idle"
    on hover:
        "start hover"
    on selected_idle:
        "start hover"
    on selected_hover:
        "start hover"

button:
    xysize (300, 80)     # to do: adjust the size width and height to match the size of the image
    add "start_button"
    action Start()
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

Twitter
Imperf3kt Blackjack - a WIP blackjack game for Android made using Ren'Py
Free Android GUI - Updated occasionally

User avatar
Black Cat 2412
Regular
Posts: 74
Joined: Wed Aug 16, 2017 10:10 am
Projects: Rapunzel: A classic retold
Deviantart: BlackCat2412
Location: Vietnam
Contact:

Re: Hover animation with imagebutton?

#12 Post by Black Cat 2412 » Tue Aug 29, 2017 1:12 am

I tested it and the result is so weird. Turn out that your code works properly with other button EXCEPT the "Start" button. I tried using the same code and the same image/animation with other buttons like "preference" and "load" and all of them work perfectly: the animation run smoothly right from the first hover. It is ONLY the "Start" button that has this problem, maybe there is something special about it?

User avatar
Divona
Miko-Class Veteran
Posts: 678
Joined: Sun Jun 05, 2016 8:29 pm
Completed: The Falconers: Moonlight
Organization: Bionic Penguin
itch: bionicpenguin
Contact:

Re: Hover animation with imagebutton?

#13 Post by Divona » Tue Aug 29, 2017 6:14 am

Want to drop the code here, so we can see what went wrong with the start button?
Completed:
Image

User avatar
Black Cat 2412
Regular
Posts: 74
Joined: Wed Aug 16, 2017 10:10 am
Projects: Rapunzel: A classic retold
Deviantart: BlackCat2412
Location: Vietnam
Contact:

Re: Hover animation with imagebutton?

#14 Post by Black Cat 2412 » Tue Aug 29, 2017 11:20 am

I think I have found the line of code that cause the problem and it is the "xysize (300, 80)" code. The problem is rather complicated so please bear with me for a while. Okay, here I go:
First off, I want to mention that I 'm using the new GUI, and the three buttons I'm going to discuss here are "Start", "Load" and "Setting" which all belong to the Navigation screen:
For visualization, here is the image folder where I keep all the button image:Image
Here is the all of the navigation screen code I use: (you can just skip this to see the result below then come back and read it later)

Code: Select all

init -2:
    image start_hover:
      "start_h1", 0.1, "start_h2", 0.025 
      "start_h3", 0.025, "start_h4", 0.05 
    image load_hover:
      "load_h1", 0.1, "load_h2", 0.025 
      "load_h3", 0.025, "load_h4", 0.05
    image setting_hover:
      "setting_h1", 0.1, "setting_h2", 0.025 
      "setting_h3", 0.025, "setting_h4", 0.05
      
image start_button:
    on idle:
        "start_idle"
    on hover:
        "start_hover"
    on selected_idle:
        "start_h4"
    on selected_hover:
        "start_h4"
        
image load_button:
    on idle:
        "load_idle"
    on hover:
        "load_hover"
    on selected_idle:
        "load_si"
    on selected_hover:
        "load_sh"
        
image setting_button:
    on idle:
        "setting_idle"
    on hover:
        "setting_hover"
    on selected_idle:
        "setting_si"
    on selected_hover:
        "setting_sh"
       
screen navigation():
    vbox:
        style_prefix "navigation"
        xpos gui.navigation_xpos
        yalign 0.5
        spacing gui.navigation_spacing

        if main_menu:
            ##START button
            button:
                add "start_button"
                hover_sound "sfx/c5.MP3" activate_sound "sfx/c3 test.MP3"
                xysize (122, 30) 
                action Start() 
          
        else:

            ##HISTORY button
            imagebutton:
               idle "history i" hover "history h"
               xpos 0 ypos 0 focus_mask None
               action ShowMenu("history")
               hover_sound "sfx/c5.MP3"

            ##SAVE button
            imagebutton:
               idle "save i" hover "save h"
               xpos 0 ypos 0 focus_mask None
               action ShowMenu("save")
               hover_sound "sfx/c5.MP3" 

        ##LOAD Button
        button:
            add "load_button"
            hover_sound "sfx/c5.MP3" activate_sound "sfx/c3 test.MP3"
            xysize (122, 30)   # to do: adjust the size width and height to match the size of the image
            action ShowMenu("load") 
        
        #SETTING button
        button:
            add "setting_button"
            hover_sound "sfx/c5.MP3" 
            xysize (122, 30)   # to do: adjust the size width and height to match the size of the image
            action ShowMenu("preferences")
            

        if _in_replay:

            textbutton _("End Replay") action EndReplay(confirm=True)

        elif not main_menu:

            textbutton _("Main Menu") action MainMenu()

        textbutton _("Credit") activate_sound "sfx/g5 w.WAV" hover_sound "sfx/c5 w.WAV" action ShowMenu("about")

        if renpy.variant("pc"):

            ## Help isn't necessary or relevant to mobile devices.
            textbutton _("Help") action ShowMenu("help")

            ## The quit button is banned on iOS and unnecessary on Android.
            textbutton _("Quit") action Quit(confirm=not main_menu)
Experiment 1With the code above:
1.Launching the game will result in: Image
As you can see, the cursor is hovering on the load button but nothing happen.
The animation did not play until the second time the button is hovered:Image
Let's call this problem no 1, and in the experiment it applies to all three buttons.
2.Going to the load menu, everything is as it should be:
Image
But if I go to the Setting menu:Image
What is going on? Suddenly the "Start" and "Load" button spring to life and go into their hovered_idle state!
This is problem no 2

Experiment 2With the code above, but delete the line "xysize (122, 52)" in the Start button
1.This time, problem no 1 only happen with the Start button, the other two button play their animation right from the first hover:
Image
(Notice the uneven spacing between the three buttons-that's because the "xysize (122, 52)" line for the Start button is not there anymore)
2.Going to the Load and Setting menu yields the same result as in Experiment 1

So how can I fix this ???
Sigh, I really want to make the GUI work, but it seems way harder for a non-coder than I thought (╯°□°)╯︵ ┻━┻
Last edited by Black Cat 2412 on Tue Aug 29, 2017 2:26 pm, edited 1 time in total.

User avatar
Divona
Miko-Class Veteran
Posts: 678
Joined: Sun Jun 05, 2016 8:29 pm
Completed: The Falconers: Moonlight
Organization: Bionic Penguin
itch: bionicpenguin
Contact:

Re: Hover animation with imagebutton?

#15 Post by Divona » Tue Aug 29, 2017 12:19 pm

I've managed to replicate the problem from your code. You haven't load/declared the image files properly. You will have to add path and file extension at the end of the file name, so the images are load in cache during initialization. Here's the example:

Code: Select all

###############################
## Animation Buttons
###############################

image start_hover:
    "Button/start_h1.png"
    pause 0.1
    "Button/start_h2.png"
    pause 0.025 
    "Button/start_h3.png"
    pause 0.025
    "Button/start_h4.png"
    pause 0.05
 
image load_hover:
    "Button/load_h1.png"
    pause 0.1
    "Button/load_h2.png"
    pause 0.025 
    "Button/load_h3.png"
    pause 0.025
    "Button/load_h4.png"
    pause 0.05

image setting_hover:
    "Button/setting_h1.png"
    pause 0.1
    "Button/setting_h2.png"
    pause 0.025 
    "Button/setting_h3.png"
    pause 0.025
    "Button/setting_h4.png"
    pause 0.05
 
###############################
## Condition Buttons
###############################

image start_button:
    on idle:
        "Button/start_idle.png"
    on hover:
        "start_hover"
    on selected_idle:
        "Button/start_h4.png"
    on selected_hover:
        "Button/start_h4.png"
        
image load_button:
    on idle:
        "Button/load_idle.png"
    on hover:
        "load_hover"
    on selected_idle:
        "Button/load_si.png"
    on selected_hover:
        "Button/load_sh.png"
        
image setting_button:
    on idle:
        "Button/setting_idle.png"
    on hover:
        "setting_hover"
    on selected_idle:
        "Button/setting_si.png"
    on selected_hover:
        "Button/setting_sh.png"
Completed:
Image

Post Reply

Who is online

Users browsing this forum: Google [Bot]