Dark Side of the Wall

In the last post, I promised to talk about the shock wave effect. But after showing my fancy shiny demo level to Ibrahim, he told me that it would be much better if I made the insides of the wall darker. Like this:

It definitely has more depth

After thinking about it for a while I figured out a way how to do it. While it is not perfect it is good enough for me. If you know a better way please let me know, I would love to hear it!

The first thing I thought of is to make use of secondary textures and renderer features. But this solution was complicated, and I couldn’t make the shock wave effect work with it properly. Then I realized that I’m not using the sprite colors, only the alpha values. So why not assign one color to render the outline, and another to render the inner part?

So far it may seem like I’m describing how a default sprite with colors would work. But if you look carefully, you will notice that the inner parts of tiles are not affected by the bloom effect. To achieve it I added a second camera as an overlay that is not affected by the post-processing effects.

Finally, to make it all work I need to duplicate the grid, move it to a layer which will be rendered by the second camera. And this is the part that I don’t like. I need to have two same grids with different materials. Good news is that the materials are using the same shader. Namely this one:

A modified version of a shader from the previous post

As you can see I modified the shader from the previous post to suit my needs. To make it work I need to have sprites with blue outlines and green inner parts. The lerp value will determine which color to draw. A quick summary:

  • Recreate the shader
  • Create two materials with lerp values 0 and 1 respectively
  • Duplicate the grid (or a sprite)
  • Move the new grid to another layer, let’s call it “Fill”
  • Remove everything unrelated to rendering from the grid, such as rigidbodies and colliders
  • Create a second overlay camera and make it render only the Fill layer

Here is the result:

Much better!

Don’t forget to follow us on Twitter and Facebook, and let me know if you have any feedback. See you next time!

Leave a Reply

Your email address will not be published. Required fields are marked *