I needed to implement a pie graph into a project, and couldn’t see one that had been done previously so I thought I’d build it and share it with you all.
This is also a great example of how to use engine-generated angle gradients instead of photoshop-generated texture-based ones, which often have issues with banding.
Download:
You can download the .uasset file here: https://www.dropbox.com/s/fu6s7kn3qpweef3/UI_pie_graph_all_in_material.uasset?dl=0
Feel free to use it in any commercial/non-commercial project.
Usage:
It’s currently set up to be used in a UI, but this can be easily modified. Create it as a dynamic material (this happens automatically when adding to a UMG image widget) and modify the parameters to change it.
Parameters ‘1’,‘2’,‘3’,‘4’,‘5’ take float values, which are then normalised and their share is displayed on the graph. E.g. Setting each value to 5 will give each value 5/25=0.2 of the graph.
Colours can be adjusted by changing the ‘1_colour’, ‘2_colour’, ‘3_colour’, ‘4_colour’, ‘5_colour’ parameters.
Lines can be changed or disabled by modifying the line_width parameter.
Images:
In-game UI:
How it works:
This helpful little fella generates an angle gradient:
The parameter values are normalised and subtracted from it (1-x to change direction) (also, each value adds to the values before) with Ceil functions turning it into a clean two-tone image for each value:
Previous values are subtracted to create separate sections and colours are applied:
Trig and the cumulative normalised values are used to calculate the endpoints of the lines. The DrawLine-2D function draws it for us:
Everything is combined and a sphere mask is applied:
If I was ever going to use this for more than 5 values, I’d generalise it further so that it only generates 1 segment, then use UI overlays to iterate through values in a function and do the work there, but in this project it’s never going to need more than 5. Should be super easy to modify for whatever you need though!
Follow me on twitter for future updates on stuff like this: @GSGBen