Moving from NGUI to Unity UI

A bit of history

Next-Gen UI, lovingly known as NGUI, has been around since 2011. It is a very powerful UI system and event notification network. Thousands of Unity developers have used this product for creating 2D games as well as UI's.

Unity UI was introduced in Unity3d 4.6. It also is a decently powerful UI system and event framework.

In this post, I am not going to get into the discussion of which is better from a visual or performance standpoint. Both systems have their pros and cons, but Unity UI has the distinct advantage of being free.

The job
 

I was contracted recently to convert City Builder Starter Kit from NGUI to Unity UI. It really didn't make sense for a $30 asset to require separate purchase of a $95 asset. CBSK is a low budget starter kit designed to help those of us who may have a somewhat strained income reach for our totally attainable goal of creating the next Clash of Clans (at least in our minds).

Let's get started on that conversion.

NGUI and the Unity UI are similar enough that most of the work is simply swapping NGUI components for similarly named Unity UI components. The Unity UI and 2D tools themselves have received extensive documentation and tutorials. I would like to share a couple of my own "gotchas" in hopes of helping others.

Pixel problems

NGUI deals in pixels. You specify the size of your sprite in something like 200x100 and add a texture.

Unity deals in units. Never fear though, the conversion is actually quite simple. The unit size is set in the import options of the sprite, and it defaults to 100 pixels per unit. This means that an image or sprite with a unit size of (2,1) is equal to (200, 100). Alternatively if you are converting a screen UI only, you can use the drag and drop tools to make sure the new UI is the same size as the old.

2D sprite tiling

NGUI has a few things that Unity does not. One of those that I ran into is TiledSprite. While you can easily tile an Image in the Unity UI, there is no version of this in the Unity 2D sprite tools. Tiling is essential to a lot of 2D games that have a repeating background. To fix this, I created a class which simply replicates 2D tiling. Here it is for all to enjoy.

Event system

I love making use of the event system interfaces in Unity. Something that trips me up once in awhile though is remembering exactly how it works. Raycasting is the only thing that makes those events fire.

For example, I once got the bright idea to simply implement "IDragHandler" to manage panning of the camera. I created a full screen UI panel with no image, and added a simple class to it. I spent an embarrassing amount of time trying to figure out why it wouldn't work. You must have either an image for Graphics Raycasting (I didn't), or a collider for Physics Raycasting (I didn't have this either). Without either of these two things, and the appropriate Raycaster, the event system has no way of knowing what you are trying to interact with.

Should I do it?

My goal was to make it easier for you to switch if you decide too. Whether or not you should keep using NGUI is up to you. NGUI is quite capable, and if you already have a license and have it in your game I doubt it is worth swapping. With CBSK it was worth it because it helped the kit achieve its goal of being a cheap easy aid to getting started. You now get essentially the same product for $95 less than it costs before.

Thank you for reading my first blog post, please let me know what you think.