How to Animate like Night In The Woods [Scribble Kibble #103]

How to Animate like Night In The Woods [Scribble Kibble #103]


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!

Only registered users can comment.

  1. I think the character's eyes for short nose characters would have their pupils facing towards the direction they are looking, rather than "just towards right". Also, I think sometimes it's okay to melt the clothing into character's bodies, for example IIRC it's the case for the janitor. I think the idea is that, if the clothes is supposed to have a tight fit, it would melt into the body, otherwise free form.

  2. I have an idea for the next Scribble Kibble.

    Since you covered Wander over Yonder in the past, why don’t you cover Craig McCracken’s other show…

    Foster’s Home for Imaginary Friends

  3. I have heard the Scot Benson is not only animating inside after effects but he is also "drawing" in it too. An aproach wich I myself also take.

  4. I don't even animate, but your tutorials are so interesting I watch them anyways. Mad respect for all the jr animators out there, this stuff is complex!

  5. Wait a minute…. I don't animate?
    I don't even have any of these software programs, why do I keep watching this?
    Help! I'm stuck!

  6. Alternatively for the arms and legs you can use the pen tool to draw lines with a big stroke width. The line should exist of 3 points with handles so you can shape them in any way you want.
    Upside is that it doesn't have the puppet pin tool deformation where it sometimes doesn't have the correct width.
    Downside is that you'll need to parent the feet and hands to the specific end points of the line. But that can be done with "Create Nulls From Paths" (AE 2018+ or a plugin before that version)

  7. I have no experience with pins/bones in animate, since i mostly do frame by frame… so-
    I set the pins, but they always twist instead of going to where i want. I know there should be a bit of distortion, but mine don't move fluidly and don't quite rotate as well. The elbow doesn't rotate right and just twists.
    If you know what I'm doing wrong, please tell me!

  8. How did you get the mask selection on the eye to be the same shape as, well, the eye? it's always just rectangular for me. 🙁 I usually love your tutorials and was excited for this but in this episode there's a lot of things you don't show in the process that I've had to search up on other videos or find out myself through a lot of infuriating trial and error. not trying to hate, i just hope that this is something you can improve on the future i guess!

  9. Crowne Prince i want to tell something:
    1. have you nuthole win a award?
    2. have you ever trained kids to make animation?
    3. i have a band in Malaysia so would you join?

  10. i want to make like me, in the animations I'm black cat and i wear a white T-shirt it say "I'm with stupid" and black leatherjacket like Ozzy Osborne and wear 70s jeans and of course Vans. old skool shoes

  11. i think the way you did the walk cycle is good, but to make it look 10x smoother and all around better, click f9 or make an easy ease in/out bezier curve in AE and you can adjust it to your liking in the graph editor.

  12. Haven't watched the video yet but your character looks cute!

    This is just me watching semone do something far better than I ever could

  13. I absolutely L O V E this game but how the hell is it still alive, I'm amazed that some people are still making content for this game whether they're still interested in the or just late to the trend, thanks for the tutorial and gregg rulz ok

  14. To be honest, the animation just seems alittle too static to be considered NITW style, it's a good attempt but if there where less frames and alot more movement then maybe it would look alittle closer to the orignal animation, not bad though

  15. But my OC is well almost all white (almost like yours) and the t shirt is white too! But on the T shirt have a lil face of a fox. So how can I draw my OC in NITW style?

  16. I know this isn't on, but I have found your game show style for the newest season of scribble kibble interesting 😀 sorry I am trying to catch up on your videos. After a series of events has led to chaos in life. Glad to finally see some crowne prince again though!

  17. just found vid on my recommended I am a big fan of nitw and this was a very good tutorial I do have a question not related to nitw but a different game it is bl2 & bl3 (Borderlands) I kinda wish I knew what programs and other things they use to animate cause it looks gorgeous but I would animate a little bandit clan (4 people) that isn't that threatening but can fight I would like to animate their style as a hobby but mostly I like Borderlands 3 style no tutorial just info on what programs are used but I might edit this later on

  18. Does anyone have an recommendations for free animation software that would work as well as After Effects? Or at least something somewhat similar?

  19. ι нανє α ρυg σ¢ вυт ι∂к нσω тσ ιитєяρяєт ιт ιи тнιѕ ѕтуℓє

  20. yoooo I haven’t watched someone animate in After Effects before! I love the jointed paper doll vibe while setting points & poses for different sections

  21. Animating like ‘the liar princess and the blind prince’ I wanna play the game but I can’t find it in stores :p it’s also not that popular

  22. First off I wanna say the drawing of the (squirrel?) with the sign was adorable!

    Also, I wanna say I actually highly doubt my ability to do animation of any kind, but this at least gave me a basic understanding of how it's done so I know what to look out for and instruct in case I can get someone who CAN animate to help me out with a pet project of mine.

Leave a Reply

Your email address will not be published. Required fields are marked *