swap images inside a screen with fade/dissolve

[Kia]

I want to add a dissolve from one image to another inside the screen when the variable changes, it should be simple to do but I can't think of any solution for some reason.
here's my code:

Code: Select all

init python:
    class img_class:
        def __init__(self, img, duration = 0):
            self.img = img
            self.duration = duration
        def change(self, x, d):
            self.duration = d
            self.img = x

default img_1 = img_class("img_a.png")

screen img_test:
    vbox:
        add img_1.img
        button:
            text "image A"
            action Function(img_1.change, "img_a.png", 1)
        button:
            text "image B"
            action Function(img_1.change, "img_b.png", 2)

what would be that one key ingredient I need to add?

[Alex]

Try to show images using 'showif' statement - https://www.renpy.org/doc/html/screens. ... -statement

[Kia]

Try to show images using 'showif' statement

it might come in handy if I end up having to use two images to alternate between but it's not exactly what I'm looking for since I can't hardcode hundreds of images into my screen using shoif.
like always there are hacky solutions but I'm looking for a more elegant way to do it

[strayerror]

This probably rises to somewhere around the level of getting a bit uncomfortable on the hackometer, but perhaps if nothing else it can help inspire better solutions. Note that the variables blue and green misleadingly (I know, I'm sorry!) have no impact on the image displayed and are referencing instead the concept of blue/green deployment.

Code: Select all

image r = Solid('f77', xysize=(200, 200))
image b = Solid('7f7', xysize=(200, 200))
image g = Solid('77f', xysize=(200, 200))

label start:
    show screen imgswap('r')
    'Start at red, fade to others and back.'
    return

transform imgswap_top:
    on show, appear:
        linear .2 alpha 1.
    on hide:
        linear .2 alpha 0.

transform imgswap_bottom:
    on show, appear:
        alpha 1.
    on hide:
        .2
        alpha 0.

screen imgswap(img=None):
    default blue = img
    default green = img
    default swap = False

    python:
        if blue != green:
            swap = not swap
            if not swap:
                blue, green = green, blue

    vbox:
        fixed:
            xfit True
            yfit True
            showif swap:
                add blue at imgswap_bottom # if images have alpha, use imgswap_top here
                text 'blue'
            else:
                add green at imgswap_top
                text 'green'

        button:
            text 'red'
            action SetScreenVariable('blue', 'r')
        button:
            text 'green'
            action SetScreenVariable('blue', 'b')
        button:
            text 'blue'
            action SetScreenVariable('blue', 'g')

    python:
        if swap:
            green = blue
        else:
            blue = green

[Alex]

Well, another try inspired by strayerror's post in other thread...

Code: Select all

image red:
    Solid("c00")
    size(200, 200)

image green:
    Solid("0c0")
    size(200, 200)

image blue:
    Solid("00c")
    size(200, 200)

image white:
    Solid("fff")
    size(200, 200)

screen img_scr(img, algn):
    add img align algn
        
screen test_scr():
    default flag = False
    if flag:
        timer 0.75 action Return() repeat False
    vbox:
        align (0.05, 0.05)
        textbutton "Img 1" action Show("img_scr", img="red", algn=(0.3, 0.05), transition=dissolve)
        textbutton "Img 2" action Show("img_scr", img="blue", algn=(0.7, 0.05), transition=dissolve)
        textbutton "Img 3" action Show("img_scr", img="green", algn=(0.5, 0.05), transition=dissolve)
        textbutton "Img 4" action Show("img_scr", img="white", algn=(0.5, 0.15), transition=dissolve)
        null
        textbutton "Done" action [Hide("img_scr", transition=dissolve), SetScreenVariable("flag", True)]
    
    
# The game starts here.

label start:
    "..."
    call screen test_scr
    "?!"

[Kia]

Well, another try inspired by strayerror's post in other thread...

well, after you suggested showif I did wrote a hack similar to what strayerror wrote, if we look past the fact that to keep the container size constant I had to add a copy of the image at alpha 0.0 underneath and if the images sizes are different there would be a jump in position. it does work.
using the screen transitions never crossed my mind, but it would be a bit more limited than shiwif since it needs a screen for each if we want to display more than one image at the same time.
I was hoping for one of those user defined displayables that handle their own render, but I'm not confidence in my skills to tackle UDD myself.

[Alex]

...but it would be a bit more limited than shiwif since it needs a screen for each if we want to display more than one image at the same time. ...

It looks like using '_tag' argument lets us show the same screen several times - try to play with it...

Code: Select all

screen test_scr():
    default flag = False
    if flag:
        timer 0.75 action Return() repeat False
    vbox:
        align (0.05, 0.05)
        textbutton "Img 1" action Show("img_scr", img="red", algn=(0.3, 0.05), transition=dissolve, _tag="a")
        textbutton "Img 2" action Show("img_scr", img="blue", algn=(0.7, 0.05), transition=dissolve, _tag="b")
        textbutton "Img 3" action Show("img_scr", img="green", algn=(0.5, 0.05), transition=dissolve, _tag="c")
        textbutton "Img 4" action Show("img_scr", img="white", algn=(0.5, 0.15), transition=dissolve, _tag="d")
        null
        textbutton "Done" action [Hide("a", transition=dissolve), Hide("b", transition=dissolve), Hide("c", transition=dissolve), Hide("d", transition=dissolve),SetScreenVariable("flag", True)]