[Solved]Transform(Alpha) with Creator Defined Displayable

[mobychan]

Hello everyone^^

I have a problem with my portrait code:
I layer multiple images above each other to add eyes/mouth and stuff.
Everything works fine, but when I use a transform with alpha and a light background you can see where the other images are added, because the opacity is not the same.

Is there a possibility to check, if a transform is running so I could adjust the opacity of the overlayed images to make it less obvious?
Or is there a possibility to combine everything put into a render so it's one image when the opacity is applied?

I simplyfied my code, (it's much more complicated than this in the original because of various blinking/lip flap and other animations, but it displays the effect I mean):

Code: Select all

define e = Character('Eileen', color="#c8ffc8")
image bg white =  Solid("#FFFFFF")
image portrait = Portrait(width=438, height=491)

# The game starts here.
label start:
    show bg white
    e "You've created a new Ren'Py game."

    show portrait at fade_and_slide(300, 361, 75, 75, 1.0, 2.0)

    e "Once you add a story, pictures, and music, you can release it to the world!"

    return


init python:
    class Portrait(renpy.Displayable):
        def __init__(self, width=300, height=600, xpos=0, ypos=0, **kwargs):
            try:
                global characterSprites
                super(Portrait, self).__init__(**kwargs)
            
                self.width = width
                self.height = height

                self.xpos = xpos
                self.ypos = ypos

            except Exception as ex:
                renpy.log(str(ex))

        # def event(self, ev, x, y, st):
        def per_interact(self):
            renpy.display.render.redraw(self, 0)
            super(Portrait, self).per_interact()

        def render(self, width, height, st, at):
            portrait_render = renpy.display.render.Render(self.width + self.xpos, self.height + self.ypos)

            one = renpy.render(Image("images/sylvie_normal.png"), self.width, self.height, st, at)
            two = renpy.render(Image("images/sylvie_normal_eyes.png"), self.width, self.height, st, at)

            portrait_render.blit(one, (self.xpos, self.ypos))
            portrait_render.blit(two, (self.xpos, self.ypos))

            # Return the render.
            flatten_portrait = renpy.display.render.Render(self.width, self.height)
            
            flatten_portrait.blit(portrait_render, (0, 0))

            return flatten_portrait

transform fade_and_slide(sx, tx, sy, ty, z, d):
    on show:
        zoom z
        parallel:
            alpha 0.0
            linear d alpha 1.0
        parallel:
            xpos sx
            linear d xpos tx
        parallel:
            ypos sy
            linear d ypos ty
    on hide:
        zoom z
        parallel:
            alpha 1.0
            linear d alpha 0.0
        parallel:
            xpos tx
            linear d xpos sx
        parallel:
            ypos ty
            linear d ypos sy

[trooper6]

I was wondering why you made your own CDD rather than using a LiveComposite?
I don't know if it matters, but I notice that you don't have a visit method in your CDD, which I'm pretty sure you need:
https://www.renpy.org/doc/html/udd.html

[mobychan]

As I mentioned everything's a bit more complicated in the real thing, because several layers use different animations in different timeframes, I don't believe that level of complexity would be possible in a LiveComposite.

I tried adding the visit method to my simplified code, but even there it doesn't work ^^''

[DragoonHP]

Use Flatten or im.Composite to merge the layers.

Also I don't know how complicated your code is but for most cases, you can get away with something like:

Code: Select all

    def portrait_simple(width, height):
        return im.Composite(
            (width, height),
            (0, 0), "images/sylvie_normal.png",
            (0, 0), "images/sylvie_normal_eyes.png"
            )

[mobychan]

I believe Flatten takes an image, not renders?

And I tried using im.Composite before but my animation aren't fit for it ^^''

[namastaii]

Really? Are you sure that live composite can't accomplish what you're going for?

[mobychan]

Yes, I believe it's impossible to use LiveComposite.

My "real" code consists of over 400 lines handling what to dissolve/blink/move at what times and what images are displayed.
It's handling eye blinking as well as lip flaps, glowing/pulsating light effects, different poses, expressions, clothes and more.
As I mentioned above, I reduced my code to the minimum to display the problem in a little amount of code.

[namastaii]

Idk about the glowing/light stuff but I use live composite for my game and it includes blinking and speaking etc so it's probably possible to do a lot more than you think. Though I don't know your code obviously so.. but you can add in conditionals and such to live composite. but really whatever works best for you, do it. I hope you figure it out soon

[Steamgirl]

So is the problem that blit is not returning a flattened image? Or does that work? (I've not used it in ren'py before, but normally I'd expect blit to flatten the layers.)
If it works, could you blit all your images and then apply the transform? Or do you need to apply different transforms, some of which have alpha, to different layers?

I'll try out your code on my end and play around with it when I next have time - it's an interesting problem.

[mobychan]

I was of the opinion it would flatten the whole image, but when in transition from alpha 0 to alpha 1 it's layering everything above each other, making the box around the eyes visible.

[Steamgirl]

Ok, I have tried out your code and my guess as to what's actually happening is the ATL transform is setting the alpha of the renderer, which isn't being reset anywhere else, so is then carried over into your render loop, hence that it is being applied to everything you blit - it is being blitted with alpha applied. Unfortunately I'm not very familiar with the syntax used so I haven't been able to figure out how to set the alpha of the surface prior to blitting to fully opaque, as .set_alpha() isn't a valid property for the renpy render apparently.

http://www.pygame.org/docs/ref/surface. ... .set_alpha

I don't know for sure that it would fix your issue but that's what my instincts are saying.

[mobychan]

Thanks, I'll see if that helps^^

[mobychan]

Hey everyone^^

I retried several things and after returning to flatten I finally was able to get it to work by copying a part of the flatten code:

Code: Select all

define e = Character('Eileen', color="#c8ffc8")
image bg white =  Solid("#FFFFFF")
image portrait = Portrait(width=438, height=491)

# The game starts here.
label start:
    show bg white
    e "You've created a new Ren'Py game."

    show portrait at fade_and_slide(300, 361, 75, 75, 1.0, 1.0)

    e "Once you add a story, pictures, and music, you can release it to the world!"

    return


init python:
    class Portrait(renpy.Displayable):
        def __init__(self, width=300, height=600, xpos=0, ypos=0, **kwargs):
            try:
                global characterSprites
                super(Portrait, self).__init__(**kwargs)
            
                self.width = width
                self.height = height

                self.xpos = xpos
                self.ypos = ypos

                self.img_one = Image("images/sylvie_normal.png")
                self.img_two = Image("images/sylvie_normal_eyes.png")

            except Exception as ex:
                renpy.log(str(ex))

        # def event(self, ev, x, y, st):
        def per_interact(self):
            renpy.display.render.redraw(self, 0)
            super(Portrait, self).per_interact()

        def render(self, width, height, st, at):
            portrait_render = renpy.display.render.Render(self.width + self.xpos, self.height + self.ypos)

            one = renpy.render(self.img_one, self.width, self.height, st, at)
            two = renpy.render(self.img_two, self.width, self.height, st, at)

            portrait_render.blit(one, (self.xpos, self.ypos))
            portrait_render.blit(two, (self.xpos, self.ypos))

            tex = portrait_render.render_to_texture(True)

            flatten_portrait = renpy.display.render.Render(self.width, self.height)
            flatten_portrait.blit(tex, (0, 0))
            flatten_portrait.depends_on(portrait_render, focus=True)

            flatten_portrait.reverse = renpy.display.draw.draw_to_virt
            flatten_portrait.forward = renpy.display.render.IDENTITY

            return flatten_portrait
        def visit(self):
           return [ self.img_one, self.img_two ]

transform fade_and_slide(sx, tx, sy, ty, z, d):
    on show:
        zoom z
        parallel:
            alpha 0.0
            linear d alpha 1.0
        parallel:
            xpos sx
            linear d xpos tx
        parallel:
            ypos sy
            linear d ypos ty
    on hide:
        zoom z
        parallel:
            alpha 1.0
            linear d alpha 0.0
        parallel:
            xpos tx
            linear d xpos sx
        parallel:
            ypos ty
            linear d ypos sy

a big thank you to everyone for the help^^