EZGUI comes with some setup documentation, but I think its included “Getting started” guide is lacking a few key steps. So I’ve listed my setup steps here (some of which are included in the official documentation):

Initial setup

1. Download the EZGUI package from AnBSoft
2. Open your Unity project, Unity menu: Assets > Import Package >Custom Package…
3. Locate the core EZ GUI unityPackage file which came with the EZ GUI distribution. Select it and click “Open”. Import all files.
4. Ctrl + Shift + N to create a new empty GameObject in your scene’s Hierarchy
5. Select the GameObject, rename it (F2) to “UIManager”
6. With object still selected, add a UI Manager via Unity menu: Component > EZGUI > Management > UI Manager

You now have a GameObject with an EZGUI UIManager attached in your scene. This brings us to the end of the included EZGUI setup steps. How about setting up the UI Manager though?

For now, we’ll leave all the UI Manager options set to default, except for UI Cameras, Default Font, and Default Font Material.

Setting up a UI Camera

Finished UI Camera Settings

1. Add a new empty GameObject to the scene (Ctrl + Shift + N or Unity menu: GameObject > Create Empty)
2. Rename object to UICamera
3. Attach a camera to the object. Unity menu: Component > Rendering > Camera
4. In the Inspector window, select the Layer dropdown, and Add Layer…
5. Find an empty “User Layer x” item (I chose User Layer 10), left click to the right of the label, and enter in “UI”. Select your UICamera from the Hierarchy pane again.
6. In the Inspector, set your new UICamera’s transform to (0, 0, -100).
7. Set Culling Mask to UI only
8. Set Projection to Orthographic
9. For Size, enter the value that is half of your target screen height. i.e. if you’re targeting the 1st and 2nd gen iPads in landscape mode, which have a vertical resolution of 768 px, size is 384.
10. Set Depth to 100. This is the highest camera depth allowed, it will ensure your UI draws on top of other cameras (like your main/world camera).

Now let’s finish setting up UIManager.

Setting up UIManager

Finished Setup of UI Manager

1. Select the UIManager GameObject (GO) in the Hierarchy again.
2. In the inspector, expand the drop down for “Ui Cameras”
3. Expand “Element 0″
4. Drag your UICamera from the Hierarchy onto the “Camera” field where the text “None (Camera)” is displayed.
5. Change the Mask field to UI only (Select “Nothing” to deselect all, then select “UI”).
6. Now to setup Default Font and Default Font Material, if they aren’t filled in already. EZGUI includes Arial as its default font for you already. We’ll use that for now.
7. In the Project pane, expand Plugins > AnBSoft Common, Standard Font
8. Drag the third “Arial, Fancy” item (icon looks like a page) onto the Default Font field in the Inspector.
9. Drag the second “Arial, Fancy” item (icon looks like a sphere) onto the Default Font Material field in the Inspector.

EZGUI is now sufficiently setup. Let’s render some UI in the scene now!

Adding text to the Scene

1. Create a new Empty GameObject (Ctrl + Shift + N — that’s the last time I’m supplying the shortcut!). Rename the GameObject “Text”.
2. Add an EZGUI SpriteText component to the GameObject: in the project pane, expand Plugins > Sprite Scripts
3. Drag SpriteText from the Project pane onto your new Text GameObject.
4. With the Text GO selected from the Hierarchy, Change its layer from “Default” to “UI” (this allows our UI Camera to render it).
5. Set the Transform Position components to (0, 0, 0)
6. Under the Sprite Text (Script) component properties, change Character Size to something beefy like 50.
7. Change Anchor to Middle_Center.
8. In the Scene pane, click on the Camera doodad at the top right until your scene is oriented in “Back” view. This is the view that your UI will look proper from.
9. If you don’t see your text yet, select the Text GO in the Hierarchy and hit (F) to frame the object in Scene view.
10. You should now see your white-colored “Hello World!” text floating near the center of your screen.
11. Let’s add another field behind it so you can see how depth sorting works. Right click your Text GO and select Duplicate. Rename the new one “Text2″.
12. In the Inspector pane, change the color to something not white, like red or green.
13. Change Text2′s Transform x and y position slightly so that it’s offset from the other Text GO. Then, set the Z component of the position to 1.
14. Notice that your colored text now shows behind your white text. In this setup, objects in the UI layer with the most negative Z value are rendered on top.
15. Click Play to see your text in your game!
16. Grab a beer and high five anyone nearby.

Finished Scene View

Next

In my next post, I’ll detail the process of adding textures and controls like buttons into the scene.