Converting 3D character model to 2D Pixel Character with Animations Unity Tutorial (2021 edition)

hi welcome back to my channel folks today we're gonna be taking a 3d model and transforming it into a 2d pixel character we will be achieving this effect by using a custom script and example project that was made by another youtube channel called making stuff look good the difference in this video is we'll be using our own model go through step by step exactly how to import our model into this example project capture the animations and make sprite sheets for both the main textures and the normal maps so let's go to the computer and show you exactly how to set this up [Music] go ahead and go to mixamo.com that way we can get access to free custom models and animations to use for our game go to the search bar and type in running to get a nice motion animation go ahead and click the first animation card as you can see our character is running off screen which is not what we want because we want to capture images of a still animation so go ahead and click the check box that says in place once that is done click on the download button all of the default settings are fine but we are going to change the format to fbx for unity then click download once that is complete go ahead and go to your file explorer and make sure it appears in your downloads folder now that we have our models let's go ahead and import it into unity all right we went ahead and opened up the example project we talked about earlier if you don't have this project already downloaded go ahead and click the link that should pop up in the right hand corner or go down in the description and click the video link for the example project then go down in the description of that video click the github link and download the project once you have downloaded the project and open it in unity go ahead and import your model by going to your downloads and dragging it into the models folder within the example project go ahead and open up the imported model to see all that's included you'll see that we have our two sub meshes one of which is a skin mesh rendered version with the materials applied we then have our rig materials and animation before we drag our model into the scene we want to make sure to set our rig to legacy because that is what the capture camera script supports making a model a legacy rig is not recommended to be used with the current versions of unity as it has become an outdated animation type but for the purposes of what this capture script supports we will be using it for this tutorial once this is done go ahead and drag the model into our scene by dragging our model over the capture example game object in our hierarchy you will see it appear in our game window at the origin of our scene go ahead and disable the other model by clicking the model object and clicking the check box in the inspector window this turns off all the components that are associated with the game object that way it doesn't interfere with our animation capture click on the animation capture helper and take a look at the animation capture helper script component this is a custom script that takes in a target game object source clip animation and a capture camera game object the target for this component will be our newly imported model we would drag the animation we want to capture in the source clip spot and lastly make sure that our capture camera object is selected as well we can change the pixel size we want of our sprite sheet by altering the x and y of the cell size capture option and we can also choose what frame rate we want our animation but we will keep it at the current setting since our animation was listed at 30 fps before we create our capture sprite sheets we want to switch out our materials to an unlit color material that way we get nice bright colors for our pixel character that looks nice now that we have that completed we're ready to capture our pixel animations go ahead and click the capture button under the capture script component it will then run a quick loop through your animation and pop up with a window to save your sprite sheets go ahead and save this wherever you want on your machine but make sure to remember where you saved it to create a new universal render pipeline project open up unity hub and make sure you have a unity version installed then go back to the projects tab and click new once you click new it will display project templates for you to choose from for our tutorial today we will be selecting the 2d template and installing the universe render pipeline go ahead and select the 2d template name the project whatever name you want and make sure to select the file destination where you wish to save your project then click create just a quick note these sprite sheets will also work with 3d universal render pipeline template but will require knowledge with shaders to have the sprite animations and normals interact with 3d lighting if i find any helpful information on how to do this in the 3d universal render pipeline i will pin it down in the comments below we went ahead and installed the universal runner pipeline and set up our camera to give a nice view of our imported sprite animations if you want to find out how to set up a 2d universal render pipeline project please click the link that should appear in the right hand corner or click the link down below in the description if you want to copy this camera setup please pause the video now and copy the camera settings we are using for this video once you have your camera and environment setup we will first go ahead and add a 2d global light to our scene by clicking the plus icon in the hierarchy then going to light 2d and selecting the global light 2d option once this is done we will go ahead and create a folder structure for our project go ahead and create three folders by right-clicking our assets folder going to create and selecting folder then naming them textures animation and materials now we are set up to start adding our character sprite sheets go to wherever you saved your sprite sheet textures and drag both the main texture and normal texture into your textures folder next thing we will need to do is split our sprite sheets that way we can create separate sprite images that we can use to create our animations go ahead and click on the main texture sprite sheet to open up the settings for a sprite sheet in the inspector window first we will make sure that unity knows that this is a 2d sprite sheet by looking at the texture type drop down and making sure the sprite option is selected since our sprite sheet contains multiple individual sprites we will go ahead and change the sprite mode to multiple go ahead and click apply to apply these settings to our sprite sheet the next thing we will want to do is split a sprite sheet into individual sprites by clicking the sprite editor button to open up unity sprite editor feature we want to go to the drop down that says slice it will then pop up a window where we can choose what type of slice we are trying to make since we already know what dimensions our sprites are we can select the grid by cell size option from the type drop down we will then go ahead and assign the sprite dimensions of our individual sprites once that is done we will go ahead and click the slice button then hit apply now if we close out the sprite editor window and open our sprite sheet we will now see our individual sprite images but if we click on one of our sprites we will notice something looks a little off in the preview image in our inspector window the image appears a little blurry and the reason for this is because a technique called anti-aliasing which will try to make our photos more realistic by smoothing out harsh edges of our image if we click back on our main texture and take a look at the inspector window you will notice our filter option is set to bilinear both bi-linear and tri-linear filters will use this technique so make sure to click the point option under the filter drop-down and click apply that way we get the pixel sprite look we are trying to achieve we will go ahead and repeat this process for our normal texture and make sure the point filter is selected once we have split both our main texture and normal texture sprite sheets it's now time to create our player game object and animations to make this process easy go ahead and open your main texture to show all the individual sprite images go ahead and hold shift and select both the first and last image of the individual sprites this will select all the images from start to finish with all of these images selected go ahead and drag them into your hierarchy this will open up a window asking you to save your animation we want to save this in our animation folder so go ahead and double click the animation folder to open it you can now go ahead and name your animation whatever you would like but for this tutorial we will go ahead and name it run go ahead and click save you will now see that a game object is automatically created for us and is titled after the first sprite image we selected we can go ahead and change this name to make it more clear on what this object is so we will go ahead and select the game object and name it player once we have that done we will go ahead and take a look at what components it is automatically added for us on the game object in the inspector window we can see that it automatically created a sprite renderer which allows our images to be viewable in both the scene and game windows it does this by displaying whatever sprite image is in the sprite option which is currently set to our first sprite image we will also notice that it created an animator component for us and automatically assign an animator controller which is used to control how our animations play when we run our game when we drag the object into our window and saved our animation unity went ahead and created our animator controller and created an animation state with our animations applied to it if we go ahead and double click on our animator controller it will open up in our animator window we can then click on the run state and visually see that our animation is indeed applied to our run animation state last thing we will need to do is go ahead and create a material for our sprite that way we can add both our main texture and normal texture to our sprite click on the material folder in your project then right click go to create and then go down to material go ahead and name this material player then click on the material to display the settings in the inspector window go ahead and click on your textures folder and go ahead and drop the main texture into the diffuse slot and the normal texture into the normal map slot now go ahead and drag the material onto the player click on the player object and see the material has been applied now that we see everything is set up we can go ahead and press play and see our 2d pixel animation in action as we can see the animation is running exactly as expected but it seems to be running a little slow the easy way we can fix this is going back into the animator window and adjusting the speed of our run state now if we click play again we can see it more closely matches the original animation 3d look to it if we click play we can see how it behaves with the animation running in my opinion this creates a much better look now that you have the basics of how to make 3d models into 2d sprites you can go ahead and start creating very unique and stylized pixel games with great animations while cutting down on the time it takes to animate pixel art so i hope you enjoyed this tutorial and that's it folks that's how we transform a 3d character model into a 2d pixel character with animations that we can use in our game if you liked what you saw today make sure to smash that like button hit subscribe and tap the notification bell if you want to see more i will also leave a link down below for patreon and would greatly appreciate your support and with that being said that concludes this video and i'll talk to you guys next time

Channel: GAME GLiTcH

Views: 82,537

Keywords:

Id: kALXAWSDYEo

Length: 12min 34sec (754 seconds)

Published: Tue Mar 09 2021