How to Draw and Animate Hollow Knight Characters - PS and Unity BEGINNER TUTORIAL (2019)

hey everyone so today I'm going to show you step by step how to animate hollow Knight like characters from start to finish that includes creating a character animating it and exporting it properly I'll put timestamps in the description if you'd like to skip ahead we'll be using Photoshop and unity just like team cherry did before we start I want to quickly note that taking inspiration from a game like hollow Knight might seem intimidating but if you look closely some of their animations are simple and beginner friendly as someone who loves making games I found art and animation to be my biggest hurdle so if you're like me I'm hoping this video will help you get started I'm also hoping you find it's easier than you thought so with that said let's jump right in to start let's open up a new Photoshop project name the project whatever you like choose the width of 300 pixels and a height of 500 pixels also change the resolution to 300 keep in mind these are settings I'm using for my project you should change this to fit your projects needs but if you're unsure just follow along with me this is a good size for a standard 4k resolution project first I'm going to set everything up we'll start by unlocking the background layer by clicking the unlock icon in the layer panel next we'll click the color fill icon in the bottom right corner select solid color and choose a color that is similar to a background in your game delete the old background layer and let's create a new layer to work on with control or command shift in so now that we have our workspace setup let's start drawing our character so I do all my drawing with the pen tool I would recommend doing it this way too especially for animating later if you're brand new to this tool maybe check out a pen tool tutorial but I'll cover what you need to know so you should be able to follow along first let's zoom in a bit by holding alt and scrolling on the mouse wheel with the pen tool selected left clicking once will drop a point clicking again will connect the points by holding and dragging you can make a curve ctrl or command is a shortcut to the Select tool which will allow you to adjust the handles of your curves the pen tool creates a path in the paths panel next to layers let's rename our path to head so with that follow along with me and we'll outline a head for our character [Music] so I sped this up a bit and I also went quickly for the sake of this tutorial but when you do this take as much time as you need [Music] okay so I'm happy with this now we're going to color in the outline press B to select the brush tool and make sure you have a brush selected with 100% hardness change the size to six pixels or to an outline size you prefer now let's choose black with the color picker in the top right we'll press P to go back to our pin tool and with layer 1 selected let's right-click our path and click stroke path we'll press escape to deselect our path and let's rename our layer to head outline our next step is to add color in the head first let's make a new layer and call it head color make sure the color layer is directly beneath the outline layer now with the outline layer selected let's grab the magic wand tool with the magic wand tool selected let's click inside of the head here we would normally grab the paint bucket tool and fill our selection however we get a halo effect from photoshop's anti-aliasing to solve this we can head to select then modify and expand by 2 pixels I would also recommend keybinding expand to f5 or whatever is comfortable for you just press your key behind before you bucket fill so just to recap for coloring select the outline layer use the magic wand tool to make a selection choose your color layer grab the bucket tool choose a color press your expand hotkey and click the color fill if you've made it this far you've done the hardest part what's left is just repeating this process for the rest of the character I'll speed this part up for you but I'm going to do hair I'll give him a jacket and some arms and legs I could have left this out but I really wanted to show you that the rest really is just the same process also it might seem like extra work to draw everything on separate layers but trust me it's way easier to do it this way you'll see once we get animating one quick note as well if you want to be extra organized with your layers you can group them to do this control click multiple layers right click and select group from layers for example I grouped the head outline and head color into one group now that our characters finished let's get animating before we start take a quick look at Halle Knights idle animation the notice the only changing parts of the animation are the cloak sure the head and dagger move but they don't change this is why I'm such a big fan of this style team cherry does a lot with a little when it comes to animation for your character focus on one or two things that will be moving for my character Bobby animating his jacket and hair okay let's quickly set up our animation workspace to do this head to window and select timeline you'll see a timeline window pop up in the bottom of your screen click create frame animation okay finally let's create a new group by clicking the new group button in the bottom right let's name our new group to frame one and drag everything except the background into frame one set your animation timeline to repeat forever and set the delay to 0.08 seconds this will give you a frame rate close to holiday let's click the new frame button in the bottom left a new frame will appear this is where you can see all the frames in your animation let's duplicate our frame one group in the layer panel and name it frame two in the timeline let's make sure only frame one is visible on the first frame and the same for frame two okay now with all the setup done we can actually start animating if you followed everything up to this point I think you'll find that this part is actually quite simple let's select a second frame in the timeline head to the paths panel and select hair if your path isn't lined up like mine select the path and move it with the arrow keys now all we're going to do is move the points in the path at the end of the hair slightly once that's done head back to the lair panel and open your frame to hierarchy navigate to the hair outline layer and erase it all struck the path of the new hair you made making sure the hair outline layer is selected eraser hair color layer and fill in the newly created outline with the bucket tool you might need to use the brush to fill in some corners now we'll repeat this process except this time we'll do it for the jacket instead of the hair so you'll notice we now have two different frames let's repeat this two more times so we have a total of four unique frames I'll speed this part up for you I figured I'd leave it in just in case you want to pause or slow it down and take a longer look at what I'm doing while this is playing there's something I want to note when you're doing a new frame and moving the points of your path they only have to move very slightly also be sure to add variation to how you're moving the points around for instance if the second frame you move the bottom corner of the jacket right in the third frame move it left we can add variation to our animation by duplicating the frames and changing the order for a total of eight frames you don't have to do this but I find it's a quick way to add a bit more life to your animation click the new frame button four times let's duplicate our four frame groups in the layer hierarchy the duplicated layers will be frames five through eight let's change around the order to whatever you like just make sure none of the same frames touch for instance don't have frame one next to frame one copy all right we're all done animating our idle animation now all we have to do is export to unity and we're done first go to file save as and save a new copy of your Photoshop project at something else I like to just add the word sheet to the end like a spreadsheet now delete the background layer create a new layer and add a little red dot where you want your pivot point to be head over to this timeline drop-down menu and select flatten frames into layers this will turn your frames into layers now delete everything except for the new flattened layers this is why it's a good idea to save a new version of the project let's go to file export layers - files be sure to export directly into your unity project somewhere in the asset folder here I'm exporting to a file called main character idle now click run let's open up our unity project create an empty game object and add an animator component let's create a new animation in the animation window set the samples to 12 and drag in each frame that you just exported hit play on your animation let's now head to our sprite editor and move the pivot of each sprite to the red circle we made when you click on a time in the animation window it will automatically select the sprite that is played at that time so what I'm doing here is I'm clicking on the time in the animation window then I click on the sprite editor window I move the pivot and select apply now all we have to do is react sport a project to get rid of that little red circle to do this head to the original Photoshop project and redo the export process except this time skip adding the extra red dot layer also when you re export be sure to export in the same place with the same name so the sprites are overwritten the pivot points you made will still be there inside unity when you head back into unity your animation will be finished that is it for this tutorial if you made it this far thank you for sticking with me I hope you found this helpful if you liked it be sure to subscribe I'll be posting more content like this in the future other than that thanks for watching and I'll see you all next time

