 Hello everyone, it's your host at CryptoGround here, my name is Zach and today I'm going to bring you another Unity tutorial video. Today we're going to be learning how to use anchors and to properly fit our text and our buttons. Anyways, before we begin, here's a message from our sponsor over at Goblin PCs. Are you a game developer, a gamer, or someone who wants to be either one of those in the future? Do you have the money to pay for a budget gaming PC, but you don't have the skills to research the correct parts and build it on your own? Well say no more. This video is sponsored by my buddy over at Goblin PCs. Goblin PCs will build the gaming computer of your choice and ship it right to you. It's like buying a pre-built computer, but someone's actually doing the right job and they know what they're doing. And so you don't have to worry about all the heat problems, unlike normal pre-builds. And I'm looking directly at overpowered, screwed at Goblin PCs. They were provided you with high quality customer service and 24-7 support. So if you ever run into any issues with your gaming PC, you can ship it right back to them and they'll fix it right up for you and they will cover the shipping cost as well. Be sure to buy your budget gaming PC, all the links are in the description below. If you could smash a like button for the YouTube algorithm, that would mean a lot. And subscribe to my channel if you enjoyed this content. And also for smashing a like button, if you don't believe me, that helps the videos. Well, say no more. Just look at this growth. This is all because you guys like to smash that like button for the YouTube algorithm. So today I'm going to be using this template that I've been using for the past few tutorials and our goal is to fit text inside these upgrade buttons here. So basically this is a scroll panel right here and it has a game object in here which contains all of our buttons. And if we turn off this mask, you can see all of our upgrades are here. So I'm going to be showing you different ways on how to fit your text properly in these buttons. And I'm going to show you three different ways. One of them is in a middle alignment and the second one will be a left and the third will be right. So one good way I like to do this is to create like, so again, this is just an upgrade panel, for example, but let's just have like a level thing display on the left. So I'm going to create that real quick. So what are our first encounter for using our anchors here? So I just created a new text here. Now I'm going to change this anchor because if you haven't watched my other anchor video, I'd highly recommend you check it out. But right now it's just positioned in the center. So I want to stretch this to fit the entire box here. And I'm just going to set every single left top right bottom to zero. So now it stretches completely and whenever this box stretches, the text will stretch along with it as well. So let's say we just have a bunch of text like this. Let me change the color and the font size so we can actually see what's going on here. Something like this. So obviously it's very blurry, but let's say you just don't want text in this green border here. So what we can do here is adjust this left top right bottom here and put a number to space it out. So if we put five pixels from the left, then we're going to be shifting this box for our anchor box or not our anchor box, but the actual text box to the left by five. So I'm going to do that. It looks like around the eight, the border is around eight pixels. So I'm going to set the left top right bottom to eight. And they've no longer kind of overlap like this. Obviously it's not going to look like a bunch of gibberish like that. There we go. We have our little level box. All right. So the next thing we need to anchor is this level box here. So right now it's still floating around and it's anchored to the center. So if we change the size of this middle upgrade here, you can see that it doesn't really position itself correctly. Let me turn off this mask. We can actually see this happen a little better. But you see that it's just staying in place. We don't want that. So to fix that, we want to click on this level and we want to change the anchor to the middle left right here. So now it will always be anchored to the left. If I stretch this, if I stretch this, oh, I'm using a vertical layout group. I forgot it stays on the left. Now if we anchor this to the right, it kind of does the same thing where if I adjust the left, it just stays there just like the center position. But if I adjust the right, it stays or moves with it. So we don't want that. Let's just undo what we had before, which is to anchor it to the left. Next, we want to display some text. So let's do some middle alignment and kind of have some fun with that. So I'm just going to copy and paste this text and just grab it right here. Let's just say we have some like an upgrade title and a cost and just stuff like that. Now this could be a stretch anchor because if we stretch this, this will stretch inside of the space like it is right now. And if we stretch this really far away, you can see how it's still within this box and it doesn't even like overlap our level text. So that would be a good thing for this. But honestly, a top, a top center would also work just as well or a top right. But I'm just going to keep it at a stretch like that. So here we can just have our upgrade title. I don't know, just come up with something epic and then have the cost right here. See something like this. This looks pretty good. So let's do our left alignment, which we're going to have the same level for all of these. And since we have our middle left alignment, we can just set position X to 75, which is half of the width and height and position Y to zero like that. Now there's different things you can do with these texts here. And that is you can have it alignments set to the left like that, or you can have it set to the right, which we're going to do that same thing here. And you could see how this works in different ways. It really, it's really based on your general design. But we're going to need some offset between the level box and the side here. So what we can do here is continue off with our stretch anchor here. And we can round these numbers up here real quick. But right now the top right bottom are set to eight and our left is set to 150 because that's the size of this level upgrade here. So I want to shift this to the right by eight. So I'm just going to add eight to 150. And you can see we have a little gap there. It looks a little better. And you can obviously adjust this to whatever makes sense. Whatever looks good. I think something like around 175 looks good for me. And I'm going to do the same thing for this one except change the, I'm going to subtract the left. Or actually not we're not changing the left or changing the right. All right. So the right right now has an offset of eight away from this anchor right here. So we shifted this one by 25. So I'm going to do the same thing here. So you do eight plus 25, eight plus 25. And now we have an offset 33. It looks pretty good. I think honestly either one of these look good. It really depends on just what your preference is. In conclusion, anchors are very helpful when it comes to positioning your text and also making things look right in the way you want them to be. And it's also good for having these be compatible with any resolution you want or any size of panel. If you enjoyed this video and if you liked this video make sure you smash the like button subscribe to my channel if you're new. Share this video with friends or new people who are wanting to learn new things about unity. It would be highly appreciated and make sure you smash the like button for the YouTube algorithm. Anyways, I'll catch you guys on the next one. Have a good day and night. Peace.