Progress Update #23

 So much UI...

    This past week has been entirely dedicated to adding depth to the UI in the form of detailed information about the planets, with a few exceptions for improving player movement. 

Overview UI

    Most of the detail came here as the overview mode is where all of the information about the planets is collected and edited. At the end of last week, this information was just a placeholder textbox, but now was the time to fill it out with real information.

Star

    I started out with the star information widget as it was the easiest; only four main properties: radius, mass, luminosity, and color. Here's what that looks like:

    The idea of the structure of this UI was that each type of celestial body (star, gas giant, terrestrial planet) would have one of these information widgets that would be added to the main highlight widget (the green box in the picture). 

Gas Giant

    With the star information widget completed I moved on to the next, least complex, type; gas giants. Even though there aren't as many properties in gas giants as there are on terrestrial planets, the jump in complexity from stars to gas giants was pretty significant. The only real similarity was the radius parameter which I was basically able to Ctrl+C Ctrl+V and be done with.

    The next parameter was the gradient used to color the bands of gas. I tried as hard as I could to reuse the code from the color of the star properties, but I realized pretty fast that it wouldn't work. This is because there is no way to directly convert the gradient (a color curve object) into a brush that can be applied to the image (the image being the white square that displays the color in the star properties).

I was able to get around this temporarily by instead accessing the material parameter that the gradient is applied to. This method gets the gradient as a texture that can be applied to the image. This just pushes the problem down the line though, as at some point I will have to access the gradient directly when it comes time to implement setting the gradient in-game.

    The final hurdle for the gas giant information was the noise structure that governs the procedural storm texture generation. However, I noticed that I would eventually use the noise structure again in the terrestrial planet, so I decided to make the noise layer it's own widget element. The widget itself wasn't too terribly difficult, just seven numeric values akin to the radius, mass, and luminosity of the star. 

    I did notice though once I finished creating this widget that it was getting quite long with all of the rows of information. I did some digging on the internet and found a thread describing the "Expandable Area" component that works like an accordion web element; perfect for my problem. After going what some might call 'overboard' with expandable areas, I had a complete gas giant info widget that could collapse down quite small.

I am planning to extend the arm of the info widget so the values on the far-right don't look like they're floating

Terrestrial Planet

    Now it was time to conquer the most complex (in terms of in-game parameters) celestial body. But to be honest, by this point, having learned about expandable areas and the process of making reusable widgets (e.g. the noise settings) I was able to throw the planet setting together relatively quickly. 

    The only hiccup I ran into was again to deal with gradients. I wanted to display the color gradient used in each biome but, to reiterate the problem from earlier, I couldn't display the gradient directly. I also couldn't use that hack from the gas giant info because the texture that was returned included all gradients from all biomes. So for now they just have a big red X as a place holder.

    When I was almost done with the whole planet info widget I realized that it was getting quite long, even with all of the expandable areas. So to fix the size problem once and for all I added a scroll box to each of the info widgets. This meant that when the info panel got too long it would turn into a vertically scrolling field. I also had to turn on "Consume Input" to that if you used the mouse scroll wheel to scroll it wouldn't also change your camera speed as the overview camera speed is also controlled by the scroll wheel.

    With all that, here's what it looks like in-game:

Celestial UI

    With the first revision of the overview UI done, I pivoted to the celestial UI. My goals for the celestial UI were:

1. Have the entire UI bend as if it is being displayed onto a helmet visor
2. Put some digital effect over the bend (I ended up using a scanline effect)
3. Have a speedometer (otherwise speed is hard to gauge when you're in outer space) and other basic information
4. A stripped down version of the highlight widget from the overview that shows bare information (name, distance, relative velocity)

1)    I found someone else's blog where they explained how they did it for their game Unfortunate Spacemen. Very easy to follow guide and worked like a charm 10/10

2)    Looked up "Scanline Texture Free" and found this site that has five different renditions of a scanline texture. For now I am using the first one multiplied with the material from step 1.

3)    Speedometer itself was easy, just getting the velocity of the actor and getting the size of that vector. I also made an indicator for the state of gravity on the player (whether it is ignored or not). For this I made my own check box sprite, literally just an empty square for false and an inscribed square for true. Fancy!

I also wanted to know which celestial body had the greatest gravitational force on my player. To do this I made a TMap with key of celestial body and value of float. Then, when the velocity is updated by a celestial body, the value of the key of that body is set to the force that it made (written in C++ as: ForcePerBody[otherBody] = force.Size();). Then when you want to get the body with the most effect on the player you can do this:

4)    Mostly copy/pasted functionality from the overview mode with small additions like an animation for focusing a planet.

Overview UI Round 2

    Because I had some more time today before the week was over, I decided to start on the editable overview UI. Again I started with the star widget because it's the simplest. In the widget all I did was change the text boxes to editable text boxes. Then in C++ I implemented a getter and setter for each of the properties. The setters were the most important because they would make the changes to the variable effect the actor.

    The hardest parameter to implement though was the color, as Unreal has no in-engine solution for a visual color picker. Though I thought it was certain that someone had already come up with a solution for this and indeed that was true. There is a free engine plugin called Simple Color Wheel which is exactly what it says.