Creating Customizable 2D Characters in Unity3D

Creating Customizable 2D characters (continued from “Creating 2D Animated characters”)

1.Characters

All of the above characters are just one Fbx

In this article, you will learn how to create 2D animated characters that you will be able to customize. In our example, the customization will involve changing the look of the entire character and changing the look of the gun. This example can be easily expanded to include other customizable elements such as different pieces of armor, sunglasses, hats, pants, shirts, shoes, head images, damage (scars, blood) etc. You can see the finished result here.

Note: in the web player example the different weapons have different animations due to the way the character holds them – select the weapon and then the appropriate animation.

This technique is used by us at Melior Games in many different games

If you were to go with the Image sequence technique (animated sprites) instead of using
This technique, your applications size would skyrocket and you’d never be able to fit it all into memory. With this technique, however you will only need a single texture for each individual “look” – same as is usually done with 3d characters.

The Pre-Requisites: This article assumes you have finished the original tutorial for creating animated characters in 3ds max.

3.hero

Atlases – you will need many of them. Start off with a single one and animate your character. The textures used are transparent PNG’s and were assembled in Photoshop/Illustrator.

2.atlasses

After you have your initial atlas for the character, create all of the other variants – make sure that the positions of everything is exactly the same and all that differs is things like the inner details, color, etc. Also notice how I’ve left a lot of space for the head – we had heads with varying sizes/shapes, so it was vital to leave that space.

For the guns, we have them all as separate images – they have to be the same size in pixels, and we have them all in the same positions:

4.weaponsAtlasses

Next, after having animated your character, import it into Unity3D as described in the previous tutorial. You only need to export it with the single set of textures which you are using.

Create a folder called “Fbx” where you import your character, also create an Additional folder called “Textures” where you will place your atlases. In our case, we had 2 texture sets – for the look of the hero and for the weapons. Set the texture compression to something nice like RGBA or truecolor, mip maps should be off.

5.Unity3d

Next, place your character on the stage , make sure it is visible to the camera (set the camera to orthographic size), create a new GameObject and call it “CharacterTextureController”. Next, create a C# script called “Skins” and add it to our new GameObject.

using UnityEngine;
using System.Collections;

public class Skins : MonoBehaviour
{

public Texture2D[] skinTextures;

public Material characterMaterial;
[SerializeField]
public int _xOffset;
int skinNumber = 0;
public int _buttonWidth = 120;
void OnGUI()
{
for(int skinN=0; skinN {
if(skinTextures[skinN]!=null)
if( GUI.Button(new Rect(_xOffset,350+skinN*20,_buttonWidth,20),skinTextures[skinN].name))
{
characterMaterial.mainTexture = skinTextures[skinN];
skinNumber = skinN;
}
}
}

public void SetSkinNumber(int number)
{
characterMaterial.mainTexture = skinTextures[ number ];
}

public int GetCurrentSkin()
{
return skinNumber;
}

}

Drag the different textures into the “skinTextures” array – buttons should appear on the screen which you will be able to click to change textures.

Drag the material that the character uses into “characterMaterial”.

The meat of the code is in:

characterMaterial.mainTexture = skinTextures[skinN];

In our case, we are selecting it from an array of Texture2D’s. This is nice for demo purposes, however in real life situations you’ll want to load it from the resources folder with something like:

characterMaterial.mainTexture = Resources.Load("Textures/SomeTexture") as Texture2D;

All you can go all out and load the textures from AssetBundles.

All in all, this is a simple and expandable technique that will allow you to make your characters as customizable as you want them to be. Cheers!