Home › Page › Tutorial #4 – The UghAlign

Tutorial #4 – The UghAlign

Mini Tutorials > Tutorial #4 - The UghAlign

#4: The UghAlign

UghAligns are used to keep Transforms aligned either to corners of the screen (for supporting multiple aspect ratios) or to UghSprites.

The UghAlign is a very powerful tool that, when used properly or creatively, can be used to make your GUI layouts extremely flexible. Once you get the hang of an UghAlign, feel free to use it however you like. However, before that point, we are going to show you two methods that you can start out using to align your Ugh layouts.

To demonstrate how UghAligns work, we’ll be aligning parts of a dialog that we created over the past three tutorials. If you didn’t start at the beginning, you can just open up the scene “Tutorial #4″ under Tutorials->Scenes and you’ll be right up to speed.

You can do many things with UghAligns! In this tutorial, we’ll hopefully make you comfortable with a few of what we think are the best ways to use them.

You can either follow along with the video, or step through the written tutorial below.

Technique #1 – Using an UghAlign on an UghSprite or UghText

You can add an UghAlign directly to a gameObject with an UghSprite or UghText component. There is even a button to do this in the UghSprite’s or UghAlign’s Inspector view. (Remember, an UghButton is a type of UghSprite!)  This technique is especially useful when you have a single UghSprite or UghButton that you want to keep in the corner of a dialog box or of the screen. Using this technique when you want multiple elements aligned to a side or corner, however, is pretty cumbersome and not really recommended. If you have a bunch of stuff you want to keep in a corner or along an edge, skip down and see Technique #2.

Let’s make a single “Close” button for our dialog, and align it to the top right of the dialog sprite itself.

  1. Find the Sprite Definition named “close button up” under Included Ugh Assets->Graphics->Shiny Silver Chrome->SpriteAtlas->Sprite Definitions, and create a button with it. If you like, drag the “close button down” Sprite Definition into the Pressed Definition field for the new button.
  2. Make sure to drag your new UghButton to be a child of the UghPublisher Transform, since it won’t do anything
  3. Select your new UghButton in the hierarchy view. Find the button that says “Add Align” in the Inspector view, and click on it.

The default Align Type for an UghAlign is “To Screen.” If we wanted this button to stay in a corner or along an edge of the screen, we could use that, but we want to align it to a corner of the UghSprite which is the dialog background.

  1. Change the Align Type to “To Sprite.”
  2. Drag the “dialog background” sprite into the new Align To field in the UghAlign.
  3. Change the Point To Anchor To to “Upper Right,” since we want to anchor the button to the upper right corner of the dialog background sprite.

See how the button now aligns itself to on or near the top corner of the dialog background? Chances are it’s probably centered on the upper right hand corner, however, and not slightly inset and smaller like I’m guessing you imagined it. This is one way you might fix that:

  1. The size of the Close Button is changed easily enough — just change the scale of the Transform.
  2. To reposition a sprite which you have an UghAlign on as well, you can’t simply move it from within the Scene or Inspector view, since it’s been locked into one position. Instead, find the Anchor variable in the UghSprite (or UghButton) script on your sprite/button and change it to Custom. Note, if you want it aligned snug to the top right, you can choose “UpperRight” in this case. I’m assuming that you, like me, want a little spacing and flexibility in your UI.
  3. Once you’ve selected the Custom Anchor, you’ll see the Custom Anchor Offset variable appear. Drag the x and y values around until the sprite is where you would like it to be. Rescale it again if you need to.

In this example, the UghSprite we want to align needs have its position tweaked by using the Custom Anchor Offset rather than the Unity Transform movement tools. This is fine for a single sprite, but especially not ideal for managing a more complex UI with many sprites and texts. For complex UIs, we recommend…

Technique #2 – Using an UghAlign on a parent Transform

The cleaner, more organized way to use an UghAlign is to put it on a blank Transform, then parent all of the elements you want to align together into that Transform. This allows you to align a group of UghSprites and UghTexts using a single UghAlign and to tweak their positions using the Transform positioning tools integrated with Unity (dragging the arrows around in the Scene view).

We’re going to align both of the buttons in the dialog together to the bottom of the dialog background.

  1. The first thing we need to do to accomplish this is create a blank GameObject and make the UghPublisher Transform its parent. Name it something like “Buttons Align” and drag it into the UghPublisher Transform object.
  2. Make sure this gameObject is selected, then go to the Ugh window and find the Align section. Make sure “Align to” is set to “Lower Center” and “Add as Component” is checked. Click “Align to Screen.”
  3. For technical reasons, you aren’t at this time able to align a blank transform to another sprite from the Ugh window. However, this is easy to do once the UghAlign has been added as a component. With the UghAlign object selected, go into the Inspector view and change “Align Type” to “To Sprite,” then drag the dialog background sprite into the new “Align To” field that appears.
  4. Once the Transform has been properly aligned, drag the two buttons you wanted to align (as well as any UghText labels) in as children of the “Buttons Align” gameObject. The buttons and texts will maintain their position, but now they will move when the bottom center of the dialog background moves. Try it out!

For this tutorial, I’m also going to align the dialog text to the upper left corner of the dialog background. Note that, as we aligned all the parts of the dialog to the dialog background itself, we unparented them from the dialog background (if you didn’t notice before, you can notice it now — whoa!). The result is that rescaling the dialog background doesn’t rescale any of its component parts, it just moves them to their new position within the dialog. The upshot: you have a super flexible dialog which can be made any size and still look just as awesome as it was when you first laid it out.

Aligning to the Screen

Even though in this tutorial all we did was set UghAligns to align to UghSprites, don’t forget that you can also align them to corners or edges of the screen! Pause buttons, toolbars, and other UI elements that you want to stay nestled into one corner, no matter what the screen resolution, are easy to implement with Ugh. Again, we recommend technique #2 for aligning groups of buttons or sprites to a screen corner, but technique #1 works just fine for single buttons or sprites.

That’s all for this tutorial series. We hope you enjoyed it and that it helps you to get started with Ugh.

To learn more about the cool stuff Ugh can do, we recommend tackling these tutorials next (if you haven’t looked at them already), or just looking at the documentation for whatever you’re interested in: