[Solved] How to make an image button move on hover?

[Imperf3kt]

I've tried googling and searching the forums, but I cannot see one single example that works.
I've tried a dozen variations of my ATL , but each one gives me an error, or undesired results.

All I want, is an image to slide to the left when hovered, and also stay to the left. The image will be in a menu, and is used to "hide" the buttons until "opened".
The best I came up with worked perfectly, but it wasn't triggered by on hover, instead starting instantly.

I fiddled and tweaked for over an hour, ended up writing this:

Code: Select all

image sl = "scroll_left.png"
image sr = "scroll_right.png"
transform open:
    on hover:
        xalign 0.0 yalign 0.0
        linear 0.3 xalign -0.5
label start:
    scene black
    show sr at right
    show sl at open
    "you fucking suck at this"
    
    return

Unfortunately, this makes absolutely nothing happen, no ATL transform takes place. I yhink it is because there's no origination point set before the ATL takes place. Maybe, I don't know. I'm very confused but copying the tutorial included with ren'py just gives me 'new line expected' between defining my imagebutton and the xpos.

I'm currently using Renpy 6.99.7.858

[philat]

Well, images don't have hover states, so... Use a screen.

Code: Select all

screen blah():
    add "sr" at right
    imagebutton:
        idle "sl"
        hover "sl"
        at open
        action NullAction()

label start:
    show screen blah()
    pause

[Imperf3kt]

Well, images don't have hover states, so... Use a screen.

Code: Select all

screen blah():
    add "sr" at right
    imagebutton:
        idle "sl"
        hover "sl"
        at open
        action NullAction()

label start:
    show screen blah()
    pause

I don't know how I ended up using images, I started off with imagebuttons...
Anyway, I did what you said, and I get an error:

I'm sorry, but an uncaught exception occurred.

While running game code:
File "renpy/common/00start.rpy", line 209, in script
python:
File "renpy/common/00start.rpy", line 213, in <module>
renpy.call_in_new_context("_main_menu")
Exception: Parameter 'new_widget' is not known by ATL Transform.

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

Full traceback:
File "C:\Users\Imperf3kt\Desktop\renpy\renpy-6.99.7-sdk\renpy\bootstrap.py", line 281, in bootstrap
renpy.main.main()
File "C:\Users\Imperf3kt\Desktop\renpy\renpy-6.99.7-sdk\renpy\main.py", line 463, in main
run(restart)
File "C:\Users\Imperf3kt\Desktop\renpy\renpy-6.99.7-sdk\renpy\main.py", line 139, in run
renpy.execution.run_context(True)
File "C:\Users\Imperf3kt\Desktop\renpy\renpy-6.99.7-sdk\renpy\execution.py", line 714, in run_context
context.run()
File "renpy/common/00start.rpy", line 209, in script
python:
File "C:\Users\Imperf3kt\Desktop\renpy\renpy-6.99.7-sdk\renpy\ast.py", line 805, in execute
renpy.python.py_exec_bytecode(self.code.bytecode, self.hide, store=self.store)
File "C:\Users\Imperf3kt\Desktop\renpy\renpy-6.99.7-sdk\renpy\python.py", line 1460, in py_exec_bytecode
exec bytecode in globals, locals
File "renpy/common/00start.rpy", line 213, in <module>
renpy.call_in_new_context("_main_menu")
File "C:\Users\Imperf3kt\Desktop\renpy\renpy-6.99.7-sdk\renpy\game.py", line 313, in call_in_new_context
return renpy.execution.run_context(False)
File "C:\Users\Imperf3kt\Desktop\renpy\renpy-6.99.7-sdk\renpy\execution.py", line 714, in run_context
context.run()
File "renpy/common/_layout/screen_main_menu.rpym", line 29, in script
$ ui.interact()
File "C:\Users\Imperf3kt\Desktop\renpy\renpy-6.99.7-sdk\renpy\ast.py", line 805, in execute
renpy.python.py_exec_bytecode(self.code.bytecode, self.hide, store=self.store)
File "C:\Users\Imperf3kt\Desktop\renpy\renpy-6.99.7-sdk\renpy\python.py", line 1460, in py_exec_bytecode
exec bytecode in globals, locals
File "renpy/common/_layout/screen_main_menu.rpym", line 29, in <module>
$ ui.interact()
File "C:\Users\Imperf3kt\Desktop\renpy\renpy-6.99.7-sdk\renpy\ui.py", line 277, in interact
rv = renpy.game.interface.interact(roll_forward=roll_forward, **kwargs)
File "C:\Users\Imperf3kt\Desktop\renpy\renpy-6.99.7-sdk\renpy\display\core.py", line 2354, in interact
repeat, rv = self.interact_core(preloads=preloads, **kwargs)
File "C:\Users\Imperf3kt\Desktop\renpy\renpy-6.99.7-sdk\renpy\display\core.py", line 2564, in interact_core
new_widget=layers_root)
File "C:\Users\Imperf3kt\Desktop\renpy\renpy-6.99.7-sdk\renpy\atl.py", line 392, in __call__
raise Exception('Parameter %r is not known by ATL Transform.' % k)
Exception: Parameter 'new_widget' is not known by ATL Transform.

