Previously titled "Creating a 2D (DOOM/Duke Nukem 3D) avatar for VRChat". Why do people wanna make PNG avatars?

Explanation

There are a ton of avatars in VRChat. A lot of them super creative and amazing looking, some are just memes, some straight up just a plain 2D image slapped onto a flat surface.

I’ve always wanted to make an avatar that works like objects from 2.5D games like DOOM, Duke Nukem 3D, Blood etc. Y’know, the ones that are always facing towards you, and the enemies that only have 8 viewing angles. Yeah.

I wanted to make something like that in VRChat but couldn’t find anything useful whatsoever. Literally nothing… that is, until i found a shader for Unity that does exactly what i want!

Error.mdl’s Retro Sprites shader!

A shader that perfectly replicates the “pseudo-3D” sprites of those old first person games. It even comes with a script that allows you to create a texture array for use with the shader which is pretty nice.

The first avatar i made using this shader was my 2D Niko avatar, which includes the sun aswell! After that i made tons more!!! OFF characters, skeleton brothers from UNDERTALE, Ness from Earthbound and Kris, Susie, Ralsei and Noelle from DELTARUNE.

With this new-found knowledge, i wanted to share how i made this avatar with other people aswell since there’s pretty much nothing about making these kinds of avatars, and the only way to find out how to make them is by ripping already existing avatars from VRChat and looking around the ripped project. However, at the time i didn’t have a website… well i did, but it was very messy and i just didn’t like the look of it anymore, so i started from scratch!

This tutorial will tell you how to make these avatars, even with walking animations! It is going to take a while so make sure to have some patience ready.

Preview and Requirements

Here’s what you’re gonna need:

• VRChat account with “New User” trust rank in order to upload and use the avatar,
• A VRChat Avatar project,
• Retro Sprites shader,
• and the sprites themselves.

When downloading the shader, all you need to do is just click “Code”, and then “Download ZIP”.

The archive will have a retrosprites folder inside. It contains the shader, aswell as the script that creates the texture array needed for the shader so we can put sprites onto it. Just drag it into the Assets folder of your Unity project and it should import everything.

Preparing the sprites

Okay… so this is basically going to be the reason why you’ve spent almost 2 hours making the avatar, preparing the sprites.

First, you obviously have to obtain the sprites you’re going to be using, doesn’t matter how or where.

Next, you wanna make sure the size of the sprites are exactly 32x32, 64x64, 128x128 etc. If you don’t, Unity is going to stretch out the sprite and it’ll look horrible, and you can’t really do anything about it.

Lemme explain.

This Kris sprite is 18x38 pixels in size. If i import it into Unity…

This is how it’s going to look like.

Now obviously, the sprite isn’t anywhere near 2048 pixels big, so let’s reduce the size to 32, apply import settings that we’re going to use and now i’m going to show you how it would roughly look like if we apply it to the shader.

yyyyyeeeeeeaaaaaahhhhhh………. looks like absolute horse crap

So we need to fix this. It isn’t a hard fix, but it’s a time consuming fix unfortunately. gl :3c

Basically, we have to resize the canvas of the sprites so that it’s exactly 32 or 64 or 128… pixels, so our shader can be displayed properly.

In my case, the Kris sprite exceeds 32 pixels, which means i have to make the canvas 64x64 pixels in size.

This is how the end result should look like. Yes, it is small but it has to be like that unfortunately.

You basically have to do this with every single sprite you have. Every. Single. One

There’s probably a way to automate the process, but i don’t know how.

Also, notice how there’s a small gap between the legs and the bottom of the sprite? That’s needed there so that it looks like you’re bouncing up and down while walking, because in the walking sprite, that gap isn’t there, so it looks like you’re going up and down while walking. If your sprite doesn’t have that gap between the legs and the bottom, you might have to move the layer of the sprite up by one pixel in order for the trick to work.

You also might have to flip the sprites horizontally because it will be flipped when shown in the shader.

ℹ️ Keep in mind that when flipping the left and right directions of the walking sprites, they’re still going to be that same direction pre-flipping, so make sure to rename them so you won’t get confused!

So for example, if you flip the left direction sprite and is now facing right, it’s still going to be the left sprite.

Once you have all of the sprites fixed up, now you have to import them into Unity and apply the correct import settings so the sprites will look as they should.

They are as follows:

• Alpha Is Transparency > Yes
• Wrap Mode > Clamp
• Filter Mode > Point (no filter)
• Max Size > Based on the image size
• Compression > None

That looks much better! Again it will look small but you can’t really do anything about it besides resizing the object.

Using the shader

Now let’s start with the shader and the material for our avatar.

Let’s start with creating a Texture List where were going to put our sprites in.

Right Click > Create > Texture Lists > 2D Texture List

You can leave the name as is, it doesn’t matter really.

This is where we’re gonna put our sprites in. Set the value of Tex Array to the number of sprites you have and put them in this specific order!!!

• Up (facing away from camera)
• Left
• Down (facing towards camera)
• Right

Do this for each frame of the walking animation aswell until you end up with something like this:

Once that’s done, we can now create the texture array that we can use in the shader.

In the menu bar, there is a “Tools” menu which has the script to create a texture array from the texture list we created.

Now select the texture list, set Aniso level to 0 just in case and make sure that the filter and wrap mode are the same as the sprite’s import settings.

and create the texture array!

Now we need to create a material for our avatar.

Right Click > Create > Material

