HOW TO MAKE SPRITE SHEETS FOR YOUR UNITY GAME - TUTORIAL

hey everyone and welcome back to Blackthorne fraud Noir here and today we will learn how to make sprite sheets in Photoshop and then import those into unity to make game ready animations for those having followed the two previous videos on how to draw and animate pixel art game characters this is the final follow up tutorial in which you'll learn how to get those cool animations into unity if you haven't watched those pixel art related videos though but have some cool animations ready to be brought into unity then of course this video will also guide you step-by-step along the way so here is a very simple animation of a jumping slime creature made using four shops timeline I now want to import this into unity sadly there isn't any export animation option inside of Photoshop so to do so we need to make a sprite sheet which as you'll see is really easy before creating my sprite sheet I'll head over to image image size and notes down somewhere my current images width and height which in my case is 34 pixels for width and 39 for Heights I'll then counts the number of images making up my animation of which in my case is 6 and multiply my width with that number of images which for me ends up as a value of 204 now I can create a new Photoshop file and type in the right dimensions for my sprite sheets so 39 pixels for Heights and 204 pixels from width this way I'll have enough room to place all the images and Mickey on my animation 1 mix to the other awesome however this white rectangle doesn't give us much indication of where our various images should be placed to help ourselves out we can enable the fourth off grid under the view show menus this will render out a bunch of lines which will make placing our images a lot more easy and accurate you agreed however may look like a complete mess so to tweak its settings head over to preferences guides grids and slices doing so will open up this cool menu in which we can change how many bold grid lines we would like every X amount of pixels here you should type out the width value of your images which in my case is 34 has four subdivisions cranking up this value will increase the amount of criss crossing lines making up your grid which again will come in handy when placing your various images on this sprite sheets I think I subdivision should be largely enough in my case now that the sprite sheet is all set up I'll head back to the file with my animation and grabbing the first frame of that animation and I'll use my lasso tool and encircle my whole canvas copying the image on it with ctrl C and then pasting that same image onto my sprite sheets with control V I'll now hit control key on my keyboard to be able to move this image around the sprite sheets and be able to properly place it since this is the first frame I'll put it at the start of my sprite sheets of making sure to place it well between these two lines since remember we need to leave enough room for the other frames of our animation I'll now copy the next frame of my animation and pasting it into my sprite sheets and placing it next to the first frame now when doing so try your very best to be consistent with where everything is placed in other words if the characters Lewis body parts is roughly one subdivision away from the edge of the canvas then do the same for the second frame here my characters left side was more or less 1.5 subdivisions away from the left edge and so once again try doing the same for the second image third and so on however here you see that my character is squashing slightly so obviously it's only normal that his left and right side get nearer to the edges same here whereas a result of dumping in the air my character is further away from the bottom age and near the top edge this amazing toughie first by promised that with practice this will be a no-brainer less than a five minute job to complete once you're satisfied with your sprite sheets it's time to save it inside of your unity project note that you can come back later and easily edit your sprite sheets if your animation in unity looks a little shaky or weird I will see in just a moment so head over to file and hit save has and then choose a location for your saved file which in my case will be my unity project heading over to unity you'll see that I now have this cool-looking sprite sheets of accept drag and dropping this into the scene view will give us some truly horrifying results our sprites are blurred and compacts together which is obviously something we want to change so I'll take a look at my import settings and start by changing the filter modes to points no filter this will remove all that ugly blur notes that you only really need to change the setting if you've created pixel arts or very very small sprites next up I'll set my sprite modes to multiple getting apply to I'll apply all those settings I can now thanks to having changed my sprite mode to multiple hop into the sprite editor and divide all these images into individual sprites you can slice up these sprites manually by simply left clicking with your mouse and dragging or and this is more recommended when it comes down to sprite sheets head over to slice and choose for a slice type grid by cell size now all you need to do is type in a width and height value for each sliced sprites these values are the same as for our sprite sheets so in my case 34 pixels white and 39 long I can now hit slice and you'll see that the sprite editor has automatically cut out our frames into individual sprites of super of course don't forget to hit Clym once you're done you're putting up my sprite sheet I'll shift selects all the sprites and drag and drop them into my scene view doing so will automatically create an animation which I'll have to save somewhere in my unity project to view this animation I need to open up the animation window which you can find under the windows menu and hitting the play button you can take a look at your animation now chances are high your animation is way too fast if that's the case then all you need to do is change the sample value right here increasing this value will get your animation playing faster whereas lowering this value will slow down your animation chances are also high your animation feel a little shaky or unappealing compared to why was in Photoshop the sole reason being you didn't place your sprites well enough on your sprite sheets so remember if that's the case all you need to do is change the rounds in your sprite sheets and then simply save your file with ctrl s and all those changes will automatically be updated inside of unity lastly you may very well want some frames to last longer than others in your animation to achieve this simply select all keyframes coming after the frame you wish to hold for a little longer and drag them over to the right and that will mark the end of the video I hope you found it helpful and will now be able to import your animations more easily from for shop to unity if you have any questions definitely go ahead and post them in the comment section down below and I'll answer the fast as possible you can also support me and my channel via patreon like these top supporters which would be so appreciated and help me continue making regular gamedev contents hitting the like and subscribe buttons would also be really awesome with that said stay tuned Cheers [Applause] [Music] [Applause] [Music]

Channel: Blackthornprod

Views: 796,310

Keywords: blackthornprod, noa calice, game dev, indie game dev, pixel art, sprite sheets, 2D, 2D animation, art, unity, import to unity, import sprite sheets to unity, ps, photoshop, make sprite sheets in ps, animation, episode 3, create animations, sprite editor, animator, export animation, how to make sprite sheets, HOW TO MAKE SPRITE SHEETS FOR YOUR UNITY GAME - TUTORIAL, step by step, beginner, easy, quick, simple, drawing pixel art, frame by frame, grid, ps preferences

Id: ou8VkQB2sos

Length: 8min 20sec (500 seconds)

Published: Fri Jun 01 2018