Making 2.5d / Parallax backgrounds

[ChroniclerOfLegends]

I have seen a really cool effect in a couple of visual novels.

In them, along with static backgrounds, you will see backgrounds that are made up of multiple layers giving a somewhat 3d effect or 'pop-up book' effect
Interesting effects that can be done with this include:

Moving clouds on landscape backgrounds.
Panning across a room and 'foreground' objects moving at a different speed than background objects.

I am tinkering with ATL and trying to figure out how to do this efficiently.
(Specifically, I have a scene made up of two spaceships and a galaxy background. The galaxy is made of 4 layers for different distances.
I want to focus on one ship, and then pan from the left to the right with each layer moving different speeds, and end up focusing on the right ship.)

Has anybody messed with creating backgrounds like this before? I was looking for some advice.

I am curious if you can define the whole animation in one layered background image that you can then just show, or if you will have to make an entirely new ATL block every time you pan the scene.

The main difficulty I am having so far is trying to get the background and foreground images to start moving at the same time.

[trooper6]

Have you searched the forums for the word parallax?
For example:
viewtopic.php?t=47482
viewtopic.php?t=31201

[ChroniclerOfLegends]

I had, but player controlled parallax or a starfield wasn't really what I was looking for.
I did end up finding an external tutorial that helped me out:
http://traumendes-madchen.com/blog/?p=1395
I hadn't ever heard of the 'contains' keyword for defining images.
I got it working exactly how I wanted like so:

Code: Select all

image testlayeredbackground:
        contains:
            xalign 0.0
            'bg_space_long_1'
            pause 1.5
            ease 2.5 xalign 0.60
        contains:
            xalign 0.0
            'bg_space_long_2'
            pause 1.5
            ease 2.5 xalign 0.70
        contains:
            xalign 0.0
            'bg_space_long_3'
            pause 1.5
            ease 2.5 xalign 0.80
        contains:
            xalign 0.0
            'bg_space_long_4'
            pause 1.5
            ease 2.5 xalign 0.90
        contains:
            xalign 0.2
            yalign 0.5
            'fg_ih_side_normal'
            pause 1.5
            ease 2.0 xalign -1.5

EDIT: Even though I ended up answering my own question, I thought I would leave what I figured out to make it easier for people to make easy animated backgrounds in the future if they happen upon this thread. I also figured out you can stack apply atl to create some pretty neat effects:
(Zoom out of focus on one object, pan across the background, zoom in focus on another object):

Code: Select all

image testlayeredbackground:
        parallel:
            zoom 1.5
            xalign 0.2 yalign 0.5 # location of first focus
            pause 1.5
            ease 2 zoom 1.0 # Zoom out
            pause 1.5
            ease 2 zoom 1.5 xalign 1.0 yalign 0.5 # location of second focus
        parallel:
            contains:
                xalign 0.0
                'bg_space_long_1'
                pause 3
                ease 2.5 xalign 0.65
            contains:
                xalign 0.0
                'bg_space_long_2'
                pause 3
                ease 2.5 xalign 0.75
            contains:
                xalign 0.0
                'bg_space_long_3'
                pause 3
                ease 2.5 xalign 0.85
            contains:
                xalign 0.0
                'bg_space_long_4'
                pause 3
                ease 2.5 xalign 1.0
            contains:
                xalign 0.2
                yalign 0.5
                'fg_ih_side_normal'
                pause 3
                ease 2.0 xalign -1.5

[trooper6]

Contains is ATL...you can read up more on it here: https://www.renpy.org/doc/html/atl.html ... t=contains
And Yay for getting you image to work how you want!