Building the UI

At this point, we want to give the user the ability to clear a scene and turn off the planes. The planes are helpful to identify surfaces we can drop objects onto, but they really distract from the experience. We will do this by building a dead simple UI with a couple of buttons. Fortunately, Unity has a very powerful UI system called uGUI, which will allow us to quickly do this. Open up the Unity editor to the Main scene and follow along:

  1. Click on an open area of the Hierarchy window to ensure that your selection is cleared. We do this to avoid attaching objects to other objects mistakenly.
  2. From the menu, select GameObject | UI | Canvas. Name the new object as UI and ensure that the properties for this object match the Inspector window in the following excerpt:
Setting the properties of a new UI canvas
  1. The settings we use on this Canvas allow our child UI objects to scale automatically with screen size based on a specific resolution. If we didn't do this, our UI controls would scale differently on each device. This allows us to keep a consistent look, which is a good thing.
  2. Select the UI canvas and from the menu, select GameObject | UI | Panel to add a new child panel to the canvas.
  3. Select the new Panel object. In the Inspector window, click on Add Component and then search for and add a Grid Layout Group component. Then, set the properties of this component to match the following screen excerpt:
Setting the Group Layout Grid (Script) properties
  1. Grid Layout Group is a useful tool for automatically laying out objects. The layout will automatically resize itself and adjust its child grid components.
  2. With the Panel still selected, change the Image component's Color property to transparent. Do this by clicking on Color Selector Area next to the Color property and set the color to #FFFFFF00 or Alpha 0.
  3. Select the Panel object in the Hierarchy window and from the menu, select GameObject | UI | Button. Rename the button as Clear.
  4. Expand the Clear button and select the child object. Change the Text components Text property to Clear.

 

  1. Repeat the sixth and seventh steps for a new button called Planes. When you are done, your Hierarchy window and Game window should resemble the following excerpt:
The finished buttons and panel in 2D view
  1. You can view your scene in 2D view by clicking on the 2D button at the top of the Scene window. This is useful for previewing the UI elements you are building. You can use your mouse and keyboard to adjust the view on your own after that.
  2. Connect, build, and run. The buttons don't work yet, but change the orientation and see how the buttons scale.
Feel free to style these buttons as you wish; after all, this is your app too. You can also add a slide in menu if you wanted. There are plenty of excellent resources and good books available on Unity uGUI development that can guide you on how to extend the UI for your look and feel.
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
13.58.10.55