2D Characters in 3D World - Unity Directional Billboarding Tutorial

hello and welcome to another Unity tutorial in this video I'll show you how to set up directional Sprite billboarding for characters and this works whether you're using pixel art or any other kind of 2D art in the Sprite billboarding video a lot of you were interested in this technique and requested I make a follow-up video about it so here we are I will assume you've already set up the basic sprite billboarding from the previous tutorial so make sure you go watch that video first link down in the description nationally I've imported and set up a few things in this project just to make the tutorial scene a little bit nicer and easier to showcase I've imported Unity standard asset third person controller and set up some animations for my player character here I've also added some post-processing effects and made a Sprite Shader to work with urp lighting I've done a few other things like this throughout you don't need to do any of this I'm only doing it to better showcase the stuff I'll be showing you if you already have a working project you want to use or if you're following along with the last video the stuff I'll be showing you should work no problem having said that if anything else I'm doing here interests you let me know for some future tutorials and with all that said let's get started the first thing we'll do is a suggestion from a YouTube comment Peter wilsinski sorry about my pronunciation there suggested we change the Sprite billboarding script to late update rather than update so the camera is always updated first this is a minor change but I do think it makes sense so we'll be using this idea going forward with the Sprite billboarding tutorials so thanks for the suggestion all right with that done let's hop into a Sprite where I've made an animated Sprite to help us with this tutorial this is tutorial slime it has three animations a front idle side idle and back idle our goal in this tutorial is to get it to display the right animation based on our angle of view from the player camera so back in unity let's create a new game object and reset the transform we'll name this object tutorial slime because we'll be interested in the facing of this object we'll make a child object called gfx [Music] where we'll add the Sprite renderer and the Sprite billboard script foreign as talked about in the previous Sprite billboarding tutorial you'll need the 2D Sprite package from Unity to be installed to continue so let's import our tutorial slime spreadsheet onto Unity we'll change the settings to be Sprite 2D Sprite mode should be multiple since this texture has more than a single Sprite in my case I'm using 16 pixels per unit and since we're working with pixel art here I'll be setting the filter mode to point and the compression to none foreign next we'll need to use the Sprite Editor to slice up the Sprites so in my case I know my Sprites are 16 by 16 pixels so I'll be using the grid by cell size option but if you're not sure what size your Sprites are because maybe you downloaded them you can count how many columns and rows the Sprite sheet has and use grid by cell count I'm also going to make sure that the Pivot Point here is set to bottom apply all the changes and that'll do Now to create some animations first I'll make a folder for the animations and then I'll grab the sliced Sprites for each animation and drop them onto the gfx child of the tutorial slime when you do this if the object you drop the Sprites to does not already have an animator and an animator controller Unity will create One automatically we'll save the animation in the folder we made name it in this case it's the idle front animation and then we'll do that process for every animation we want once that's done we need to set up the animator controller first off let's make sure the animator window is open if you don't have it open you can open it by going to window animation animator make sure the tutorial slime animator controller is selected and now we can start working on the animations I'm going to use a blend tree to animate the Slime I find it a lot more intuitive and less messy than just a bunch of states and transitions here in the default animator so we'll right click and create a new blend Tree in state we'll also want to create a few parameters so on the top left of the animator we'll choose parameters and create two new floats move X and move y next we can select the blend tree and change it to blend type 2D simple directional where we'll pass in our parameters now to add the animations we created as our motions for the blend tree click the plus icon and add motion field we want four motion Fields though in my case since I'll be mirroring my side animation for left and right movement I could do three motion fields but we'll stick with four in case your spreadsheet has four directional animations so what we're doing here is telling the blend tree what animation to play based on the two move parameters that we've created so we want to set what those parameters should be in order to play that animation for the front animation we want a positive one on the Y with zero in the X for the back animation we want a negative one on the Y and zero X parameter will control the left and right animations so we'll make y 0 and make X positive and negative 1 in each of those [Music] in this case I've got this as the right direction and this as the left Direction which you can see highlighted in the blend graphic here and that's really it I find that to be so much better than trying to create a bunch of states with transitions but let me know how you like to animate Sprites in unity of course now we need to make a new script to actually set these parameters so let's create a new script named Sprite directional controller and open it up we can delete this stuff we won't need it and we'll use the late update method as mentioned earlier before we start let's think through what exactly we want we want to determine what animation to play or rather what value the move X and move y parameters should have based on the angle between the main transform of the tutorial slime and the camera in my case I have a third person camera but this will also work with first person so let's imagine that both the camera and the Slime are on a flat 2D plane let's imagine the front face as a vector that points to where they're looking so we'll say the Slime is facing forward in this direction and the camera is looking at the Slime from some other direction let's move these vectors around without changing their angle let's also draw out the angle we want which is the angle right here or this one they're the same so essentially we're looking for an angle in 2D space in other words on a plane so let's hop back into visual studio and start working on this unfortunately we can't just use the camera as forward Vector because that's going to change as we pitch the camera up and down so let's make a new forward Vector for the camera we'll call it cam forward vector and will make it be made up of the camera's forward Vector x and z components since that's the plane we're interested in if you're not sure why we're doing this still let me show you with some gizmos let's put a line here debug dot draw Ray the start of the Ray will be the camera's position and the direction will be this new forward we made we'll multiply the direction to make the ray a little longer and easier to see and we'll make it a magenta color back in unity let's take a look before we enter play mode I'm just going to add a Sprite to the Sprite renderer of the Slime so we can see it better in edit mode and the script that we just made to the gfx child of the main slime object if I go into side view and we have the camera selected you can see the forward Vector of the camera represented by the blue arrow is not quite the same as our new magenta forward Vector because the camera is pitching up and down and the top view though they match up which is exactly what we want again we're trying to get the ankle between the magenta Ray and the forward Vector of the tutorial slime which if you select the Slime you can see the blue arrow representing that by creating this new forward Vector for the camera we are essentially ignoring the y-axis and working on an x z plane back in Visual Studio we have a bit more but don't worry it's pretty simple first let's create some exposed fields in this script using serialized field we'll want access to the main transform of tutorial slime the animator and the Sprite renderer back in the late update method we want to float to store the angle in and we'll call this signed angle and use the vector 3 dot sine angle method to generate it this method takes in a from vector and A2 Vector as well as an axis we'll use Main transform.forward and cam forward vector for the axis we'll use the y-axis since we're working on the X Z plane so we can use Vector 3 dot up here next let's create a new Vector 2 that will be used to store the values we'll pass into the animator we'll call it animation Direction let's also make a new float named angle that will be the absolute value of the signed angle so now if the angle is below certain thresholds we want to change our parameters let's create two new exposed Fields Back angle which will initiate at 65 and side angle which will initiate at 155. so if the angle is less than back angle we want to play the back animation which is x equals to zero y equals to -1 if the angle is less than side angle we'll play the side animation which is x equal to 1 or -1 and y equal to zero a bit more on this in a minute else will play the front animation which is x equal to 0 y equal to one now we need to pass in the animation Direction Vector into the animator so we say animator dot set float because those parameters we made were floats we need their name and you have to make sure you type the name exactly the same here and we'll pass in the x value of the vector for move X and the Y value for move y let's check this out drop in the main transform animator and Sprite renderer components into the script here and please make sure that for main transform you're dropping in the parent transform of the tutorial slime and not the gfx object so it's already working but there's an issue with the side animations it's only playing the left side animation but we want to flip it when we look at the slime's right side back in Visual Studio this is a simple solution if you were wondering why I bothered to use the vector 3 signed angle method which can return negative values only to then get the absolute value angle later this is the reason we want the signed angle so that if the signed angle is below zero in other words negative we flip the Sprite renderer X else the flip should be false note that this will flip the front and back animations as well when the signed angle is negative so if you don't want that you could take this and place it inside the side angle View and make sure that the front and back animations are not flipped so that flips only happen on side angles you could also change the Sprite flip to actually pass in different values to the animation direction if you want a different animation for your left and right animations you can mess with the side and back angle exposed Fields if you want to change at what angle exactly those animations play your values should be between 0 and 180 for this and that's it now you can play different animations or even change the Sprite completely for the different angles you view your Sprite Billboards from I hope you found this video helpful and let me know if there's anything you want covered in another tutorial I have a few ideas myself but I'm always more interested in what people want to see next I want to give an extra special thanks to my patreons it means a lot to me that some people are supporting me on there but also an extra special thanks to everyone watching these videos and I hope you'll leave me some comments with what you want to see next but also if you liked the video hit the like button and subscribe to see more content and as always thank you so much for watching

Channel: Paper Mouse Games

Views: 30,753

Keywords:

Id: UcYfEfJW_mk

Length: 14min 0sec (840 seconds)

Published: Thu Oct 27 2022