Outside the Box Project Beta Work - UI Scaling Fix

Eventually I decided to create a build of the game to test how it looked. I found, to my concern, that the UI scaled up and out of place when I played the test build.

Figure 1.

Figure 1. was how the UI looked within Unity's Editor Play Mode. The UI looked fine and exactly as I wanted it to look and in the right places. Figure 4. was how it looked in the Build.

Figure 2.

The reason for this was because the Canvas Scaler (as seen in Figure 2.) was set to "Constant Pixel Size", what this meant was that the UI would adjust dependant on the resolution selected when opening the build and the resolution of the monitor the build was being played on.

This is a problem that most developers will face, as games will need to work on monitors and resolutions of all scales and sizes. 

Figure 3.

However for the purposes of this project, I only needed the UI to look right on both my computer and the computers in Class, the computers that our Tutor's would use to test our work when they come to mark it after hand-in.

So I simply changed the "UI Scale Mode" on the Canvas Scaler to "Scale With Screen Size" and input a reference resolution: 1920x1080 or 16:9 Aspect Ratio; the Aspect Ration I had been working on in Unity, the one that would show when I entered Play Mode in Unity's Editor. See Figure 3.

Figure 4.

Now the UI was messed up in Unity's Editor as it was in the test build (see Figure 4.), however, this now meant that all I needed to do was reposition and scale all our game's UI back to the way it was, seen in Figure 1. And after resetting our games UI, I created another test build that I played on both my computer and the computers in class/University. The UI was exactly as I expected it to be on both my computer and the ones in University.