Book Image

Unity3D UI Essentials

By : Simon Jackson
Book Image

Unity3D UI Essentials

By: Simon Jackson

Overview of this book

<p>Unity is a powerful cross-platform development engine that provides rich framework to create 2D and 3D apps or games. Through Unity3D, users are able take master the complexities of game development with ease, including animations, physics, renderings, shaders, scripting and now, Unity have released a new and advanced system to cope with the UI demands for modern applications and games.</p> <p>Unity 3D UI Essentials is a complete walk-through of the new UI system in Unity V4 and beyond (including Unity 5). This fast-paced practical tutorial provides you with in depth details of the new UI controls and layouts that can be used to create stunning and multiresolution UI.</p> <p>Venture forth into the highly componentized and advanced UI system, covering new features such as responsive designs and layouts. Also you get to deep-dive into the scripting side of the UI system as Unity has made the entire framework open source, giving free access to the source code of the new UI system to all developers.</p> <p>So get ready for a wild ride into the new Unity3D UI system and set your course for awesome!</p>
Table of Contents (14 chapters)

Getting some perspective


As we start to look deeper into the Screen Space – Camera Canvas, we will see a world of opportunity to enrich our boring, flat UI (although I quite like a flat UI for many things) and make it a little more engaging.

As we delve into this, we'll first look at some very simple examples before jumping into our main demo scene in 3D.

Note

If you haven't started your project in 3D mode, then it might be worth starting a new project for this chapter in 3D mode.

It's not essential but will makes things a little easier.

As an example, we can work with the Field of View of our Render Camera to draw our UI out of the screen:

  1. Create a Canvas and set the Render Mode to Screen Space – Camera.

  2. Add a new Camera (Layer = UI, Clear Flags = Don't Clear, and Field of View = 1) and name it UICamera.

  3. Set the Canvas Render Camera to the new UICamera.

  4. Add an Image with a Button on top of it (Button as a child of the Image).

  5. Set each element transform's Pos Z value closer to the camera (Image 0...