Animated buttons

[Imperf3kt]

I seem to be having an inordinate amount of trouble with this.

How do I make a button in a screen animated?
I've got a few "layers"

Code: Select all

image butt_anim:
    xpos 0.5
    ypos 0.2
    "images/animation/button_anim.png"
    anchor (0.5, 0.85)
    rotate 0
    linear 0.9 rotate -360
    repeat

image butt_anim_1:
    xpos 0.5
    ypos 0.2
    "images/animation/button_anim.png"
    anchor (0.5, 0.85)
    rotate 0
    linear 0.6 rotate 360
    repeat

image butt_anim_2:
    xpos 0.5
    ypos 0.2
    "images/animation/button_anim_2.png"
    anchor (0.5, 0.85)
    rotate 0
    linear 5 rotate 360
    repeat

image butt_anim_3:
    xpos 0.5
    ypos 0.2
    "images/animation/button_anim_3.png"
    anchor (0.5, 0.85)
    rotate 0
    linear 6 rotate 360
    repeat

image button_base:
    xpos 0.5
    ypos 0.2
    "images/animation/button_base.png"
    

Which work fine if used in a label

Code: Select all

label butt_test:
    show button_base
    show butt_anim
    show butt_anim_1
    show butt_anim_2
    show butt_anim_3
    $renpy.pause()
    return
    

Which work fine in a label

Code: Select all

label butt_test:
    show button_base
    show butt_anim
    show butt_anim_1
    show butt_anim_2
    show butt_anim_3
    $renpy.pause()
    return
    

But I need to composite all the separate layers into a single button and place it in a screen.
I can't get layered image to work, it complains button_base is undefined.
I can't work out Composite, it doesn't work.
I can't seem to put the images in a screen and remain animated.

I've spent close to 7 hours on this, its after 1AM and I'm seriously annoyed so please excuse the brusque post.
Any help is appreciated.

[Alex]

Try to make a button_image out of rotating images using contain statement. Then create a transform for button's move. And add button that has button_image at this transform in a screen.

https://www.renpy.org/doc/html/atl.html ... -statement

[IrinaLazareva]

And you can also make five buttons with one image instead of one button with five images. Then combine it with the screen. It sounds crazy, but it's easy to do.

[IrinaLazareva]

Code: Select all

transform buma(tim, ang):
    pos(.5, .2)
    anchor (0.5, 0.85)    
    rotate 0
    linear tim rotate ang
    repeat
    
screen button_double:
    fixed:
        imagebutton idle 'your_image_base.png' pos(.5, .2) anchor (0.5, 0.85) action Notify('Test !')
        imagebutton idle 'your_image_1.png' action Notify('Test !') at buma(.9, -360)
        imagebutton idle 'your_image_2.png' action Notify('Test !') at buma(.6, 360)
        imagebutton idle 'your_image_3.png' action Notify('Test !') at buma(5, 360)
        imagebutton idle 'your_image_4.png' action Notify('Test !') at buma(6, 360)
        
label butt_test:
    show screen button_double
    $renpy.pause()
    return

[strayerror]

The button widget is addable/composable, so it's possible to place several layers in a single button as desired. There are two examples below, one self sizes the button/clickable area using the button_base image (btn_autosized) and the other allows the button to be sized manually. Lots of options from others already, but hope it helps none the less :)

Code: Select all

image button_base:
    align (.5, .5)
    Solid('f004', xysize=(120, 40))

image butt_anim:
    align (.5, .5)
    Solid('ff7f0077', xysize=(90, 10))
    rotate 0
    linear 0.9 rotate -360
    repeat

image butt_anim_1:
    align (.5, .5)
    Solid('ff07', xysize=(20, 40))
    rotate 0
    linear 0.6 rotate 360
    repeat

image butt_anim_2:
    align (.5, .5)
    Solid('0709', xysize=(50, 5))
    rotate 0
    linear 5 rotate 360
    repeat

image butt_anim_3:
    align (.5, .5)
    Solid('0074', xysize=(50, 80))
    rotate 0
    linear 6 rotate 360
    repeat

screen btn:
    button:
        align .5, .25
        xysize 120, 80 # clickable size
        add 'button_base'
        add 'butt_anim'
        add 'butt_anim_1'
        add 'butt_anim_2'
        add 'butt_anim_3'
        action Notify('hi')

screen btn_autosized:
    button:
        align .5, .75
        fixed:
            fit_first True
            add 'button_base'
            add 'butt_anim'
            add 'butt_anim_1'
            add 'butt_anim_2'
            add 'butt_anim_3'
        action Notify('hi')

label start:
    scene
    show screen btn
    show screen btn_autosized
    'end'

[Imperf3kt]

Code: Select all

transform buma(tim, ang):
    pos(.5, .2)
    anchor (0.5, 0.85)    
    rotate 0
    linear tim rotate ang
    repeat
    
screen button_double:
    fixed:
        imagebutton idle 'your_image_base.png' pos(.5, .2) anchor (0.5, 0.85) action Notify('Test !')
        imagebutton idle 'your_image_1.png' action Notify('Test !') at buma(.9, -360)
        imagebutton idle 'your_image_2.png' action Notify('Test !') at buma(.6, 360)
        imagebutton idle 'your_image_3.png' action Notify('Test !') at buma(5, 360)
        imagebutton idle 'your_image_4.png' action Notify('Test !') at buma(6, 360)
        
label butt_test:
    show screen button_double
    $renpy.pause()
    return

Tried this one, was actually the first thing I tried.
But after fiddling right now, it actually worked, so I guess I had a typo or something last night.

Problem solved, thanks guys. Awesome as always!
I'll check out the other suggestions after work as they look pretty cool too.