Although the title of this article indicates that I’m going to show you how to do texture animation, I’ll also be showing you how to create transparent textures. This is what the result will look like:
In case you haven’t been following my blog posts, I’ve been reverse engineering the original Descent I game. My purpose is to recreate some pieces of the game to see if I can do it in Unity. If you’ve ever played Descent I in the past, you’ll instantly recognize this door as the one that opens after blowing up the reactor. Exiting through this door will allow you to escape and continue on with the next level. If you don’t find this door and escape, your ship gets destroyed in the mine when the countdown expires.
Transparent Textures
There are two tricks to using a transparent texture in Unity. The first trick is to use a material that is transparent. I changed my wall create code to use Transparent/Diffuse instead of the Diffuse material:
_doorMaterial = new Material(Shader.Find("Transparent/Diffuse"));<br>
Then I created a transparent texture using Photoshop. According to some articles on transparent textures, the Photoshop PS file can be used directly. If you go to my GitHub account and download the sample code from this repository: UnityTextureUV, you’ll see two directories inside the Assets/Resources/Textures sub-diretory. The door13 directory contains the PS files. I also tested the animation with PNG files. The PNG files can be found in the door13png directory. In the code you can change the texture load command to either directory to test for yourself:
var textureList = Resources.LoadAll("Textures/door13png", typeof(Texture));
To create a see-through texture in Photoshop, you can open a graphics file (like png or jpg) into Photoshop. Then select the image (CTRL-A), cut the image, and re-paste it. This will cause the image to be located on another layer. You’ll should see two layers, like this:
Now you can either turn off the visibility of the background or you can just delete that layer:
Finally, you can use the eraser to erase any area that will be see-through. For this image, the outer border (which is white) should be invisible. So zoom in to the editable image and start erasing the white areas:
The red-circled area is a section that I erased to become see-through. The white areas will be rendered as white. Photoshop shows invisible areas as a gray checker board area.
Now you can save the PS file and use it, or you can save as PNG and use that in your textures in Unity.
Animated Textures
My next task was to create an animated texture. The first animation I tried involved 13 images from Descent I representing the exit door. As I mentioned earlier, I used 13 PS files in a directory and then wrote the code to use those images. Each time the update routine is called, the texture is swapped for the object (which is only a wall consisting of two triangles). Here’s the code for the main play loop:
IEnumerator PlayLoop(float delay)
{
//Wait for the time defined at the delay parameter
yield return new WaitForSeconds(delay);
if (_closeOpen && _frameCounter == 0)
{
_closeOpen = !_closeOpen;
}
if (!_closeOpen && _frameCounter == _textures.Length - 1)
{
_closeOpen = !_closeOpen;
}
if (_closeOpen)
{
_frameCounter--;
}
else
{
_frameCounter++;
}
//Stop this co-routine
StopCoroutine("PlayLoop");
}
One trick I had to account for is the naming of the files. The code that loads the images looks like this:
var textureList = Resources.LoadAll("Textures/door13png", typeof(Texture));
The trick is that the images are read in-order by their filename. If you name the files door_0 through door_13, they’ll be sorted in alphabetical order. Which means that door_11 will come right after door_1. So make sure you put a zero before all single-digit image numbers. If you look at my images, you’ll see that they start with door_00 and continue with door_01, door02, etc.
When I was researching animated textures, I stumbled across the idea of a texture strip. This is a technique where all the animation frames are contained in one strip, like a movie strip. Then they are applied to the object with an offset depending on which frame you want to show. I combined all 13 textures from the door into one strip by loading the first image in Photoshop and enlarging the width to 64 times 13 images (each image is 64 by 64 pixels. Then I copied each image and pasted them in order from left to right, adjusting the location to align with an even 64 pixels. The final image looks like this:
I saved the final file as a PNG image and put it into the Assets/Resources/Textures directory. You can download the sample program (and resources) by going to my GitHub account here: UnityAnimatedTextureStrip. The code changes necessary to make the texture strip work were minor. The new play loop looks like this:
IEnumerator PlayLoop(float delay)
{
yield return new WaitForSeconds(delay);
if (_closeOpen && _frameCounter == 0)
{
_closeOpen = !_closeOpen;
}
if (!_closeOpen && _frameCounter == TotalTilesInStrip - 1)
{
_closeOpen = !_closeOpen;
}
if (_closeOpen)
{
_frameCounter--;
}
else
{
_frameCounter++;
}
_doorMaterial.mainTextureOffset = new Vector2(1.0f / TotalTilesInStrip * _frameCounter, 1.0f);
StopCoroutine("PlayLoop");
}
The texture is assigned when the wall is constructed. Only one texture is attached, so the play loop is only responsible for adjusting the offset for each frame.
Giving Credit
Like any software developer, I spend time researching a subject before I learn it. This blog post is built on knowledge that I obtained from the Internet on other blogs and forums. I included links inside my code to indicate where I drew my primary information for the code itself. I like to keep links like this so I can refer to them in the future if I do more research. You can scrape my code and use it for whatever purpose you like. I would like to give a shout-out to the blog I used for my basic animation code. It has a lot of good information on it. The blog is called “41 Blog” and you can get to it by clicking here. Dimitri hasn’t posted anything since 2015, but there is a treasure-trove of information inside his blog.
Where to get the Code
There are two GitHub repositories used in this blog post:
- Transparent textures and animation using individual files – click here.
- Transparent textures and animation using a strip – click here.