Texture2D colorSwapTex = new Texture2D ( 256, 1, TextureFormat. It will be best, then, if we simply create these swap textures dynamically, as we create the objects.įirst off, let's define a swap texture and an array in which we'll keep track of all the swapped colors: Furthermore, if we want to let multiple characters use different palettes for the same sprite at the same time, each of these characters will need its own swap texture. We know that we need a swap texture to be able to make use of our shader. Of course, this method wouldn't be very useful if we had to create swap textures by hand all the time! We'll want to generate and modify them procedurally. The shader is complete now we can create a swap color texture, fill it with different color pixels, and see if the sprite changes colors correctly. The first thing we need to do is to add an additional texture to the shader:įixed4 c = SampleSpriteTexture (IN.texcoord) įixed4 swapCol = tex2D(_SwapTex, float2(c.r, 0)) įixed4 final = lerp(c, swapCol, swapCol.a) * IN.color The resulting color is then multiplied by the alpha, to make the sprite darker at lower opacities. Since the demo project is made in Unity, I'll use the default Unity sprite shader.Īll the default shader does (that is relevant to this tutorial) is sample the color from the main texture atlas and multiply that color by a vertex color to change the tint. We'll implement this idea by modifying an existing sprite shader. Note that this may not work as expected if two or more colors on the sprite texture share the same red value! When using this method, it's important to keep the red values of the colors in the sprite texture different.Īlso note that, as you can see in the demo, putting a transparent pixel at any index in the swap texture will result in no color swapping for the colors corresponding to that index. Now, when the shader encounters a color with a red value of 25, it will replace it with the blue color from the swap texture: The swap texture, with the color at index 25 set to blue. If we want to swap this color, then in the swap texture we need to set the pixel at index 25 to the color we want the outline to be: blue. The outline color is the last one on the palette-the one with a red value of 25. Let's say we want to replace the outline/eye color (black) on the sprite with the color blue. Here are the red color values of the sprite palette's colors: This means that the swap texture will need to be 256 pixels wide, because that's how many different values the red component can take. The big question is, how do we link the color from the sprite texture to the color from the swap texture? The answer is, we'll use the red (R) component from the RGB color to index the swap texture. Instead, we will use an additional texture, which will contain the replacement colors. We would definitely like to avoid any conditional statements entirely, in fact. However, this doesn't scale well for many colors, and is quite an expensive operation. Now, let's think about how we could swap these colors inside a shader.Įach color has a unique RGB value associated with it, so it's tempting to write shader code that says, "if the texture color is equal to this RGB value, replace it with that RGB value". There are quite a few colors on this texture. Here's the example texture we're going to use to demonstrate the shader: I downloaded this texture from, and edited it slightly. (The other characters all use the same sprite, but have been similarly recolored.) Click Hit Effect to make the characters all flash white briefly. Use the color pickers to recolor the top character. You can check out the Unity demo, or the WebGL version (25MB+), to see the final result in action. In this tutorial, we'll create a simple color swapping shader that can recolor sprites on the fly. The shader makes it much easier to add variety to a game, allows the player to customise their character, and can be used to add special effects to the sprites, such as making them flash when the character takes damage.Īlthough we're using Unity for the demo and source code here, the basic principle will work in many game engines and programming languages.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |