Imagebutton with two moving images

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
enduine
Newbie
Posts: 3
Joined: Tue Sep 07, 2021 10:35 am
Contact:

Imagebutton with two moving images

#1 Post by enduine »

Hi! I'm fairly new to Renpy and programming in general and ran into a problem. I would like to change the quick menu buttons into animated imagebuttons. When the button is idle we should see an arrow (like on the first screenshot), and when we hover it text should slide from underneath (like on the second one). Of course, when we move the cursor away, the text should smoothly return back under the arrow.
To achieve this I made two images "auto_icon.png" and "auto_text.png" and wanted to combine them into one imagebutton using Composite, but I have no idea if it makes any sense.

Image
Image

I coded it like this:

Code: Select all

init:

    transform auto_move:
        on hover:
            xpos 1920 ypos 5
            linear 0.3 xpos 1770 ypos 5
        on idle:
            linear 0.3 xpos 1920 ypos 5

    image auto_slide:
        "auto_text.png"
        at auto_move

    image auto_idle = "auto_icon.png"

    image auto_hover = Composite(
        (154, 29),
        (0, 0), "auto_slide",
        (0, 0), "auto_icon.png"
        )

screen quick_menu():

    zorder 100

    if quick_menu:

        imagebutton:
            auto "auto_%s"
            xpos 1770 ypos 5
            focus_mask True
            action Preference("auto-forward", "toggle")
but unfortunately the code doesn't work and I'm getting this error:

Code: Select all

File "game / screens.rpy", line 255: expected 'comma or end of line' not found.
     at auto_move
     ^
I've been trying different ways to make it work and I've been looking for a solution all day long, but I'm slowly losing my hope. Maybe someone could help me?

Shie
Regular
Posts: 41
Joined: Sun Apr 14, 2019 4:12 am
itch: shie
Discord: shie_3769
Contact:

Re: Imagebutton with two moving images

#2 Post by Shie »

You've defined auto_slide wrong, if you want to declare it with ATL, there is At(), you can use it like
image auto_slide = At("auto_text.png", auto_move)

You can read more about it here:
https://www.renpy.org/doc/html/displayables.html#At

rayminator
Miko-Class Veteran
Posts: 793
Joined: Fri Feb 09, 2018 12:05 am
Location: Canada
Contact:

Re: Imagebutton with two moving images

#3 Post by rayminator »

you also can use hotspots

Code: Select all

screen preferences():

    tag menu
    use navigation

    imagemap:
        auto "gui_set/gui_prefs_%s.png"

        hotspot (740, 232, 75, 73) action Preference("display", "fullscreen") alt _("Display Fullscreen")

enduine
Newbie
Posts: 3
Joined: Tue Sep 07, 2021 10:35 am
Contact:

Re: Imagebutton with two moving images

#4 Post by enduine »

Shie wrote: Tue Sep 07, 2021 12:32 pm You've defined auto_slide wrong, if you want to declare it with ATL, there is At(), you can use it like
image auto_slide = At("auto_text.png", auto_move)

You can read more about it here:
https://www.renpy.org/doc/html/displayables.html#At
I didn't know that! Thanks! Certainly it will be useful, although still not everything works as it should. Now the game starts, but when we hover the button, text suddenly appears instead of slowly sliding out.
I thought it might be Composite's fault, so I removed it and set "auto_slide" as hover response, but it didn't help. Text just pops up instead of sliding out. Any idea what could be wrong?

rayminator wrote: Wed Sep 08, 2021 12:06 am you also can use hotspots

Code: Select all

screen preferences():

    tag menu
    use navigation

    imagemap:
        auto "gui_set/gui_prefs_%s.png"

        hotspot (740, 232, 75, 73) action Preference("display", "fullscreen") alt _("Display Fullscreen")
I've tried this method but something isn't working. I can see an idle button on the screen, but nothing happens after hovering it, and when I click it doesn't turn auto-forward mode.
But maybe I did something wrong because it's my first time using hotspots. I wrote it like this:

