ImageLabel & ImageButton - Roblox GUI Tutorial #6 — Transcript

Full transcript

1. 0:00pick a magic number and see yourself in 10 years  this is a little tricky which one should I pick
2. 0:05should I pick four 56 29 I will probably go with  the last one 29 oh my God it was too good to be
3. 0:15true all right at this point if you didn't  guess it I'm going to be showing you how to
4. 0:18create images and put them inside of your Roblox  game as part of our GUI tutorial guide but not
5. 0:24only display images but we can also display  images that we can click on to have another
6. 0:29level of interaction action from the player as  well so those are the two things I'm going to
7. 0:33be showing you how to do in this episode so  let's jump straight into it all right let's
8. 0:36think about this for a minute now obviously we  can't add these images if we don't know where
9. 0:41to get these images in the first place so one  of the most popular places to look for them is
10. 0:47in the game's toolbox and if you don't know where  the toolbox is we pretty much just go up here to
11. 0:52view and then there should be this little button  here that says toolbox I'm pretty sure it's also
12. 0:56located in the homepage um yeah right here in the  in insert category so if we click on this then on
13. 1:03the left side or wherever it's going to appear on  your screen should be the game's toolbox that have
14. 1:08all of these user generated uh content that you  can place inside of your Roblox game uh to look
15. 1:13for images specifically we we'll click on this  dropdown that says models and we're going to click
16. 1:19on images and now we have this whole library of  images to use for our Roblox game uh I wanted to
17. 1:26point this out just in case you were not familiar  with the toolbox so with that being said now we
18. 1:32have all these images to work with to add to our  Roblox game but now it comes down to uh what type
19. 1:38of object are we going to use to actually insert  these images inside of our game and one of them
20. 1:44that I'm going to be showing you right now are  called image labels and these are essentially
21. 1:49instances made by Roblox to be able to display  these images inside of a Roblox game uh without
22. 1:55doing anything too special all we can really do  is just display them and that's pretty much about
23. 2:00it so how we're going to do that is we're going  to go to the right side of our screen with uh the
24. 2:05Explorer and then we're going to hit the plus sign  next to start a GUI and of course we're going to
25. 2:09create a screen GUI because we can't add any GUI  elements unless we have a screen GUI to put into
26. 2:16uh so then we're going to hit the plus sign and  then we're now going to insert an image label so
27. 2:21let's click on this and as you can see on the top  left side of the screen an image with this little
28. 2:26placeholder image icon looking thing over here  is now on our screen so we can drag this around
29. 2:31we can scale it up and down as we want to and now  we have our image but now it just comes down to
30. 2:37displaying the Right image that we pick out from  this catalog uh so let's say we wanted to pick an
31. 2:43image from this image category wow all of these  are like actually really bad so let's say we had
32. 2:49this deadly dark Dominus right here if we wanted  to display this in our image label we need to
33. 2:55understand how image URLs work but I'm going to be  showing you that once we script it but for right
34. 2:59right now we're just going to hardc codly put  it into the game so as you know all these images
35. 3:04they have their own unique ID or identification  numbers to differentiate one image from another
36. 3:10one it's like it's how we're able to know this is  the image we're looking for is we're going to need
37. 3:14to get the ID of the image and the way we're going  to do that is by right clicking on the image and
38. 3:20then clicking this button that says copy asset ID  so we're going to click this and then what we're
39. 3:25going to do is we're going to select our image  label on the Explorer and then we're going to
40. 3:29scroll down just a little bit until we find this  property called image so if we click on this image
41. 3:36it's basically a string that contains a directory  to the placeholder image that Roblox already has
42. 3:42for us uh so we're going to delete this and as  you can see now the image basically shows nothing
43. 3:48not even the placeholder image because we want to  now replace this with our new image that we just
44. 3:53uh copied so let's uh highlight our image let's  right click and then paste our new ID and then
45. 4:00let's hit enter okay so now we have our image  that we were looking for but you might notice
46. 4:06that we we copied the the image ID and we pasted  it into here and it was just these numbers but
47. 4:12Roblox automatically added this little URL pretext  before our number so what what does all this mean
48. 4:19so essentially what RBX asset IDE is is that this  is the location stored in roblox's servers that
49. 4:25stores all of these newly generated uh assets  um and and all you need to do to retrieve these
50. 4:31assets is by specifying the ID of that asset and  bringing it into your Roblox game so one and this
51. 4:39is really important when we're scripting because  if we let's say scripted this image so let's add
52. 4:44a local script inside of our screen GUI and let's  make reference to our image label uh by saying
53. 4:51local image equals script. parent. image label  let's say we want to change the image inside of
54. 4:58our script so let's let's say image do image  because that's the property that we're trying
55. 5:05to change here equals and then if we let's say  just had these numbers here this would not work
56. 5:11because image is a string and so you might think  okay why don't I just do this this doesn't really
57. 5:17work either because it doesn't count as a valid  image address so I just joined into the game and
58. 5:23as you can see the image is not loaded and when  I went to my player to see the image label change
59. 5:29the image all it is now is just a bunch of numbers  it's not a URL address to the right uh asset image
60. 5:37that we're trying to retrieve so that's why it's  very important to memorize this RBX asset ID uh
61. 5:43pretext to add it alongside to your uh alongside  to your image ID so once again the way we do this
62. 5:52is we go to our script and then right before our  numbers we're we're going to say RB X asset ID
63. 6:02with two s's colon SL slash and then our numbers  and then our asset ID uh right after that I think
64. 6:12it's very beneficial to memorize this uh URL  address so if you have the time when you're uh
65. 6:18going through adding images to your Roblox game  I would keep in mind to memorize this uh address
66. 6:23pretext right before your UH image ID because  it'll save you a lot of time in the long run
67. 6:28especially when you know how to add images into  your game a lot faster rather than having to just
68. 6:33look it up so that is basically how you change  the image property uh inside of your Roblox game
69. 6:38all right and there are some other properties that  make uh image labels unique to other GUI elements
70. 6:43uh the first one is just being image transparency  but this is specifically for the image so it's
71. 6:48important to know the difference between image  transparency versus uh background transparency
72. 6:55because background transparency is for like the  little border that's behind the image but image
73. 7:00transparency is the transparency of the image  itself so key difference to point out there and
74. 7:07then we also have image color 3 which is basically  the same thing where it's like we can change the
75. 7:12color of the image specifically to a a more tint  color now this is in now by default the image
76. 7:20color is white so whenever we change the color  it just makes the colors of the image whatever
77. 7:27it already is but adds a little tint to it so it  doesn't completely change the color of the image
78. 7:33it's more like it adds a tint to it so that's  something I wanted to emphasize there as well
79. 7:39all right so now we've been able to successfully  add our images to the game but Roblox has another
80. 7:45GUI element that adds more user interactivity to  our images and that's called an image button and
81. 7:53I think that's pretty self-explanatory what  an image button is it's basically what you're
82. 7:56looking at right here as the image label but the  player is able to click on it and make the script
83. 8:02that's contained in it to do uh what it needs  to do when the player clicks on the image button
84. 8:07so I'm going to show you what that looks like uh  inside of our same script so let's go back to our
85. 8:12local script uh and then down here let's drop two  lines let's first of all create a new image button
86. 8:18actually now that I think about it so let's go to  our game and let's click on the plus sign next to
87. 8:22screen GUI and let's insert an image button and  this is pretty much what it's going to look like
88. 8:28it's going to look exactly like the image label  in terms of how it has a placeholder image right
89. 8:36right before it uh so let's go to our catalog and  try to look for another image we can possibly use
90. 8:41uh let's go for this bloxel Lantern OC whatever  this is uh let's copy it and let's go to our image
91. 8:49buttons uh image property and let's just paste  that in and then now we have an image for it and
92. 8:55we can and you can see that we can hover over  this image as well and it'll change change the
93. 8:59color of the background color to uh a a slightly  darker color so this is how you know that this is
94. 9:05an image button but now let's get to scripting  it so inside of our script let's make reference
95. 9:10to our image button so we're going to say local  button equals script. parent do image button all
96. 9:19right and so now what we'll do is we're going to  say button. mouse button oneclick colon connect
97. 9:24function open and close parentheses enter so  you kind of understand understand how this works
98. 9:30already so this is how we're going to detect The  Click from the player it's using this mouse button
99. 9:34oneclick event and we can pretty much just print  something random to let us know that the button
100. 9:38has been clicked so we're going to say button  has been clicked and then there we go that's
101. 9:45pretty much all you need to know to detect the  user click um whenever we play the game so let's
102. 9:50go hit test and hit play so that we can see uh the  result of our image button all right so I'm in the
103. 9:56game Let's uh press the button and and as you can  see on the output it says button has been clicked
104. 10:02and we can click this as many times as we as we  want because the script is basically detecting
105. 10:07every single time a user clicks on this button and  it's going to print button has been clicked on the
106. 10:12output so this is pretty much working as intended  and now there's two more properties that are
107. 10:16unique to image buttons and that's when you can  change the image of the image button whenever you
108. 10:23hover over the image and also when you press the  image so these are two separate properties with
109. 10:30different images that you can put if you decide  to do so so we can have one for when we hover over
110. 10:35the image with this hover image property and one  when we press it with this pressed image property
111. 10:40down here so if we go to our toolbox and we try  to look for an image let's take this uh Dominus
112. 10:46azerite right here let's right click it and hit  copy asset ID and then let's select our hover
113. 10:52image and let's paste it and hit enter and then  uh let's pick another image for when we press the
114. 10:59button so we can probably pick uh let's say this  haunted uh Valkyrie Helm right here so let's right
115. 11:06click it copy asset ID go over to press image  and then hit paste enter and now what will happen
116. 11:14is if we hover over the image then it should  change to the Dominus azerite as you can see
117. 11:20right here when I uh UNH it then you will not see  the Dominus a anymore and it'll go back to our uh
118. 11:27regular image so then I'll hover over this and now  let's press it so if I hold down the press button
119. 11:33then it's going to change the image to the haunted  Valkyrie Helm and if I let go then it's just going
120. 11:39to go back to our hover image which is the Dominus  azerite and then we un hover it's going to go back
121. 11:45to our normal image and so that's pretty much it  for that there are other properties like image
122. 11:50wrecked offset and image wrecked size and also the  scale types but these are a little complicated and
123. 11:56I'm not going to go over them in this episode but  in a later lat episode uh further down the line in
124. 12:01this guy tutorial guide I will go over scale types  in its own separate video because there's a lot
125. 12:06to taken for this concept so this is pretty much  where I'm going to leave it at for this episode
126. 12:11this is this served as an introductory to uh image  buttons and image labels and I hope you found this
127. 12:17video to be informative if you want to learn  another GUI element that I've made a video on
128. 12:22up until this point so far then I encourage you to  watch my textbox video that I made as part of my
129. 12:27guy tutorial gu or you could just watch everything  I have with this GUI tutorial guide up until this
130. 12:32point and follow along through the Journey as I  uncover more GUI related Concepts into this guide
131. 12:39so I hope you're going to stick around for that  and and that's pretty much going to be it for this
132. 12:42episode I hope you found this video to be helpful  and I will see you in the next one take care