[SOLVED] Ever changing background image with transition per image, for a button's background property

[hell_oh_world]

I have a button with a text on it. Apparently, I want the button's background property to change from one image to another. I searched for a while and I guess the Animate() Function would work. But I feel like its deprecated, and I wan't to minimize the usage of deprecated codes. Also, based on the documentation I think its not possible to use transitions in between the declared images using the said function. So my question is, is it possible to create a displayable like Frame() and use it on the background property of a button, but that displayable should continuously change images with transition or some sort of ATL like dissolve before showing the next image?

I'll be also delighted guys if you can provide me with some examples. Thanks.

[namastaii]

I've never tried this before, but if you define your image as a variable and then create an ATL there then as the background image for the button you set it to that image, would it work? It might not but just wondering if you've tried it already.

[namastaii]

I just tested it out and this works^^
Here is the animated button image and the screen with the button

Code: Select all

image changing_button:
    "1.png"
    .2
    "2.png"
    .2
    "3.png"
    .2
    repeat
    
screen my_button:
    hbox:
        pos(300,50)
        button:
            background "changing_button"
            text "test button"

result:

[hell_oh_world]

I just tested it out and this works^^
Here is the animated button image and the screen with the button

Code: Select all

image changing_button:
    "1.png"
    .2
    "2.png"
    .2
    "3.png"
    .2
    repeat
    
screen my_button:
    hbox:
        pos(300,50)
        button:
            background "changing_button"
            text "test button"

result:

This is actually the way I want it to happen and I tried this one as I saw something similar to this on the forum, but I want it to have some transition effect while it changes into a new image. Is it possible? Also can it also take warpers for some smooth transition? BTW ill be using the image on main menu, would it cause an exception during initialization? If so how to declare image like this during the init phase? Sorry for too many bothering question.

[namastaii]

If you look at the documentation for atl you can find a lot of different transforms to apply. Just mess with it really until you achieve what you're thinking

Im not sure I understand warpers

[hell_oh_world]

If you look at the documentation for atl you can find a lot of different transforms to apply. Just mess with it really until you achieve what you're thinking

Im not sure I understand warpers

By the warpers, what I mean are the easing functions. I don't know if that's correct but thats what the documentation says, eg. easein, easeout, etc... I'll take a look at your suggestion, maybe I'll try to find some workaround. One more thing, I'll be using the image on the main menu... and I was hoping to use a displayable like a Frame() because I'll be scaling the image right up to the boundaries of the button. Is it possible to do something like what you have showed, a displayable with some atl (for transition like effects)? But as I said I still want to achieve the changing image effect at the same time.

[namastaii]

just make sure the init comes before other things, put a negative number next to it, renpy files are already at -1, so go lower than that if you have to

[hell_oh_world]

just make sure the init comes before other things, put a negative number next to it, renpy files are already at -1, so go lower than that if you have to

Just edited my question... for it to be more clear. Thanks.

[namastaii]

Define transitions because I dont fully understand

[hell_oh_world]

Define transitions because I dont fully understand

Sorry to bother and for the poorly stated explanations. With transitions, I mean it like the pre-defined transitions in Ren'Py. Like dissolve, etc. For now, I want a displayable to act that it somehow dissolves as it changes into another image. Using atl would be enough for that I guess to achieve the similar dissolve effect, but I don't know on how to use atl on a displayable like Frame(). I was actually hoping that I can actually change the image stated in a Frame() displayable but that change should not be in an instant... I want to add some sort of dissolve before changing it into another image. And I wish to put that displayable as one of a button's background property. I hope I'm making myself clear.

Sorry again, I'm not really good at explaining things... It's just that I have this idea but I don't know If I'm elaborating things clearly.

[namastaii]

Well when you define the image with all the images and animations (including transition-like animations) - you'd put that defined image inside the frame

Code: Select all

transform my_fade:
    alpha 0.0
    easein 1.0 alpha 1.0

Code: Select all

image button_animation:
    "images/animated_button/1.png"
    .2
    "images/animated_button/2.png"
    .2
    "images/animated_button/3.png"
    .2
    repeat

Code: Select all

textbutton "My button":
                background Frame("button_animation")
                at fade1

It's probably not you and just me not understanding haha
Does this answer your question more...?

[hell_oh_world]

Well when you define the image with all the images and animations (including transition-like animations) - you'd put that defined image inside the frame

Code: Select all

transform my_fade:
    alpha 0.0
    easein 1.0 alpha 1.0

Code: Select all

image button_animation:
    "images/animated_button/1.png"
    .2
    "images/animated_button/2.png"
    .2
    "images/animated_button/3.png"
    .2
    repeat

Code: Select all

textbutton "My button":
                background Frame("button_animation")
                at fade1

It's probably not you and just me not understanding haha
Does this answer your question more...?

Aren't the atl you made meant for the button itself? I mean, the atl animation will only appear once right? and after that the images in the button will start to change from one to another. But still the changing images in the button's background still doesn't have some sort of transition before changing from one image to another? It's like they'll only flicker ever 0.2 second just like on the example gif you have shared. The example you shared was actually very very close, but on my mind I want the image to not abruptly change. I want it to see it dissolving into the next image or any close effect to what I mentioned. And I'm using a Frame() displayable, so all of what I said I want it to happen onto a Frame() displayable. I don't even know if that's possible.

[namastaii]

This isn't a cookie cutter situation. You put the animations steps in the image accordingly. I will give an example when I'm back on my pc

[hell_oh_world]

This isn't a cookie cutter situation. You put the animations steps in the image accordingly. I will give an example when I'm back on my pc

"Cookie cutter", was that supposed to mean something (like an idiom)? I'm looking forward to it namastaii, even I wasn't able to get back on my pc, so sorry for bombarding you with many questions.

[namastaii]

Cookie cutter meaning that nothing has to be a specific way. You can mix and mess with all of these transform keywords and timers and amount etc
This is basically the same code but with some smoother effect. You can mess around with it until you achieve what you're looking for.

Code: Select all

image button_animation:
    "images/animated_button/1.png"
    alpha 0.0
    linear 1.0 alpha 1.0
    linear 1.0 alpha 0.0
    "images/animated_button/2.png"
    alpha 0.0
    linear 1.0 alpha 1.0
    linear 1.0 alpha 0.0
    "images/animated_button/3.png"
    alpha 0.0
    linear 1.0 alpha 1.0
    linear 1.0 alpha 0.0
    repeat

Code: Select all

            button:
                background Frame("button_animation")
                text "testing"

https://www.renpy.org/doc/html/atl.html#warpers

alpha - transparency (0.0 being invisible, 1.0 being 100% solid and anything in between is a fraction)
linear- progression over time (this can go over 1.0, the higher the number then the longer it will take from point A to get to point B(point A and B being the alpha level)

In this specific example, the image starts at 100% transparency and over 1 second it progresses to the full solid image then for another second of time progresses back down to 100% transparency before showing the next image and so on