2D Sprites in 3D World - Unity Sprite Billboarding Tutorial

foreign to the first tutorial on the channel this is a little different from the type of content I usually post so I hope you enjoy it let me know if you want to see more of this kind of stuff this tutorial I'm going to teach you how to make the Sprite billboarding effect like the one I'm using in my game Amber roots so first off I've got a new Unity project made here and I'm using Unity version 2021.3 0.5 F1 for reference I've imported cinemachine the new Unity input system and the 2D Sprite package from the package manager to help demonstrate how to do this you'll likely need the 2D Sprite package to help you slice up your Sprite sheets but you don't need cinemachine or the new input system to use the billboard Sprite system I'll be showing you however I highly recommend both assets if you're starting up a new project or you just want to change up what you're using additionally for the project setup I've created a couple of things here in the project we've got a Sprites folder with a few Sprites that I've already imported just some things to put down in the environment as well as a tile to put down on the floor the import settings on these are pretty standard I've done Sprite 2D and UI single Sprite because these are all divided up into single ones I'm using pixel art so I'm doing 16 pixels per unit I've also changed the Pivot Point on most of these to bottom with the exception of the tile which has the Pix uh the pivot point to the center then I'm using point no filter because I'm again I'm using pixel art and the compression set to none if you're using regular 2D art you're probably going to want those settings to be a little bit different additionally for the ground tile I have it set on repeat for the rep mode I've also set up a ground material here in unity I've got it on opaque and I've got that tile texture on here in the Albedo and made it a little bit greener the metallic and smoothness is down to zero and I've got the tiling set to 32 by 32 because I just think that looks pretty good for this so the next thing we want to do is go into our scene and we want to create a plane and you don't have to do this step this is just because I want to have an environment in which to show the billboarded Sprites if you've already got a gameplay environment that you're working with or you don't want to do this you certainly don't have to I'm just setting up the scene here I'm going to reset the transform and I'm going to throw in the ground material and I think I'm going to scale this up to about 10 by 1 by 10. and there's our ground so now we've got a stage to put these Sprite Billboards on so now we want to create our Sprite billboard the first thing I'm going to do is create a new Sprite renderer here so I'm going to go to 2D objects Sprites and in our case I'm going to go ahead and make a square I'm also going to create an empty game object here and I'm going to reset the transform on both of these I'm also going to make the square with the Sprite renderer a child of the game object that we made and why I'm doing this will become apparent in a little while I'm also going to rename both of these objects just to be a little bit more clear let's call the parent object Sprite billboard and the child object gfx now that this is all set up I'm just going to push the square up so that it's fully visible here so now you can clearly see it the next thing we want to do is actually create a Sprite billboard script so I'm going to go down to the empty scripts folder that we made and I'm going to go up to create new c-sharp script and I'm going to call this script Sprite billboard all right let's hop onto Visual Studio okay so here in Visual Studio your script should look something a little bit like this we're not going to need the start method so we can just delete this we're also not going to need the systems.collections or the system.collections.generic so you can delete those you will need Unity engine because we will be making this a mono Behavior because we want to be able to attach this script onto our gfx objects okay so in the update method what we basically want to do is rotate the gfx transform so that it's always looking at the camera now there's already a method called look at that you can use but I prefer this other method because I think it just is a little bit cleaner and a little bit easier to manipulate piece by piece so what we'll do is say transform dot rotation is going to equal quaternion dot Euler and this will take in three floats and what this will do is this will change the transform rotation of whatever this script is attached to to match some Euler formula that we pass in see these three floats are going to be the angles in degrees that we'll be looking at okay now we don't need to change the x and z angles we'll come back to those in a little bit but we do want to change the Y angle the Y angle being the rotation on the upward axis you can see in unity here this is the one we want to be manipulating so back in Visual Studio we want to change the Y value of the Euler quaternion so this zero float can go away and the angle that we want is the angle pertaining to the main camera in the scene so we can say camera dot Main dot transform dot rotation dot Euler angles because that's what we're using out here dot y and we can save this and go back into Unity okay so back in unity we want to go to the gfx child and we want to add the Sprite billboard component and I'm going to turn this off for a second so you can see what it was like before the Sprite billboard I'm going to hit play and I've already configured my cinemachine camera to spin around so I can use the mouse to rotate it but if you already have a working camera system you should see a similar result so that's without the Sprite Bowl boarding now let's turn the Sprite billboarding on and hit play here it is with the Sprite billboarding you can see that the Sprite is now turning you can see it in the scene view there along with the camera and this brings us to why I made a gfx child as you can see the transform itself is actually rotating with the Sprite as we move the camera but if I go and click on the Sprite billboard and back into game View in the scene view you can see that as I'm rotating that gfx child the Sprite billboard parent is not rotating now this is something you might not need in your game your use case might be such that you can just put the Sprite billboard script right on the root object but the nice thing about this is that if you have a situation where you need to know the facing of the object this is a better method of doing it because that way you can freely billboard the gfx without actually affecting the facing of the parent transform this is of course a technique I'm using in Amber Roots where I'm determining what Sprite to show and which animation to play based on the angle of the parent transform to the angle of the camera that's a bit more complicated so I'm not going to go into how to do that in this video but if some people are interested in seeing how that's done please let me know I'd be happy to make a tutorial video on that particular topic but I do want to do one more thing in this video and that is I want to expand the functionality slightly of the Sprite billboard script that we've made going back to these two angles here in the Euler quaternion right now they're zero because we don't want to rotate them but there is a use case that I can think of where you would so I'm going to create a new variable up here and I'm going to use serialize field so I can expose it in the inspector and this will be a Boolean called Freeze x z axes and we'll put its default value as true so in update instead of only calling this will have if freeze x z axis then we want this line of code if that Boolean is true then yeah we want these two angles to be zero they're basically Frozen in place otherwise else we want the transform dot rotation of your Sprite billboard to be equal to the camera main transform rotation you're just basically copying the angles exactly that the camera has so now back in unity you can see the Sprite billboard script now has the freeze XZ axis Boolean and it's checked right now so if we hit play we should get the same behavior that we were getting before where we can rotate the camera and the gfx rotates with it and if we pitch the camera up you can see it still only rotates along the y-axis but if we change this and turn that off in the scene view especially you can notice that as I pitch the camera up and down the Sprite rotates with it on its other axes and this is really good if you're working on something that's kind of a top-down view that's a little skewed something like Paper Mario if you can imagine because that way you can still get the Sprite showing without necessarily having to be level with it on the camera side so let me put together a quick little scene and showcase this now foreign looks with a few Sprites added all of them with Sprite billboarding and this is uh really nice for if you're trying to explore in a sort of first person environment if you're looking at some of those older games like Doom or Daggerfall and thinking that those Graphics are pretty cool this works really well for that and here's the same scene from above this is with the x and z rotation enabled you can see it gives it almost a 2d effect but if I move around a little bit you can see there's still Sprite Bowl boarding but they angle to look at the camera that's above them and this looks really good if you again if you want to make something like a paper Mario Style game or more of a top-down game but you want to work in 3D this works really well for that this even works with a orthographic camera rather than a perspective one so you could do a sort of isometric look and still use the Sprite billboarding and it works really well it really just depends on what you're doing and the look you want to go for and that wraps up this tutorial thanks for watching I hope this was helpful and extra special thanks to my patreons to wrap this up I just want to say that if there's other tutorials that you're interested in seeing like the Sprite facing tutorial or other stuff like that please let me know I'd love to get some ideas from what people want to see and let me know if you like this kind of video about tutorial Game Dev stuff that's not just devoted to a devlog for Amber Roots I'm really curious in hearing your opinions on that so yeah drop down some suggestions in the comments below or head over to the paper Mouse Discord links in the description and if you found this video helpful hit the like button subscribe and hit the Bell to get notifications about future content and as always thanks for watching

Channel: Paper Mouse Games

Views: 45,971

Keywords:

Id: FjJJ_I9zqJo

Length: 12min 47sec (767 seconds)

Published: Mon Sep 05 2022