Windows-8-6.2.9200
Ren'Py 6.99.7.858
test button 0.0

I get this by using:

Code: Select all

image sr = "scroll_right.png"

transform open:
    on hover:
        xalign 0.0 yalign 0.0
        linear 0.3 xalign -0.5 yalign 0.0
        
screen Blah():
    add "sr" at right
    imagebutton auto "scroll_left_%s.png" xpos 0 ypos 0 focus_mask True action NullAction() at open
        
label start:
    show screen Blah()
    pause
    
    return
      

The exact same error when using:

Code: Select all

image sr = "scroll_right.png"
image sl = "scroll_left.png"

transform open:
    on hover:
        xalign 0.0 yalign 0.0
        linear 0.3 xalign -0.5 yalign 0.0
        
screen Blah():
        add "sr" at right
        imagebutton:
            idle "sl"
            hover "sl"
            at open
            action NullAction()
        
label start:
    show screen Blah()
    pause
    
    return
      

The image is all over the place too, it's not where it should be.
http://puu.sh/n8B1l/8ea48e2e07.png
If I click anything, the errors appear and the game crashes.
I even tried placing the code in the screens.rpy

Screens:

Code: Select all

init -1:
    image sr = "scroll_right.png"
    image sl = "scroll_left.png"
    
screen Blah():
    add "sr" at right
    imagebutton:
        idle "sl"
        hover "sl"
        at open
        action NullAction()

Script:

Code: Select all

transform open:
    on hover:
        xalign 0.0 yalign 0.0
        linear 0.3 xalign -0.5 yalign 0.0
        
label start:
    show screen Blah()
    pause
    
    return
      

I don't understand this at all.

[philat]

Well, I don't know what you've done in the rest of your game but the error is unrelated to the imagebutton. *shrug* Try it in a clean project with nothing else if you don't believe me.

[Imperf3kt]

That is a clean project, the only thing I did was set the resolution to 1280*720




Thats everything I changed from "new project"

The only other thing I did was place the images in the images folder.

[Kia]

I tested it and it's working without errors

Code: Select all

transform open:
    on hover:
        xalign 0.0 yalign 0.0
        linear 0.3 xalign -0.5 yalign 0.0
screen test:
    imagebutton:
        idle "#000"
        hover "#00f"
        xysize(100,100)
        at open
        action NullAction()

define e = Character('Eileen', color="#c8ffc8")
label start:
    show screen test

    e "You've created a new Ren'Py game."

    e "Once you add a story, pictures, and music, you can release it to the world!"

    return

try giving the imagebutton full path of images

Code: Select all

        idle "images/scroll_right.png"

[Imperf3kt]

I tested it and it's working without errors

Code: Select all

transform open:
    on hover:
        xalign 0.0 yalign 0.0
        linear 0.3 xalign -0.5 yalign 0.0
screen test:
    imagebutton:
        idle "#000"
        hover "#00f"
        xysize(100,100)
        at open
        action NullAction()

define e = Character('Eileen', color="#c8ffc8")
label start:
    show screen test

    e "You've created a new Ren'Py game."

    e "Once you add a story, pictures, and music, you can release it to the world!"

    return

try giving the imagebutton full path of images

Code: Select all

        idle "images/scroll_right.png"

As it turns out, I had an erronious line in my main menu. I have no idea when I placed this there, must have been around 1am when I was half out of it.

Code: Select all

        imagebutton auto "scroll_left_%s.png" xpos 0.0 ypos 0.0 focus_mask True action With(open)

Seems the problem was it was trying to draw the vbox layer and then simultaneously move it left, and not move it left.

Lesson learnt: Don't fiddle with Ren'Py after midnight.
Thank you for the help however.

The script I ended up using, for those who are interested.

Code: Select all

image sr = "scroll_right.png"

transform open:
    on hover:
        xalign 0.0 yalign 0.0
        linear 0.3 xalign -0.5 yalign 0.0
screen test:
    imagebutton:
        idle "images/scroll_left_idle.png"
        hover "images/scroll_left_hover.png"
        xysize(640,720)
        at open
        action NullAction()

define e = Character('Eileen', color="#c8ffc8")
label start:
    show screen test
    show sr at right

    e "You've created a new Ren'Py game."

    e "Once you add a story, pictures, and music, you can release it to the world!"

    return

Now I may go ahead and place the working button in my actual game.