Looping Background

Please use this part to report bugs & errors, ask questions & "How to..."
Post Reply
onyinyeda
Posts: 7
Joined: 27 Feb 2020, 12:32

Looping Background

Post by onyinyeda »

Hello
I am trying to make a moving-looping background.
My animatic is not as good as this (its like okay for a beginner) but here is the sample
https://www.tiktok.com/t/ZPRoLdWkF/

i want to have a moving-looping background like that.

How do i do that?
I have tvpaint 12 pro.
Thank you 💖
User avatar
slowtiger
Posts: 2937
Joined: 08 May 2008, 21:10
Location: berlin, germany
Contact:

Re: Looping Background

Post by slowtiger »

In TVP this is a quite simple task.

Create your BG in a new project. Use the Panning tool with Warp + Move image to move the seams to the middle. Paint the seams invisible.

Open the project you want to have the moving BG in. Create a new layer of a bit more than the length of your BG movement.Open Keyframer, set the BG project as source. Position the BG at the start frame just outside the project border. Do the same at the end frame at the opposite border. Select all frames, apply FX.

Cut that layer in the middle. Move one of it in time so the BG borders touch each other. Merge the layers. Delete all frames outside the loop.

This is the way I do it, others may do it differently.
TVP 10.0.18 and 11.0 MacPro Quadcore 3GHz 16GB OS 10.6.8 Quicktime 7.6.6
TVP 11.0 and 11.7 MacPro 12core 3GHz 32GB OS 10.11 Quicktime 10.7.3
TVP 11.7 Mac Mini M2pro 32GB OS 13.5
User avatar
D.T. Nethery
Posts: 4224
Joined: 27 Sep 2006, 19:19

Re: Looping Background

Post by D.T. Nethery »

I started creating an answer to your question before I saw Slowtiger's response. I think our methods are more or less the same , but as long as I have created a screen-capture video for you I decided to go ahead and upload it here. This might also help someone else in the future looking for an explanation.


I would start by preparing a wide pan background that has the exact same content on both ends.
(in this case because of the strong vertical shapes of the trees I tilted them slightly and will blur them in TVPaint to
avoid strobing)


Looping_BG_1.jpg
(click on the images to see them larger)


So Camera Position A and Camera Position B are identical. This allows for a seamless loop using the KeyFramer.

Looping_BG_2.jpg

Import the wide pan BG into TVPaint's Image Library.
Open KeyFramer.
Set Source in KeyFramer to the Image Library
Set Keyframes for first and last frame of the BG move , so that the first and last frame match up seamlessly. Off-set the last keyframe by one frame ahead.
Add Motion Blur (Directional Blur) as desired.
Apply FX Stack.
Your Character Animation layer (centered) goes over top of this layer you just rendered.
If you did it correctly the BG should play in a seamless loop behind the charracter.


See video:

https://youtu.be/USsqBTEwziQ

(you will have to click through to YouTube to watch this in Full Screen mode because TVPaint forum desktop mode restricts viewing YouTube in Full Screen. On iPad you can watch YT videos in Full Screen mode within the forum interface ...)


This gets similar results to the example you posted .

Image
.

Animator, TVPaint Beta-Tester, Animation Educator and Consultant.
MacOS 12.7.1 Monterey , Mac Mini (2018) , 3.2 GHz 6-Core Intel Core i7,
16 GB RAM , TVPaint PRO 11.7.1 - 64bit , Wacom Cintiq 21UX 2nd Gen.
,Wacom Intuos Pro 5 , Wacom driver version 6.3.39-1
onyinyeda
Posts: 7
Joined: 27 Feb 2020, 12:32

Re: Looping Background

Post by onyinyeda »

Thank you all for the help! 🙇‍♀️
Post Reply