[Self-solved(?)] Is there a way to make ATL event handling work in the transform within "contains" block?

[maclaeroni]

Hello, I am sorry if this has been asked beforehand, but I have been working on this for days to no avail.

So for my project, the presentation of the character sprites is done in the manner as depicted here. If you look closely, you can see that as the frame is easing in, the character image inside the frame has its own easing-in behavior as well. Right now, I accomplish this by using three show statements on the frame background, the character image, and the frame border, as with the code snippet below:

Code: Select all

## Background and frame for the cut-ins
image sprite_border = Frame(spritedir + "sprite_border.png", 15, 15)
image sprite_background = Frame(spritedir + "sprite_background.png", 10, 10)

## Character sprites - cut-in version
image carducannian_commander distressed_cutin:
    "carducannian_commander_distressed"
    align (0.5, 0.5)
    crop (290, 40, 250, 550)

    on show:
        crop (270, 40, 250, 550) alpha 0.0
        pause 0.1
        easein 0.5 crop (290, 40, 250, 550) alpha 1.0

    on hide, replaced:
        crop (290, 40, 250, 550) alpha 1.0
        pause 0.1
        easein 0.5 crop (310, 40, 250, 550) alpha 0.0

# ...

# Example below. The "spriteTransforms" and "frameTransforms" are
# rather crude, but I hope I get my point across. Sorry!
label start:
    transform exampleTransform: # Transform that affects the sprite and frame
       zoom 0.9
       xanchor 0.5
       xpos 375
       yanchor 0.5
       ypos 306
       alpha 0.0
       
       pause 0.1
       
       easein 0.5 xpos 344 alpha 1.0
       
       on hide:
           easeout 0.5 xpos 330 alpha 0.0

    spriteTransforms = [exampleTransform]
    frameTransforms = [Transform(size=(260, 560)), exampleTransform] 
    
    # In the project proper, the lines below are contained within a function
    # that is called every time I want to show the character images.
    # "id" is used to manually distinguish the image tags used by the background and
    # border for every character image shown.
    # (Yes, this is crude, but this is what works for now ^^; )
    python:
        id = 0
        renpy.show("sprite_background", frameTransforms, tag="sprite_background" + str(id))
        renpy.show("carducannian_commander distressed_cutin", spriteTransforms)
        renpy.show("sprite_border", frameTransforms, tag="sprite_border" + str(id))

So far so good. However, while it works as what I am hoping for now, I want to know if it is possible to combine the background and border into single ATL transform so I only need to use one show/hide statement every time:

Code: Select all

image carducannian_commander distressed:
    size (260, 560)

    contains:
        "sprite_background"
    contains:
        "carducannian_commander distressed_cutin"
    contains:
        "sprite_border"

...and this is where the problem comes in. When I try using show/hide on "carducannian_commander distressed", the "on show" and "on hide" blocks of the "carducannian_commander distressed_cutin" contained in the former are not executed. Based from my understanding from the docs, it seems that the event handlers will only work if the show/hide is applied directly to the transform itself, but not if the show/hide is applied to a transform containing the transform with the event handlers?

So my questions:

1. Is there a way to make event handlers of a transform within a container like in above example work? Or do I have to use UDDs?
2. Say that I have to settle with the three renpy.show() statements like I am doing right now, how much will it affect performance? I don't think my project will have more than four character images displayed on screen at once, but I still want to know since it means that four copies of the background and border will also be shown alongside the character images (which, if four characters are shown, means that there are 12 images (+ background) actually shown).

I'm sorry if this ends up becoming too long and not clear enough, but this has been driving me crazy for days and I'd like to hear your inputs.

Any input is appreciated. Thank you!

--

UPDATE 2019/07/27
I managed to work around this problem by using UDD derived from Container class while borrowing some parts from the Transform class, with example attached. Personally, it does its job for me right now, but as I am not quite sure of the possible problems those may arise in the future (since I'm only focusing on making sure the event handlers work), I am pitching the example here just in case anyone wants to use and make improvements along the way.

Thank you!