HOW TO CREATE 2D GAME ANIMATIONS - PS & UNITY TUTORIAL

hey everyone and welcome to Blackthorne prod I know now recently I've been playing a magical game called hollow Knights a challenging platformer with a unique and beautiful art style the world feels lush the characters that inhabit it alive dangerous and interesting and all this wonderful vibe and artistic flair was achieved using Adobe Photoshop and the Unity game engine and so I will not be showing you how to draw or paint hollow Knight style characters I will give you a detailed look in this video how to animate game characters using Adobe Photoshop like team cherry did with their epic insect worlds now to keep things clear and simple I have animated this squishy bouncing ball and will then show you step by step how to take your animated character and import them into unity using sprite sheets so by the end of the video you will have the knowledge you need to make frame by frame animations for your own game projects with that said let's get started so I have this new Photoshop file opened up with a simple straight line I drew on the default background layer representing the grounds the first thing I need to do before beginning to animate is open up the Photoshop timeline to do so head over to window and choose timeline once that's done you must create a new frame animation you'll now see one empty white frame on the timeline and underneath it a certain amount of seconds you can basically choose here how many seconds you would like this particular frame to last let's now draw something on this first frame I'll begin by creating a new Photoshop layer and call it frame one I'll then draw a simple ball shape obviously to see any movement whatsoever I need to create at least two frames so to create a second frame all I need to do is click on this little paper icon you'll then see a second frame appear in the timeline however you'll notice that the ball we drew on this first frame of cold frame 1 is still visible on frame 2 I must make sure to hide this first layer on frame 2 now if I click on the various frames you'll see that the ball is visible on frame 1 and not on frame 2 so let me now create a second layer call it frame 2 and straightaway select my first frame in my timeline and hide the second layer on that frame on the second frame however I will draw the balls NYX pose I'll simply get it to squash a little it's useful however to be able to see the previous frame or frames when animating in this style so simply enable the frame one layer on frame to lower the opacity on that frame 1 and this way you can tweak your animation but with a better visibility over previous pauses remember however to hide this faded ghost layer once you're done to view your animation you can now simply hit the play button if you want your animation to loop simply go over here and choose forever of course our animation doesn't look very interesting for now but by adding more frames our character will slowly come to life also remember to play around with the timing of each frame so for example if you would like some part of the animation to hold a little simply bump up the time to 0.2 seconds for example once you've finished the sketched out animations you can of course refine your lines which will probably be a little messy and add color all right once you are satisfied with your animated creation it's time to import it into unity to do so as I said at the start of the video we to create a sprite sheet which happens to be very easy I'll start by selecting my crop tool and crop the file has to leave the least empty space possible once that's done go over to image image size and take notes of the pixel dimensions of your current file then counts the number of frames your animation has you can now create a new Photoshop file and give it a pixel width equal to the width of the file you animate it in multiplying with the number of frames your animation has simply type in for height the height of the file you animated in now we have a Photoshop file with the right dimensions for our sprite sheets our job is to now copy and paste each frame of our animation onto this sprite sheets making sure to carefully spaced out each frame equally so our animation doesn't get some strange jittery movements it would also help however to have some sorts of grids we could use to have a clear idea where each sprite should be placed you can find such a tool by heading over to view Shore and selecting grids chances are high this grid will look a little weird to tweak this grid head over to edit preferences and choose guides grid and slices you'll be prompted to type a number right here type in the width value of the file you animated your character in this way you can clearly see where you will need to copy and paste each frame you can also increase subdivisions for more precision note that all this may seem a little complex and time-consuming but once you get used to it this process is smooth and quick to put into practice all right I'll now head over to the file I use to animate choose the first frame on my timeline select my frame one layer and finally grab my lasso tool and drag a marquee over my ball I'll then copy and paste my selection onto my sprite sheets pressing ctrl T on my keyboards I can now move this first frame at the start of my sprite sheets I'll then continue this process for each frame of my animation using my grid to space each frame correctly and there we go our animation is ready to be imported into unity so I'll do a quick PNG exports inside of unity I'll grab my newly made spreadsheets and choose four sprites modes multiple I'll then use the apply button and open up the sprite editor as you've probably guessed I must separate this for now singular sprites into multiple sprites so I'll click on slice and choose grid by cell size for type 4x I'll type in has usual the width dimension of the Photoshop file we use to animate the character in and for y the height dimension of that same file you can now hit slice and you'll see that unity has cut up our frames into individual sprites awesome last but not least I'll create an empty game object reset its transform settings and call it character I'll add to this empty game object a sprite renderer I'll now bring my animation to life first of all I'll head over to window and choose the animation window selecting your character empty game object hits create new animation you'll be prompted to select a location for that animation as well has give it a name once that's done move the window over here shift selects all the sprites that make up your sprite sheets and drag and drop them into the animation timeline you can then replace the animation window so as to see your scene and then hit the play button you'll be greeted with a less than satisfactory result the animation will more than likely be in very fast to change this annoying fact simply tweak the samples value the lower this value the slower the animation and you guessed it the higher it is the more speedy your results if you want some frames to last longer than others you can of course left-click on the frames and move them correspondingly for example say I wanted my first frame to hold for quite a while all I would need to do is select all of my other frames and slide them further down the timeline you'll now see that my ball will remain in this pose until frame two is reached so in shorts the further apart each frame is the longer they will hold and with that I will wrap up the video I thank you so much for watching and hope you found the tutorial helpful don't hesitate to join the blackthorn prague discord server and show me and the community the animations and art you made using photoshop and unity you can also hit the like and subscribe buttons if you enjoyed the content and want to see more lastly you can head over to Twitter and follow me there for regular character design posts alright with that stay tuned have a great day Cheers [Music] [Music]

Channel: Blackthornprod

Views: 333,566

Keywords: blackthornprod, animation, game animation, 2D, video game, indie game dev, noa calice, how to, ps, photoshop, unity, tutorial, frame by frame, sprite sheet, HOW TO CREATE 2D GAME ANIMATIONS - PS & UNITY TUTORIAL, create, make, traditional, hollow knight, team cherry, keyframes, layers, import, export, sprite editor, draw, bouncing ball, squish, easy, quick, timeline

Id: 2o5HerzDohU

Length: 10min 16sec (616 seconds)

Published: Mon Mar 05 2018