HOW TO MAKE 2D GAME ANIMATIONS IN UNITY - BEGINNER TUTORIAL

welcome back to black thorn prod I'm Noah so I'm currently busy working on my game jam game for the second black thumb prod game jammer which challenges developers to make a game in one week along the theme of many planets if you're a game dev and I have some free time and definitely consider joining the farm now however I felt like the channel has been too quiet lately because of my holiday and later a bad flu so I decided to make a tutorial sharing the process I go through when creating and animating my 2d game characters this is a topic I am very comfortable with having used the techniques and tools shown in this video for all my games for the past two years it's very basic easy stuff aimed at beginners wanting to bring their 2d characters and worlds to life knows that I'll be using Photoshop to draw and color my characters and unity to rig and animate them but you can use another 2d drawing application to replace Photoshop if you like such as or Krita so the first step I go through when creating my 2d characters is the sketching phase this is the phase when I'm dreaming up the overall design and proportions so I make a new file that is 5 inches long and 7 inches wider when sketching I sometimes gather some reference pictures to inspire or help me out when doing so so if I'm planning on making a lizard warrior for example I'll search up pictures of lizards and Komodo dragons at this point I'm staying very rough and loose there's no need to worry about smooth clean outlines or details I'll come later try and come up with several sketches often your first ideas will be your worst ones so flush them out your system quickly to get to the more interesting clever character designs all right so I'm going to bring to life this simple and cute Scouts and warrior character now I like in a few of my other animation tutorials on this channel where I show you how to anime stuff directly inside a Photoshop using a frame by frame animation technique we'll be using a simple boom based method in this video but first of all what's the difference well frame by frame animation is the act of drawing by hands every single frame that makes up the anime so for example if you wanted to animate a character swinging a sword then you would draw him looking like this and this then this and so on and then once those drawings play in a sequence it gives the illusion of movements and this can create some very smooth appealing animations plus you have the freedom to deform your characters in any way you like without the constraints of a skeleton regen which brings us to the second method which is the boom based one in other words we just need to draw the character once and set up a virtual skeleton we will use to move all of his different body parts either method is better than the other they're just different and by trying a bit of both you'll find out which speaks best to you frame by frame is more difficult and time-consuming in my opinion and Bombay's can result in more robotic looking animations and also give you a slightly harder time designing characters of course both can leads to absolutely stunning characters and animations all as needed is practice and patience anyway with the sketch complete I'm going to move on to the inking phase this is when I clean up the rough outline of my character with smooth clean lines but since we also wants to animate this character I'll needs to make sure to draw each body part I wish to move independently on a separate layer so I can then assemble him back in unity and move rotate and scale each body parts independently off the rest so in this case the character is made up of a paid shield body a sword arm and two legs so I'll make a layer for each of those parts drawing the corresponding body part on that layer with a thick part round brush [Music] obviously the larger and more complex your character the more challenging will be to animations so try and make your characters simple especially when starting out with only a few moving parts so I'll make sure to color my character again making a new layer for each body parts so for example I have a head layer here with these skeletons head outline filming a new layer under the head layer uses to color the head and then shift sides both layers and merged Emma and of court repeat that with all the other body parts and quick to stuff drawn on top layers will render in front of stuff drawn on lower layers so for example if the shield was behind the body just left-click on the shield layer and drag it on top of the body layer so that it renders in front of it okay so the character has been drawn and colored and is now ready to be imported inside of unity to be rigged and animators I'll make a new portal file to do so I'll start by selecting the head layer and hit ctrl C to copy the contents of that layer and now I can hatch this new file and paste a head in there with control V and I'll repeat that process for the other body parts chances are high all the sprites are stacked on top of each other so make sure to separate stuff nicely using ctrl T you once that's done you should have a sprite sheets that looks something like this I'll see on my keyboard to crop the file in other words get rid of all that useless empty white space and lastly I'll disable the background layer so that it's transparent and now I can head up to file save has and save this Photoshop file inside of my unity project what's that done you can hop inside of unity and indeed the character sprite sheet should be right here awesome we're making great progress here anyone else likes the sprite sheet and take a look at the import settings over here you won't be using most of these this sprite mode setting however is important so currently it says to single and as you can see dragging and dropping this spice sheep pops into the scene all the characters body parts looking like this and we don't want that we want each body part to be a separate sprite which is why I said this sprite molds to multiple now I'll hit apply save those changes and enter the sprite editor here I can slice these sprites into independent pieces to do so I'll head up here to slice and choose automatic and then hit slice again by left clicking on the various body parts you'll notice how rectangular boxes have been drawn over them all I now need to do is hit apply up here close the sprite editor and tada my sprite sheet is now made up of multiple objects I can left-click on and drag into the Cina you can if you want assemble your character here helping yourself with the portion file if need be you also remember to tweak the order and layer inside the sprite renderer components to make some body parts render in front of others so a higher order and layer will get things rendering in front and a lower order and layer will get them rendering behind those legs the head and try rotating it but it doesn't really behave the way I would like you to instead of rotating around the neck area it rotates around its center which doesn't look right same for this a sword arm I would like it to rotate around beef shoulder or not its sensor well to fix this we needs to head back to the sprite editor and change the various body parts pivot points which are these as small and blue gizmos we can hold the left mouse button over and drag around so I'll move the head one down here so that it rotates up moves and scales the head from that more neck like area or the legs I'll move the pivot points up here I'll move the arm one near the shoulder I'll leave the shield one at the center and finally move the body one by the hips oh and don't worry it with practice trial and error placing pivot points will become a second nature to you once you're done hit apply and close the sprite editor now your Carol needs to be reassembled a bit again but once that's done everything should be moving any more believable way super before moving on now make sure to rename your Contras various body parts to keep things clean and organized this might seem like an extra annoying step but as you'll see during the animation process this will save you a lot of time in the long run ok it's now time to do some parents hangar words building a mini hierarchy of our character so that certain body parts affect others for example I would like to have the head and arms rotate smooth and scale whatever rotates move and scale the body I would also like to have a route skeleton character object I can use to move rotate and scale the entire character all at once so I'll make a new empty game object called character and place it roughly at the center of my character now shift select all the body parts and drag them inside of this character empty game object so this way when I select that game object and move around all the body parts inside it also move and I'll select the head shield and weapon and pair those to the body this way manipulating the body will also manipulate the head and arms so as you can see by simply parenting objects to other objects we've created a solid little rhaegar and we're now ready to animate the character so I'll head over to window animation and animation again this will open up the animation time Lightner I also like to be route on my character and now click on this create new animation button you know simple prompts me to see my animation somewhere in my project so it's a good idea to make a folder called animations and then within that folder make a folder specific to a certain character in this case skeleton and now I'll save all the animations related to that skeleton in there I'll call this first animation tests and now I have access to the timeline you know this is the play button you can click on this to view your animation but obviously there's a none for now so I'll hit this red record button from now on anything off the character that we move rotate or scale will be considered part of the animation so if I left click on the timeline for example and move this white line to about 30 milliseconds and then select the body and rotate its little diamond shape to appear and hitting the play button will show off our new animation this one featuring the skeleton rotating his body and snapping back into place these little diamond shapes are keyframes by the way and they store information about where certain objects was and at what time for example this keyframe restores the body with north zero seconds in the animation and this keyframe has the body with some rotation value at 30 milliseconds and so from here to here the body moves to go from that keyframe to this one if you get confused as to what keyframes are related to what so just take a look here where there's a detailed description of exactly that's let's say I grasp your head now and rotated it at ten milliseconds well hop more keyframes appear so as soon as you've finished animating just make sure to left-click again on the record button so you don't accidentally animate anything you don't want sir you can of course also move keyframes around the timeline just do so by left clicking on them and dragging so for example say I wanted to speed up the rotation of the body well instead of having that last 30 milliseconds I'll make a last only 15 to select multiple keyframes at once you simply need to left-click and drag a marquee over the chunk of the animation that you want to select so you can also click the topmost keyframe to select every keyframe on that column oh and before I forget to zoom in and out of the timeline just use the middle mouse button so that's the basics of animation in units a simply selects pieces of your character and move rotate and scale them along the timeline know that you might encounter an annoying unity bug while animating where the objects you try to move snaps weirdly and red console errors pop up but if that's the case just make sure to add properties before moving rotating or scaling your objects so in other words if you want to move your head in the animation click on this add properties button click on body there you'll find a cave just like our hierarchy set up and then click transform and finally position this will automatically set keys related to the head position at the start and end of your animation and now you'll be able to animate a head without any bugs bothering you it's a bit time-consuming and annoying but is the only workaround I found for now all right just before finishing this tutorial let's create a simple idle animation for this skeleton this is the animation the character will play when standing still so first of all I'll select all these keyframes and delete them by pressing the Delete key on my keyboard now start by adding a position keyframe for the body on the timeline and that's like the last keyframe related to that and move it to about 30 milliseconds one-all seconds for an idle animation loop is a bit too long I think there are 15 milliseconds I'll move the body up slightly and now if I press play you'll see that the character appears to be breathing his chest rising and falling I'll now add a position keyframe for the head and move it down around 7 milliseconds and then move up more 23 milliseconds to create some overlapping action I mean the whole animation feel more smooth and interesting and finally I'll rotate the shield and sort of it's halfway through the animation and always make sure that the first and last keyframes are the same in this sort of animation this way and loops smoothly to do so just select all the first keyframes hit ctrl C to copy that and then paste those at the end with control V it has easy as that and there we go we have a simple little idle animation you can of course add more to it or even change the overall speed of the animation if you like for example if I wanted it to be faster I could select all the keyframes and then left click on this blue bar to squash the keys together this will speed up or I can pull all the keys apart to slow things down with that saying I'll wrap up the video here now we're just skim the surface of game animation here all I've taught you is how to assemble a character and a few basic animation tools in the next video in this 2-d game animation basics series we'll create a cool idle run and jump animation for a player character they're all put into practice the basics we quickly covered in this video and well has learned a couple more cool tips and tricks in the meantime thanks so much for watching an extra thank you to these awesome people who support me and my channel financially via patreon and of course best of luck to all those taking part in the second black from fraud game jammer I'm just so excited to see what you all come up with or I have a great Cheers [Music] you

Channel: Blackthornprod

Views: 402,058

Rating: 4.9639225 out of 5

Keywords: blackthornprod, gameDev, unity, tutorial, noaCalice, c#, programming, art, animation, game animation, basics, 2d, 2d game animation, movement, bone based animation, frame by frame animation, unity animation, timeline, keyframes, drawing, character design, ps, animating a game character, HOW TO MAKE 2D GAME ANIMATIONS IN UNITY - BEGINNER TUTORIAL, rigging, skeleton, idle animation, run animation, sprite editor, animation principle

Id: EmbA-AitPow

Length: 14min 57sec (897 seconds)

Published: Sun Feb 24 2019