Post tutorial RSS Texture Offset - Power Up Effect

Here's a basic example of how to achieve a "power up" effect by simply adjusting a texture offset value over time.

Posted by on - Intermediate Textures

Hi There! For this post I thought I'd share a little trick to emulate a very simple visual "power up" effect. There are many ways to achieve this effect, but this post is mostly about using existing art and assets in a somewhat creative way due to time/effort constraints. To start with, here's what it looks like:

In the video above a white emissive surface is shown "moving" from one side of the solar panel array to the other. Let's take a look at what existing assets we have to work with to achieve this effect.

Texture and Materials

For most of the game we use several 2048x2048 texture atlases with several different maps. This choice was made early on to reduce the draw call count. But for the purposes of this post, we only need to look at one material and two of the textures: albedo and emissive:

surfaces atlas


surfaces atlas emissive


As you can see above, there isn't a whole lot of emissiveness in the texture. But a few pixels are more than enough for our purposes. In fact, most of the white and red emissive materials in the game are made from just those few pixels. An example is this scene with the bright white sections behind the three dark panels on the left side of the image:

hevn screenshot 2016 11 03 08503


Back to our effect - let's zoom in on the albedo and emissive textures to see exactly what part of the textures we're concerned with. I've marked the albedo texture with a red arrow showing what part of the texture is actually emissive:

surfaces atlas zoom


surfaces atlas emissive zoom


Model and UV Map

Now that we know where we can quickly find an emissive section of the texture, we need to figure out how we can progressively show a surface going from non-emissive to emissive - almost like it's moving. For that we need to look at the model and UV map for the solar panel array.

solar panel


So what we first need to do is make sure the emissive part of the model is its own object in blender. This will introduce an extra draw call in Unity as it will end up being an "instanced material" - meaning an extra draw call will be added. But we think it's worth it.

​Finally we can unwrap that section of the model, shrink the UV down to something pretty tiny. We need to place those UV coordinates just below the emissive part of the texture, like so:

surfaces uv nonemissive


As you might have guessed, all we have to figure out in Unity is how can we "move the UV coordinates" up so that it looks like more and more of the UV unwrapped section consists of the emissive part of the texture and stop it there, like so:

surfaces uv emissive


Something to note here is that because of the look and style we're going for in the game, we don't really need to unwrap the power-up/emissive part the solar panel model with the highest fidelity. Also it just so happens that the emissive part of the texture lies right above a half decent "sci-fi surface looking" non-emissive part.

Texture Offset in Unity

Let's take a look at how it comes together in Unity. In the image below we've highlighted the "power-up" part of the solar panel array. The textures mentioned above in the post are all part of the "Surfaces__Master" material, which is assigned in the MeshRenderer component.

solar panel texture offset


We've also created a script called "TextureOffset" that we'll use to achieve our effect. What this script does it move the material's texture offset value for the instanced material over a specified period of time. The code looks like so:

textureoffset code


So basically when the player uses the lever in the solar panel array, SetDoOffset(true) is called and the texture offset is adjusted slowly over time. Note that we're basically offsetting the texture itself and not the UV map, but the desired result is the same. Here's a sequence of images demonstrating what adjusting the texture offset Y value at 0.0, 0.0005, and 0.001 does:

offset at 0


offset at 0 0005


offset at 0 001


All we're doing is adjusting the offset Y value over time! Here's the effect again with the material selected.

Conclusion

There are likely many ways to achieve this effect and I'm sure there are muchh more efficient and elegant methods. In any case, it was fun to experiment using what we currently have to get a neat effect in a relatively short amount of time. Thanks for reading!

​Larry

Comments
e_Glyde
e_Glyde

A neat simple hack for a neat effect.
Neat!

Reply Good karma Bad karma+1 vote
Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.