Scale vs Offset (UDim2) - Roblox GUI Tutorial #4 — Transcript

Full transcript

1. 0:00hey thanks for stopping by I'm going to be  introducing you to more technical vocabulary
2. 0:05and Concepts within GUI elements to further your  understanding of how we can position and size
3. 0:13these guy elements to scale them appropriately put  them in the right places that they need to be on
4. 0:20the player screen and just general things like  that because there's a couple of things that can
5. 0:23trip you up with GUI elements and this will serve  more as a technical video to give you a broader
6. 0:29understanding of positioning and scaling GUI  elements inside of your Roblox game so with that
7. 0:33out of the way let's jump straight into an example  all right let's think about this for a minute I
8. 0:36have this text label here that just says this is a  label and it looks pretty normal like in terms of
9. 0:43its position and its size of where we want it to  be so it's like a little bit under the middle of
10. 0:49the screen so it looks pretty okay but that's not  the whole picture here unfortunately if we change
11. 0:55the size of our window we can all of a sudden  see that this this text label is still showing
12. 1:02but it's now kind of clipped off of the screen a  little bit and if we continue scaling this down
13. 1:09it's not following our windows screen so if we  have a really small window it just completely
14. 1:16hides our label but if we scale it back up we can  still see it's here but it's not scaling with our
15. 1:22screen resolution so this is a very big problem  because Roblox can be played on multiple different
16. 1:29devices with different screen resolutions if  you're playing this on a PC for instance you have
17. 1:35a pretty wide screen but if you're playing this  on a phone it's going to be a very small screen
18. 1:40and if the and if the guy elements are not scaling  in respect to the resolution of our screen then
19. 1:47you're not even going to be able to see the GUI  elements or it's the GUI elements are not going to
20. 1:51be scaled properly and same thing can be said with  tablets and even TVs so this is definitely a big
21. 1:57problem and you might wonder how the heck we're  supposed to fix this there's a pretty simple fix
22. 2:01for this but first I want you to understand how  guy elements are positioned and sized according
23. 2:07to our screen's resolution so let me just hide my  GUI element for a second here so when it comes to
24. 2:142D or 3D planes there's going to be an origin  point so in this case if we're talking about
25. 2:21our 3D origin our origin point is going to be the  position 00 0 which is like somewhere around here
26. 2:29which is very close to the spawn location and when  we position something inside of the 3D workspace
27. 2:35it's set to a position that is an offset away  from the origin so for instance if I had a part
28. 2:43here that had a position in the Z axis that went  this way which is like maybe around maybe about
29. 2:4950 studs or something it's 50 studs away from the  origin the same thing can basically be said about
30. 2:56our 2D GUI screen as well so so our screen has  an origin as well but because this is 2D we're
31. 3:04not working with three numbers X Y and Z we're  working with two numbers which is just X and Y
32. 3:11so X being the horizontal position and then y  being the vertical position going up and down
33. 3:16and you might wonder where this position is the  position is going to be at 0 0 located on the top
34. 3:23left of the screen right here and so the offset  is basically going to be however many pixels the
35. 3:29G y element is away from the origin so if I took  this text label for instance and set this to a
36. 3:37position of 00 0 00 0 then it's basically going  to be set to where the origin is which is in the
37. 3:44top left corner but if I change this position to  let's say 500 pixels off of the origin then it's
38. 3:51going to be located right here rather than being  back here so the bigger the offset is from the
39. 3:58origin the the more it's going to go away from the  origin in this case the origin of the x is on the
40. 4:05left side which is zero and the bigger the offset  is the more the guy element is going to go to the
41. 4:11right and the same thing can be said with the x  value as well so the origin zero starts at the top
42. 4:16if we give it a bigger number it's just going to  keep going down like uh an offset of 500 here as
43. 4:22well it's just going to keep going down the bigger  number you give it so that's something important I
44. 4:26wanted you to know about so going back to what  I was saying with offsets we were I basically
45. 4:30changed the offset position of like the X and  Y of this text label to make it move away from
46. 4:37the origin but here's the problem with offsets is  that since it's a fixed pixelated number it's not
47. 4:44going to automatically scale itself according to  the screen's resolution of whatever device you're
48. 4:50playing Roblox in so what you have to do instead  is modify the scale property of its position or
49. 4:56size or whatever it is so that it will auto  scale scale the text label to fit on whatever
50. 5:02screen resolution you're playing a Roblox game in  so here's how we're going to do that if we select
51. 5:07our text label and we go down and look at our  position there's actually four values here not
52. 5:12two I'm going to explain what this means in a  little bit but what we're currently interested
53. 5:16in is two concepts it's our scale and our offset  properties so let's open up our position here and
54. 5:24there should be two tables here with X and Y let's  open up both of these we should see that there's
55. 5:29a property called scale and a property called  offset for both X and Y so how we positioned
56. 5:36the text label originally was that we changed  the offset so the offset of the X was 500 and
57. 5:43the offset of the Y was also 500 but as you know  this isn't going to automatically scale according
58. 5:49to the screen's resolution because offset is a  fixed pixelated number from the origin so what can
59. 5:55we do instead what we can do is instead of using  off offsets we can use the scale property and I
60. 6:02want you to keep in mind that you cannot use both  scale and offset at the same time it's by choice
61. 6:09of the developer whether you want to use scale or  offset but I highly recommend always using scale
62. 6:14never using offset I I've never really found an  instance where I would actually use offsets so
63. 6:21this is coming from my recommendation to always  use scale and now I'm going to show you how to
64. 6:25use this scale so what we're going to do is we're  going to set these offsets back to zero and so
65. 6:31you have to understand with the scale property is  that the units are not the same as offsets because
66. 6:36offset is a pixel by pixel unit but scale is just  simply a number between zero and one so our scale
67. 6:45is currently at zero which is on the very top left  corner but the maximum number for a scale is one
68. 6:52one being the very end of the screen's resolution  so for instance if I move this to the right side
69. 7:00you can see that the scale of the x value is going  up and if we make it go all the way this way it
70. 7:09goes all the way up to a value of one one being  the maximum so you don't see it anymore because
71. 7:14it's on the very right side of the screen but if  we make it like 0.5 then we can see that based on
72. 7:20its Anchor Point which is at the top left corner  of this text label it's going to be in the middle
73. 7:25of the screen so let's move it back to the left  side we can do the same thing with the Y scale as
74. 7:30well just by shifting this down and it's changing  the scale to 0.5 now let's make the scale for
75. 7:37both X and Y 0.5 oh actually maybe this can look a  little bit better if it was a little more this way
76. 7:44let's try to center it there we go so it's like  somewhere around here so we have a scale of 0.184
77. 7:49for the X and then 0.486 for the Y because this is  according to its Anchor Point which if you don't
78. 7:56remember anchor points I uh I bre I brief briefly  talked about it in one of my earlier episodes so I
79. 8:01encourage you to watch that but yeah now let's see  what happens when we change our Windows resolution
80. 8:07so I'm going to minimize this now you might think  hm well it looks like it's still going off screen
81. 8:13but if you really look at it carefully the  position of this this text label is indeed
82. 8:19scaling in accordance to the screen's resolution  but how we can really confirm that this is working
83. 8:26is by also changing the size of this text label  as as well so if we go down here to size let's
84. 8:32just um hide our position really quick if we go  down to size and open this up open our X and Y
85. 8:38we can see that we have an offset for both our X  and Y which we don't want we don't want an offset
86. 8:43so what we can do instead is replace our offset  so let's change these sizes to zero and let's
87. 8:50change the scale to a number between 0 and 1 so  we can make this .5 and we can make the Y scale
88. 8:580 .5 as well and now let's position this back to  somewhere alongside here in the center so we can
89. 9:05see it in so we can see it fully now let's see  what happens if we minimize the screen as you can
90. 9:11see we can see the full text label on the screen  and if we scale it up and down it's scaling the
91. 9:18text label alongside the screen which is very  very interesting and very very helpful when
92. 9:24you want a GUI element to scale alongside the  screen's resolution so now if we were playing
93. 9:30on a phone you can see the entire text label  no matter how big or small the screen is and
94. 9:35so that's the difference between scale and offset  scale is calculated based on the current screen's
95. 9:41resolution while offset is a fixed pixel by pixel  number that you would use to create an offset
96. 9:48position or size from its origin I hope that  made sense so there's actually this really cool
97. 9:54feature that Roblox has for us where if we want  to test our Ro Roblox game on a different device
98. 10:01like a phone or an Xbox they Roblox has actually  provided us um device emulators so that we can
99. 10:09actually test these games on an emulated screen as  if we were playing the game on a different device
100. 10:15and here's where you can find it so if we go to  the top ribbon right here that says test we can
101. 10:21see that there's a button under emulation called  device if we click on this we can see that there
102. 10:29's a little popup that showed up that shows us a  resolution that we can pick and also the specific
103. 10:34resolution setting in mind so if we click on this  the first drop down on the left we can see that
104. 10:40there's a whole list of different devices that we  can play on so we can play on a phone or a tablet
105. 10:46or a desktop or a console in this case let's play  on the iPhone 14 pro we can actually see that the
106. 10:53screen has now changed to fit the screen under  our uh emulated device which is our iPhone 14
107. 11:00pro and this second dropdown can show us different  resolution settings so if we want the resolution
108. 11:07to be physically how the device would look in real  life then we would pick physical size this is how
109. 11:13an actual iPhone 14 would look but if we pick  actual resolution then this shows us just the
110. 11:19screen itself how big this would actually be if we  were to test this game on our iPhone 14 pro device
111. 11:26and we can even change this to fit to Windows size  just so that we can scale the whole thing to where
112. 11:32we can see the the resolution scaled to fit to the  window so we can see everything clearly usually I
113. 11:38would advise doing actual resolution I think this  would be the best setting to do for if you're just
114. 11:43trying to test your Roblox game and what's also  interesting about this device emulation feature
115. 11:48is that when you hit play then you will spawn  into the game playing in that device so when
116. 11:54you play the game we have features that make  it seem like we're playing on on our iPhone
117. 12:0114 like this joystick that we can move around in  and this jump button which you wouldn't find on
118. 12:06a PC computer so I just I just think this device  emulation feature is really cool that Roblox has
119. 12:13provided for us and I definitely recommend using  this feature if you're trying to test your game on
120. 12:18multiple devices without having to own an actual  device to try this game on and finally what I'll
121. 12:24do is I'm going to explain a new data type that  we indect actually saw when we were changing the
122. 12:30position and size of this text label over here  called a udm 2 value so you might be confused
123. 12:38by that because when we when we open up our text  label and look at our position and size for some
124. 12:44reason there's two tables filled with two values  for each of these positions and sizes so when you
125. 12:50open these up you see X and Y then you see the  scale and offset with all of them you might ask
126. 12:55what all this means and is this a data type Roblox  has has made to make this possible and yes this is
127. 13:04a new data type that is spec specifically for guis  so essentially the data type that the position
128. 13:10and size use is called a udm 2 also known as  a two-dimensional value and before I explain
129. 13:17that I need to explain what a one-dimensional  value is so a one-dimensional value is basically
130. 13:23this x table right here that contains two values  and this y table that also contains two values a
131. 13:30one-dimensional value consists of two components  which is the scale of the axes and the offset of
132. 13:36the axes and so basically when you combine one  dimension of X and another one dimension of Y you
133. 13:45get a two-dimensional value containing two tables  with two values per table the scale and offset so
134. 13:54I want to re reiterate this a one-dimensional  value is called called a udm and this contains
135. 14:01a scale and offset which X and Y are both UD dim  or one-dimensional tables and if you combine these
136. 14:10two together with two one-dimensional tables  you get one twodimensional value which is the
137. 14:19position because it's a udm 2 and size which is  also a udm 2 so I hope that made sense this is a
138. 14:28gy specific property that you will probably use  a lot especially when you're trying to change
139. 14:34the size of a GUI element while you're inside  of the game I'm actually going to show you an
140. 14:39example of this using a script right now so if  we want to change the position or size of a GUI
141. 14:46element while we're in the game we're going to do  this by using a local script and we're going to
142. 14:51change it using a udm 2 value so I'm going to  show you what that looks like so on the right
143. 14:57side let's hit the Plus sign on the text label  and let's insert a local script so let's first
144. 15:03make reference to our text label so we're going  to say local text equals script. parent and then
145. 15:10what we're going to do is we're going to add  a weight statement here so we're going to say
146. 15:13task. wait and we're going to put in 5 seconds  let's also write a print statement to know our
147. 15:19change has been successful by saying GUI has been  changed and then down here we're going to change
148. 15:28the position of this text label to let's say be  in the corner of the screen but not entirely in
149. 15:36the corner of the screen because we still want  to be able to look at it so let's go over here
150. 15:41we're going to say text. position equals and this  takes in a udm 2 value so this is what it's going
151. 15:49to look like when we create a new udm 2 value or  two dimensional value we're going to say U dim 2
152. 15:58so make sure sure the U and the D is capitalized  and then you have a two right at the end and this
153. 16:02is a class so we're going to create it using a  new Constructor by saying do new and then put
154. 16:09the open and Clos parentheses and this contains  four values so if you remember our four values
155. 16:16is our scale and offset for the X and then our  scale and offset for the Y so this is what it's
156. 16:23going to look like right now our X scale is 0.25  so let's make this 0.5 and we'll space this out
157. 16:31with a comma and then the X offset we're not going  to change the offset so we're just going to make
158. 16:35this zero another comma now this is going to be  the Y scale let's change this to 0.5 as well and
159. 16:43finally our last value is going to be the Y offset  but as you know we don't like using offsets so
160. 16:48we're going to make this zero as well so let's go  into the game hit test hit play and we should see
161. 16:55after about 5 Seconds that our text label should  change its position position so as you can see we
162. 17:00waited about 5 seconds and it printed down here  saying the GUI has been changed and our position
163. 17:06of the text label moved slightly further along  to the right and also down so it works basically
164. 17:12as expected and if we change the window we can  still see that the text is being scaled alongside
165. 17:19our screen's resolution so we have successfully  done what we needed it to do but we can but we
166. 17:25can also do this with size as well back back to  our script we can change the size of of the text
167. 17:31as well by saying text. size equals U dim 2. new  and it looks like our current size is 0.5 0.5 for
168. 17:41both scales so let's change this to 0.25 instead  comma zero because we don't want an offset comma
169. 17:49and then the Y scale will also be 0.25 comma  zero so now let's go into the game and see our
170. 17:55final result so let's go into the game and there  we go as you can see not only did our position
171. 18:02change with the text label but it also changed  the size of it as well to not only make it go
172. 18:09right slightly right and slightly down but also  change the scale of it to be smaller so the way
173. 18:15it it reduced its scale was by starting on the  bottom right and then it just scaled down like
174. 18:20this in a diagonal Direction so that's basically  how it works here with these with scale versus
175. 18:26offset and also position positions and sizes  and udm and udm 2 values so I hope you learned
176. 18:33a lot from this episode to gain more of an insight  into how these GUI elements are created and scaled
177. 18:39according to the device that you're playing on so  I hope you found this episode to be helpful join
178. 18:44my Discord server the link is in the description  and I will see you in the next episode take care