Senior project, post 09: Graphics & UI

Having a whitebox is all well and good, but I still feel like there should be some rudimentary graphics to give at least a sense of what sort of feeling I'm going for. Also, this allows me to try out the Shader Graph system without too much consequence.

Again, I was primarily looking at Tron for inspiration, but the general idea of a high-tech/cyber space is pretty easy to imagine. You have lots of glowing lines moving across surfaces, and that's the primary aesthetic that I wanted to portray.

Going in, I had a decent grasp of what was possible using the Shader Graph, so the textures I created to make this effect were exceedingly simple. It was a 5 minute job in Nuke - roto out some squares, animate them, add a frame echo with fade, and add some glow to finish off. Rotate it 90 degrees and you have the vertical version.

Within the Shader Graph, I had two things I wanted to accomplish. The first was to get the texture to loop infinitely. This was very straightforward with the "Tiling and Offset" node, although I find the way it's connected to be unintuitive - you have to plug it into the "UV" channel of your "Sample Texture" rather than being a node that the texture is passed into. Connect the variables of the offset to a Time node and the texture scrolls.

Next up is the colour shifting. This was also fairly simple because my original texture was white - I'd just need to multiply it with a texture that constantly changes colour. This is created by feeding the sine wave of time with various offsets to the R, G, and B channels.

Repeat for the vertical texture (with different offsets for colour) and we have a very crude approximation of the sci-fi aesthetic.

I also wanted to give some texture to the arena walls - some sort of forcefield-like appearance that made its function obvious. For this, I didn't even need to create any textures externally! I used a the "cells" output of the Voronoi noise node, coupled with a "Sample Gradient" node, for the basis of this. Using the same method as before to give it movement through manipulating the offset, I added complexity by also adding a rotation, too. For the transparency, I fed a sinusoidal wave, multiplied by a scrolling noise texture, to the opacity channel of the material.

I also added the colour cooldown functionality, which limits how often a player can switch color. Adding this on to the existing colour change script was a minor edit, I just needed to introduce a few more variables.

How I handle when I can change colours. I know the "true : false" is unnecessary but it lets me know that the line is basically an if statement.

For clarity, I also added a visual indicator of when a player is able to change colour. This is done by hooking up the script to a slider. I made a quick UI element in Illustrator and then connected it to the colour change script. I also added a numerical percentage indicator, to go with my sci-fi theme.

Lastly, I added controller support, both for the movement and colour switching. For now, I'm testing with an Xbox controller - whose face button (ABXY) match the four colours you can switch to in my game. For obvious reasons, pressing a face button will switch you to the corresponding colour.