WEEK 2: Stat Shader

This week, we are adding some visual flair to our crafting tree by utilizing shaders in Godot! These kinds of displays have been common in classic RPGs like Pokémon. Our goal is to create a radar chart to visualize flavour values for each ingredient, which can then be passed on to each inheriting node.

The Building Blocks

We need to break down the shader into its simplest components:

• the web-like grid
• the radial lines emanating from the center
• the polygon to display our values.

Initial Setup

We will be applying this shader to a simple ColorRect, so the shader type will be declared as canvas_item. Next, we define some essential uniform variables, including spacing, radialLineThickness, and the radar chart values (value1 to value5), each ranging from -20 to 20, which will map to the polygon vertices.

Creating the Grid

To start off, we define the vertices for our pentagon. The grid pattern of our web chart has to comply with a specific spacing. For this, we utilize a Signed Distance Function (SDF), which tells us exactly how far away from a shape we are at each point. Here, we make use of the sdPolygon function.

Adding Radial Lines

For the radial lines, we iterate over each side and calculate the direction based on the previously calculated angle. Lastly, we draw the lines emanating from the center using another distance function.

The Pentagon

Overlaying the radar chart involves mapping the input values to the pentagon's vertices. Each value is normalized and then multiplied by the unit vector corresponding to the pentagon vertex. A separate distance calculation determines the distance from any point within the pentagon to the edges of the radar chart, allowing for dynamic drawing based on the input values. This step brings our radar chart to life, making it responsive to user inputs.

Finally, we add a few adjustments to align our UVs and apply a base color to each component to finalize our chart and improve readability. This chart can easily be customized for use in various other components, such as character stats, adding a delightful visual element to our crafting tree.

Final Shader

- See you next week!