Lemma Soft Forums

Supporting creators of visual novels and story-based games since 2003.
https://lemmasoft.renai.us/forums/

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

https://lemmasoft.renai.us/forums/viewtopic.php?f=8&t=37100

Page 1 of 1

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

Posted: Sun Feb 14, 2016 5:08 pm
by 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

Re: How to make an image button move on hover?

Posted: Sun Feb 14, 2016 9:54 pm
by 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

Re: How to make an image button move on hover?

Posted: Mon Feb 15, 2016 4:25 am
by Imperf3kt
philat wrote: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.

Re: How to make an image button move on hover?

Posted: Mon Feb 15, 2016 4:40 am
by 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.

Re: How to make an image button move on hover?

Posted: Mon Feb 15, 2016 5:38 am
by Imperf3kt
That is a clean project, the only thing I did was set the resolution to 1280*720
Image
Image
Image

Thats everything I changed from "new project"

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

Re: How to make an image button move on hover?

Posted: Mon Feb 15, 2016 8:13 am
by 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"

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

Posted: Tue Feb 16, 2016 4:35 am
by Imperf3kt
Kia wrote: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.
All times are UTC-04:00
Page 1 of 1
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/