Prototyping UI in Unity Part 2 — Exploring and Customizing the Interface
< Previous: Installing Unity and Creating a Project
Since this tutorial series is geared towards designers, I like to compare the Unity interface to design software like Photoshop or Sketch. Comparing helps make the interface more relatable and less complex.
First, hide the camera icon in the middle of the Scene by going in the Gizmos dropdown and dragging the 3D Icons slider down like this.
The interface should now look like this:
Exploring the Interface
Scenes
By default, Unity will create a Scene whenever you create a project. A scene is equivalent to a Photoshop or Sketch file, it’s the file where all the UI is contained.
The Hierarchy
The Hierarchy is the column on the left, and it shows all the GameObjects in your scene. GameObjects are comparable to layers or folders in a design application, and the hierarchy is similar to a layers panel, in that it controls depth and parenting.
Depth however, is opposite of typical design software, in that the lower the GameObject, the higher the depth. This takes getting used to, but after awhile becomes second nature.
The Inspector
The Inspector is the column on the right, where you view the component properties of a selected object in the hierarchy. It’s where you would adjust object properties like scale, color, position or the text string.
Scene View
In the middle of the screen is your Scene and Game views. The Scene View is the editable, working view of your UI. You’ll see object boundaries, grids and positioning handles for editing your UI.
Tip: I highly recommend using a mouse with a physical scroll wheel, as opposed to using a track pad or a magic mouse. Otherwise, it will be extremely frustrating. To zoom in you scroll up, to zoom out you scroll down. To pan around you hold down your scroll wheel.
Game View
The Game view is the preview of how it will display on device. You can adjust the dimensions to different sizes — generic aspect ratios like 16:9 or 4:3, or specific pixels like iPad Wide (1024x768). You can switch between these settings to see how your UI layout will adjust to different devices.
You can also add custom dimensions not listed, like iPhone 8 Tall (750x1334) through the dropdown menu right below the Scene/Game Tabs.
Select the + icon at the bottom and add your custom one if it’s not already in the default list.
Now select your custom view from the dropdown list.
The Tools
The tools are used to navigate or edit specific UI properties and they are found in the upper left corner of the interface.
Hand — Pans around the scene
Move — Moves the GameObject X (Green) or Y (Yellow)
Rotate — Rotates the GameObject in 3D
Scale — Scales the GameObject in 3D
RectTransform — Adjusts 2D GameObject specific properties (Height, Width)
For most 2D UI Projects, you won’t be using the Rotate tool. Also, it’s good practice not to use scale to control GameObject size, but instead use the RectTransform dimensions. Scale creates unnecessary discrepancies between your mockups and how it exists in Unity. By using the RectTransform dimensions, you’ll have a 1:1 pixel ratio with your mockups (as long as you are also designing at 1:1 ratio).
The Project and Console
At the bottom of the application is your Project and Console. The Project is your file explorer, it shows all the files used in the Assets folder of your project
The Console is where you’ll see any errors or warnings. If you are doing custom scripting, this is where you’d debug it.
Like most software, you can customize the interface anyway you like and save your layout. Feel free to tweak or explore as you can always reset back to default.
Save your default scene
- Press ⌘-s (or ctrl-s on Windows) to save your scene
- Create a new folder called Scenes inside the Assets folder
- Call the scene PhotoApp
- Press Save
You should now see your saved scene in the Project explorer at the bottom:
Conclusion
Congrats, you’ve just created your first Unity iOS project! Now, let’s start learning some Unity UI concepts!
