Creating a Pixel Shader in Roblox Studio: A Step-by-Step Guide — Transcript

Full transcript

1. 0:00This is how to make a pixel shader in
2. 0:02Roblox Studios. This is the shader. And
3. 0:05how it works is it creates um a bunch of
4. 0:09frames that are pixels. And then for
5. 0:12every frame, it creates a raycast at the
6. 0:16location of the pixel. And then if it um
7. 0:19hits something, it'll get the color of
8. 0:21what it hits and set the pixel to that.
9. 0:24If not, it'll set it to the default
10. 0:26color. And this is just to limit how
11. 0:30many times it um updates per second. And
12. 0:34um I will also put a way for you to get
13. 0:37this in the description. So you don't
14. 0:40really have to make it yourself, but
15. 0:41I'll show you how. First, we go into
16. 0:43starter player. And then we go into
17. 0:45starter player scripts. Then we're going
18. 0:47to add a script. You're going to need
19. 0:49these values to start. So we have the
20. 0:51player that gets the player of the local
21. 0:54script. We have the run surface. It
22. 0:57basically runs every update of the game.
23. 1:01We have uh we create a new screen GUI
24. 1:05and then we get the player GUI and set
25. 1:08the screen GUI's parent to the player
26. 1:10GUI. Basically, just creating a place
27. 1:13for the frames to like display. Next, we
28. 1:16have the pixel size. That's how big the
29. 1:19pixels will be. The max view distance.
30. 1:22That's how far the raycasts will be able
31. 1:24to go. The default color, the color that
32. 1:28the pixels will be set if the raycast
33. 1:31don't hit anything.
34. 1:33Border pixel size, that's what that
35. 1:36means. Um, I have it set to zero, but if
36. 1:39we set that to like one and then this to
37. 1:420.9,
38. 1:44this is the difference in color between
39. 1:46the border and the like pixel color.
40. 1:48Okay. So, it basically like outlines
41. 1:51every pixel with um like a difference
42. 1:55with the of the main color. So, this is
43. 1:580.9 difference and it like
44. 2:02you can have it if you want. I'll just
45. 2:04put it in there so you can mess around.
46. 2:07Okay. Um there's the frames. Um obvious
47. 2:12frames per second.
48. 2:14Um offset. So offset is how many pixels
49. 2:18like they'll compensate for the like
50. 2:21movement of UI that happens at when the
51. 2:25new UI is created or when the game
52. 2:28starts and distance. This is like like
53. 2:30change in brightness over the distance
54. 2:33um of the raycast like how far away it
55. 2:36like hit.
56. 2:38Okay, now we're on to the setting up the
57. 2:43pixels. So, first we're going to make a
58. 2:45list of all the pixels. This is going to
59. 2:47be just to make it easier to get them
60. 2:50all. And we're going to create a
61. 2:52function called you can have it whatever
62. 2:54you want, but um this will set up the
63. 2:57pixels. And we'll make a couple
64. 3:00variables at the beginning because the
65. 3:03size of the screen can change um when
66. 3:06like initializing.
67. 3:08We first will like destroy any of the
68. 3:10pixels that or get rid of any of the
69. 3:13pixels that are already in there. Um set
70. 3:16up like an easier way to organize all
71. 3:20the pixels.
72. 3:22Um we check if the screen size has
73. 3:25changed the same after like one up like
74. 3:29after a little bit of time and if it
75. 3:31hasn't we call the function again and
76. 3:34then just return.
77. 3:36But if the size is the same. We go
78. 3:39through all the y pixels and x pixels in
79. 3:42two functions or two for loops. Uh the
80. 3:47first for loop we set it to zero for the
81. 3:49y and have the end number being the y
82. 3:54pixels and the x for the second for
83. 3:56loop. The x is also zero and the end
84. 4:00number is going to be the x pixels.
85. 4:04And you can spawn
86. 4:07um them in like this, but it doesn't
87. 4:10really help.
88. 4:13Um and for creating them, you create a
89. 4:17frame, you don't have to set a name, but
90. 4:20I just did. Uh you set the size. This is
91. 4:24a U di
92. 4:26I don't This is um offset. So it's like
93. 4:29the actual pixel size like not um scaled
94. 4:32to the screen. And for the position it's
95. 4:35going to be a scale and you scales are
96. 4:39like decimal points like a one to zero
97. 4:42basically. So you divide the so this is
98. 4:47ba this basically gets the location of
99. 4:49where the pixel should be and you divide
100. 4:52that by the entire screen size of the x
101. 4:56and you do the same for y but instead
102. 4:58you subtract the offset so it goes up
103. 5:01and over here we do add the offset I
104. 5:04forgot to mention that so it does count
105. 5:07for the like difference and border pixel
106. 5:10that equals the border pixel value
107. 5:13The mode is I put it inset and the
108. 5:18Z-index I put that as negative one so
109. 5:21that other UI can be on top of it. And
110. 5:25then the frames parent is just the
111. 5:28screen UI. And then you add the frame to
112. 5:32the list list of pixels by getting the X
113. 5:35value and the Y-value. So it's really
114. 5:37easy to find it. And that's why we did
115. 5:40this over here and setting that to
116. 5:43there. Now we'll have a function for the
117. 5:45raycast. This is um not that necessary,
118. 5:49but it just looks better. It has two
119. 5:52inputs, the X and the Y. And I do
120. 5:56recommend um excluding the player the
121. 6:00character from the thing. So basically
122. 6:03it won't display the character. rays
123. 6:06don't really capture how the character
124. 6:07looks in like the real game that well.
125. 6:10So, I I basically made it so this like
126. 6:14character lookalike thing follows your
127. 6:16character and it just makes it so you
128. 6:19can't see the actual player.
129. 6:22Um, the animations don't play on it, but
130. 6:25you could if you wanted to. You just
131. 6:28have to do a little bit more work. And
132. 6:31then you need to create a view which you
133. 6:34get the current camera and you get the
134. 6:37viewport to array um function and you
135. 6:41just plug in the x and y values
136. 6:44and then you create a way array by
137. 6:46getting the workspace and then there's a
138. 6:48function called raycast. You get the
139. 6:51origin which is the like point of which
140. 6:54the ray was cast, the view direction
141. 6:57which is like where to point the ray and
142. 7:01then the distance. It will basically you
143. 7:03multiply the view direction by the
144. 7:05distance. That basically um tells it how
145. 7:08far the ray should go. And then you just
146. 7:10give it the parameters and return the
147. 7:13ray. And now to update all the pixels,
148. 7:17we're going to create another function.
149. 7:20And we just get the other values that we
150. 7:22had up when we created the frames. And
151. 7:25then I we have these values. They're
152. 7:28just kind of um to optimize the code a
153. 7:32bit I would say because it is quite
154. 7:34laggy with um a pixel size of 10 and
155. 7:39three frames. It is a little three
156. 7:42frames a second. Still is pretty laggy.
157. 7:46Well, and not that much, but you can
158. 7:48notice like delay in the mouse. We got
159. 7:51the color, which is just a new color. We
160. 7:54have the max distance inverted. This
161. 7:57basically calculates forehand, so we
162. 7:59don't have to do it every time. And
163. 8:02default color, default border color
164. 8:04again. Then the X positions. This is
165. 8:07basically so we can do the
166. 8:08multiplication beforehand. Y position,
167. 8:11we also did that beforehand over here.
168. 8:14And we have basically the same thing as
169. 8:17up up here. Two for four loops. Um, we
170. 8:21get the pixel by doing basically the
171. 8:24opposite of this. Well, we do the exact
172. 8:27same thing. We just get it instead of
173. 8:30setting it. Um, and then the ray results
174. 8:33is just the calling the function of the
175. 8:35raycast and putting the x pixel and the
176. 8:37y pixel in. And then if there are ray
177. 8:40results that is necessary because if
178. 8:42there isn't and we do um the rest of
179. 8:45this code it will not work but that's
180. 8:48why there is a default color also create
181. 8:51an instance color the like color of the
182. 8:54part that it hit and then we will have
183. 8:56the RGB values just separated for easy
184. 9:00like use over here and then if there is
185. 9:02a distance we get the distance and
186. 9:04multiply it by the
187. 9:07um opposite of the view distance over
188. 9:10here. Change how bright it will be
189. 9:13depending on the distance. And you just
190. 9:15um new color and multiply all of it. RGB
191. 9:18times the distance. And then for the
192. 9:20border color, RGB, but we'll also add
193. 9:24the BPB, border pixel brightness. And
194. 9:29you just have an else and do um it
195. 9:32without the distance if we don't have it
196. 9:34um it enabled. And then if we don't have
197. 9:37array cast, we just set it all the the
198. 9:40colors to default color. Okay. And now
199. 9:43we can call the setup function and that
200. 9:46will just set up everything. And now for
201. 9:48the frame rate stuff. So we'll have a
202. 9:52function called frame. And the frame
203. 9:54will be will add the elap elapse which
204. 9:58is basically time since the last time it
205. 10:00uh updated. And then if the frame is
206. 10:03greater than or equal to um one divided
207. 10:06by the frame rate we'll set the frame to
208. 10:08zero the and we'll update it
209. 10:11initializes. And you can see if we go to
210. 10:16view and performance we can see in here
211. 10:20the CPU is working a little over the
212. 10:23max. It does kind of bump up to 50
213. 10:27sometimes, but you can kind of change
214. 10:31the
215. 10:32pixel size and the FPS to
216. 10:36fit your needs. And if you can, you try
217. 10:39to optimize the updates. You can if you
218. 10:42want, but I don't think you can do that
219. 10:45much. I tried to find out how to run any
220. 10:48code on the GPU because um let's go back
221. 10:54to the performance.
222. 10:56The we can see the GPU is not doing
223. 11:01anything right now, but I don't think
224. 11:03there's a good way. Don't mind that.
225. 11:05That's because I like
226. 11:07broke that. And that's how you make a
227. 11:08pixel shader in Roblox Studios.