Home › Page › Tips and Tricks

Tips and Tricks

After using Ugh (and Unity) for quite some time, there are tips and tricks to share that can hopefully make life for everybody else a bit easier…

The purpose of SpriteAtlases is for draw call optimization.
Organize your SpriteAtlases with optimization in mind.
Duplicating Ugh Assets can be dangerous unless you use specific duplicate feature in the Ugh Window.
If you really really want to use the built-in Unity duplicate feature…
Organize your z-axis.
Prefabs are your friend.
If you can avoid using an UghAlign or UghStretch by smartly parenting objects in the hierarchy, do it.
A padding of 5 pixels, and removing it with edge crops, is the magic solution to prevent artifacts along the edges when working with compression.
9-Slice is magical.
You can use Unity’s built-in animation editor to make smooth UI animations!  While this is totally awesome, there are some things to remember to make life easier…

The purpose of SpriteAtlases is for draw call optimization.

If you have the choice between creating a bunch of small SpriteAtlases vs. a few large ones, try and migrate towards the latter.  One great benefit of the Ugh system is that it is highly optimized because of its use of SpriteAtlases.

Organize your SpriteAtlases with optimization in mind.

Only so many sprites can fit on a single SpriteAtlas, which means that most projects will contain multiple SpriteAtlases.  When considering what sprites should be contained in a SpriteAtlas, considering the context in which they will be displayed will be best for optimization.  Try and group together sprites that will be shown at the same time.  Even if only one sprite from an atlas is loaded, the entire SpriteAtlas will be loaded into memory. Also, minimizing the number of SpriteAtlases used at once will minimize the number of draw calls.

Duplicating Ugh Assets can be dangerous unless you use specific duplicate feature in the Ugh Window.

If you use the built-in Unity duplicate feature, there can be some strange results in some cases with UghSprites.

If you really really want to use the built-in Unity duplicate feature…

There are some cases where using the Ugh duplicate is just painfully tedious.  If you insist upon using the built-in Unity duplicate feature, to be safe follow this step: in any duplicated Ugh element (button/sprite/control) go to the Inspector and set the Mesh in the MeshFilter component to None.  The mesh will quickly regenerate and go back to normal.  If you do not do this, the asset and the asset it was duplicated from will share the same mesh data, which means if one is scaled and stretched, the other will deform as well.

Organize your z-axis.

Ugh elements can lie anywhere on the z-axis from -10 until the camera clips it off.  This gives you virtually unlimited ability to have complexly layered interfaces.  I strongly recommend intelligently grouping things together in nice clumps along the z-axis, for sanity’s sake.  You can place items extremely close together before you encounter z-fighting, so I commonly have elements that belong in a single dialog box, for example, only .1 unit apart.  I keep a rough guideline about where different elements lie along the z-axis.  An example of my internal dialog: “Dialog boxes, are always closer to the camera, so we’ll keep those around -5.  Background is…well in in the back, so let’s shove that out of the way at 10.  My interactive UI I’ll keep around 0 because it’s a nice elegant number.  Etc etc..”

Prefabs are your friend.

We can’t stress enough how helpful prefabs can be.

If you can avoid using an UghAlign or UghStretch by smartly parenting objects in the hierarchy, do it.

UghAlign and UghStretch are very flexible and powerful tools — but overusing them can simply overcomplicate.  After using Ugh for quite some time, I’ve come to realize that often times smart parenting of game objects can accomplish the same results.

A padding of 5 pixels, and removing it with edge crops, is the magic solution to prevent artifacts along the edges when working with compression.

Compression can create some unwanted artifacts at the edges of a sprite.  When creating the base image for a sprite in an image editing program, make sure there is at least a 5 pixel padding around the image to prevent those ugly artifacts. You can then remove those 5 pixels by using the “Edge Pixel Crops” in the inspector of a Sprite Definition.

9-Slice is magical.

You can save heaps of texture memory by creative uses of the 9-slice concept.  Think outside the box a little bit about how you can stretch things to save image space.  Learn about 9-slicing here.

You can use Unity’s built-in animation editor to make smooth UI animations!  While this is totally awesome, there are some things to remember to make life easier…

First of all, take a look at the example scene “Animation.”  You can see how the animation is being fired.  Also note that I created an “Animation Container.” Even if you’re animating a single sprite I would recommend this.  The purpose of the animation container is because it makes the animation very reusable, but more importantly if the animation affects scale, it is relative so if the shape and scale of the sprite itself changes, it wont result in a distorted mess.