How Do I Change The Background In Character Animator?

To achieve a believable character movement we should either brand the graphic symbol walk across the environment or brand the environment move behind the character while he/she walks in place.

This tutorial is about how to create an environment that volition curlicue while your puppet walks in place. Apparently, there is a surprising, notwithstanding elementary mode to accomplish this in Adobe Character Animator *.

The Main Thought

We will bring the graphic files for the foreground and background separately into Adobe Character Animator. And so we will add a walking behavior to it and after some tweaking, we volition be able to movement everything together using the arrow keys in the Adobe Character Animator scene.

Follow these 7 uncomplicated steps and you volition accept a moving background and foreground for your grapheme to walk in.

Step 1: Prepare the Artwork for

The first footstep would be preparing the artwork for the environs.

Nosotros will need to create the graphics for the Foreground and the Groundwork and save them as separate files. The artworks can be saved as .ai, .psd or even just a uncomplicated .png.

Make sure you lot don't utilise .jpg for the foreground layer since this format does not support transparency.

You can create your own artwork or just employ the artwork in the example files to follow on. The artwork in example files is created in Adobe Illustrator and includes source files for the Foreground, Background, and Middle-Ground. Likewise every bit the last .puppet files for each of the elements.

Download an Case Surround

Icludes:

.ai source file for the background, foreground and middle ground .
Last .boob files for each of the elements.
An example projection with a 'placeholder' grapheme walking in identify while the environment layers scroll through.

1.1: Prepare a Wide Groundwork Surroundings

Since the background paradigm will be the one moving instead of the character it should exist significantly wider than the scene. It should exist at least ii times wider than the scene width. The wider the prototype the more than walking space there is.

1.two: Create Foreground Elements

Calculation a foreground layer to your scene will help create the illusion of depth. The foreground artwork you create should exist the same width as the background layer.

Step 2: Import the Artwork into Adobe Graphic symbol Animator

Import both Foreground and Background source files to Adobe Graphic symbol Animator.
Import a boob with a walking beliefs practical into the aforementioned projection.

Pace iv: Add together "Walk" Beliefs

Go to the rig view.
Select the Foreground (FG) and Groundwork (BG) Elements in the project console.
Click the + sign next to the Behaviors in the properties panel and add together the Walk beliefs.

Change the Mode to "Left and Right Arrow Keys".
Set the Strength to 0% so the background and foreground will not move up and downwards during the "walk".
Modify the Body Speed to a Negative Value. (This value will crave some tweaking to fit your scene size and puppet walk settings).

Body Speed for Both Foreground and Background should be Negative (-) so it will move in the opposite direction to the grapheme.

Prepare the Foreground to motility faster than the groundwork since objects that are closer to u.s.a. appear to move faster.

5. Tag the Background and the Foreground as Waist.

Stride v: Create a New Scene

Create a New Scene with the required dimensions.
Identify your puppet in the scene.
Drag both the FG and BG into your scene.
Place the FG above the boob and the BG below the puppet.

background and foregraound placement

Step vi: Arm Everything and Press the Arrow Keys

Now you tin test your walking scene.

Select and Arm your puppet, background, and foreground together.
Printing the arrow keys to examination the walk.
You might need to accommodate the speed of your background and foreground to make the walk feel fluid.

Step seven: Add a Static Base of operations Environment

An consequence you might encounter when using a scrolling environment in Character Animator is that it will motion every bit long as you lot press the pointer keys, fifty-fifty if it does not cover the entire scene.

A uncomplicated "lightweight" solution to information technology would be adding a static base background below the moving background so it won't be then obvious if yous accidentally walk farther than you intended.

Congratulations!

You now have a working parallax walking system. Y'all can go out information technology as is or go far more interesting past adding some interactivity to the environment.

Footstep 8: Assign Animated Triggers to Objects in the Environment

Depending on your scene, at that place are ways to brand information technology more interesting by adding triggerable animations and physics.

In the example scene, we have a door that can be opened and airtight. Window bleeds that become upward and down, an animated picture, and fifty-fifty some dangle handle on a few of the lamps only for fun.

animated enevironment door opening