Code: Select all

    imagemap:
        auto "auto_%s"

        hotspot (740, 232, 75, 73) action Preference("auto-forward", "toggle") alt _("auto_slide")

Shie
Regular
Posts: 41
Joined: Sun Apr 14, 2019 4:12 am
itch: shie
Discord: shie_3769
Contact:

Re: Imagebutton with two moving images

#5 Post by Shie »

You might want to use xffset instead of xpos in your transform, try that:

Code: Select all

transform auto_move:
    on hover:
        linear 0.3 xoffset -150
    on idle:
        linear 0.3 xoffset 0
And removing focus_mask True where you make button
If that wont help, try changing how you make your button, for example:

Code: Select all

button:
        xsize 154
        ysize 29
        imagebutton:
            idle "auto_slide"
            xsize 154
            ysize 29
            at auto_move
            action Preference("auto-forward", "toggle")
        add "auto_idle"
        xpos 59 ypos 5 # changed for tesing

rayminator
Miko-Class Veteran
Posts: 793
Joined: Fri Feb 09, 2018 12:05 am
Location: Canada
Contact:

Re: Imagebutton with two moving images

#6 Post by rayminator »

there is a lot of ways of doing it

there is a hotspot tool to help you how to use it
viewtopic.php?f=52&t=31723&hilit=Renpy+ ... 30#p502484

Code: Select all

imagemap:
        idle "gui/idle_image.png" #1280 x 720 #1920 x1080 just make sure you put the button where you want it to be
        hover "gui/hover_image.png" #1280 x 720 #1920 x1080 just make sure you put the button where you want it to be

        hotspot (740, 232, 75, 73) action [Preference("auto-forward", "toggle"), alt _("auto_slide")] # you don't need to put alt _("auto_slide") for you

enduine
Newbie
Posts: 3
Joined: Tue Sep 07, 2021 10:35 am
Contact:

Re: Imagebutton with two moving images

#7 Post by enduine »

Shie wrote: Wed Sep 08, 2021 4:30 am You might want to use xffset instead of xpos in your transform, try that:

Code: Select all

transform auto_move:
    on hover:
        linear 0.3 xoffset -150
    on idle:
        linear 0.3 xoffset 0
And removing focus_mask True where you make button
If that wont help, try changing how you make your button, for example:

Code: Select all

button:
        xsize 154
        ysize 29
        imagebutton:
            idle "auto_slide"
            xsize 154
            ysize 29
            at auto_move
            action Preference("auto-forward", "toggle")
        add "auto_idle"
        xpos 59 ypos 5 # changed for tesing
It works! Thank you so much! You're great!

I feel silly to ask, because you already helped me a lot, but is there anything I can do to make the element with an arrow change its color when it's hovered and selected?
I have three arrow sprites: "auto_icon.png", "auto_icon_hover.png", "auto_icon_selected.png" and would like to use them for this color change.
Image
I tried to replace "add" with another "imagebutton" and of course the color change worked, but the text button didn't slide from underneth. Probably because one imagebutton covered the other one.
I also tried ConditionSwitch, if statement, and a lot of other things, but I usually got errors. And digging through Renpy's documentation is an actual nightmare for me, since I'm not a programmer and, in addition, english is not my native language :roll:

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

Re: Imagebutton with two moving images

#8 Post by jeffster »

Hi, I'm probably too late to the party, but as this thread is not marked as [SOLVED], here's the solution:
I tried to replace "add" with another "imagebutton" and of course the color change worked, but the text button didn't slide from underneth. Probably because one imagebutton covered the other one.
The best way is to use imagebutton, as it changes the images on select and hover automatically.

If it causes problems with other buttons, provide your current code please so I could understand the problem.

To slide buttons when other buttons are hovered, you can use button properties "hovered" and "unhovered" to call actions. Example:

Code: Select all

init python:
    pos_x = 300

#...
imagebutton:
    auto "butt_%s"
    hovered SetVariable("pos_x", 500)
    unhovered SetVariable("pos_x", 300)

textbutton "Sliding":
    xpos pos_x
Then textbutton would change its x position when the imagebutton hovers/unhovers.

Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot]