SurfaceGui - Roblox GUI Tutorial #8 — Transcript

Full transcript

1. 0:00I bet you can't click the button in time
2. 0:02wait what is it oh wait I think I just
3. 0:05saw it flash for a second wait is it
4. 0:07talking about this button over here oh
5. 0:08yeah I just saw it again okay well it
6. 0:10looks like this is a challenge that this
7. 0:12sign is trying to tell me and I don't
8. 0:14want to back down from a challenge so
9. 0:16I'm going to try and press this button
10. 0:18oh oh wait I just missed it okay wait
11. 0:19let me try oh oh I just missed it again
12. 0:21okay hold on come on
13. 0:23come oh this is playing tricks with me
14. 0:26let me try it again uh oh my God
15. 0:37why do I do this to myself all right
16. 0:39let's think about what just happened for
17. 0:40a minute so first thing I noticed was
18. 0:43that this sign over here has text
19. 0:45displayed on it but this sign is a 3D
20. 0:49object inside of the word space it's not
21. 0:51like a guy screen it's not like a GUI
22. 0:54element in my 2D screen it's literally a
23. 0:57GUI object inside of the 3D workspace
24. 1:00plastered onto the sign part so that is
25. 1:04one interesting thing I've noticed about
26. 1:06this and basically the same thing can go
27. 1:08with this uh part over here that just
28. 1:10has this text that has this button that
29. 1:13just says boo on it and I'm pretty sure
30. 1:15the way we're able to plaster these onto
31. 1:18a 3D object is by using what's known as
32. 1:20a surface guy which I guess this is what
33. 1:23we will transition to uh so that we can
34. 1:26understand how to implement surface guis
35. 1:28inside of our Roblox games because this
36. 1:30is another GUI element that I was going
37. 1:32to cover eventually and I guess now
38. 1:34would be the perfect time to discuss how
39. 1:37these are implemented inside of a Roblox
40. 1:38games so with that being said let's go
41. 1:41and Implement these inside of Roblox
42. 1:43studio now that we understand it let's
43. 1:45add these surface guis inside of our
44. 1:47game but you might ask where do we add
45. 1:50these surface guis if we're let's say
46. 1:52trying to add a surface GUI to this part
47. 1:55for instance or if I just went into
48. 1:57model and I created a new a new part and
49. 2:00I just quickly decided to uh scale this
50. 2:03up a little bit and also make this
51. 2:05anchored so that we have a part ready
52. 2:07for if we want to add a screen GUI just
53. 2:10like this one over here you might ask
54. 2:12how does this all work well if you
55. 2:13remember what I said earlier a surface
56. 2:16GUI is essentially GUI elements that are
57. 2:19attached to a part rather than GUI
58. 2:22elements attached to our 2D screen
59. 2:25because up until this point when we've
60. 2:27been creating GUI elements we've been
61. 2:29putting them inside of starter GUI and
62. 2:31we've just created a screen GUI and then
63. 2:33inside of that screen GUI we've created
64. 2:36whatever element that would display on
65. 2:38our 2D screen this doesn't exactly work
66. 2:40the same way as we're used to because
67. 2:43we're trying to essentially make the
68. 2:45part the screen itself we're not trying
69. 2:47to add elements to our own player screen
70. 2:51uh but instead inside of the 3D World
71. 2:54inside of a specific part that we want
72. 2:57to add the GUI element to it it won't W
73. 2:59work the same way as we've been doing up
74. 3:01until this point so we're going to have
75. 3:03to do a different method so I'm going to
76. 3:04delete the screen GUI that we've um just
77. 3:07added so to answer the question of where
78. 3:09we should put the surface GUI like I
79. 3:11mentioned is we should put it directly
80. 3:14in the part that we're trying to display
81. 3:16GUI elements in so on the right side of
82. 3:18the screen let's rename our part so that
83. 3:20we know um the part that we're
84. 3:22specifying so we're going to say surface
85. 3:25part and then we're going to go to the
86. 3:28right side hit the plus sign and we're
87. 3:29we going to insert a surface GUI hit
88. 3:32enter and as you can see we've inserted
89. 3:35a surface GUI but there seems to be
90. 3:37nothing showing on this uh part and
91. 3:40that's because surface GUI basically
92. 3:42acts as a container for all the the the
93. 3:45GUI elements that we're going to place
94. 3:47inside of our part so it's very similar
95. 3:49to a screen GUI as it's basically a
96. 3:53container for these GUI elements so now
97. 3:55we're so now what we're going to do is
98. 3:56hit the plus sign and we're just simply
99. 3:58going to add in our own guy elements
100. 4:01like for instance a text label so as you
101. 4:03can see our text label has been added
102. 4:05and it shows right here on the the top
103. 4:08left of the part rather than our screen
104. 4:11this uh text label and if we decide to
105. 4:14move around the 3D workspace then we can
106. 4:17see perspectively that it's on this side
107. 4:19of the part and we can only see this GUI
108. 4:22element from this side of the part and
109. 4:25not and we can't see it universally like
110. 4:28we can on our 2D screen so that is
111. 4:31essentially the primary use of surface
112. 4:33guis is that we can add these GUI
113. 4:35elements onto a specific part rather
114. 4:38than having them appear on our 2D screen
115. 4:42but now that we have this let me
116. 4:43introduce you to some properties that
117. 4:45you may find useful and the first
118. 4:47property I want to introduce to you is
119. 4:49this property down here called a derie I
120. 4:52hope I'm saying that correctly uh but
121. 4:53basically what a derie is is that this
122. 4:56is the property that we set to specify
123. 4:59which part are we trying to attach this
124. 5:02surface GUI onto now obviously uh the
125. 5:05aderi here would be the surface part
126. 5:07which is this thing right here um which
127. 5:10is essentially just the parent of the
128. 5:11surface GUI and you might notice that
129. 5:14the ader property is actually left blank
130. 5:16and that's because by default the ader
131. 5:20of the surface GUI is whatever the
132. 5:22parent of the surface GUI is so the
133. 5:25parent of the surface GUI is the surface
134. 5:27part so automatically Roblox is going to
135. 5:30say that the ader for this part is going
136. 5:32to be the surface part but let's say we
137. 5:34had a model where we have multiple parts
138. 5:37and we needed one surface GUI to be
139. 5:39attached to one specific part inside of
140. 5:42a model and the surface GUI didn't know
141. 5:44which one to specify this is pretty much
142. 5:46where aery comes in and I'm going to
143. 5:48show you how this works so let's go to
144. 5:51workspace and let's hit the plus sign
145. 5:52and let's add in a model so in this
146. 5:54model I'm going to put the surface part
147. 5:57inside of here and I'm going to D
148. 5:59duplicate the surface part and then move
149. 6:01it alongside over here uh let's open up
150. 6:03the surface part and let's delete this
151. 6:05surface GUI so we're just going to have
152. 6:07one here so now we have two surface
153. 6:09Parts with one surface GUI over here
154. 6:13with one not being over here so if let's
155. 6:16say we decided to have this surface
156. 6:18gui's ad dery be this part instead so
157. 6:21what I'm going to do is I'm going to
158. 6:22click on this next what I'm going to do
159. 6:25is specify this this surface part
160. 6:29specifically so I'm going to click it
161. 6:30and as you can see now the surface GUI
162. 6:33aie is set to this part rather than this
163. 6:37one and it's now being displayed here
164. 6:39rather than over here so one specific
165. 6:41use case I can think of a joury is if
166. 6:43you have a health bar that you want to
167. 6:45show on top of your player's head you
168. 6:48would specify the adorney to the
169. 6:51player's head so that the surface GUI
170. 6:53knows exactly which part it should be
171. 6:56attached to if it's inside of a model so
172. 6:58that is basically what a joury is and I
173. 7:00hope that made sense to you so you might
174. 7:02notice that this text label is being
175. 7:04displayed on this side of the part now
176. 7:06you might ask why is it this part why is
177. 7:09it this side specifically that this text
178. 7:11label could be in it's because this
179. 7:13surface GUI has a property known as face
180. 7:16which basically specifies which side of
181. 7:19the part should all of these GUI
182. 7:21elements contain inside of surface GUI
183. 7:23face so right now the face property is
184. 7:27set to front so all of the gu y elements
185. 7:30inside of the surface GUI is facing on
186. 7:32the front side of the part which is in
187. 7:34this direction but what if we wanted to
188. 7:36change this to let's say a different
189. 7:39side if we were to click on this
190. 7:40dropdown there's all these different
191. 7:42properties that can tell us which side
192. 7:45of the part do we want these GUI
193. 7:47elements to show so we can do the back
194. 7:49which is basically the opposite of front
195. 7:51so as you can see it's gone from the
196. 7:53front but if we turn around it's now
197. 7:55displayed on the back rather than the
198. 7:57front and we can basically do the same
199. 7:59thing
200. 7:59with uh all of the other sides so top
201. 8:02will be displayed over here and you do
202. 8:04kind of have to be careful with uh
203. 8:06changing the sides because you're going
204. 8:07to have to realign these parts unless
205. 8:10you decide to use scales instead of
206. 8:12offsets and if you don't know what the
207. 8:14difference is you can watch my scales
208. 8:15versus offsets video that I made but
209. 8:17let's change this back to front just the
210. 8:19way it was before there's another
211. 8:21property that allows us to always see
212. 8:24the elements inside of a surface GUI
213. 8:27using this property called Always On top
214. 8:30now if you don't know what I'm trying to
215. 8:31get at here if we let's say decide to
216. 8:33turn around on this part we no longer
217. 8:36will be able to see the text label
218. 8:38anymore if we turn back around then we
219. 8:40can see it but if we're let's say
220. 8:42somewhere else like I don't know down
221. 8:44here underneath the world then we're not
222. 8:46going to be able to see it what we can
223. 8:47do to make these elements visible no
224. 8:51matter where we are inside of the game
225. 8:52is by setting this property called
226. 8:54Always on top so if we check this off
227. 8:56then what's going to happen is that we
228. 8:58can be anywhere inside of the game and
229. 9:01we'll still be able to see it so I'm
230. 9:02going to go down here and through this
231. 9:04floor we can still see that text label
232. 9:07that's displayed on that part if we go
233. 9:10behind a different part then we can
234. 9:12still see uh the text label being shown
235. 9:15uh through all of these other parts
236. 9:17that's displayed on that part over there
237. 9:20the next property is Max distance which
238. 9:22basically tells us how many studs will
239. 9:25it take for us to not be able to see any
240. 9:28of the gu elements inside of the surface
241. 9:30GUI once we're at a specific amount of
242. 9:33distance or however many studs we are
243. 9:36away from the GUI elements are we to be
244. 9:39able to see it so the max distance right
245. 9:41now is 1,000 studs but let's say we we
246. 9:44made it but let's say we made it 50
247. 9:46studs instead of 1,000 so right now we
248. 9:49should be able to see the elements here
249. 9:51but if we decide to slowly move back
250. 9:54then we should no longer be able to see
251. 9:56all of the elements that are contained
252. 9:58inside the surface GUI because we are
253. 10:00now over 50 studs away from the GUI
254. 10:03elements but if we go back into view
255. 10:06then we should be able to see it again
256. 10:07so that's basically what max distance is
257. 10:10another property we have is z offset and
258. 10:12if you remember how the zindex property
259. 10:14works it's basically uh in what order do
260. 10:17you want to display these GUI elements
261. 10:20uh plastered onto the same screen or the
262. 10:23same frame or folder or whatever you
263. 10:25want to describe it so it kind of works
264. 10:27the same way here except where comparing
265. 10:29two different except this time we're
266. 10:32going to be comparing surface guis uh
267. 10:34rather than any of the other elements
268. 10:36that we've used in the past so if let's
269. 10:38say so if I were to duplicate this
270. 10:41surface GUI and if I were to take this
271. 10:44text label and change the background
272. 10:46color to let's say green then we should
273. 10:48be able to see this green text label
274. 10:51that's over our other text label in this
275. 10:53other surface GUI so if let's say our
276. 10:56first surface GUI the one that has a
277. 10:59white text label if we make that c
278. 11:01offset one then we should be able to see
279. 11:05that the white text label is now shown
280. 11:07in front of this surface GUI with the
281. 11:09green text label so it pretty much works
282. 11:12the same way but like I mentioned this
283. 11:13is now comparing surface guis rather
284. 11:15than any of the other elements that
285. 11:17we've worked in the past so I hope
286. 11:19you'll find great use with using that as
287. 11:20well if you're working with multiple
288. 11:22surface guis surface guis also have some
289. 11:25lighting properties that basically
290. 11:27determine how well we can see these GUI
291. 11:30elements based on the game's lighting so
292. 11:34before we do that what we're going to do
293. 11:36is delete the second surface GUI that
294. 11:38has the green text label in it and let's
295. 11:40go back to our surface GUI and we're
296. 11:42going to disable always on top the first
297. 11:45lighting property I want to introduce to
298. 11:46you is this property called light
299. 11:49influence and this basically tells us
300. 11:52how much do we want the game's lighting
301. 11:54to impact how well we can see the GUI
302. 11:57elements that are placed in inside of a
303. 11:59surface GUI so by default the value is
304. 12:02one so this basically tells us that this
305. 12:04is completely impacted by The Game's
306. 12:06lighting so if we let's say moved this
307. 12:09surface part to a darker area then we're
308. 12:11going to have a harder time seeing the
309. 12:13surface part so I'm just going to take
310. 12:15this part move it down into the world
311. 12:17and as you can see now that the sun is
312. 12:20not in our view um this these GUI
313. 12:23elements are a little bit harder to see
314. 12:26but if we decided to change light
315. 12:28influence to zero since this is a value
316. 12:31from 0 to one then it's not going to be
317. 12:33impacted by The Game's lighting
318. 12:35whatsoever but there is something
319. 12:37interesting that you may have noticed is
320. 12:39that it now is that when we changed our
321. 12:42light influence it added in this new
322. 12:44property called brightness which
323. 12:46basically tells us how much light do we
324. 12:48want these guis to emit now that the
325. 12:51part is not influenced by The Game's
326. 12:54lighting so if we set this back to one
327. 12:57then our brightness property is gone but
328. 12:59if we set this to anything but one then
329. 13:02it's going to show the brightness
330. 13:03property so let's set this to zero and
331. 13:05let's change this brightness property to
332. 13:07something bigger like okay like four
333. 13:11which not going to lie that is very very
334. 13:13bright so that's an interesting thing to
335. 13:15know about when it comes to brightness
336. 13:18and light influence now there is another
337. 13:20thing that you should keep in mind is
338. 13:22that remember how I said that we should
339. 13:24turn off always on top and the reason we
340. 13:26should do this is because if we turn
341. 13:28this back on then the first of all the
342. 13:31brightness property is gone and also the
343. 13:33Light influence now doesn't change
344. 13:35anything because by default now uh the
345. 13:38light influence is going to be zero
346. 13:40regardless of where we see it inside of
347. 13:42the workspace it's not influenced by The
348. 13:44Game's lighting and we can also see it
349. 13:47wherever um our screen is as long as
350. 13:50we're uh in range so that is one
351. 13:52important thing to keep in mind when
352. 13:54you're trying to change the the lighting
353. 13:57properties of the these GUI elements is
354. 13:59to make sure that always on top is
355. 14:02turned off whenever you're trying to uh
356. 14:04change the lighting so that's basically
357. 14:06how the the lighting properties work for
358. 14:08these parts for these GUI elements
359. 14:11before I introduce you to the next
360. 14:12property I'm going to add a text button
361. 14:15to the surface GUI so I'm going to hit
362. 14:18the plus sign insert a text button and
363. 14:21what I'm going to do is cover this
364. 14:23button uh on the entire screen so I'm
365. 14:26going to make the scales one comma 0
366. 14:29comma 1 comma 0 so that it's going to
367. 14:32cover the entire front side of this part
368. 14:35uh I'm also going to make the text
369. 14:38bigger by hitting text scaled so that we
370. 14:40can see the text okay so now that we
371. 14:42have this button here here's where I'm
372. 14:44going to introduce the next property
373. 14:46called tool punch through distance that
374. 14:49may sound like a really weird name but
375. 14:52it really does make sense once I show
376. 14:54you what this actually does let's say I
377. 14:56had my tool equipped we can still press
378. 14:58the this button regardless of whether I
379. 15:00do have a tool equipped or not so as you
380. 15:02can see when I press the button it'll
381. 15:04still say down here that my mouse has
382. 15:06clicked this button and we can go as far
383. 15:09as we want and we'll still be able to
384. 15:10press this button regardless if we have
385. 15:12a tool equipped or not this is a really
386. 15:14interesting and very specific property
387. 15:16known as tool punch through distance
388. 15:19which basically tells us that uh with
389. 15:21this number which is basically in studs
390. 15:23how far do we want to be able to press
391. 15:25this or interact with this GUI element
392. 15:28if we have a tool equipped or not so in
393. 15:31this case with this text button if we
394. 15:33let's say had the studs as 10 rather
395. 15:36than zero then I will have the tool
396. 15:38equipped and I should not be able to
397. 15:41interact with this button unless I'm at
398. 15:44a specific distance between uh the
399. 15:47button and my character so now that I'm
400. 15:50about 10 studs in range of this guy
401. 15:53element I'm now able to interact with
402. 15:56this button but if I go out of range
403. 15:57then I will know no longer be able to
404. 15:59interact with this uh element but if I
405. 16:02unequip then I should be able to
406. 16:03interact with the element regardless so
407. 16:05it's a very specific property but I
408. 16:07think you will find use uh with this
409. 16:09property if this if a situation like
410. 16:12this ever comes uh during your Roblox
411. 16:14journey and I hope that you will find
412. 16:15use with this property okay so now I
413. 16:18want to introduce you to two sizing
414. 16:20modes that you can use when it comes to
415. 16:24scaling your GUI elements contained
416. 16:26inside of a surface GUI so if we have
417. 16:28our surface GUI selected let's go down
418. 16:31here and check the Siz and category with
419. 16:34two properties pixels per stud and
420. 16:36sizing mode so by default Roblox is
421. 16:39going to set the sizing mode of the
422. 16:41surface GUI to pixels per stud which
423. 16:44basically gives us a pixel to stud ratio
424. 16:47of how we want to scale our GUI elements
425. 16:50that are contained in a surface GUI so
426. 16:52by default it's by 50 now intuitively
427. 16:55what you might do is increase the size
428. 16:58of the pixel pixel per stud but the
429. 16:59thing about doing this is if we choose
430. 17:01to do this it actually makes it smaller
431. 17:04which is actually something pretty
432. 17:05insane because you might think that if
433. 17:07it's bigger you might think that it
434. 17:10would make the scale of the text bigger
435. 17:12but in actuality it doesn't do that it
436. 17:15does it when you do it the other way
437. 17:16around uh which will allow you to make
438. 17:20it bigger theoretically if you made the
439. 17:23pixels per stud smaller and if you're
440. 17:25using scales for your text button
441. 17:27instead of offset you should be getting
442. 17:29this result because I believe if you use
443. 17:31offset then it won't have the same uh
444. 17:34effect if you change the pixels per stud
445. 17:37using the sizing mode so that's
446. 17:39basically how the first mode works but
447. 17:41if we hit this drop down with sizing
448. 17:43mode there's another property called
449. 17:45fixed size so if we press this then it's
450. 17:47going to give us two properties an X and
451. 17:50Y property that allows us to change
452. 17:53based on offset with this canvas size so
453. 17:56once again with pixels per stud uh the
454. 18:00smaller the numbers are the bigger the
455. 18:02text will actually display on the screen
456. 18:05so for the X property we can change it
457. 18:07to 400 instead of 800 and then it would
458. 18:10change the x value to be more wide since
459. 18:14we made the the x v since we made the x
460. 18:17value smaller and we can do the same
461. 18:19thing with the y-value make this 300
462. 18:21instead of 600 and we can see it be
463. 18:23bigger on the y- AIS quote so if we made
464. 18:27it even smaller quote unquote then it's
465. 18:29going to continue scaling this uh
466. 18:32however we so desire to be however big
467. 18:34or however small we want it to be and if
468. 18:36we change the size of the entire model
469. 18:39then it's going to scale it alongside
470. 18:41with it if I'm close enough to it then
471. 18:42we should be able to see it being
472. 18:45scaled so it doesn't really matter which
473. 18:47uh sizing mode you use because both of
474. 18:49them basically achieve the same result
475. 18:52it's just a matter of which one you
476. 18:53prefer using over the other one and that
477. 18:56is basically how both the sizing modes
478. 18:58work when it comes to scaling your GUI
479. 19:00elements inside of a surface GUI but
480. 19:02with that being said that is basically
481. 19:04going to be the end of this episode with
482. 19:06surface
483. 19:08G if you're interested to learn more
484. 19:10about how we were able to scale the size
485. 19:13of these GUI elements whether that would
486. 19:15be on a part or on our screen I
487. 19:18encourage you to watch my scale versus
488. 19:20offset video that's a part of this
489. 19:23playlist for my GUI tutorial Series so
490. 19:25with that being said I hope you found
491. 19:27this video to be helpful and I will see
492. 19:29you in the next episode take care