Bringing 2D characters to life with sprite rigging - Unite Copenhagen

hello how are you fine okay are you getting tired at the second day at unite you'll want to go downtown for the million bars that we have reserved for you yeah okay thank you for being here I know is the last presentation of the day so you all might be very tired but you're gonna have fun today so it's gonna be worth it so we're gonna cover a very interesting topic today one of the most exciting things for me which is 2d and animation in 2d the talk is called bringing to the characters to live with sprite rigging workflows in unity we will see what this means in a second my name is Arturo I'm games evangelist at Unity that's my email that's my Twitter account if you ever need anything if you ever have any question feel free to reach out to me I will always respond probably I will and have the answer for all your questions but I will respond at least so you have that okay so let's start these are our goals for today's presentations the first thing once you walk away from this room today is that you will be able to understand the pros and cons of the different animation techniques the other one is that you will learn the workflow on importing rigging and animating to the characters using unities tools and the first one third one is to understand how the 2d animation and rigging packages fits into a game development workflow specifically in the unity setting but yeah maybe in your specific case might be different so you will have the knowledge to know when to use it or when not to use it this is the agenda for today it might seem like a lot of content and it is because it is a lot of content but in reality is very simple the goal here is not for you to remember all the steps that I mean I'm gonna be doing today the goal is that you know the tools that you know that those things exist how they they they they work and then once you decide to apply them in your games you can you can just go to the documentation and implement them yourself so continuing first way of creating animations are you familiar with the frame by frame approach right if you are that's perfect if you are not basically it's something an omission technique very very common in in cartoons and and some of the scenarios specifically in games one of the greatest examples is copied have you played cop cop it raise your hands okay now keep your hands up if you have finished copied okay nobody Wow no worries I haven't finished it's too difficult but yeah what they do and there's a nice GDC presentation online on YouTube what they do is hand-drawn animations they could be 100 or they can be digital turn animations they have multiple frames each frame has a slight change and what they do is they go from one frame to the other frame and by switching these frames at 24 plus frames per second we get the idea of of movement right it's a very common approach there's a lot of information everywhere about this approach now what we want to understand about this approach is that in from in one side you have a lot of control or the artist has a lot of control over the animation overall because they are drawing each frame so they can decide what color on which specific pixel what to to deform on every specific frame that's good to have more control now the downside yeah and probably you you have noticed is that you need a frame per well you will have multiple frames for animations and imagine you need to have multiple animations and the size of the of the memory required to run your game increases in some cases you don't care but in most cases you you care right one because your build is going to be large but if you're running space especially in mobile on mobile devices that means you need to allocate more memory to mana to represent these animations okay on the other side we have this other approach which is the skeletal based animation now instead of having each frame per well instead of having multiple frames and one sprite per frame what we have is a drawing okay dividing it divided in multiple pieces HP is representing one part of the body or one part of the of a piece in a I'm not going to say character because you can use these over other things that are not characters but then you have these pieces and what you do is you create a skeleton and then you tie the bones in that skeleton to each one of those pieces so if you move a bone or a key or a hierarchy of bones then you will be moving all the pieces attached to that to that moon so this is an another example flipping that using this this approach now a small exercise for you let's imagine we're creating this game right it could be I don't know a farm simulator for mobile devices and we have this character this character is a character that is going to be explaining us our goals or tasks or etc this character needs a lot of animations and this character in particular has to be updated every time a new system comes right so if it's Halloween we want our character to have I don't know the face of a pumpkin if it's Christmas we want this character to have a Santa Claus cut etc so this is what we want to achieve which animation technique should we use for this particular case just take a couple of seconds you maybe have the answer because of the animation style that you can see here but okay instead of just giving the answer list let's see why let's think why we we're selecting this answer the answer is okay skeletal based animation why because we're having a lot of animations so I need a mobile game so I don't I don't want to have 50 megabytes worth of textures just to have all these characters emissions so imagine the the next season I want to have the Hat and the only thing I'm replacing is the hat I'm not adding any extra animations so if I were using the frame-by-frame approach I will need to basically duplicate all the files that I have in my project if I'm using skeletal I already have information about where the head is I could simply attach another sprite to that bone in particular so that's good I just have this character once and this is important why because these animations are being evaluated in the CPU okay so yeah well I'm using less memory in most cases I'm using more CPU in general ok so this is the this is the first example now this example this is another game imagine some things are happening on the foreground and we have these dogs walking on the very background they are not doing anything besides just walking I'm not gonna be able to interact with them they're just moving from one side of the of the of the screen to the other which technique and and by the way we will have a lot of these dogs walking there I don't I'm not sure how many we have their tents or something which technique should we use in this case skeletal or frame by frame based animations now again take a couple of seconds you maybe have the answer the answer here is for runtime we're using a frame by frame approach why because we want we don't want to have the CPU evaluating animations every every every frame right we just want to have a copy of all my textures for the walking animation may have just three or four frames and I can just replay it everywhere in the background and I'm not pushing more stuff to the to the CPU which is great to have now in this particular example what I'm doing is taking kind of eye of a hybrid approach because to animate the dogs I'm actually using a skeletal based approach but instead of just evaluating the animations what I did was I exported those animations as frames so I have them as frames and I'm using a flipbook approach so it's kind of like a hybrid approach but the actual animations were made while are being run using frame by frame approach so what can we achieve with this way and we try to a specific type of character or can we do anything we want and the answer is basically we can do whatever we want with a skeletal based approach like here we have a humanoid character a very organic character we can have more complex characters kind of giving the idea that we have 3d going on although we we don't have it and we can also have characters that doesn't necessarily remind us of any any particular object I characters that have neck that is made out of a cable or a rope with multiple legs etc and this character is the one we're going to be using today for the fourth of them okay so how do we start the first thing we need to do is we need to open the package manager and make sure that we have the 2d animation package as most things in unity these packages are free so if you're using unity any versions you can just go ahead and import that package so I went to the package manager to the animation I install the package as you can see here I'm also gonna be installing all the dependencies that I need in this case are treated to the common mathematics and the 2d sprite packages so as soon as I install this one I will also be installing the rest of the dependencies that I need to solve so there's the first step now the second step is importing the file with my character I need to import the actual sprite or the actual PSD file that I need in my project now for this use case in particular we won't be using a PNG or a jpg or even a PSD file what we're going to be using is a special type of Photoshop file with the extension P be so this is this is this is something that we need the V stands for big so it's a Photoshop file that is bigger okay so if I just simply go to my files Explorer and I import a PSV into into unity the same way we always import our packages unity won't know what to do with that file it's just going to be there but it unity doesn't know how to manage this file for that we have another package and this is the the PSD file so you can see that everything is separated into different layers each piece of my robot is separated into a different layer automatically the PSB importer is going to detect that and is going to generate one sprite for each one of my of my layers so just be careful not having a Peaks pixel with a color somewhere else in that layer otherwise you really will try to make a larger sprite just just be careful okay so this is how it looks I can I can deactivate all these layers once i export these PSB in to import this into unity all the invisible layers won't show up there okay so I go to the package manager I now need to install the 2d a PSD importer package and as soon as I do that unity will recognize this PSB file as a regular sprite so if you see here in the inspector now I can open the sprite editor I can configure how I want unity to import the file and you see here that I have my sprite sprite editor window you really automatically generated all the sprite pieces for me so I don't have to do anything else and the next thing I have to do is start with the actual skinning so inside the sprite editor once I have my my 2d animation package I will have more tools that will that will allow me to create my rig and to wait some some bones with meshes but just let's take a moment and understand the workflow animating or creating our animations in unity it's basically three steps to create something that can be animated and it's it's hand by hand with with the options that we see on the sprite editor window the first step is we have to create a skeleton we have to define what's the skeleton of our object the next step is we need to create a mesh we need to create geometry by the end of the day most of the things that we see in unity are meshes right are just collections of vertices connected together creating triangles so in this case even if we're using a 2d approach what we're rendering at the end of the day is is a mesh and this is also important because the the most if we have more vertices if our mesh is more complex we will be able to have a certain type of animations if we decrease the count of vertices that we have we will not be able to achieve certain type of animations or the quality will also change so just keep this in mind and the first step is linking the bones that we created in the skeleton with the vertices we create it in the in the mesh once when we created it the mesh so let's see how this all works you see here that I am on the same sprite editor window I'm on the bones section and what I want what I'm going to do right now is I'm going to start creating my skeleton super simple if you have used other similar tools to create these skeletons the approach is basically the same it's pretty straightforward if you're not an artist and you're new who here is an artist raise your hands a lot of you and who is not an artist okay I will say 5050 so that's good news because if you're an artist you can create awesome stuff if you're not an artist you still can create stuff so that's right okay so I'm here I'm gonna start creating my skeleton so I selected the the Create bone option and I'm just starting clicking on top of my of my of my right so for some parts of my of my sprite of my character I'm adding more bones for some parts I'm adding less bones and this decision has to be made by the animator and the animator and the person who wrote the car who draw the character and why because for instance in the neck we want to have like this effect of a rope so we want it to look more like organic for the for the head for the two pieces of the head we don't want it to look like very organic we want it to look like just two pieces doing this this effect so another thing to consider is the more bones that you have the more CPU usage you will have in some cases you won't care in some cases this is important to know right like if you have a super small element in the background that is repeated a thousand times and has a lot of bones and nobody noticed that and somehow the game is running at 10 frames per second that might be causing the problem ok but anyway what I'm doing here is I'm I keep creating my my bones you can see that every new bone that I create is linked to the previous bone that I I added there's no that's that that doesn't mean you have to work this way and in fact most of the time you jus are not linking all the bones in the same in same clarity you can go back until the system okay I want these let me show you here I want this bone to be parented not to the to the last bone that I created but the bone that goes before that one so you can do that how do you achieve achieve that you simply have to click escape and you're good to go ok so I keep adding these in some cases I can add some extra bones in for instance for these thingy I spring I may add a couple of bones you cannot just one depending on the animation I could add more to have more detail but depends on how far am I going to be seeing this character because if I'm going to be the camera is going to be too far maybe I don't need that but depends on on what you want to achieve for the legs in particular I just have one bone per part of the leg because I want this this effect of that of elements being made by by metal to I don't want them to be too organic so I keep doing this I'm gonna go ahead but this is the process of how to create these bones depending on the complexity of your of your character you will have more or less bones now I think it's worth explaining to you that to get good animations you need to know about animation it doesn't really matter the software or the tool is it's going to help you but to know that real number of bones that you need you will need to know about animations you will need to know like okay I need more bones in certain parts less bones in certain other parts etc so I will keep creating my my skeleton here I'm not gonna do it right now by the way it's not that I am a magician it's just that these are videos okay because you see me moving my hands and then unity is moving it's not okay so let's continue now I have my my skeleton here this is the first step the skeleton is is a hierarchy of bones what that means is that if a parent bone meaning the root bone moves or translates or scales the rest of the hierarchy is going to inherit those transformations okay so if I rotate this bone the rest of the bones are gonna rotate with that okay this is this is simple but it's important to remember about that now by default these are not if I move the bones they are not gonna move my my sprite why because this is just a sprite this is just a texture we need mesh we need a mesh that we can transform with those bones so what I can do AI can use the auto generate Aalto geometry button as I'm doing here and you can see that the package already generated a mesh for me it's not necessarily super optimal but it's a great starting point because if I was to create the mesh by hand which I can it will take me a lot of time depends on on what you want to achieve but I think it's better to start with a Auto generated approach and then just go and edit the geometry for instance on these antennas I might have a lot of vertices so what I could do is start removing some vertices right because they are too small they might have a lot of vertices they might be moving but moving so many vertices is going to be more expensive so I can remove those those those vertices on the other hand you might say oh I want to have a special effect on the antennas so I need to add more vertices that's also something that you can do besides modifying the vertices you can modify the edges as well also you can notice here that each mesh is each mesh is divided it's generating is generating a mesh per sprite that unity so in my file so I have multiple meshes in particular and this is important to know so here what I'm I can do is I can have more vertices here because remember I want to have a more organic animation adding general this is one one rule that some artists some animator told me is that in parts of your skeleton where you will have like objects doing this movement you probably want to have more vertices there just to improve the quality of the animation everywhere else you can remove some some of them but again depending on what you're trying to to achieve so as I did this you probably already notice that the bones as when I created the geometry the bones were tied to my to my geometry which is great the the link now is not perfect because it was also done automatically which is great as a starting point but we need to go back and clean up a bit otherwise we will have weird animations so here you see that I am just creating more edges removing sorry splitting edges these are just tools to improve the quality of your mesh improving the quality doesn't mean adding more vertices it's just it just means making something better for your specific use case so in this case in this case actually in the in the in the in the trunk of this this character I could go ahead and remove more vertices but let's just leave it as it is right now now the next step is telling remember the the package automatically assigned what we call the weight of each bone that has over every every mesh now the what what I want to do is paint those weights or tell my mesh my vertices which bones will like affect them what does this means so every bone has a color here you can see that they are color coded every bone will have some influence over every pixel and sorry every vertex in my mesh for some of them the value will be 0 which in reality means they are they don't have any influence over there over them but this is this is the idea so if a bone moves and this bone has an influence of 1 over certain vertices those vertices will move with that bone if the influence of a bone is 0 over certain vertices if the bone moves those vertices will stay quiet well stay there because they the bone doesn't have any influence over them so that's how it works you see here that the outer generated weight is it's taking place here so if I move one bone I'm actually also moving the rest of the of the hierarchy but I get some weird effects such as this one right like I don't want my character to look like it's made out of plastic I want this to look like it's made out of steel or any any type of metal so there's something weird here and we need to fix that the way we can fix is modifying the influence of bones over that particular mesh so we have also added some visibility tools so in this case I just modify the the the color just visually and let's go back to my mesh so you can see here that a mesh has multiple colors I have the color of this one second the color of this bone mostly on the top of the mesh and I have these bones here the color of these bones kind of influencing the lower part of my mesh this means that all these bones have some sort of influence over the mesh that I have here which is not what I I want I want just this bone to have influence over the entire mesh over here so what I am going to proceed to do is remove the bones influence from my object so for that I simply go to weights bone influence and you can see here on the lower right part of my of my window that I have a list of all the bones influencing that mesh in this case I just need to delete all those bones so they don't affect my my mesh in this case so I just select them and click the minus sign and I can multi-select and just get rid of them for for once I just wanted to show you how how this works this is a process that takes some time and in reality it does take some time because it's like a handcraft for some big meshes like this one it might not be that bad because it's pretty obvious which bones I want to influence the mesh but on some other parts is gonna be trickier so for instance I have the same issue and you can even notice how the how the shadow is being deformed this is not something that I want but this is what was automatically generated for me so that what I need to do is go ahead click over every piece of my of my sprite and I need to make sure that those bones are correctly tied to my to my mesh so in this case is the same thing now instead of going to the to the bone influenced window as I was doing before now I went to the weight brush and I'm going to be painting the influence of each bone over my my my mesh so it's it's it's quite simple I just need to select the bone and I start painting the influence over each one of these vertices it looks like it's it's defining the weight over the actual mesh like on a bird per per pixel basis but in reality is doing this on a per vertex basis okay it's just like that color thing okay I keep doing this I what I gonna do is just keep doing this for my entire model for saving some time I'm just going to go ahead and fix one thing one issue that I had with my my rig the issue I had is that I forgot to add a leg of my character I was not paying a lot of attention so I forgot to add one leg at any point I can go ahead and create more bones in the structure as long as I haven't if I'm adding more bones it's okay it's it's no problem as long as I don't have any animation it's also okay but if I have animations and I'm going to remove bones then you have to be careful because those vertices now won't have the influence so you you you you you you will might be losing information and the animation will probably break so again I'll keep doing this thing I forgot to add that part and let's continue now what I'm going to sorry to do is actually animating the the skeleton that I did I have my rig I painted the weight everything works perfectly I fixed already all the other errors that I had how do I do this well it's super simple I just need to take my object which is now seen as a prefab I drag and drop it into my unity scene window I can use it as any other game object because even the bones are gonna be just regular game objects if you have used animation tools in the past even unities animation tools or rigging tools or external tools you will always end up like doing special things not like like just using game objects so in this case is basically just game objects so in this case I can do all the stuff that I usually doing in unity with regular game objects and for the actual animation I'm going to use the animation window so at this point you might be wondering why the hell did you import it an animation a 2d animation package if it's not for animation and the answer is I don't know but the good thing is that we can use the same animation window we all know and note how to use for years now so I open the animation window I go ahead talk it somewhere here I will create an animation clip the same type of clips that we've been using forever I'm gonna save it somewhere in my computer and the next thing I'm going to be doing is creating my key frames with positions for my bones so what I will be animating are the bones them themselves not the position of my of my mesh dimensions driven by the position of the bone what I'm going to be animating animating is the position rotate all the transform of my bones in the skeleton and remember since they are part of a hierarchy I will just need to move like the parent of any section of my of my hierarchy and the rest is going to be moving so you see here I want to make like a roar animation what I do is I just rotate the root of the neck and then the tip of the neck I open the mouth and you can see here how unity as usual is just saving the keyframes so it from frame zero to frame 30 and the interpolation is managed automatically by unity now remember that this interpolation is being done in the CPU so even when minimal this is this is taking some CPU cycles if you just have one character in your game it's fine but if you have multiple characters then this might be an issue just just just consider this okay so I have this animation and I'm ready to go I have an animation clip that I can use it I can use it with timeline I can use it with all the other tools that we know and love the next thing is now I have my skeleton it's already animated but imagine I want to animate I don't know the neck of my character he's not gonna be fun and it's not going to be a work anybody wants to do to move all the small bones in the hierarchy and make some sort of stop-motion animation this is maybe not something that we want to do is pay especially for certain type of characters so we can use one technique called inverse kinematics which basically means we will define a target for our for our skeleton or part of my skeleton and as we move the target the define part of the skeleton will try to reach out the target is called inverse because unlike the forward kinematics where these bone moves and then this bone moves and then the rest of the bones moves in this case the that the last bone is going to move first and then is going to define where what are the positions and rotations for the rest of the of the skeleton so this is what we're going to do here instead of doing manually the animation of the the leg for instance we're going to use inverse kinematics that's another package and this is probably the fourth package with installed so far I think this is great because if you're not using inverse kinematics then you don't have to install this package if you are then you have to install it but it means we're delivering you need that relies less and less on specific packages for work rightly if you don't need any of these tools then you can go ahead and you won't be you wouldn't be paying the the cost of processing stove or having a larger download file when you download unity so what I'm going to do is import the ika package from the package manager is to is called to the light package I simply install it is it has dependencies on the to the common package and that's the only thing now how do I create my okay the first thing I have to do is go to the route I'm going to create an Ike Ike Ike a to the manager and then I have to create a solver this solver basically is a component that we allow us to to to tell what to do with the hierarchy of of our bones in this case I will use a lymph solver we have three types of solvers one lymph and two flavors of chain solvers in this case I just want to animate the leg the first two bones in my in the leg of my of my character so for that I need two objects one is an effector to create this this effector what I need to do is go to the tip of the of the hierarchy for that specific part I will create a game object and I have to place it at the very tip of my of my bone so I put it somewhere there and then I need to create a target the target it's gonna be a small gizmo and it's actually a game object that you can use at runtime which is great because we'll see why it's great in a second but yeah it's it's gonna be another game object you can create it manually or you can simply tell the package to create it for you so you can see here do you see a small gizmo over there a small circle yeah okay now I'm moving the gizmo I'm moving the the target and here key is moving he's trying to reach that that target with the it's constraints so it kind of like enlarged itself it's just constrained but it's going to try to reach out that target to reach that target now you can see that there's something weird with how it's flexing it's a simple fix I just need to tell it to flip it and then the rotation is going to be made the other the other way so it's very simple I will need to go ahead and create everything for for the other legs now I'm going to use a different type of of solver in this case is going to be a chain type of solver this is useful if you want to simile change the ropes etc elements that that includes here keys there are more complex that have more than two two bones the process is similar I will select the last bone in the in the in the chain I will create an empty game object I'm gonna place it at the tip I then will go and select a new solver I'm going to assign the effector and then automatically create a target now here I have to count the number of elements I have in the chain just just because this is the way it works I have a lot of values here that you can define the higher the number are on these sliders the the more realistic the animation is gonna look but it's going to take more processing time just take this into account so if you play around with the value and you don't see any noticeable difference then probably it's better to just keep the number low okay so I do that and you can see that if I move my target entire here key moves which is great because now you just need you probably just notice that instead of having to animate or position on on every key frame the bones you just need to position the targets and then the skeleton is going to just follow the the target there okay now to wrap there's another interesting feature that we we have since we are using this this skeletal base animation as we saw in the demo with the with a farmer girl sometimes we want just to replace some parts of our sprites right in this case imagine this character can receive damage and instead of just applying a generic damage we want to apply damage to the pieces that are actually receiving damage right so if my character is receiving a lot of hits on the head then I want to replace that sprite to something that resembles some damaged mad metal so I have two versions of my sprite to ps3 files they have the same layers they have the same names they have the positions of the sprites of each sprite at the same position you can see unity is importing them the Atlas looks different it doesn't really matter as long as they they have the same names on layers etc and you might be wondering okay do I need to recreate the skeleton again and the answer is no do you just need to copy and paste the skeleton you you previously had so I select all the older bones I click copy I go to the second one i select the bones i click paste and both will now contain the same hierarchy this means that i have two objects with the same hierarchy this means I can simply recycle the animations and you you you can do that now this is not what I wanted to achieve what I wanted to achieve is to replace certain sprites in the certain meshes or sprite renderer zin in my in my object so I need to create an asset library just to hold the information of what different different sprites and I will be using so in this case I created this library it's just a regular scripted object and I have to create categories one category is going to be for the head another one for a leg another one for the eyes etc you will be creating multiple of these depending on which sprites you want to to swap and just need to select which sprite is gonna be used when you are in the normal state as you can see I define them as labels and which sprite you want to use for the damaged state okay now I need to go to the object that has out sorry I need to go to any any object in the hierarchy and I have an sprite library component which is going to link the sprite library asset that I just created with my game object I just need to assign it to it now I need to select the sprite renderer that I want to be swapping sprites and just add sprite resolver and simply I just need to tell which category I am I'm modifying and loop through one or the other you saw there's a slight mistake there that probably means the pivot on my second sprite was not at the same position as the people pivot on the first one so that's why I was getting this offset but now I fix the thing and I can swap between both sprites back and forth another cool thing is that these works at runtime as well so you can make these changes via code at one time or you can just swap these sprites in the animation window it's it's very very very flexible now before you go just remember that the package will be verified in 20 19.3 you can use it right now but it's in preview it's coming it's very easy being verified if you have questions if you have feedback please come to the forums they are always being monitored we're happy to receive more feedback please post your animations on Twitter if you're using Twitter you say made with unity tag if you want to talk more about to this stuff come to the 2d kiosk tomorrow at most the last day I won't be there but whoever is there it's gonna have fun talking to you if you want to learn more please go to or subscribe there's a three month free trial at unity 3d dot-com slash learn premium there's a code or if you following the Humble Bundle updates they just announced i some sort of promo weight with unity so you can also get access via the Humble Bundle now thank you very much I hope you enjoy unite if you have questions please meet me outside because I don't think we have time for questions and hope you have fun tomorrow and tonight at the party thank you [Applause] [Music]

Channel: Unity

Views: 63,361

Keywords: Unity3d, Unity, Unity Technologies, Games, Game Development, Game Dev, Game Engine, 2D, Sprite rigging

Id: vap04-Py9QM

Length: 42min 45sec (2565 seconds)

Published: Mon Oct 14 2019