How to Create 2D Sprites & Import Them into Unity - Workflow Tutorial

I've been seeing some comments asking me to go through how I create my Sprites so I thought I would throw together a quick video going over my process for creating Sprites and importing them into Unity the same way I do whenever I'm working on the game in my devlogs I'm not going to focus as much on the drawing or art Theory as I don't think I can properly explain everything this video is going to be more of a workflow overview I'm using credit to draw my Sprites you could use Photoshop or any other graphic design app that has brushes I'm just going to be using krata because it's free for my NPC and enemy Sprites I usually make the artboard 1000 by 1000 you definitely don't need to make it this big but I've been making everything this size just for consistency you could probably make the Sprites 100 by 100 if you wanted to but just make sure you're consistent but also adding too many large size Sprites into your game will probably reduce the performance I usually do a rough sketch to generate some ideas I then use this layer as a background guide when I'm creating the outlines alternatively you could do this on paper and take a photo of the sketch and then use that as a guide so now I'm just creating outlines on a new layer it's also good to know ahead of time which parts are going to be animated and to separate those pieces into different layers another key thing to watch out for is to keep your brush size consistent between your Sprites because every artboard that I make is the same size I also want to keep the brush size the same as well which for me is around 20 pixels after I finish with the outlines I move on to the fill layers I'll create a new layer again underneath the outline layers for the fill colors foreign ahead and the Sprite looks a little different now I ended up changing how he was holding the staff and gave him a hood instead now that the Sprite is finished you can see I've separated the layers into groups for each body part you can see I've separated layers for the head the body the arms and the staff and inside of each of these groups is an outline layer and a fill layer it's good to keep these separate in case you need to go back and make edits to your Sprite the nice thing about creda is that it gives you the option to save the project as a PSD file they can be edited in credit if you want to make a change in the future and they can also be imported directly into Unity but we aren't going to import this file into Unity just yet because the spread is going to have multiple animated parts we are going to turn this into a Sprite sheet first I'm also going to go ahead and save this original file and keep it around just in case I want to edit the wizard in the future make sure you give everything enough space so the slicing won't get messed up in unity so now that we're in unity I'm just going to go and run through all the steps that I take when adding a new Sprite or prefab into a game we're going to go into our assets panel down here and we're going to find our wizard Sprite sheet that we made and in the inspector we want to change our pixels per unit to 1000 and we want to change the Sprite mode to multiple because this is a spreadsheet and I'm just changing it to 1000 just because that's how based off of the size of the original file that I made that's just how it's going to scale for me so I'm going to click apply I'm going to open the Sprite editor and you're just going to want to go to slice you're going to make sure automatic is selected and you're going to click slice and from there we're going to click apply we're going to close the editor and now if we expand this you can see our Sprite is broken down into these pieces I'm just going to go ahead and start dragging these onto the canvas okay so now that we have all of our pieces here uh just going to group them up to one group of objects and then inside of that group I'm going to add a sorting group and now that we have a sorting group we can choose the order that all these Sprites are going to be layered in so I want the head to be on the top so I'm going to put that as three I'm going to put the staff maybe it's two and the arm says one I think that makes yeah oh no I'll put the arms this two and the staff this one there we go perfect this isn't laid out quite right yet but uh so now I'm going to go ahead and drag this entire thing into my prefab panel down here just going to delete this other one that I made so now this wizard is a prefab so I'm going to go ahead open the prefab here and I'm going to rename these into names that actually make sense so head oh you know what I should do actually I'm going to call this wizard and then I'm going to call this staff arms and body I just realized I probably don't want the head to actually be the parent container for this so I'm just going to go ahead and change that [Music] okay now that we have our Sprite organized and everything's in the correct spot I'm going to click on the prefab I'm just going to add some components so we need a collider I'm just going to add a capsule collider 2D and we also need a rigid body 2D and inside of the rigid body I'm just going to go ahead and change this to no gravity because for me it's a top down game and I'm also going to go ahead and freeze The Zed rotation you can keep the rotation unfrozen if you want collisions to cause the Sprite to rotate but for me I don't want that I'm also going to open the capsule collider and just get this to fit nicely kind of around the wizard in a way that I think makes sense just something like that I think it's fine one thing that I forgot to do and I always end up making this mistake is I'm just going to reopen the spread editor and you want to be aware of where your anchor points are for each of your pieces inside of the Sprite sheet this is mainly important if you're doing an animation like a walking animation for example you'd want the anchor points to be located not at the middle of the leg but at the top where it connects to the body that way it rotates where the connection is happening and not in the middle of the leg but for me I think for this wizard the way we're going to animate it I think these anchor points are fine he doesn't even have legs the and this is like kind of close to his neck Anyway the head anchor points and the staff it's kind of in the middle so it doesn't really matter so I think we're actually fine but if you're making a Sprite just be aware of where your anchor points are it's gonna matter a lot when you're doing the animations uh so now back into the wizard Sprite we can go ahead and add a animation animator that's what I'm calling it and we're going to go ahead and create an animation controller so inside of my animations folder the animation directory I'm just going to go ahead and create a animation controller I'm just going to go ahead and call it wizard and then inside of this I'm going to go back to the wizard and I'm going to highlight the wizard controller and add it to the animator component now inside of the wizard animation controller we also need to create an animation so I'm just going to go ahead click create animation I'm going to call this idle because that's the only animation I need for this right now and I'm just going to go ahead drag the idle animation into the wizard animation controller and now are we are ready to go ahead and create the idle animation inside of the animation window now I'm not going to get into the details of creating the animation itself as I know I'm not very good at animations and there's a lot of room for me to improve but there are much better videos on YouTube going over the best practices of Animation Blackthorn prod has a pretty good video that goes over creating idle walking and jumping animations for 2D characters so I would check that out and that's pretty much it you can link a bunch of other animations here too but that's pretty much it for the process that I go through for creating a Sprite and importing it into Unity so hopefully someone was able to find this helpful and yeah I'll see you in the next devlog

Channel: Gamedev Greedable

Views: 40,786

Keywords: Gamedev, Devlog, indie, game, developer, roguelike, rouglite, indie game, topdown, 2d, unity, c#, Development, binding of issac, cult of the lamb, enter the gungeon, nuclear throne, greedable, greed

Id: l7aEJufAXfk

Length: 9min 0sec (540 seconds)

Published: Mon Nov 14 2022