Mobile Buttons & Context Input (ContextActionService) - Roblox Advanced Scripting #14 — Transcript

Full transcript

1. 0:00damn that's a pretty nice looking car over there  I don't even know what it's doing out here in the
2. 0:05middle of nowhere but I don't think it would hurt  if I tried to take this out for a spin all right
3. 0:11let's see if I can get on this car all right oo  this is pretty nice this is pretty nice let's
4. 0:17see if I can take this for a spin oh yeah oh yeah  this is driving by pretty nice oh oh I'm doing a
5. 0:23little cartwheel over there uh okay it's a little  too chaotic but let's see does this car have any
6. 0:29other features can I like turn on the lights can  I honk the horn uh let's see if I can try honking
7. 0:35the horn maybe it would probably be the H key  let's try [Music] that uh all right let's think
8. 0:45about what just happened for a minute so I was in  this car and I was able to press the H key to honk
9. 0:52the horn and also make it explode apparently um  but what matters is that context is What mattered
10. 0:59when when it came to pressing the H key because I  had to literally be in the car in order to press
11. 1:05the H key if I was out here pressing the H key  then nothing will happen because I'm not in the
12. 1:11right context of sitting down in this car being in  the driver's seat and being able to honk the horn
13. 1:17that's inside of this car so if I go into this car  and then I try driving around now that I'm in the
14. 1:22driver's seat with the right context I can then  press the H key to do that I guess uh to honk the
15. 1:30horn and make it explode so this only happens  when I'm in the car and that's the only time I
16. 1:37can press the H key I'm pretty sure if I was in  the car and then I stepped out of the car then
17. 1:42there would be no functionality with pressing the  H key again this only happens in the context of me
18. 1:47being in the driver's seat of the car and when I  stepped out of the car I was no longer able to do
19. 1:51the action of pressing the H key to honk the horn  and so that's pretty much what this is this kind
20. 1:56of seems like a continuation from my user input  service video that I made previously and that
21. 2:02is essentially what this is this is user input  service but this time we're adding context to when
22. 2:06the player can press down a certain input or key  or whatever it may be in order to do things with
23. 2:13certain actions so with that being said now let's  get to implementing this inside of a Roblox game
24. 2:18now that we understand it let's start implementing  user input during specific context that matters
25. 2:23most when we need to so how we're going to do this  is we're going to use a local script much like we
26. 2:29did in using input service um to be able to detect  user input and this is a local sided only feature
27. 2:37so let's go to the right side in starter player  and starter character scripts and let's hit the
28. 2:41plus sign to add a new local script so let's  delete this and let's first make reference to
29. 2:47our new service called context Action Service this  is what we're going to be using so we're going to
30. 2:52say local context Action Service equals game colon  get service context Action Service all right and
31. 3:04so for right now I'm going to show you a really  basic example of detecting user input based on a
32. 3:09function that context Action Service provides and  this is going to be called bind action so we need
33. 3:15to be able to Define what function that needs  to be executed when we press a certain key and
34. 3:21be able to make this key pressible to do a certain  action so we're going to do that by saying context
35. 3:29action service colon bind action and this takes  in roughly about four parameters so the first one
36. 3:37is the action name and this is pretty much what  we're going to name the action uh when we press a
37. 3:43certain key or have some sort of specific input uh  we're going to call this press e and then for our
38. 3:50second argument we're going to pass in a function  that will execute this uh action when we do the
39. 3:58action that we specified which in this case it's  going to be pressing e so we're actually going
40. 4:02to need to create a new function before uh we call  bind action so let's drop two lines from the first
41. 4:09line and let's create a new function we're going  to call this local function press e open and close
42. 4:15parentheses enter now here's the interesting thing  about bind action when we pass in a function to
43. 4:21bind for our second argument it's going to pass in  three arguments but there's only really two that
44. 4:27matters to us and the first argument that it's  going to automatically pass is going to be the
45. 4:32action name itself so we're going to call this  parameter action name and the second argument is
46. 4:38basically going to be the the state of the input  so State meaning is the button being pressed down
47. 4:44is the button being let go uh is it stagnated  things like that uh so this is going to be the
48. 4:50input State and these are the two two parameters  that matter to us so in this function we're going
49. 4:57to do two checks to make sure that this action is  valid uh so the first thing we're going to do is
50. 5:02check for the action name so we're going to say if  action name equals whatever our action name here
51. 5:09is which is pressed e we can just say uh press  e and what we're also going to check is the type
52. 5:16of the state of the input as well so we want to do  this when the the player presses down on the E key
53. 5:23so we're going to say input State equals enum do  user input state DOT and as you can see there's a
54. 5:33whole bunch of options there's about five options  here the one we're interested in is begin which is
55. 5:39when we press down on a key uh or whatever input  that we're trying to give into the game so we're
56. 5:45going to say begin then then we can do whatever  we want here which in this case we can just write
57. 5:51a simple print statement by saying player has  pressed the E key okay so now finally we can
58. 6:00pass this press e function into our bind action  function from contact from Context Action Service
59. 6:07so we'll just simply say press e comma and now we  have a third argument here that's called create
60. 6:13Touch button and this is basically asking do you  want to create a mobile button for the player if
61. 6:19somebody is playing on a touch input device like  an iPad or an iPhone things like that we're going
62. 6:24to say true and finally the last argument or  infinite amounts of arguments after this this
63. 6:30is however many keys you want this uh action to  uh be valid so in this case let's make it the
64. 6:36key e because that's what we're making this bind  action function to be we're going to activate this
65. 6:41when the user presses the E key so we're going  to say enum dokey code. e so this is basically
66. 6:49the entirety of the bind action uh function that  allows us to give a context of when we can allow
67. 6:57the player to press the E key to then fire this  function to print player has pressed the E key I
68. 7:03hope this makes sense this is a very basic example  uh so let's go into the game and see how this
69. 7:09would work in game all right so I've loaded into  the game if I press e then it's going to print
70. 7:13down here player has pressed the E key however the  problem here now is that this kind of just seems
71. 7:18like normal user input service and that's because  we're missing the context part of it there's no
72. 7:24reason for us to just simply do this bind action  function uh without doing without providing it
73. 7:30a context of when we should use the bind action  function this is just simply saying if the player
74. 7:36joins the game or their character exists in the  world then we bind this function here so there's
75. 7:42no reason for us to do this because this action  is going to bind no matter what we do and we're
76. 7:47kind of getting rid of the whole reason why we're  using context Action Service in the first place
77. 7:52so what we can do is now provide context to our  action that we created and to further add on to
78. 7:58this there's another function function that will  be important to us later but I'm going to show
79. 8:01you it but I'm going to show you it right now and  that's called unbind action and this is basically
80. 8:06saying if context action service has binded an  action which is our pressed e function and we
81. 8:12don't want the player to be able to press the  E key anymore to run this then we just simply
82. 8:17say context Action Service colon unbind action  and this only takes in one parameter which is
83. 8:26and this only takes in one argument which is the  action name itself and as we remember the action
84. 8:31name here is simply called press e so let's pass  in press e as the argument and now what this is
85. 8:38saying is that when we join into the game we're  going to bind the action that the player can be
86. 8:42able to press the E key but then immediately right  after that we're just going to cancel this so this
87. 8:48script basically means nothing now because we're  binding the action and then we're automatically
88. 8:52unbinding the action right afterwards so this  is why context matters and so that's why right
89. 8:58now we we're about to do is add context to this to  make uh context Action Service useful compared to
90. 9:05user input service all right so I think a really  good demonstration of adding context to our key
91. 9:09presses is by having a tool where when the player  equips the tool then we're able to press down keys
92. 9:16on it that we're not able to if we don't have  the tool equipped so let's create a tool on the
93. 9:20right side by going into starter pack hitting  the plus sign and let's create a tool now what
94. 9:22we'll do is We'll add a handle to it so let's go  to workspace hit the plus sign create a part and
95. 9:26we're going to rename this part to handle and  let's drag this into tool so now let's create
96. 9:30a local script inside of here by by hitting the  plus sign creating a local script for our previous
97. 9:33local script let's actually disable this so that  this won't be in in effect anymore uh let's take
98. 9:39context Action Service copy it paste it into here  and let's also copy our press e function take it
99. 9:47into here but now what we'll do is we'll make  it so that when we equip the tool that's when
100. 9:51we'll be able to press the E key with the given  context uh so let's make reference to our tools
101. 9:57so we're going to drop a line down here and say  local tool equals script. par and then what we're
102. 10:02going to do is drop two lines down here and and  create two events uh the first one being equipped
103. 10:08so we're going to say tool. equipped colon connect  function open and close parentheses enter and then
104. 10:16we're going to do the same thing down here with  unequipped connect function open close parentheses
105. 10:22enter okay so for equipped we want to make it  so that when the when the player has the tool
106. 10:28equipped then we will allow the player to press  the E key so we could go back to our old script
107. 10:33copy our bind action function right here and then  copy it into our equipped script into our equipped
108. 10:40event and we can pretty much do the same thing  with unbind as well by taking this and copying it
109. 10:46and pasting it into our unequipped that way when  the Tool is equipped we can now provide the right
110. 10:52context for the player to press the E key and if  the tool is unequipped then we're able to unbind
111. 10:58the ACT so that the player will no longer be able  to press the E key since the player is not holding
112. 11:04the tool anymore so let's go into the game and  see this for ourselves all right so as you can see
113. 11:08our tool is down here but I currently don't have  it equipped so let's press e and as you can see
114. 11:14nothing is happening when I press e but now let's  equip the tool and see what happens when I press e
115. 11:19so I press e and now it says down here that player  has pressed the E key I can press this again and
116. 11:25again and again and again but then when I unequip  it the script is going to unbind the action so
117. 11:31when I press e again then it's not going to print  down here because I no longer have the right
118. 11:36context to be able to press the E key so this is  how we provide context to our uh input to our user
119. 11:46input it's by using context Action Service and  when you know how to use context Action Service
120. 11:52this is very effective for user interactivity  and user input oh yeah one quick thing I want
121. 11:59to add is you know how I mentioned that for bind  action we basically have these three arguments
122. 12:05right here and then after that we basically have  an infinite number of arguments that tell us uh
123. 12:10how many inputs we want this to be valid uh for  when we activate this function right here so we
124. 12:16can basically add more inputs if we want to on  other than the E key so we would just do that
125. 12:23by separating it with a comma by saying uh comma  en. key code do let's say R so then so now what
126. 12:32we're doing is for this bind action uh pressed  e uh function we can make it activate by either
127. 12:39pressing e or R and if we want to add in a third  argument we can say en. keycode Dot and we could
128. 12:48just keep going on and on um for however many  inputs we want uh this pressed e action to fire
129. 12:56from based on user input so this is a little thing  I wanted to add it here in case you wanted to add
130. 13:02multiple ways of input for the same exact action  so there's actually another function we can use to
131. 13:08bind our actions when we need to do so uh and this  is going to be called bind action at priority you
132. 13:15might ask what that is so when we bind actions  let's say for this case uh we have bind action
133. 13:22to press the E key in order to fire this function  but now let's say if we had another action that
134. 13:29requires us to use this same e key if we have an e  key here and an e key here then then both of these
135. 13:37will pretty much bind action to the E key but  what if we wanted to have an order of hierarchy
136. 13:43of which bind to press whenever a specific bind  action happens over the other one this is when
137. 13:50we have priority over our bind actions by telling  us that if we have this bind action to press the
138. 13:56E key for this what if now we wanted to press the  e key for something completely different like a a
139. 14:01completely different function here that says press  e to equip or something or just a different action
140. 14:07in general we would do that using bind action at  priority there's this little hierarchy of when we
141. 14:13want of what we want to do in this specific period  when we press this certain key we can do that by
142. 14:20using this function and I'm going to show you what  this looks like so let's get rid of this line over
143. 14:24here we're going to be saying context Action  Service colon bind action at priority and this
144. 14:34basically has one additional argument but for the  first three it's basically the same thing so it's
145. 14:39going to have our action name which is going to be  press e and then it's going to have the function
146. 14:45that we're going to pass in which is just going to  be press e and then it's going to ask us whether
147. 14:49we want to create a touch button we're going to  say true and now we have our new argument which
148. 14:54is our priority level I believe this is a number  from 0o to 100 the higher the number is the more
149. 15:01priority that this has over the previous bind over  the previous bind action so if the default is zero
150. 15:08we can say one to have a higher priority over the  previous one and then finally we can pass in any
151. 15:14input that we want past this point so we're going  to say enum dokey code. okay so now we have our
152. 15:21bind action at priority here that basically calls  this function but we're not done here yet because
153. 15:26bind action will have priority over bind action  at priority anyways because we can basically treat
154. 15:33regular bind action as if we're saying this is  going to have a priority of 100 like it's going
155. 15:38to have the max because it's not even associated  with a priority because it's automatically going
156. 15:43to have the biggest priority so we actually need  to replace this with a bind action at priority
157. 15:51and we need to add in a priority of zero in the  fourth argument so now this is valid now we can
158. 15:57say that this is going going to give us the right  results that we want to make this one valid over
159. 16:03the previous one so in order to tell whether  this is actually working or not let's create
160. 16:07a new action name inside of our press e function  so we can basically drop two lines down here and
161. 16:12we can uh copy and paste our previous if statement  and drop it down here so let's say if the action
162. 16:18name is press e to equip tool so this will be our  new action rather than just pressing e uh we're
163. 16:27going to say player has pressed the E key to equip  the tool and what we're going to do is we're going
164. 16:35to replace our action name down here with press E2  equip tool so both of these now call Press e the
165. 16:46function name the function but this time we have  a different action name for them and when we press
166. 16:51e down here this one is going to have a higher  priority over this one up here with regularly
167. 16:57pressing e so if we press e it's not going to go  to the one that's in here but instead it's going
168. 17:02to go to the one that's down here because this  one has a higher priority over the previous one
169. 17:07when we press the same key so I really hope that  made sense to you if it didn't I encourage you to
170. 17:12rewatch this part of the video about buy action at  priority because this is something very important
171. 17:18to understand so let's go into the game now and  see our change all right so let's equip our tool
172. 17:23down here and let's press the E key so as you  can see player has pressed the e e key to equip
173. 17:29the tool because we're saying that this one has  a higher priority when we press the E key not the
174. 17:34one that's over here so that's why we're going to  skip this one that's over here and go to this if
175. 17:39statement instead with this action specifically  uh if we switch the the priority numbers around
176. 17:45so if let's say the regular press e is one and  then this one is zero then if we play the game
177. 17:51things are going to be different it's then going  to go to the our original press e and not the one
178. 17:57that's down here because now this one should  have a higher priority over the second one so
179. 18:02now it just says player has pressed the E key so  that is pretty much how bind action at priority
180. 18:08works and I hope that made sense to you okay now  you might wonder about the whole uh create Touch
181. 18:14button thing that uh I've been talking about with  bind action up until this point so I'm going to
182. 18:19show you what this create Touch button actually is  right now but the first thing we're going to do is
183. 18:24comment the second line here with bind action at  priority uh and what we will do is we're going to
184. 18:31go into the game and we're going to hit test with  Device emulation let's play on some sort of touch
185. 18:37device like an iPhone 14 pro so let's hit play  now and see what the game looks like when we're
186. 18:44equipping our tool to be ready to press the E key  now what I just said doesn't seem to really make
187. 18:51sense because on a touch screen obviously there's  no e key so what does Roblox decide to do instead
188. 18:56well they pretty much just make a button for  you to press rather than having to press the
189. 19:01E key because as you know an e key does not exist  on a mobile device or any sort of touch device so
190. 19:06let's equip the tool and as you can see Roblox has  placed down a little button for us to press rather
191. 19:12than having to press the E key as we defined  here when we set uh create Touch button to true
192. 19:18because we told Roblox that we wanted to create  a button that replaces uh the need to press the
193. 19:24E key if we're on mobile so if we press this then  it should say player has pressed the e key because
194. 19:29this is the only thing that's being called here  uh it's this uh action name right here but this
195. 19:34button looks kind of basic it doesn't have any  labels it's not colorful or anything like that
196. 19:40it's just a basic default button that Roblox has  created for us so now I'm going to show you how to
197. 19:45customize this button uh for touch devices so for  button customization there's three events there
198. 19:51are three functions that I think are important to  know about now obviously there's more that you can
199. 19:56look at when you go to the document M mentation  for uh context action service but for this episode
200. 20:01I'm going to be showing you three of them that I  think are important so let's drop a line down here
201. 20:06uh right after we bind our function for press e so  we're going to change the way the button looks for
202. 20:14this specific action pressed e so the way we're  going to do that is by using three functions from
203. 20:19Context Action Service so we're going to say  context Action Service colon and the first one
204. 20:26I'm going to show you is changing the title of the  button so what I mean by title is if we let's say
205. 20:33had uh the button right here it's going to have  a text on it to let us know what this uh button
206. 20:38does so that's what the title is and we're going  to set that title so in our script let's say set
207. 20:44title and then in parenthesis this takes in two  arguments the first one is going to be the action
208. 20:49name which in this case it's going to be press e  so that's our uh action name right here and then
209. 20:55it's going to take in this a second argument which  is going to be the the title itself as a string
210. 21:00we're just going to say press e uh just like  something random like this just to let the player
211. 21:07know that this is what the button does so that we  can lay so that we can overlay this text in front
212. 21:13of the button so that's one of them the second one  is set image and this is basically saying we can
213. 21:18add we can add a image from the Roblox Marketplace  to basically slap it onto our button uh to give us
214. 21:26more of a vis ual representation of the button by  just slapping an image onto the actual button uh
215. 21:32so the way we find an image is if you remember  it's from uh the toolbox which one way you can
216. 21:38find it is in View and then toolbox over here we  can then select an image from the image Library
217. 21:43uh in this case let's take this red Valk decal  so we're going to right click it and hit copy
218. 21:46asset ID and then let's go into our script so  we're going to say context Action Service colon
219. 21:54set image and the first thing it's going to take  in is the action name which is press e and then
220. 22:00a string that represents the image so if you  remember how an image URL works it basically
221. 22:06starts with this set of strings right here so in  quotations we're going to say exactly RBX asset
222. 22:15ID colon SL slash and then our image ID that we  copied from our redvalk decal so we're going to
223. 22:22hit paste and that's going to be our number so  this is the entire image URL right here that's
224. 22:28going to change the image of the button so let's  go into the game and see what this looks like now
225. 22:34that we changed the title and also the image  of it all right so let's equip the tool and
226. 22:38as you can see this little button now says press  e and there's also a little Valkyrie image right
227. 22:45behind it it's kind of hard to see but you can  definitely see it uh if I like zoom in here um
228. 22:50so it works as expected but it's at a very awkward  position because it's right in front of the jump
229. 22:54button we can change the position of this using  set position and I'm going to show you what this
230. 22:59looks like so if we go into our script let's drop  a line let's say context Action Service colon set
231. 23:07position and first thing is going to be the action  name press e and then a position that takes in a
232. 23:14udm 2 value because we're we're trying to set the  position at a specific spot on the screen so if
233. 23:20you remember how udm 2 values work it's basically  structured like this we're going to say udm 2. new
234. 23:27open and close parentheses and it's going to take  in four arguments we're going to change the scale
235. 23:31of this specifically so we going to probably put  this somewhere in the middle of the screen just
236. 23:36for the sake of this uh tutorial we're going to  say 0.5 comma 0 comma 0.5 comma 0 so now we've
237. 23:44changed the position of the button to probably a  better spot uh on the screen or at least somewhere
238. 23:50that's not in front of the jump button so let's go  into the game and see the result okay so I had to
239. 23:57fidget with with the numbers around for a little  bit to of a number that's more representable like
240. 24:02negative one for the scale so now that we're in  the game and I equip the tool we can see that now
241. 24:08the button is at a position that's not where  it used to be in front of the jump button now
242. 24:12obviously you want to Tinker around with this to  make it at a much better place you don't want to
243. 24:17like have your thumb uh all the way over here and  then you have to reach for this button with your
244. 24:21fingers uh it's not very convenient but just for  demonstration purposes that's how you change the
245. 24:27position of a button inside of Roblox studio with  context Action Service so I hope this serves to
246. 24:33be very useful to you if you decide to use this  in your Roblox game and finally what we will go
247. 24:38over is changing the actual button image itself uh  so in order to know where this is located we will
248. 24:45go to players brawl battle uh player GUI context  action GUI context button frame and then finally
249. 24:52we have the context action button to then see  all of these properties that we can change for
250. 24:58an image button I did not go over what images  what image buttons are but I will go over that
251. 25:02later in my GUI tutorial guide uh but just letting  you know that this is a image button instance that
252. 25:08has all these properties that you can change  in order to change the look of your button so
253. 25:13let's say I wanted to change the image color so  if I press this and then change the image color
254. 25:17I can change it to uh have have it to be a tint  of let's say blue so now the image has like this
255. 25:24bluish color to it and we can even have an image  transparent of it to something different like 0.5
256. 25:30so that it's a little bit harder to see but it's  not entirely opaque so we can make these little
257. 25:36modifications to the button itself if we want to  uh by using a function that Roblox has provided
258. 25:41to us called get button and I'm going to show you  how to do this in your script all right so let's
259. 25:47go into our local script and down here let's get  our button uh so we're going to say local button
260. 25:55equals context action service colon get button and  we're going to pass in our action name which is
261. 26:03going to be press e so now that we have our button  let's first check to see if this button exists
262. 26:09because obviously we want this to happen only if  we're playing on a touch device so you're going to
263. 26:14say if button then and then we can change whatever  we want to change with the button so what I showed
264. 26:19you before uh we changed the transparency of the  button and we also change the color of it so we
265. 26:25can change the color of it here in our script  by saying button. image color 3 equals color
266. 26:343. from RGB and then we can click this little  wheel here and then change it to let's say this
267. 26:40blue color let's hit okay and we can even change  the image transparency as well by saying button.
268. 26:46image transparency equals 0.5 so now if we go into  the game we can see that we've made changes to our
269. 26:54button itself because we were able to get the  button from the context Action Service uh get
270. 26:59button function and as you can see our button here  is now blue and it's also at 0.5 transparency so
271. 27:06this has basically worked as intended there's  one more thing I want to discuss before we end
272. 27:11off the video now unfortunately there is an issue  with changing the actual button itself like this
273. 27:17little circular default button here uh if we open  up the players braw battle uh starter GUI context
274. 27:24Action Service context button and uh the actual  button itself self so before you leave this video
275. 27:29I want to show you something very interesting  that I don't know if you've ever not that if
276. 27:33you've ever seen this before but if we have this  button image we we can see that it's an ID of 9716
277. 27:40444 just like a bunch of random numbers here if I  press the button then it's going to change the ID
278. 27:46to something different if I let go then the ID is  going to change back to 444 so if I press it it's
279. 27:52going to change uh the image to something that's  a little bit brighter and then let go it's going
280. 27:57to change it back back to something else so I I  actually tested this uh by changing the image to
281. 28:03something completely different like an actual  button so if I search a button and let's say
282. 28:08I took one of these buttons and tried replacing  the image it's just going to be overridden with
283. 28:13roblox's default system of just changing the  ID to this default button and unfortunately I
284. 28:19believe there's no way around this exactly you're  going to have to use a different framework created
285. 28:24by someone that allows you to change the actual  the actual button itself uh there is a there is
286. 28:32a feature for that I don't exactly know what the  name of it is but if you want to know what it is
287. 28:35I'll probably post it in my resources channel in  my Discord server so if you haven't joined that
288. 28:40I highly recommend you joining my Discord server  all right and that's basically going to be the end
289. 28:44of this episode I hope you found this video to be  extremely helpful to you and that you'll be using
290. 28:48this in your Roblox games if you want to know more  about user input and how we can detect user input
291. 28:53and also how we can detect the device that the  player is on I highly recommend you watching my
292. 28:58user input service video that I'm going to be  putting in right here so go and watch that if
293. 29:03you haven't already I hope you found this video  to be helpful and if you have be sure to check
294. 29:08out all my other videos that I do have or check my  user input service video that I have recommended
295. 29:12to you right here but with that being said I'm  going to see you in the next episode take care