This video will show you how to design and animate a Night In The Woods style character.
The game itself is assembled in a modified version of Unity.
Its art and animations are made in Adobe software, including Photoshop and After Effects.
You do not need these programs for this tutorial.
This tutorial is about imitating the art, so as long as you grasp the fundamentals of
the style you can recreate it in whatever programs you use.
Night In The Woods is all animals, but you can draw humans in the style too.
Let’s start with character design.
The most important part is to restrict everything to basic shapes and flat colors.
Gradient shading is extremely rare - the best example being Mae’s dyed hair tuft.
Almost all characters are a solid color with no fur patterns, so if you can avoid markings
or break them down to something really simple like a single spot or stripe, that’s what
you want.
Simplify your design!
Speaking of that, no tails or wings, and characters need clothes.
Clothing does not melt into the shape of the body.
Back leg, back arm, and neck are a few shades darker.
Sometimes back ear and bottom jaw are darker.
For characters that have a long nose, draw the head from the side with only one eye.
Short nose: two eyes with the mouth and nose as lines on the face.
Almond eye shape, pupils almost always left or right facing, very rare to see pupils centered.
The white of the eye should be yellow.
Eyeshadow can make your character look more feminine.
If the character has glasses, no eyes at all.
Noodle arms and legs with shoes and three-finger hands.
No balls or nubs.
Details.
Might be jewelry, a symbol on a shirt, hat, eyebrows, whisker lines, hair tufts.
Those are some examples of simple shape details you can add to make your design stand out.
Just be careful not to overload your character with props and features.
Those are the fundamentals of Night In The Woods character design.
Animating the character is much easier if you have an IK or bone rigging system available,
so I’m going to make the art in Illustrator and animate it in After Effects.
If you don’t have bones you’ll have to draw a bit more to get different arm and leg
shapes.
Make a separate part for each piece of the puppet.
Pupil, eye white, closed eye line, skull, ears, hair tuft, top jaw, bottom jaw.
If you’ve got a front-facing head you don’t need to worry about the jaw because front
heads don’t open their mouths to talk.
However, you can animate expressions with the mouth so plan for that.
Body, arm, leg.
If you will be animating with bones, draw the arm and leg straight.
You’ll notice for this outfit I had to separate the shirt straps onto their own layer to overlap
the arms.
When the art is finished it is time to rig the character.
In After Effects I will import the Illustrator file as a composition with the dropdown set
to Layer Size.
Mask the pupil onto the eye white.
Set the pivot points for every piece.
Add pins to the arm and leg.
Duplicate them, place the copies in the right spots, and darken them.
I’m going to pin the ears as well to make floppy animation later.
The character is rigged.
Now we’ll go over animating a blink, talking, and a run.
To properly imitate the style you need to be able to tween.
If you’re using something where everything must be drawn frame-by-frame, you can still
do it but the results will be more lively.
Night In The Woods blinks have equal spacing on both sides.
Some of the characters only blink from the top, others use both top and bottom eyelids.
Since I am working in After Effects, I’ll use a mask to create the eye shapes.
Part open, middle, part down.
Insert the closed eye line for three frames.
Repeat the mask pattern backwards.
Copy the mask onto the track matte layer.
I’ll dump this into a precomp.
If it were a complex animation I could call up different eye animations inside the precomp
by using Time Remapping.
Another simple animation to test on your rig is talking.
In the game sometimes heads move up and down, sometimes they don’t, so it’s your choice.
Side facing heads open and close their mouths when talking.
Add a null object and pick whip all the head layers to control the whole thing at once.
In Adobe Animate you can use layer parenting or put head parts in a symbol.
In Toon Boom, make a peg.
Tween up and down.
Add some easing.
Tween the jaw opening and closing.
Done.
Now let’s do a run.
Starting with the arm, set the most extreme front pose and most extreme back pose.
Use bones to uncurl the arm on the downswing.
Otherwise it looks too stiff.
Copy and paste the starting pose to the end of the timeline.
For the leg, set three poses: the outstretched leg before impact, the leg before liftoff,
the curled up leg ready to return to the front.
Now add a copy of the outstretched pose to the end of the timeline.
Use the space between the two poses to create a fourth pose by curling up the leg in place.
That’ll keep it from unfurling too soon.
Once you duplicate the animation to the opposite limbs and shift them to start at the midway
point, you will immediately see if your timing is bad.
You may be able to fix it by changing what frame the opposite limb starts on, or you
may need to manually drag frames to fix timing.
When your run is reasonable, add a control for the entire body.
During one cycle, the body goes up and down twice.
Every time a leg is straight up and down the body is pushed up to the highest point.
The low point is as a leg hits the ground.
Add some position and rotation change to the head at the same intervals as the up and down.
You can give your run more pep by adding a keyframe right after the low point to suddenly
drop it down even further.
Add liveliness to the head by tweening ears and hair.
These floaty bits do the opposite of the main body.
Body goes up, hair and ears go down.
Trim your composition to the loop size if you haven’t done that already.
Place the composition on the timeline.
Set it to loop by right click, Time, Enable Time Remapping.
Hold ALT and click the stopwatch.
loopOut(); Then go to the last keyframe, keyboard key PAGE UP, add a new key frame.
Delete the last keyframe.
Extend the timeline.
If the speed of your run doesn’t feel right, you need to add or remove frames in between
key poses.
In After Effects it’s easier to right click, Time Stretch and decrease the value to speed
up the animation.
This run isn’t as extreme as Mae’s run, but it works!
Toss in a few background layers on different z planes and you’re done.
There’s your Night In The Woods animation.
If you enjoyed this Scribble Kibble tutorial, leave a like.
Have a 2D style you want a tutorial for next?
Leave a comment!
Watch more tutorials at ScribbleKibble.com or look for the tutorial playlist on my YouTube
page.
See you later!