Ren'Py How can I adjust an image so its in the right location of a background webm video?

[Freeworlddev]

Hey guys,

I've got two images: a PNG file of a car interior and a webm file of a moving forest that's fixed behind the car interior. The idea is to make it look like the car is driving forward while the looping forest is played.

Car interior:

You must be registered to see the links

Forest loop video:

You must be registered to see the links

However, my script looks like this:

transform fullscreen:
    size (1920, 1080)

image forest = Movie(play="images/cgs/prologue/prologue_carinterior/forest.webm", size=(1920, 1080), loop=True)

image car_interior = "images/cgs/prologue/prologue_carinterior/carinterior.png"

show forest

show car_interior at fullscreen

In the end, I get a misaligned car interior image that looks like this:



As you can see, it looks like the car is doing a wheelie lol, it's not aligned right in the image. Is there some renpy code I can do to adjust the image itself? In addition, there's some weird black bars at the windows, how would I fix that?

 

[Freeworlddev]

Update:

The issue is mostly fixed with the following:

    init python:
        SCR_xy = (config.screen_width,config.screen_height)

    transform scr_fill(xy=SCR_xy):
        xysize xy
        fit 'cover'
        truecenter

    show forest:
        scr_fill
        offset (100,-400) #try to play with numbers it should place the picture behind on correct spot
    show car_interior:
        scr_fill
        offset (0,0) # you can move it here as well. which is more appealing to your taste

 

[Turning Tricks]

Hey guys,

I've got two images: a PNG file of a car interior and a webm file of a moving forest that's fixed behind the car interior. The idea is to make it look like the car is driving forward while the looping forest is played.

Car interior:

You must be registered to see the links

Forest loop video:

You must be registered to see the links

However, my script looks like this:

transform fullscreen:
    size (1920, 1080)

image forest = Movie(play="images/cgs/prologue/prologue_carinterior/forest.webm", size=(1920, 1080), loop=True)

image car_interior = "images/cgs/prologue/prologue_carinterior/carinterior.png"

show forest

show car_interior at fullscreen

In the end, I get a misaligned car interior image that looks like this:

View attachment 4760282

As you can see, it looks like the car is doing a wheelie lol, it's not aligned right in the image. Is there some renpy code I can do to adjust the image itself? In addition, there's some weird black bars at the windows, how would I fix that?

Honestly, IMO, the best way to do what you want is to first format the background animation and the foreground picture to the resolution of your game. Ren'py will automatically scale displayables, but it helps to make the base at the proper resolution.

At the same time, you can play with the car interior shot and the background to figure out the best positioning. Move the interior around and zoom/crop the background so it looks more realistic. They should both be the same resolution. The ones you posted here are mistmatched.. your video loop is 854 by 524 while your foreground image is 4961 by 3278. That's just asking for trouble.

I took your two files and I upscaled the video loop and cropped it to 1920 by 1080 and I did the same with the foreground image. I ended up moving the foreground down a bit and using Content-Aware fill to make more "ceiling" inside the car. I'm just eyeballing the proper perspective.


Then you just use the following code to show the image.

image drive_BG = Movie(play="images/background.webm", size=(1920, 1080), loop=True)
image drive_FG = "images/foreground.webp"

image drive_loop = Composite(
    (1920, 1080),
    (0, 0), "drive_BG",  ## background looping animation
    (0, 0), "drive_FG")  ## foreground static image (windows cut out for alpha transparency)


label test1:

    scene drive_loop
    e "This is a test..."
    e "End of test ..."

    return

And this is the result...

View attachment test.webm

 

[osanaiko]

Freeworlddev : The result of Turning Tricks work is very good, but you are facing the fundamental problem that the camera perspective of the two images is simply different, and that can't be fixed in post-production. It's a cinematography question, and if you're interested in that it can be an intriguing topic to research.

If you are still unsatisfied with the result from TT, then you will have to rework the source images.

Assuming the background animation is something you've obtained from other sources and therefore cannot redo, the easiest thing to change would be the image of the car interior - it needs to be redrawn with the "camera" point of view moved lower to the car hood. Roughly eyeballing it, the camera should go down 12 inches and tilt up 15degrees.

You could simulate the camera angle using a 3d program - this can be very useful to get a "correct" perspective to use as an illustration reference. Daz or blender would both work:
- import a still frame of the background animation and set it up as a reference image
- grab a car model with an interior. the exact details of the vehicle don't matter
- position the car and a camera, then switch the display viewport to the camera lens
- mess around with the relative angles/positions of the car and camera until you get a "natural" feel of the viewport.
- you might need to change the camera focal length to get the right framing - to get the close positioning and the two front seats in the sweetspot of the character framing there will need to be a wide angle lens setting.

 

[anne O'nymous]

[...] but you are facing the fundamental problem that the camera perspective of the two images is simply different, and that can't be fixed in post-production.

It's possibly fixable with

You must be registered to see the links

by tilting the movie or image to reach a more fitting perspective. But it would just be a workaround giving a less weird result.

 

[Freeworlddev]

Honestly, IMO, the best way to do what you want is to first format the background animation and the foreground picture to the resolution of your game. Ren'py will automatically scale displayables, but it helps to make the base at the proper resolution.

At the same time, you can play with the car interior shot and the background to figure out the best positioning. Move the interior around and zoom/crop the background so it looks more realistic. They should both be the same resolution. The ones you posted here are mistmatched.. your video loop is 854 by 524 while your foreground image is 4961 by 3278. That's just asking for trouble.

I took your two files and I upscaled the video loop and cropped it to 1920 by 1080 and I did the same with the foreground image. I ended up moving the foreground down a bit and using Content-Aware fill to make more "ceiling" inside the car. I'm just eyeballing the proper perspective.


Then you just use the following code to show the image.

image drive_BG = Movie(play="images/background.webm", size=(1920, 1080), loop=True)
image drive_FG = "images/foreground.webp"

image drive_loop = Composite(
    (1920, 1080),
    (0, 0), "drive_BG",  ## background looping animation
    (0, 0), "drive_FG")  ## foreground static image (windows cut out for alpha transparency)


label test1:

    scene drive_loop
    e "This is a test..."
    e "End of test ..."

    return

And this is the result...

View attachment 4764353

Oh wow, thanks for scaling the webm video to size. You know, I didn't check the video screen size, so I'll have to fix it.

Is it possible to mess with the code you provided to give an interior similar to this?

You must be registered to see the links

 

[Freeworlddev]

Update: Thanks to the recommendations of anne O'nymous, osanaiko, and Turning Tricks, I've updated the camera distance to (hopefully) create a better scene overall.

 

[osanaiko]

That looks great! nice work.