OK, so you probably know how to loop background horizontally.
If not here you can find the explanation and templates by @Dara.Amarie
But there might be cases when you need to loop the background vertically - like me in my story.
For this you will need a overlay of size exactly:
640 x 2272 pixels
(which is the exact size of 2 one-zone backgrounds - one above the other)
You need to create it so that the bottom and upper end do connect to each other. (How to do it will be explained at the end of the tutorial).
We will not scale the overlay!
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
OVERLAY MOVEMENT EXPLAINED IN DETAIL:
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
(You can skip this and go directly to template - this is an explanation for the ones who want to really understand why and how so thay can adjust the template as they need)
To make it loop smoothly we will need a copy from our overlay - so we will move 2 overlays.
Here is the scheme for the overlays movement so you can better understand the process - and you can see in the pictures the shift coordinates for each position
As you know the default anchor point is in low left corner of the overlay - so that means for our overlays:
| position | original | copy |
|---|---|---|
| 1 | 0 0 | 0 -1136 |
| 2 | 0 568 | 0 -568 |
| 3 | 0 -1136 | 0 0 |
| 4 | 0 -568 | 0 568 |
So let say we want that the overlay will move in 2 seconds from position 1 to position 2 - then we have to keep the SAME TIME for each shift
- so as said let it be 2 seconds/screen in our example.
So every time our overlay will shift to the next position in 2 seconds with one exception.
When the overlay is at the highest position (above the screen), we don’t want to see it to move to the lowest position - therefore this one shift must happen in 0 time.
But then we are missing the 2 second the overlay has to wait in this position till it can move up again.
This is solved so that you add the same shift command but this time you add the time - because the overlay is already at this position it will not move and just wait there for the 2 seconds.
Example:
…overlay SKY shifts to 0 -1136 in 0 THEN overlay SKY shifts to 0 -1136 in 2
this way we added a pause for 2 seconds to the script.
So the principle is - set both overlays on their starting position 1.
Then you create a looping command where you always shift to position 2, then to 3, then to 4, then back to 1.
Keep in mind that position 1 (and all the other) is different based on what overlay it is (original or copy).
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
TEMPLATE for looping speed upwadrs 2 seconds / screen:
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
You can see this speed in the gif on the start of the tutorial.
Create any background (except the episode black one - since this does not work well with overlays) be in zone 1 and reset your zoom.
&overlay SKY create
&overlay SKY moves to layer -10
&overlay SKY shifts to 0 0
&overlay SKY opacity 1
&overlay SKY_02 create from SKY
&overlay SKY_02 moves to layer -10
&overlay SKY_02 shifts to 0 -1136
@overlay SKY_02 opacity 1
&overlay SKY shifts to 0 568 in 2 THEN overlay SKY shifts to 0 -1136 in 0 THEN overlay SKY shifts to 0 -1136 in 2 THEN overlay SKY shifts to 0 -568 in 2 THEN overlay SKY shifts to 0 0 in 2 THEN overlay SKY shifts to 0 0 in 0 loop infinite times
&overlay SKY_02 shifts to 0 -568 in 2 THEN overlay SKY_02 shifts to 0 0 in 2 THEN overlay SKY_02 shifts to 0 0 in 0 THEN overlay SKY_02 shifts to 0 568 in 2 THEN overlay SKY_02 shifts to 0 -1136 in 0 THEN overlay SKY_02 shifts to 0 -1136 in 2 loop infinite times
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
How to create overlay with matching ends:
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
For this, you need basic skills in programs like photoshop - I will describe only the basic principle:
1) crate canvas of size 640 width and 3408 hight - this way you will have a canvas of a size of 3 screens upwards (one screen is 640 x 1136) - our final overlay will be of a size of 2 screens but for making the matching ends we need to start with 3 screens
Keep in mind that the final overlay will be made from the lower 2 screens and we will have to blend the bottom part of the overlay with the top part.
2) fill the canvas with the desired background (try to use such where are not so big differences or with similar patterns and colors -to be able to blend one part to another)
As you can see the blue sky is darker in the upper parts and the ends do not fit.
3) cut out from the bottom part of the size 640 * 1136 and put it on a new layer. Move this layer to the top of the canvas like this:
4) still with this overlay active use eraser - use soft blender brush and reduce the strength of the eraser to 20% use rather big brush - to acheave soft gradient between the 2 layers -. start to erase the bottom part of the overlay till the difference will dissolve like this:
5) Now merge everything to one layer.
6) Again cut out part of size 640 * 1136 but now from the upper part of the picture, copy it on new layer and move it to the bottom:
6) Merge it again to one layer and cut it to the size of 2 screens - (you will keep the lower 2 screens.
And this is your final overlay with fitting ends.
NOTE: depending on what program you use you might get “blended to transparency” edges when you cut part of the picture out - to get the right result you have to reduce this blending to transparency to 0 so you will have a sharp edge of the cut out parts.
If you will use my template or my overlay please give credit. 
Thank you.
