Review: Unity 3D UI Essentials

[UPDATE: This post was updated to correctly identify the names of the various Unity components for building user interface.  Previously, Unity has supported a GUI system that is now referred to as the “legacy GUI” or just “GUI” system.  The new system is called the UI system.  Unity documentation is still available for both systems and the older system remains.  As noted in the review, the author of the book covers both systems and I wanted to make sure I more correctly used the terminology in the review.  No other content was modified in the review.]

In August of 2014, Unity 4.6 was released.  Along with it came the long awaited tooling updates for the new UI system.  Prior to Unity 4.6, many experienced Unity game devs turned to the Asset Store to buy packages that assisted in creating top-notch user interface components.  The folks at Unity promised an overhaul to help the new and seasoned Unity game developer.

[Note: Unity 5 was just released, and that does NOTHING to invalidate the educational content of this new book.  The focus of Unity 4.6 was the new UI system and Unity 5 focused on many other improvements instead.]

Simon Jackson’s new book, Unity 3D UI Essentials, details how you can get to work using the new toolset, and it’s available now from Packt Publishing.  Simon was an influential XNA MVP and is currently an ID@Xbox MVP, which is Microsoft’s current class of professional experts on game development for Microsoft platforms.  He has a love for all kinds of game development platforms and tools.  Besides teaching others how great Unity is, he contributes to the MonoGame project.  So he brings a broad perspective of cross platform game development to the new Unity UI system.

I broke the book into three general parts: 1) A look back at the legacy GUI system of old, 2) Learning the new UI system, 3) A UI example walkthrough and advanced look under-the-hood. 

The Old Days and Old Ways of Unity GUI

First, Simon starts off by actually taking you back to the legacy GUI system we had prior to Unity 4.6.  Previously, all that was built into the framework were controls that you could update in your scripts inside a specific OnGUI() overrideable method.

The All New Unity UI System

Then Simon moves on to the second part of the book where he introduces the new UI system.  The book explains how to use the new Rect Transform component that is part of every new UI component you add to your scenes.  It is much like the common Transform, but has extra properties to help you position and scale your user interface elements.  This gives you the chance to make your interface look great on different size screens.

In this middle portion of the book you’ll also learn about the new controls and how to anchor them so they seem to stick to the parts of the screen you want them to.  Your HUD panels on the sides and bottom of the screens will stay anchored and proportional, for example, by placing the new Anchors in appropriate patterns.

A Complete Tutorial and Diving Under the Hood

I loved the last part of the book where Simon introduces you to the new Canvas component that offers exciting ways to easily render your user interface.  You can use the overlay rendering to lay components on the screen or position them in your 3D world, perhaps even choosing a Camera object to render them.  I was able to create a clickable toggle button set in 3D space on a slightly transparent image panel that looked like this:


I even set the panel in motion so it very slowly rotated back and forth, giving a tiny bit of kinetic energy to the UI.  And yes, even as the panel rocks back and forth, the checkbox clicks just fine.  The new Unity UI components take care of the 3D picking.

In Chapter 5, you’ll follow a fun tutorial where you recreate the scene on the cover of the book.  Besides being a great way to wrap together all the key elements of the new UI system, you’ll learn a few neat tricks about how to create beautiful effects using multiple cameras in a scene.  For example, when you look at the cover and see the spaceship with it’s flume pouring out the back of the engines, would you have guessed Simon created it by attaching a camera to a fixed position behind a moving spaceship?  It’s the kind of thinking that comes from experience and you’ll learn a little something just by going through the exercise.

Finally the book wraps up by showing you how to work with the source code for all the new components and extend them yourself.  This part of the book will be your deep dive into the internals of how the new Unity UI engine works.  As usual, it won’t just be about helping you learn the new UI, but learning quite a bit about how Unity functions as a whole.

As you can see below, I felt ready to try lots of new things with the different controls after reading the book.

More exploration after reading the book

Simon Jackson is someone you’ll want to follow for more than just learning about the Unity UI environment.  Follow him on twitter (@SimonDarksideJ) and he often posts great content found elsewhere on the web.  His blog is a treasure trove of resources on game development topics including Unity, MonoGame, and more.  He’s also a great friend to Philly GameWorks as two lucky winners got a copy of this new book at our last meetup.

So what are you waiting for?  THE essential resource to learn about Unity’s new UI tools is Unity 3D UI Essentials by Simon Jackson.


Disclosure: Philly GameWorks and the author of this post (Chris Gomez) gets NOTHING for promoting this book or if you buy this book. No affiliate relationship was set up for the links to the book on this page.  This is merely my review of the material after having had some time to read and understand the book.  I did NOT receive a copy of the book to review.  I paid for the book that I reviewed.  I did reach out to ask for copies to give away for the benefit of the group membership that attended our workshop on the Unity UI in Unity 4.6 and later.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s