Set the shader to Error.mdl > Retro Sprites v2 > Sprite Cutout, put the texture array into the shader, set the number of viewing angles to however many you have and set the number of animation frames to again, however many you have, in my case, i have 3 (idle, and two walking frames).

Now create a Quad inside the scene and drag the material onto it.

Success!

If you got the left and right directions backwards, just tick “Invert Rotation Direction” in shader settings and it should be the correct direction.

Avatar Base

This is a pretty painless part.

Simply make a empty object and drag the quad with the shader into it.

Select the empty avatar object and in the inspector, add a animator and a avatar descriptor.

Now we wanna make sure that the sprite is facing the right direction and that it’s the right height.

Make sure that the position coordinates of the avatar object is x0 y0 z0.

Now set the sprite/quad position coordinates to x0 y0.5 z0 (adjust the y coordinates until the quad is perfectly aligned with the avatar direction line) and rotate it by 180 degrees in the y direction so it faces the direction line.

Also adjust the View Position so it’s located between the eyes of the sprite (or wherever you want really it doesn’t matter :P).

Animation

ℹ️ You may skip this part by downloading files from this repository and putting the avatar together.

This is a pretty painful part. Go figure.

Yeah, this won’t be fun at all, because you HAVE to make sure that everything is perfectly set.

Start by adding the animation tab to the bottom window by clicking the three dots on the right side > Add Tab > Animation.

Select the avatar and create a animation clip. Name it “idle”.

Now click the record button, select the sprite/quad and adjust the “Manual Frame Number” so that it appears in the animation timeline. Click the record button again to stop recording and make sure the value is set to 0 on the left side of the animation timeline.

For the walking animation, create a new animation clip and name it “walk”. Click the record button again and adjust the “Manual Frame Number” again so it appears in the timeline again. Hold CTRL and scroll down to zoom out in the timeline so you can see 0:10, 0:20, 0:30 and 0:40 in the timeline.

Select the 0:10 timestamp and change the “Manual Frame Number” value to 1,

then select 0:20 and set the value to 0,

then select 0:30 and set it to 2,

and finally, 0:40 and set it to 0.

You might notice that it doesn’t look quite right. Because it doesn’t, all thanks to Unity!

Why does it look like that? At the bottom of the Animation window there’s a button labeled “Curves”, click it.

This is why. Fuck you Unity.

We have to adjust these so they are straight instead of curvy.

When you click on an animation key, you’ll see this:

All you have to do is rotate the line so it’s vertical instead of horizontal, so grab the edge of the line and rotate it until it’s positioned vertically. Do this for other animation keys until there are no curves.

Like this!

So that takes care of the animation clips, now we need to put it all together in a animation controller. Thankfully, Unity automatically created one when we recorded the animation clips so we can use it. Just make sure the animation controller is enabled.

And yes, we’re using the Animator, not the Playable Layers from the Avatar Descriptor, they don’t work.

Anyways, open the animation controller that Unity created and go to Parameters.

We need two parameters:

• VelocityX as Float
• VelocityZ as Float

These are the parameters the game itself uses and we’ll use them to detect player movement so the walking animation can play.

god this is gonna be painful

So, what you wanna do is make 4 transitions from the idle animation to the walking animation and one transition from the walking animation to the idle animation.

Now for every transition, make sure that:

• Has Exit Time: No
• Exit Time: 0
• Transition Duration (s): 0
• Transition Offset: 0

this is where pain begins

Here is a list of conditions you have to set for the 4 transitions that go from the idle animation to the walking animation:

• 1. VelocityZ > Less > -0.1
• 2. VelocityX > Less > -0.1
• 3. VelocityZ > Greater > 0.1
• 4. VelocityX > Greater > 0.1

Now for the one transition going from the walking animation to the idle animation:

• VelocityZ > Less > 0.1
• VelocityX > Less > 0.1
• VelocityZ > Greater > -0.1
• VelocityX > Greater > -0.1

And i believe that’s everything!

Testing the avatar

Now it’s time to test build the avatar to see if every is working correctly. You might get a error where you can just click “Auto Fix” and it’ll let you build the avatar.

FIRST TRYYYYY!!!!!

…that was actually a lot smoother than i thought it was gonna be lol.

Still, big success!!

From here, you can basically experiment with what animations you can and can’t play. I know for some things you might need to add a empty humanoid skeleton so the game thinks your avatar is a humanoid avatar and let’s you do a lot more with the avatar, but for me this is more than good enough. You can also adjust the speed of the walking animation in the animation controller if it’s too slow or too fast for your liking.

If you wanna experiment more, check out the Animation Parameters documentation, there are a lot of parameters that the game uses that you can use for various different animations.

Conclusion

I’m so happy that i finally got to write this post. I’ve really wanted to share my knowledge about this because who knows, there might be people who wanna make these kinds of avatars but never knew how to make them! I’m just hoping search engines will pick up on it and maybe bump me up in search results because there’s literally NOTHING. Literally no information on how to make these kinds of avatars. Maybe you could’ve stumbled across the Retro Sprites shader but you’d still have to find out how to use it on your own… until now!!!

That’s gonna be it for now tho! I’ll probably start making more avatars when i decide to fully come back to VRChat. Right now i don’t get on much besides like hanging out with someone from time to time.

I hope this tutorial helped! baiiiiiiiiii :3c

please send me an email if you’re having trouble with the tutorial, i’ll try to help as best as i can, just do know that i won’t respond immediately!!!