Shaders for 2D games and UI elements

Ocasionally we find it useful to make shaders for rendering simple geometrical shapes; these are mostly for making UI elements such as selection indicators (particularly circular and hexagonal rings). You can now get these for free. The package contains the following shapes:

  • circle
  • ring
  • square ring
  • regular hexagon
  • regular hexagon ring
  • equilateral triangle
  • equilateral triangle ring
  • regular six-pointed star
  • regular six-pointed star ring
  • rose
  • asteroid

I doubt the last two will be useful, but they are fun to play with. All of these have been implemented using polar equations; even the hexagonal, triangular and star ones (see Hex Grid Geometry for Game Developers for details on the math for these).

Another shader we have often needed but never had is a tri-tone gradient map shader. The general idea is for the shader to work like a colorize function; however, you can set the black and white points to any color, making the shader more flexible. We most often needed this for UI (we ended up always making separate sprites for the shadows and highlights).

screen_636037894593531747 screen_636037894530107039

screen_636037894274958213 screen_636037894660349609

Here is how the shader interacts on a grayscale gradient:

Gradient2

 

Leave a Comment

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

Scroll to Top