New sprite rigging and lighting for 2D - Unity at GDC 2019

hello hello how's everyone doing we're coming to the end of gdt okay but cool so we're gonna spend some time talking about the new sprite rigging tools for 2d as well as 2d lights and we're gonna do we're gonna split the presentation between us so I'm Russ camel I'm the product manager for 2d and I'll be doing the bit at the end around lights but I'm gonna pass it over to Andy now I'll let I'll let you introduce yourself and he'll take you through the sprite rigging stuff cool cool thank you so my name is Andy I'm evangelist at unity and I'm based in the Unity Copenhagen office and I'm basically going to present the new sprite rigging workflows that are available right now today you've come down and today Ross is my fact checker by the way forget anything wrong is just gonna shout of me so he's a very nice guy so sprite rigging is something that we've been working on for a little while this come through several different iterations and it's getting to a point where the workplace feeling very nice and very smooth so much that I'm actually just gonna rig a character live and hope it will go fine I practice a number of times but I'm gonna rig a character from scratch and then share all the different steps and stages of doing that process and with 2d sprite rigging there was kind of like three main principles to solve the first one is a unified skinning editor in the sprite editor window unity already has a sprite editor interface for setting up custom physic shapes and slices so you should utilize that to have a lot of the sprite based manipulation editing workflows in one place we also needed support for multiple sprite single characters characters come in all different shapes and sizes and forms some are layered some are like in like sausage limbs like separated some commas like one piece you have all sorts of different types of our characters so we wanted to support all of those different variations like you're not restricted to just a humanoid but you can do like an octopus you can do like a crab you can do a tree doesn't really matter and have this worked very nicely with 2d PSD importing workflows and the last piece of the puzzle is inverse kinematics so we wanted to set up some kind of 2d PI K system so if you have different limbs that you wanted to move you could with the the Ridge sprite be able to set up so when you animate a wrist moving the whole arm extends with it or if you have an octopus it moves all together like like you'd expect ika to do do you have anything to add to that Russell oh that's good you've got it nd let's get out of slides get into unity what do you think so far so good yeah oh not yet how do I no problem okay so we're currently in unity but I don't want to be in unity actually want to be in Photoshop to begin with a lot of people don't draw their artwork and assets in unity at least I don't and I think most people don't either so we have here a ninja cat type character and the ninja cat is built up of lots of different layers so as you can see here in the photo shops layer window we have like layer for the right arm and neck the eye let's find something a little bit more obvious these will split into different layers that are named and obviously stacked on top of each other so for example the cats is obviously rendering on top of its head the cats front arm is obviously rendering in front of its body and things like this this is how the artist is set up these layers and we want to bring that into unity what we don't want to do is slice this up and import it and then kind of reconstruct it in a weird Frankenstein type format especially if we're iterating on these characters so we want to say to artists hey you can draw your your cat or your whatever it is in different layers and then that carries across into unity so we now have a new package which is a PSD important that allows you to when you save your PSD file is a PSB file and what does PHP stand for Photoshop big Photoshop is document format you can then bring that into unity and you'll be able to have that metadata carry over with it so recognize all these different layers so now if I goto spoiler alert go over to unity I've got a standard cat PSD but if I go to this PSB file which has been imported what you'll notice and I okay anyway the screens big enough what you'll notice that there's a couple of different options one is a character rig when it's mosaic which I'll talk about later on and you can even import things like layer grouping and if I actually extend in the hierarchy this cat PHP file you notice it's actually built up of all the different individual pieces have been carried over you don't have to go and rename them or Reese lyse them up it basically brings them all over already in this stack so now that we have our cats what we want to do is then actually set up the rig we haven't actually done that yet we just set up drawn the pieces and put them in separate layers so if I open up the sprite editor which if you've used unity and it's 2d tools you properly or even UI tools you've probably used this editor many times and where you'll notice is it hasn't imported the cats into the sprite editor already built up it's actually kind of exploitive or in a mosaic format so it means that we can still go to different parts of the character or whatever it's been imported and then rename them and tweak them and maybe do some extra polishing unity so when you have the rigging packages imported which you might have a slide for know know from package manager you can import into the rigging and I care or 2d animation package I think it's called to the animation yeah that's what you want to look for in the package manager what would I ever do without you Russ so what you'll notice is that when that's imported the sprite editor has this extra skinning edit option since have a look and see what that does so skinny editor will then take your kind of mosaic laying out imported PSD or PSP even and then kind of reconstruct it back into its shape nor the layers have been included as well so the cats risk is obviously render infernos body the back arm renders behind the back arm and etc and what we want in this skinny editor interface is to be able to very quickly set up rigs and be able to set up different reads characters and bones all very intuitively all in the same interface so this is split up into three different sections one is bones one is geometry and one is weights so let's start with their bones so with bones enabled we can then I wasn't lying when I said I'm gonna break this character live we can then set up a bunch of bone points that then are kind of overlaying on top of our character and it's a very intuitive workflow you've just go click click click click click and build up your bones you can even do something like make a free bone so let's rig up here let's rig this ear as well and let's rig the the front of the face let's do that let's also rig the arm whereas you can chime in if you want it's a little boring to watch someone fix something right no that's good so as you see a dandies working there he's got bones that are that are parented to other bones and this is a really common workflow that you want to make sure you'd support when you're building a system like this and in cases where you've got the bones wrong you can always go back in and edit the joint so split the joints are poor add extra bones later so thank you thanks for the UH yeah so very quickly you've got the character all set up I am no professional rigger if there's a rigger here you can argue at me later on I'll throttle me later on I'm no professional rigger but it kind of goes to show that you don't have to be to be able to be set up a rig and basically use the tools to set up something like this so what I'm next going to do is go to geometry and currently these bones aren't attached to any sort part on the cat and I'm going to skip a lot of steps because I'm kind of running out of time I guess so what do you well what I'm going to do is I'm actually going to generate the geometry based off of the sprites and that the bones are then going to be mapped to so once I hit generate all for visible it goes through its goes through all the layers and it turns the cat into rainbow and this isn't a shader or anything like this well this instead is doing is it's if you've done any form of like 3d wait painting and things like this is creating the geometry shape around each sprites and it's also automatically baking in the weights it's doing that all in the same step so what you'll now notice is if I go to different parts of the cats I can actually move and animate different parts of the cat and you see this Aurel already baked in of course there's a couple of imperfections that I need to fix but it's done a pretty good job already automatically here so we can actually modify the different parts and you notice it's all working and I can reset the pose back to normal at the bottom right you can see that there's some extra settings for different extra outline details and things like for example this blade might be a bit too complicated for what it needs to do but for the purposes of this demo it's ok it's fine actually the whiskers are pretty over-the-top but that's that's okay we don't need anything more precise so yep we can then modify this we can obviously move these different parts and undo that as well and now that we've got this all set up one thing that you can then do is tidy it up so I'm going to tidy up a couple of things and show you some common issues with generating stuff like this so what we have here are there is a richt so if I move this here what you'll notice is in my animation like Rus is the art director he might say all the ears to wiggle like this on the cat forget the ear bone to not squish the head like that you didn't your Lukas me mm yeah so however we've got a bit of an issue with the the automatically generated weights so you notice as the ear moves the whole back of the cat's head moves as well we don't want that what we want to do is we want to have the ears kind of move independently this is where we can actually use the weight brush to sort of paint some extra detail and you can do this whilst the bone is kind of moved and deformed and you can see that change it's going to make sense in a second so if I move this ear back and I'm like okay the the edge of the face is kind of a little bit like this I can actually go to the weight brush select the bone I want to paint the weight to and select the head and then you notice that as I paint the distribution of that bone is kind of reforming back into its original shape so you're kind of you're not really a rate we sort of a raising the influence from bone a but re adding the IMP roots to bone B so that looks pretty good let's see what this looks like okay let's tidy this up a little bit more she was yeah that's pretty good so far and let's save the face seems good to me so we might say all right we don't want so much influence here so now let's paint this like so it's pretty fun you can then basically go in and then kind of tidy up all these different parts I'm not going to do that now because that might take a little while but you can see that you can go in and kind of tidy up all the different sections of your character another type of workflow problem with automatic generation it does 99% of the work but we need to tidy up is overlaying parts and often characters such as this that are layered up have lots of pieces of geometry especially if they have lots of cloth and things but overlap and when it does the generation it can't quite work out which bone goes to which piece of the geometry so in this part you'll notice that the blade is kind of acting kind of like and a last piece of elastic or something like this and it's sticking to the leg so your notice is that the blades if I pull it out here it's kind of sticking onto into here and this is kind of cool I actually quite like this elasticy effect but it's not exactly what we want we want the blades to instead operate similar to this blade where it's kind of independent so you can animate the cap slicing and things like that so what we can actually do is instead of playing around with all these different layers let's select the blade and when you select the individual blades you'll notice that it's not only having influence from this sort of highlighted bone also these bones here and if you have more complicated characters you can actually click this little sprite sheet button at the top and when you pop it into here you can actually select each of the different pieces and see the different bone influences so you can pop in and out especially if you have lots of layers so your load is so if I go back to the back to the the bone blade and let's move this out here so we obviously don't want this blades to be kind of like elasticy like so it's good a bone in fruits selecting this this piece you'll notice that we have all the different bones that are influencing it as simple as removing those from that list and now our blade is sorted we now have our cap already to slice things and attack things and stuff obviously there's lots of other things I can go through in in resetting this character up but currently I've done some bone stuffs and jiangshi stuff and some weight stuff anything you want out there or no that's good let's take a look at it in the scene I'd love to know what this looks like so it will look like a cap so once that's all done and we've set up the rigs and the weights and stuff click apply as we do for like basically everything in the sprite thing in the spray editor and it will basically then kind of bake that data into the cat yep it's already rigged that's cool thank you you see so now when I when I bring this cat into the scene like so what you'll notice that all the rig points are already attached onto the cat in the scene so if I bring it down here well you'll notice that these actually come in as you have all the individual sprite parts as well so we can go here and apply soar like shaders to individual parts of the body so you could have the cat turns into like a ghost mode or something or or a stealth mode or a camouflage and stuff and what you can enter is you can then obviously you then have all these points and then modify the cat and do all sorts of animation and stuff these are just points and the one thing that I want to then show you yeah Russ just picked something is this is a cats that's basically fully already set up so this one is a slightly more complex somewhat you can notice that now you have these parts you can then animate all the individual pieces so this cat here has like a walk I didn't animate this I did the mocap attach the mocap points to a cat and one thing you might notice here is that these yellow points are using the new eye care it as well so after you have the rig bones in you can set it by kaze to animate the cat then things moving around so here we have I'm like this me like this you can basically then set up your rig to have more extra ika data so what I'm now going to do is that's kind of like a very quick 10 minute overview of the rigging and I K and here's D and tours like this I'm now going to pass it over to Russ to do the next part of the demonstration very cool thank you Andy so that's the sprite rigging stuff right so that's animation what I'd like to do is spend a little bit of time giving you a sneak preview of the 2d lighting system so gonna throw a couple of slides up let's see nail okay so 2d lights okay so why would you need these right what what's the purpose of adding 2d lighting so very often you're working with the same set of sprites maybe you're you you got an artist who's created a set of sprites and you want to add different kinds of mood and variation to these scenes right you want to you want to reuse these assets in different ways by relighting them or you want to create like different sections of the level that where the lights have meaning right maybe a green means it's a swamp level or it's toxic or red means danger these kind of things and generally when you're trying to work with special effects it's always nice to have some lighting or some additive effects to work with and we're gonna take a look at how some of those come together so what I'm gonna cover is the different types of lights which we'll look at in the demo it's much more fun to see them in unity we're gonna look at how we can use lights to target different layers we're gonna look at the blending options and how lights work together when you've got more of them we also I want to show how they work with particles and then finally a little section on how to simulate surface detail using masks okay so these are the demos that we're gonna take a look at now all right let's jump into unity okay so here we have a scene as you can see the lights are working perfectly no just joking no lights yet completely unlit right so what do we want to do we want to do something to this scene where we add a little bit more a little bit more mood okay so I'm gonna turn on what we call the parametric lights okay so this is a parametric light where you have kind of parametric controls you can turn the sides down send them really way down so you can see what I'm working with here you can play with feathering on the light so you can make it softer or or hard-edged right we're gonna dig into more details as we go let's keep looking through the lights this is one of my favorites it's the freeform light it basically follows a shape so here we can see our main character the space bird is being well looked like she's about to be abducted right by aliens so what do we do we can make the shape a little bit more interesting or we can block this out a little bit more so that it doesn't look so bad right and you can use this to block out sections of your level where you want to show you want to show that something is something's going on cool next up sprite lights so if you've got a sprite that you want to use as a light cookie you can just drag it on to this and this works with any of the channels that you want to use inside your texture and then the last type of light is the point light so here we're gonna see one of them I'm going to turn off the I'm going to attend turn down the parametric light here sorry to turn this one down a bit move it out of the way so we can see how the point lights work so point lights have this really interesting control so that you can set where the target is and you can change the inner and outer ranges of the lights as well as the inner and outer angle right and if you do a complete circle you basically get a point light right a pure point light these are now in kind of spotlight mode so we're going to turn on a couple of those and then we can see and of course all of this stuff just animates as you would expect so I've run all of these things through the animator you can see we're just changing colors we're moving the point lights around and we've immediately added some mood and variation to the scene okay next up let's turn off these guys and let's turn on the the these lights right so this looks pretty cool right I could just stop here and go okay I'm gonna make a silhouette based game right and it's all gonna just look like this or maybe my artist really wants all of his art to be lit and maybe I should be doing something with it right so I want to show you how I can select all of these freeform lights and then dig in here just want to show you what this is Target sorting layers okay so what I've got here I've got all of these objects on different sorting layers I'm gonna switch them over to level background so that's pretty nice right now the level background is lit but I've still got this level foreground in shadow which is kind of nice I want this effect however I don't want the the space bird character to be unlit that's not cool so I'm gonna put a light on her as well and then last but not least we have some effects in here we have a particle system with just dust motes flying up into the sky and I want to make sure that that is lit as well and the way we do that is we've got a lit shader on the particles which you just need to turn on right so let's hit play on this and see how we're doing and there you go you can move our character around you can see the effect of the lights and you can if you look really closely you can even see our little particles being lit and everything's just moving around and this is a it's a much more vibrant level than it would have been I want to shout out at this time that this artwork that you see here is from the 2d forest packed by Mikael Gustafson so thank you very much he's on the asset store you've got to check out his work it's awesome okay so let's take a look at one more section multiple lights right so so far I've been careful not to overlap any of these lights but now I want to do exactly that to show you how they look so we're gonna turn on these lights one by one so here we've got a red light and here's green okay and here's blue so what we've done here is we're using alpha blending blending right just simple blending so what I want to change is I want to change how they have they blend so that's that's an alpha blend and this is additive so this is what we did originally and you can choose to do an alpha blend like this and then change the light order so that you can have lights acting in certain orders or with the additive turned on I quite like this effect which is why I cross them over like this and I can turn up the feathering and make this really kind of cool soft rainbow shine across the level right so very cool very fun alright let's look at a slightly different type of light that were or a slightly different light operation I want to look at how to simulate surface details right so we got a couple of minutes we're gonna dig into that one and then that will be the end of the demos okay so let me take a look let me just dig through my scenes here surface details and masks okay so what I want to do is I want to show you these characters right they're slightly different they've been set up slightly differently so the difference here is that the main character has a secondary texture so if we look here secondary textures this is the new module that we're adding to the sprite editor window that allows you to define other textures that work together with that sprained this something might associated textures so here we've got a normal map on the character we've also got an outline right and we're gonna do something interesting with this stuff okay so if we look at this scene carefully we can see these are scrapes and if we look at the assembly the way it's been put together we can see here is the the the mother bird right the father bird and the little bird and they've all been set up with this same set of associated textures now we've got a point light in blue here that is doing all of the kind of fill work in the background you can see that's kind of bringing up that light there and then if we open up this assembly of things here it's a point light that acts as the key and finally we have a rim light that is acting on the outline so without further ado let's just hit play on this and see how it all goes and there we go so now we have a light acting on the normal maps and Z outline and these are just sprites lit the way that you've come to think about lighting if you've worked in 3d but this is all functioning in your 2-d game using a sprite renderer cool and that is as much as we have so thank you very much oh and we're done so we may have a couple of minutes for questions so if anyone has any questions so we can open it up to the floor possibly before we get kicked out if no if not we'll be wandering around we'll be around come and find us and we can we can tell you whatever you need to know is that cool until security kicks us out until security kicks us out thank you thank you

Channel: Unity

Views: 74,186

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

Id: 0xnYbhqRDkM

Length: 25min 35sec (1535 seconds)

Published: Fri Apr 19 2019