Lets Build Community

Lets Build is a community of 163 amazing members

We're a place where indie game developers to connect with one another to share ideas, ask for help and teach each other.

Create new account Log in
loading...

Cannon Toss - Anchor's away!

cpluta profile image Chris Pluta ・5 min read

Thinking about my last update I realized I totally forgot to mention what I learned by working with the Canvas. The thing I learned about is how to stick UI elements in corners and do so without funny math.

This by no means is fully comprehensive of what you can do with Canvas, but it is in relation to how I used it so far.

Setup Canvas

To make a new canvas, in Unity got to GameObject -> UI -> Canvas. With this we can now start making a HUD, pause screen or anything we want the player to interact with like buttons or read like text.

Create Canvas Selection

I'm going to call my Canvas HUD.

Next is to talk about Render Mode. There are three types, screen, camera and world space. Screen will render in relation to the screen, camera will be in relation to the camera, and world space can be placed anywhere and observed when in view within the world itself. The way I tend to think about it is this way, screens scale and so will the UI, a camera will render exactly as it sees, and world space is like driving by a billboard.

With that knowledge I will choose to use the camera overlay. By choosing this I can see what the game will look like better through the editor as well.

Once camera is chosen, I will pick my Main Camera is the Render Camera.

Canvas Setup

Add some Text

Now that there is a Canvas we can add some elements. For my game I need to display whether the music is muted, and how fast the ball is going.

To do this I need some Text. I will right click HUD and choose UI -> Text.

Create Text

Most of the components here are related to the UI element itself. In this case there is a Text which can be referenced to change text dynamically or static depending on your needs.

However I want to focus on Rect Transform. Here is what is super exciting!... to me at least. 😁

Pivot

I'm going to start with Pivot first since it makes sense in my head how to process placement.

Text Pivot Highlight

By default it will be placed at [X: .5, Y: .5]. What does this mean? Well it's the "anchor" point of the element. Imagine putting your finger in the middle of a square sheet of paper. Rotate it clock-wise. The whole sheet goes according to that single point. In this example your finger is acting as the "anchor".

The Pivot is also used to determine the position for example, if you wanted to have the element aligned on the left you will need to add 50% of the width to the offset it. When we talk about Anchors it will make more sense.

The range of each pivot point is from 0.0 - 1.0. and the points start from the lower-left of the element. So, each corner is set as: [X: 0, Y: 0] - lower left, [X: 0, Y: 1] - upper left, [X: 1, Y: 1] - upper right, [X: 1, Y: 0] - lower right.

This same effect is also applied to Sprites when you import them. If you observe the cannon barrel, I applied a left pivot so I can achieve an up and down effect. Going back to the paper example, you will see there is more leverage on the right side giving it greater range of movement rather than the left. In this situation a left pivot would have the values of [X: 0, Y: .5].

Anchors

Ok now that we have a better understanding of Pivot let's talk about Anchors.

Text Anchor Highlight

This establishes a reference point in the canvas of where elements will be placed. There is a set of Min and Max to help determine that space. Similar to Pivot these values are also from 0.0 - 1.0 and they also reference the corners in a clock-wise manner: [X: 0, Y: 0] - lower left, [X: 0, Y: 1] - upper left, [X: 1, Y: 1] - upper right, [X: 1, Y: 0] - lower right.

How does this work with Min/Max? When the Min and Max of X matches each other, as well as Y match each other you create an anchor point. This means everything is in relation to that point, so you can set the position and width and height as needed. If the Min and Max don't match then your element is in relation to the box itself. So if you do this you will notice your position gets changed to a set of margins instead, being top, left, right and bottom. So, if you set all these to 0 then your UI element will take up the entire anchor. If you add any number to any of these properties it will push from the boundry of the anchor inward thereby creating a margin.

I'm going to keep following the point example rather than margin, since it's easier for me to conceptualize and manage in my game.

If you notice when you start setting the Min/Max X/Y to match their counterpart the Pos X and Pos Y will change to compensate for the existing location of the element. So if you change these position to be back to 0, you will see your element is placed there.

So if we anchor to the lower left (Min X: 0, Min Y: 0, Max X: 0, Max Y: 0) and reset the position to [X: 0, Y: 0] then it will be in the lower left! 😮

Now what is with that fancy box? Well this is just a quick reference to set the anchor points in the desired location rather than trying to figure out where it goes.

Bringing it together

Now that we have a better understanding of anchors let's bring it all together.

If you were playing with the Anchors to be in the lower left (Min X: 0, Min Y: 0, Max X: 0, Max Y: 0) and left the Pivot at [X: .5, Y: .5] you will only see 1/4 of your element! If we want to compensate for this we need to set the X position to be 50% of the width of the box and the Y position 50% of the height of the box. That is most non-ideal.

So let's make this easy on ourselves and match the Pivot of our element with the Anchors. Then we get a nice and tight boundry on the lower left. Once we do this we need to make sure the Postion is set to [X: 0, Y: 0].

Now we can apply this to every corner of the screen and not do any math to figure this out.

Holy Biscuits Batman! That is super exicting! 😁

I hope you had as much fun as I did figuring this out.

Thanks for reading!

Discussion

pic
Editor guide