UI Editor: Positioning & Resizing

Hi everyone, my name is Ren from Quicksave Interactive. In this tutorial, we will be discussing logical screen size, positioning, and resizing our elements within the UI Editor. As a UI designer or artist, you might be familiar with the challenges that come with creating UI across different resolutions. resolutions and devices. The quicksave toolkit provides us with a proprietary solution for maintaining position, size and aspect ratio across all resolutions. This is known as the logical screen size. Logical screen size determines how the pixel size and offsets of our note elements are mapped to our notes. the screen. When the device resolution or size matches the logical screen size, that mapping is one-to-one. Now, we have automatic scaling to cater for all resolutions, but thanks to the logical screen size, we can maintain the position, size and aspect ratio of our node elements. so they are never stretched or located incorrectly. This allows us to create single layouts that are consistent across all resolutions. Let’s take a look at the UI Editor and how we can set the logical screen size. In our UI Editor, we have the settings that we want to create. and under layout settings, we have the logical screen size. By default, it is set to 1080 by 1920, a 9 by 16 aspect ratio. This is typical for use when developing UI for mobile applications and games. Let’s take a look at how to change the screen size affects our view. Here we have the view with our start button. To demonstrate the power of the logical screen size, I’m going to change this to a 16 by 9 resolution. You’ll notice that the start button node element maintains its aspect ratio with no stretching and the position position is also consistent. Meanwhile, the size of the start button has changed, but this is only because this view is not a one -to -one mapping to the logical screen size. If we were to increase the view, you’ll see that the note element becomes enlargened as it attempts to map itself to the logical screen size. You’ll also notice, when I increase or decrease the view, the position and aspect ratio still remains consistent. To further demonstrate the logical screen size, we can change our values to something a little less common, such as 720px, by 1440px, a 1 by 2 ratio. You’ll notice that the aspect ratio of the start button still remains the same, as well as the positioning. And if we were to increase the size of the view, we now have a 1 to 1 pixel mapping, so the start button no longer increases in size. But if we were to decrease the view to a width that is less than 720 pixels the start button begins to become smaller as it attempts to fit and automatically scale within the view but thanks to the logical screen size the aspect ratio of the button and positioning still remains consistent Logical screen size is very useful for creating consistent layouts, but it can also become quite complicated, so it’s okay not to understand it at first glance. I encourage you to stick with the 9 by 16 or 16 by 9 aspect ratio depending. on your target devices. Our default pixel sizes are also encouraged to be used. Thank you for watching, see you again next time.

Hi everyone, welcome back. In this video, we will focus on positioning our UI elements. Let’s dive into the UI editor and learn more. Here we have our start button. If you remember correctly, our start button is a container node. Container nodes inherit the size of their parent, in this case it’s the full logical screen size of our view. Now our start button has two sprite nodes within it, the background and icon sprite node. As you can see these do not inherit that same size. This will allow us to position our background and icon sprite. sprite nodes relative to our start button container node. I will start with the background sprite node and I want to position this to the center of our start button container node, aka the center of our entire view. I will go to the node properties and I will find the node properties. parent align. The parent align is a percentage value from 0 to 1. Since I’m shooting for the center, I will set the x and y value to be 50 % or 0 .5. Now this isn’t exactly in the center of the start button container.That is because the origin of our background sprite node is on the top left. Rather, we want the origin to be in the center of the sprite node. To do this, we must use the anchor property. The anchor property allows us to set the origin of our node. So I will set this to the center by using 0 .5. And now the background sprite node is in the center of our start button container node. I will now do this for the icon sprite node as well. I will go to the hierarchy and select the icon sprite node. and then set the parent align to 0 .5 for the x and y values and set the anchor also to 0 .5. The parent align will always use the parent node of our node element as a reference point for positioning our nodes. So, in this example, I will go to the hierarchy and set the anchor to 0 .5 for the x and y values to this case, the background and icon sprite nodes are using the start button container node as a reference. Now let’s do the same for our exit button. I will unhide the exit button, starting with the background, set both the anchor and the parent align to 0 .5. and the icon as well. We now have a problem. The exit button overlaps our start button. I would like to move the exit button slightly underneath our start button. This can be accomplished using the exit button. node property. The offset node property allows us to position our UI elements using precise pixel values. Starting with the background sprite node, I will set the y value to 500 and then for the icon sprite node, I will set the y value to 400 and then for the icon sprite node, I will set the y value to 400. And now we have our exit button which is underneath our start button and no longer overlapping. There are many methods you can use to position your UI elements within the UI Editor. The anchor, parent align and offset are all great ways of accomplishing this. It is also important to keep in mind the drawbacks of using the offset. Since it is based on the logical screen size, this makes it quite difficult when directly positioning your elements and maintaining their aspect ratio. In our next video, we will look at how we can resize our UI elements. Thank you for watching. See you again next time.

Hi everyone, welcome back. In this video, we will learn how to resize your UI elements using the UI Editor’s node properties. Let’s dive in and learn more. To demonstrate how to resize your node elements, I will increase the size of our start button and decrease the size. size of our exit button. Starting with the start button’s background sprite node, I will go into the node properties and locate the size node property. The size node property allows us to set a pixel precise value that’s based on our logical screen size. So, when it’s 0, it uses the default size of the sprite. But we can resize this to make it larger. I want this size of the background to be 200 by 200. And that is a healthier, larger size now. I wish to do the same for our sprite icon. So I will go to our hierarchy and select the icon sprite. I will then go back to our node properties and set the size to 250 by 250. And now we have an enlarged sprite icon. Now for our second method of resizing our UI elements, we will use the scale of the sprite icon. The scale property is based on a percentage 0 to 1 so we can actually increase the size of our node elements beyond the 100 percent mark or decrease it below that. Let’s scale down the exit button and demonstrate how scaling the parent node can affect the children. nodes. I’m going to select the exit button container node and then in the nodes property I will set scale to 0.6 for both x and y. Now you’ll notice that I’ve scaled the exit button container node which is the parent of the background and sprite node. for our exit button. Now the container node here has definitely scaled down to 0.6 but also the children nodes have scaled down as well. If we adjust the size of the parent nodes the children nodes will also inherit these properties and that is because the children nodes have scaled down to 0 .6. node sizes and positioning are relative to their parent nodes. To clean up this UI, I will reposition the exit button so it no longer overlaps our start button. I will do this by using the offset property we learned about in our previous tutorial video. I will select the background sprite node and increase the offset. offset to 900 on the y -axis. I will do the same for the icon sprite node as well, increasing it by about 400 pixels. And there we have it, the exit button no longer overlaps our start button. While size and scale do provide you with similar results. results when it comes to resizing your UI elements. Size is more preferred since it provides you with a precise pixel value. Meanwhile, scale is more useful when it comes to using it with state modifiers. I highly encourage you to experiment with the positioning and size of your UI elements. And, I recommend that you subscribe to the QuickSave YouTube channel and stay up to date with our documentation website, where you can find more tutorials just like this. Thank you for watching and see you again next time.