 Okay, so I wanted to record this video. I am fairly new to Unity and I'm trying to develop a 2D side-scroller with some character animation and So I'm developing my character and I started initially by Finding spreadsheets from different games. I found one from Prince of Persia and I was trying to kind of copy the motion of the character from that and Show how he animates and just sort of trace over his motions with my own characters motions And it was kind of sloppy and wiggly and I'm not the best an illustrator So I was looking for a better way to create 2D side-scroller animation. I Found a decent workflow. It could definitely be improved And if you have any ideas of how to do so, please get in touch But this is the workflow that I found Hopefully it'll be useful to someone else And it starts in fuse, which is a fairly new offering from Adobe if you have the creative cloud membership Which includes Photoshop, Illustrator and Premiere Pro and things like that. It's included in that so you can just open your creative cloud installer and Download that It's here in apps Fuse so I have it obviously otherwise it would say install Once that's installed you can open it up and build your character and it starts by just sort of like Dragging these Characters in there so slow You know and you just click on the parts of the Character that best matched what you were trying to create Obviously you can really tweak this So this is just a quick and dirty Female character with some funny mismatched legs really bad Weird farmer's tan. Anyway, that's not my character. I want to open mine, which is a Model I made to resemble my friend Matt who is walking every street in the city of New York and this game is going to be about him He has a really cool blog called. I'm just walking calm check it out If you get a chance Meantime here's my character. I won't go too much into fuse But basically once you have this character you can go to customize and you can tweak all sorts of different things you know you can Change hand positions and how wide their jaw is and how what shape their eyes are and Things like that you can give them clothes It's a little bit limited and if they don't have what you need as far as I know There's no way to get more currently Maybe there's a way to build it yourself and submit it So you kind of stuck with what they gave you but with that you can do a lot so I made this character and After I built him I Click this save to mix-a-mo now mix-a-mo is sort of I think it must have been bought out by Adobe and sort of Piled in with fuse it seems like it's in this sort of Transitory state where it's still called mix-a-mo, but it's it's part of Adobe. Anyway, once you export this character He will find him in here and this is just sort of like this is the first thing you'll see is your character Once this loads you'll see he has a sort of resting pose and you can give him all these animations and the animations I've been uploaded to the mix-a-mo database and are You know being added on a regular basis These are all the animations my character can go through you can see the character has changed slightly I started with this and those still seem to be in this database. I could probably get rid of them at this point But all of these up here are my character's animation. So I have him jogging jumping Climbing stairs sitting down etc You want to find more animations? You just go in here and search. So you describe the action you want them to do Let's say we want them to hang So these are all kinds of hanging animations Some of them are better than others Some seem a little messed up and you can just pick one and Your character will do it Climb out. This is him kind of shimmying along a bar or something like that And once you have it you can click add to assets or if you want to download a bunch at a time You sort of add it you click add to pack and then you can download them all in bulk So, you know again if I were to go back to Here and downloads. I'll see you know, I had created this pack with which had a whole bunch of Assets and then I added one called jumping up So that's just an individual and it outputs them as fbx, which is useful in all kinds of 3d programs I'm going to be using cinema 4d and the reason I'm using that is I'm going to Within cinema 4d. I'm going to output an image sequence So this is a blank scene in cinema 4d. We're just going to open up the character That was exported from mixamo There was a whole bunch exported, but I'm going to open up the main one, which is matte dot fbx for my for me I'm going to leave all these defaults And here's our character in his default t-pose And you can see he's got this weird glow He also doesn't look quite like the character of mixamo and I'm not sure why that is but if you go highlight all your materials and Click on this basic tab here and uncheck specular You'll get rid of that glow So now you got your guy you can see Not only do you have the shaded character, but you have this sort of spine running through them. That's the Skeleton, so I'm going to create a null Just to hold the character call it character and We'll bring all this into there so that we can Hide it real quick and see that skeleton So this is you know if you wanted to pose this guy manually you could do that You could turn your character back on you can see he's got to do in the phone Do in the wave or something like that? anyway So that's that let's turn him back on and We're gonna be creating a side scroller again, so I'm gonna use a left view and this is the view I'm gonna use to Sort of render out my character And all of his animations for my game So I'm gonna call this t-pose, but we need to bring in all the other skeletons that have animations and so The way that I would do that is go to file Merge and then let's pick. Let's pick one Let's pick a jog for it. I'm gonna merge that in and Really, I think all we need is The animation not positive. Let's see what happens when I just bring that in and select a default All right, so we'll call this jog and We need it. We have it here and if we All right, this is only one frame. Let's say 30 You can see I don't know much about center for you. Okay, so if we move forward here You can see we've got our we got 25 frames here of jogging excitement of Skeleton, but not our character. Let me make sure there's no more. Yeah, he stops at 25. So let's make this 25 long So we need to tie that to the skeleton and the way we do that is with a Retargeting tags and I need to find it here Which is not always easy to do No, but it's here in character tags. So character retarget and our target is gonna be t-pose and Our source is gonna be jog So now all we have to do is drag those into the proper fields and we've got our running character So now we can just export this from Center for 4d and we would have a series of We want to create an image sequence. So we'd have this image sequence That we could use to compile a running animation in unity 4d Eventually what we want to end up with a sprite sheet But I want to do a couple of things before I output that sprite sheet One is that I want to give my character a style So I'm looking for this sketch in tune shader So I'm not exactly sure where to find it The texture sketch in tune. Where is that shader? I think it's the sketch material. There we go And the other thing I'm gonna do is a Interactive render region This allows us to see in real time what everything's gonna look like with the shaders applied So this is what we've got with the default sketch in tune shader And you could tweak this. There's a lot of things a Don't like about this I'm not gonna waste too much time on it because your desires for shading might be different but the main thing I want to do is in Render settings Sketch in tune. I want to make sure that this is a transparent Outputs transparent PNGs. So in the Shading the background We just want to turn the turn it from color to off There we go, and it's gonna show up black, but when it outputs, it's going to be transparent. So that's all I need for sketch in tune and Here in my output settings, I'm gonna just leave this for 800 by 600 You could change it to be whatever you want and in render region We actually want to use that interactive render region and we want to set it to the size That it's gonna be for that full-run animation. So I'll still need to adjust that but Since we're in this menu, we'll just take a look at the rest of the options here The default format for output is TIFF, but we want to do PNGs and Let's include the alpha channel And That's good. You would then choose where you want to save it Just set it up to Go to my desktop And I'm good So now I could output the scene and I would have a series of PNGs I'll show you that in a second, but there's one other thing that I'd like to show you and that is an additional tag I don't like this sort of Dithered look on my character and to get a really nice flat look which is what I'm after I Want to find the matte material Shader. I have to find that I have no idea where it would be Compositing. Oh, it's a compositing tag Matte object, and then we just would set the color that we want there So, you know, this might take a while to do but I just do a quick and dirty like this is roughly Skin color I'd be after for his face and then I could You know Apply that to his shirt. Whoops. I'm really slow at this guys. I'm sorry, but hopefully this time will be a little A little bit faster add another compositing tag. I'm sure there's a way to copy these down and not be So dang slow But anyway, say we wanted to give him a red shirt And we give him a red shirt And you know I'd go through the whole character and Given the styles that I want this slider here turns up the quality so Be set up and as I mentioned you want to make sure your render region is a Set to capture the whole character animation. It looks like he runs to about here. So that's fine Anyway, so then I would go to render to picture viewer You would output all the PNG's and then we could compile those into a spreadsheet now Again There's probably multiple ways to do this But I found a sprite sheet creator online that's free and works pretty decent So I'm going to do that but what you start with Here is my jog sequence and It's just a bunch of PNG's you can see I'm sort of scrolling through them in the finder here They're all output. They're all transparent We want to put them all together So once we go to the sub mind sprite sheet creator, we'll end up with something like this which has them all on one document So I use this app called stitches. You can search for it on Google You could just simply Open it up select all your PNG's and They would get Let's go ahead and do it They would get put here And the only thing I don't love about this, but I haven't figured out a way around it Maybe you have a better better resource you could share with me is that it doesn't quite put them in order So you can see we've got matte jump zero here Matt jump one here Then it goes to Matt jump 10 and Matt jump seven so it seems to be maybe Outputting them in the order that they get uploaded not necessarily in a numerical order You know four five Six Nine so ideally they would just be one two three four next line five six seven eight, etc But anyway, once you've got that the way you want it you just click download spreadsheet And once you have that spreadsheet you could bring it into unity now Here I am in unity If I drag that spreadsheet in I'll get something that looks like this you can see I've got my jog spreadsheet And by default Those will be set to single you'll want to select So Click that sprite mode button and change them to multiple Apply those changes here, and I go to your spread editor So this is my spread editor and Within that I could now slice This spread up and if you keep it as odd up you could manually do it by cell count So you could say there's four rows and four columns or You know if you knew the pixel width of each one you could set it that way I'm just gonna do automatic does this nice thing where it sort of finds the edges fits them down as small as it can and So you know each character has its little box and that's gonna be it's gonna be its own cell of the animation for our jog animation and And so the next thing we need to do is just I wrote down which numbers these are since they weren't output in order From that stitches up so my frames were zero one ten seven Then the next row was from eleven frame two frame three from eight, etc. So Bear with me here, but I would need to rename all these so that's Jogs bright sheets zero jogs bright sheet one jogs bright sheet ten Score them all here, and it seems like unity likes this Naming convention, and if you use straight from that it has a hard time Being able to put together the animations that you need so Just know now let's go back to that seven and again, this is gonna be different for you, but For me, this is how it created the spreadsheet to keep myself from getting confused or getting a janky animation Need to make sure they're named properly once that set you click apply here Create our spreadsheet. So now you can see each one of these here Is a different frame of the animation now my game has it's sort of animator component from unity Built in and the way that I got that is Once you have created this spreadsheet if you drag it into your scene for the very first time you will automatically Receive an animator component and your animation built for you by unity since I already have that I'm gonna do that But let's take a look at what my animator looks like So I have a bunch of stuff in here that I've already rigged up and if I play my scene You'll get a better sense of what I've got going. So I've got this walk animation that I already built which was done from fuse and mix-a-mo from the workflow you just saw if I'm running and Hit the jump button if I'm walking and hit the jump button the character jumps if I'm standing still jump He does this funny Jump animation and I'm using physics from unity So I'm using the rigid body 2d physics the box 2d physics that comes included with unity. I don't love it Seems a little bit like the characters on the moon. I Would love to rig up my own physics engine and I may do that down the road But for now, I'm just using the simple easy physics from unity And it's got things like if we look at it here rigid body 2d You can give your character a mess. You can give them Drag you can mess with gravity things like that and that will all affect kind of how the scene looks So you could tweak that and try to get a little bit closer to the animation you're looking for And you could also tween the individual spreadsheets so Say I wanted to create that jog animation I would go in here and I do create state and there's two options here, and they're very different I'm using actually a blend tree for most of my animations, but for this one. I'm just going to do an empty state a Blend tree makes sure that essentially if your character needs to execute all of the frames of animation In one span so like with our jump animation if he needs to go through that full range of motion before he In the time that it takes for him to go up Gravity to affect him and for him to come down and touch the ground Then we should probably do a blend tree because that makes sure that all those Frames of our spreadsheet get seen in the time it takes him to jump up and jump down But for this jog animation, I'm just going to do frame by frame animation So I've got it here. Let's call it jog and and Let's Create that jog animation and we'll put it in our animations folder and then from within our jog spreadsheet I'm just going to drag all of these frames into the timeline and Unity recognizes that That's going to be a timeline animation. So it just puts me in one after the other and We can check this out and see if it's what we want it to do So Let's just change this to a free aspect so we can see the whole thing here So if I hit this play button, you can see I'm running. He's going way too fast And that is because this sample is here. So it's essentially just saying this is set at 60 But this is like a 60 frames per second animation and we don't want it to go that fast They're gonna be a little blockier and I'm okay with that So now if we play it, you see we've got a pretty smooth animation It looks like you kind of bucks back a little bit when you run so I could adjust that later, but Let's just for now stick with that and So that's gonna be our jog animation Now what I want to do is make a transition from any state to jog But I need some conditions and The conditions I've kind of set up in conjunction with all my other animations The best one to look at is this walk animation So the conditions are that speed be greater than point zero one So basically the character has to be moving somewhere and that This variable I've created ground is true meaning characters touching the ground if he's jumping We obviously don't want him to be jogging I'm gonna be jumping if he's off the ground so Now that I'm going to be putting this jog animation in place I'm gonna need another Parameter and we're just gonna call it is jogging so Delete this for now actually Let's create that so here's our list of parameters over here and Is jogging is a true or false statement, so We're gonna make it a Boolean Is jogging so we've got it now and now if we go back to this Walk animation Is jogging has to equal false for him to be walking otherwise he's going to be jogging So we want that same list of conditions for the jog animations But is jogging has to be true speed is greater than point zero one ground equals true and Is jogging equals true When all those things are met character should jog Right so In order to set this is jogging variable I need to go into my script here and I'm gonna go into my update function and just add those conditions I've written them before so I'm just pasting them in but basically we're saying if grounded and Input dot get key down Equals key code left shift. I'm gonna make it left shift and should probably set variable for the run button for the jog button in case people in our game wanted to reconfigure that Key or they had a gamepad or something like that, but for now just gonna say key code left shift If it's down Set Boolean is jogging to true If the key goes up Set is jogging to false. All right So now that that's in there Let's test it out Okay, so I'm holding my shift key and you can see this guy is freaking out So what's going on? Let's take a look. Well, it has to do with this Thing which I don't fully understand to be honest But I'm gonna set the transition duration to zero set the offset to zero so it can transition to self Off because obviously we just want it to run its course while the button is down and that should fix that and You can see We've got a jogging animation and again, I mentioned that You know, it looks like he's just sort of bucking backwards a little bit So I'd want to go in there and tweak that but for the most part. We've got a jogging animation I'd also probably want to speed the character up while he's jogging Otherwise, he's just doing that thing that people do when they pretend to run across the street But anyway, that is my workflow for creating a sprite and implementing it in unity