Show two images with animation simultaneously

[Nightcatmeow]

Hi, I know Renpy can diplay images with ALT one after another and in order of sequence when code as below:

show eileen jumping:
xalign 0.5 yalign 1.2
linear 0.3 yalign 1.7
linear 0.3 yalign 0.8
linear 0.3 yalign 1.2
pause 3.0
repeat

show bunny hopping:
xalign 0.8 yalign 1.2
linear 0.3 yalign 1.7
linear 0.3 yalign 0.8
linear 0.3 yalign 1.2
pause 3.0
repeat

But when I do that, eileen and bunny will not be doing their jumps at the same time. Eileen will always jump first, then bunny jump with a delay.
How can I make both of them always jumping at the same time frequency? Thanks.

[plastiekk]

Hello, a similar situation had challenged me a few days ago. (I am a newbie in Renpy and Python).
I then solved it with "Transform" and a "Screen". In your example it could look like this.
However, there is also a "parallel" function that might be more suitable. (But I have not yet understood exactly how it works ^.^)

Code: Select all

# define images
image eileen:
    "char1.png"
    xalign 0.5 yalign 1.2

image bunny:
    "char2.png"
    xalign 0.8 yalign 1.2

 

# define a transform

transform jumping:
    yalign 1.2                   # <- uncomment this line and see what happens
    linear 0.3 yalign 1.7
    linear 0.3 yalign 0.8
    linear 0.3 yalign 1.2
    pause 3.0
    repeat
    
# define a screen
screen we_are_jumping():
    add "eileen" at jumping      # <- show char1 with transform "jumping"    
    add "bunny" at jumping       # <- show char2 with transform "jumping"    
    
# The game starts here.

label start:

    "Let's make them jump."
    
    show screen we_are_jumping with fade
    "Weeee..."
    hide screen we_are_jumping with fade
    "They jumped simultaneously."
           
    return

[Nightcatmeow]

Hi Plastiekk,

Oh wow! You're my savior! It works and they are jumping happily together now.

Then, it makes me wonder if I need to define multiple image positions in order for them to jump at different x pos or is there an easier method to do so?

I tried removing the position at defining the images and putting them at the scene but there'll be error message.

image elieen:
"elieen.png"
yalign 1.2 # removed xalign

image bunny:
"bunny.png"
yalign 0.2 # removed xalign

transform jumping:
linear 0.3 yalign 1.7
linear 0.3 yalign 0.8
linear 0.3 yalign 1.2
pause 3.0
repeat

screen we_are_jumping():
add "elieen" at jumping
add "bunny" at jumping

label start:

show screen we_are_jumping at right # this is the part that i try to set the x position instead but didn't work out.

[plastiekk]

Hi Nightcatmeow.
Since we pushed Eileen and the bunny onto a screen, we can no longer manipulate them directly. (See: https://www.renpy.org/doc/html/screens.html ) But the screenlanguage is very powerful, so we can pass some values when calling the screen. In our example it is the X-position of Eileen as the first digit and the X-position of Bunny as the second digit.

Code: Select all

show screen we_are_jumping(0.1, 1.0) 

In order for the values to be used, we need to adjust our screen a bit.

Code: Select all

# define a screen
screen we_are_jumping(x_pos1, x_pos2):         # x_pos1 for eileen, x_pos2 for bunny 
        
    add "eileen" xalign x_pos1 at jumping      # <- show char1 with transform "jumping" at xpos1  
    add "bunny" xalign x_pos2 at jumping       # <- show char2 with transform "jumping" at xpos2

To stay with the above example, here is the whole script again. It is not necessary to remove code lines, because we can change the position directly with our Screen(xpos1, xpos2) call.

Code: Select all

# define images
image eileen:
    "char1.png"
    xalign 0.5 yalign 1.2

image bunny:
    "char2.png"
    xalign 0.8 yalign 1.2

 

# define a transform

transform jumping:
    yalign 1.2                   # <- uncomment this line and see what happens
    linear 0.3 yalign 1.7
    linear 0.3 yalign 0.8
    linear 0.3 yalign 1.2
    pause 3.0
    repeat
    
# define a screen
screen we_are_jumping(x_pos1, x_pos2):         # x_pos1 for eileen, x_pos2 for bunny 
        
    add "eileen" xalign x_pos1 at jumping      # <- show char1 with transform "jumping" at xpos1
    add "bunny" xalign x_pos2 at jumping       # <- show char2 with transform "jumping" at xpos2
    
# The game starts here.

label start:

    "Let's make them jump."
    
    show screen we_are_jumping(0.1, 1.0)        # value1 xpos eileen , value2 xpos bunny

    with fade
    "Weeee..."
    
    show screen we_are_jumping(0.4, 0.6)        # value1 xpos eileen , value2 xpos bunny
    with dissolve
    
    "Yay."
    hide screen we_are_jumping with fade
    "They jumped simultaneously."
           
    return

I think there are certainly more efficient ways, I am also new to renpy as mentioned above.

[Nightcatmeow]

Whoo-hoo, now they are jumping just the way I need.

Just an add-on, I checked that for parallel function, it's more for an image with multiple transforms.
In this case, it cannot be used for my purpose, as there are two images and one transform.

Anyway, thanks again for the well-explained code to solve the problem. Cheers!