Channel: GamesByGrigg

Views: 125,316

Keywords: HollowKnight, Gaming, Tutorial, how to, indie game dev, game dev, hollow knight, Unity, Photoshop, photoshop tutorial, unity tutorial, how to draw hollow knight, unity 2d tutorial, hollow knight animation, game devlog, game design, team cherry, game art, sprite sheets, how to draw, video game, game animation, unity animation, frame by frame, indie game, how to animate, game development, unity 2d, sprite editor, how to make games, sprite sheet, run cycle, noa calice

Id: oKUg-uRHk-4

Length: 15min 32sec (932 seconds)

Published: Mon Jul 22 2019

Reddit Comments

[u/JustWood40]

I like the c418 soundtrack

[u/Opyure]

This is fucking fantastic. Very informative. Probably one of the best tutorials I’ve seen.

And your voice is so smooth and sexy. I just want to put in some headphones, curl up in a blanket and listen to this tutorial on repeat while I fall asleep.

Thank you for doing what you do, my good sir. You’re the teacher we need but don’t deserve.

(Your game looks sick as well)

Shalom, brother.

[u/abhishankb]

For someone who is about to start his game development career from scratch for the second time, this video is an amazing thing to have. Thankyou GamesByGrigg, I really appreciate this tutorial. You won't even realize what this means to me.

[u/tesfabpel]

Just asking a question (not to criticize)...
Wouldn't it be better to create the character using a vector-based program like inkscape or illustrator and then convert it to raster for the game engine?

[u/Jajuca]

Holy Fuck! I bought my first drawing tablet 3 days ago and I was literally looking for a tutorial exactly like this. Thank You!

Also Ive been trying to paint some in game objects like trees, rocks and chests but I can never blend the paint to make it look good. Any advice on painting in game assets?

[u/Shirin20]

Really great tutorial. I would like more vidoes on movement and attack animation.

[u/deadyourinstinct]

yeah this is well done my dude. apparently theres some really good shit in photoshop that ive been unaware of for years

[u/rockseller]

Thank you very much for sharing. I have a recommendation, instead of creating 8 frames animation with repeated layers to make it 8 frames length from an original 4 frames, you can use Unity animation tool to create an 8 frames animation and there you can repeat the original 4 frames as much as you want

[u/[deleted]]

Really nice tutorial! Still I'm sure there must be a better way to do it then remove and refill the color in each frame after changing the vectors. Maybe working with vector first applications might fix that problem? Have you ever tried to work with Illustrator or maybe checked out the new Blender 2D workflow (this is not an exhaustive list - I bet there are more apps for that)?