Jan 30, 2017
by Andy Sheehan
There are two UI elements that I've built in Unity for From The Sun by creating a 2d mesh and mapping portions of this 8 pixel image to it.-> 
<- It's 1x8 and I'm just using it for color definitions. You can see the two UI elements in the picture below. They're the big rainbow gauge on the right side and the smaller rainbow gauge inside it. The big indicates the player's current color and the colors that are upgrades or downgrades from the current. The smaller one shows a history of the players colors as they make progress towards the current planet.
The big UI element is basically just a stretched out version of the raw image. I create a mesh of vertices that define those bars, with wider space for the player's color. The uvs just correspond to the image distributed evenly among the vertices, working out to one pixel providing the source for the two triangles that make up each bar. The triangles are just built directly from the vertices. The biggest effort for building this element was animating between the focused color, which was still just maintaining the current point of the boundary and animating it with time, stopping when the new color is full sized.
The smaller element took a little more building up of data to represent what is being shown. Instead of a current value to track that just represents an index the progress bar tracks the history of how much time the player spends as each color, in order and as distinct sessions. It was easy enough to set up a Progress class that has the color and duration, then keep a list of those, adding a new Progress item when the player's color changes and tracking time on that one. Then using the width and height of the rect that the progress bar will fill as boundaries I can start building a mesh from the bottom, adding new vertices from the bottom up for each progress item. This is where I went from copying code for creating meshes from vertices, uvs, and triangles and understanding it enough to read it and adjust it, as I did with the larger spectrum indicator to rewriting it completely to fit my needs. I iterate over the progress items, creating 4 vertices for each, uvs to sample the right color of the 8 pixel image, and triangles for those 4 specific vertices. This ends up with more vertices than actual on screen point locations, each boundary is 4 points for a line instead of 2, but as far as I can tell that's what I need to do to get the right uvs for each rectangle. I also make sure to only create triangles for the rectangles I want to display, not the infinitely small spaces between them. Once I reviewed the mesh generation code I already had and looked at how I was tracking the progress data this approach really fell into place and I feel like I have a better grasp of how a mesh and a texture map to eachother. The pointy bit and borders on the smaller gauge are done with a shader, the dot is just a copy of the renderer for the player that I move with the progress.