Gamasutra is part of the Informa Tech Division of Informa PLC

This site is operated by a business or businesses owned by Informa PLC and all copyright resides with them. Informa PLC's registered office is 5 Howick Place, London SW1P 1WG. Registered in England and Wales. Number 8860726.


Gamasutra: The Art & Business of Making Gamesspacer
View All     RSS
June 18, 2019
arrowPress Releases








If you enjoy reading this site, you might also want to check out these UBM Tech sites:


 

Creating Customizable 2D Characters in Unity3D

by Yuriy Nikshych on 02/12/14 09:07:00 am   Featured Blogs

3 comments Share on Twitter    RSS

The following blog post, unless otherwise noted, was written by a member of Gamasutra’s community.
The thoughts and opinions expressed are those of the writer and not Gamasutra or its parent company.

 

Creating Customizable 2D characters (continued from “Creating 2D Animated 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.

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.

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:

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.

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!


Related Jobs

Deep Silver Volition
Deep Silver Volition — Champaign, Illinois, United States
[06.17.19]

Technical Artist - Cinematics
Gear Inc.
Gear Inc. — Hanoi, Vietnam
[06.15.19]

Technical Director
Legends of Learning
Legends of Learning — Washington, DC, District of Columbia, United States
[06.14.19]

Senior Unity Engineer - $140k - Remote OK
Wargaming.net
Wargaming.net — Chicago, Illinois, United States
[06.14.19]

Server Engineer





Loading Comments

loader image