How to add rain to Roblox games — Transcript

Full transcript

1. 0:00We've all been there.
2. 0:01>> [music]
3. 0:01>> You bump into an acquaintance in line at
4. 0:03the grocery store,
5. 0:04or maybe you're on your second cup of
6. 0:06tea with a grandparent. There's a lull
7. 0:08in the conversation.
8. 0:10Do you do it? Are you that desperate? Do
9. 0:12you reach for the safest possible topic
10. 0:14of discussion?
11. 0:16That's right, this video is about the
12. 0:17weather. Specifically, it's about rain.
13. 0:19How to think about rain in Roblox games,
14. 0:21several approaches to implementing rain,
15. 0:24and the pros and cons of each. Let's get
16. 0:26into it. Hey everyone, it's Andrew from
17. 0:28Roblox. We experience it all the time,
18. 0:30but rain is complicated. [music]
19. 0:32Tons of environmental factors affect
20. 0:34whether it's raining at all, as well as
21. 0:35the duration and severity of that rain.
22. 0:38What should cloud cover look like
23. 0:40before, during, and after a storm? Then
24. 0:43there's the idea of trying to simulate
25. 0:44all those droplets as they fall, the
26. 0:46path they take in the wind, what happens
27. 0:48when they land, how they pool, surfaces
28. 0:50[music] becoming slick, and on and on
29. 0:52and on. The Weather Channel says a
30. 0:54typical citywide rain event involves
31. 0:56trillions upon trillions of raindrops.
32. 0:58[music] We can't simulate that. So, if
33. 1:01we can't simulate it, we have to fake
34. 1:03it. This video covers three approaches:
35. 1:06a 2D overlay,
36. 1:07>> [music]
37. 1:07>> hand-crafted environmental art, and a
38. 1:10dynamic code-driven system.
39. 1:12This first approach is the simplest,
40. 1:14which is an overlay. Here we have a
41. 1:16screen GUI with a transparent mainframe,
42. 1:19a few types of UI gradients for the
43. 1:21raindrops, and an overall tint. At first
44. 1:24glance, it looks okay. But, this
45. 1:26approach has some major downsides.
46. 1:28Since it's a screen overlay, the rain
47. 1:30effect is identical, whether you're
48. 1:32zoomed way in, zoomed way out, and
49. 1:35whichever way you're looking. It might
50. 1:37look fine at one zoom level or
51. 1:39orientation, and really break immersion
52. 1:41in another.
53. 1:43You have to add logic to detect when
54. 1:45you're indoors or in a cave, and turn
55. 1:47the overlay off.
56. 1:49Also, there's no concept of splashing.
57. 1:52If you're using a fixed camera in a 2D
58. 1:54game that takes place mostly outdoors,
59. 1:56though, this might be a fine
60. 1:57implementation. You can add some splash
61. 1:59effects to the overlay and call it a
62. 2:01day. The next approach is to art the
63. 2:03heck out of a scene with the extensive
64. 2:05use of particle emitters.
65. 2:07Rain, of course, falls from the sky, so
66. 2:10we need some particles to do the same.
67. 2:12Add a part, make it transparent, anchor
68. 2:14it, and stick it above our heads. Attach
69. 2:16a particle emitter, let's do emission
70. 2:18direction bottom, and
71. 2:20yep, those are some sparkles.
72. 2:22Not exactly convincing, though.
73. 2:25You could use a custom texture, but
74. 2:27squashing makes the texture much less
75. 2:30relevant. Positive squash values give us
76. 2:32vertical growth, which is exactly what
77. 2:34we're looking for with rain. Three looks
78. 2:36about right to my eyes.
79. 2:38We can darken the color a bit, make sure
80. 2:40the particles react to light, increase
81. 2:42speed, decrease lifetime,
82. 2:44>> [music]
83. 2:44>> and give them a slight rotation to
84. 2:46simulate a bit of wind, and then voila.
85. 2:48We're getting pretty close to something
86. 2:50your brain might recognize as rain.
87. 2:53Because it's attached to a transparent
88. 2:55part that we placed and anchored by
89. 2:56hand, you don't have to code around it.
90. 2:58Just don't [music] stick those parts
91. 3:00above buildings, or or if you do,
92. 3:01shorten the lifetime, and it won't
93. 3:03appear to rain on players while they're
94. 3:05indoors. [music]
95. 3:06You can use particle emitters in the
96. 3:08opposite direction for splash effects.
97. 3:10Place a transparent part on the ground
98. 3:12with a particle emitter emission
99. 3:13direction of top. These emitters
100. 3:15probably do need a custom texture
101. 3:17[music] since we're not squashing the
102. 3:19particles beyond recognition.
103. 3:21We also need a simple number sequence to
104. 3:23ease the transition from mostly
105. 3:25transparent
106. 3:26>> [music]
107. 3:26>> to just about completely transparent,
108. 3:28which creates the illusion of the splash
109. 3:31dissipating.
110. 3:32Duval Drive uses this approach to great
111. 3:35effect along with a third emitter for
112. 3:37mist and a fourth for rain dripping from
113. 3:39awnings. I especially love this last
114. 3:42effect. [music] It's It's so cool. It's
115. 3:44so clever. Check it out.
116. 3:46Back to our emitters, we also need some
117. 3:48clouds, but of course they shouldn't be
118. 3:49bright happy clouds, and the sun looks a
119. 3:52little large. Let's shrink that down.
120. 3:54And the splash effect doesn't look super
121. 3:56great on this surface here. Maybe we
122. 3:58shouldn't use it. [music] And emitters
123. 4:00have a limit of 400 particles per
124. 4:02second. So, if we want a downpour, we
125. 4:04have to break
126. 4:06>> [music]
127. 4:08>> By this point though, you might have
128. 4:09already figured out the downsides of
129. 4:11this approach. You've got to build it
130. 4:13all. As the world expands, you're adding
131. 4:15part after part after part, carefully
132. 4:17[music] positioning and adjusting to
133. 4:19achieve the desired effect.
134. 4:21Over and over and over.
135. 4:23It's possible in a more constrained
136. 4:25experience like Dival Drive, but might
137. 4:27be more work than you're looking to take
138. 4:29on in a larger world.
139. 4:31For the final approach then, let's
140. 4:32examine what a system might look like.
141. 4:34Here's the rundown of how I designed
142. 4:36this one. A rainstorm will occur
143. 4:38eventually, anywhere from [music] 12 to
144. 4:40168 in-game hours after stopping.
145. 4:44At the start of a storm, we transition
146. 4:45clouds from puffy and nice to dense and
147. 4:48dark over the course of 2 hours. And the
148. 4:51wind picks up right alongside them.
149. 4:53Halfway through the cloud transition, we
150. 4:54start spawning rain parts and mist parts
151. 4:57around a point of origin.
152. 4:58>> [music]
153. 4:59>> We ramp rain up from 50 to 100% and mist
154. 5:02from 0 to 100%.
155. 5:04The particles have drag and respect
156. 5:06global wind, so you get a slight angle
157. 5:09as the rain falls and can keep rotation
158. 5:11at zero. Rain stops after anywhere from
159. 5:144 to 12 in-game hours with the same
160. 5:16transition of clouds and wind in
161. 5:18reverse.
162. 5:19The reason I went with mist, for the
163. 5:20record, is that splashes need exact
164. 5:22careful placement in order to look good.
165. 5:25As a 3D artist here at Roblox told me,
166. 5:27mist is really forgiving.
167. 5:29All key values are configurable in a
168. 5:31central file, and they need to be
169. 5:33because it's very, very easy to bump
170. 5:35into particle limits when you're working
171. 5:37with emitters programmatically.
172. 5:39If you experience flickering at a
173. 5:41distance, this is easiest to notice with
174. 5:43the mist,
175. 5:44you probably need to start turning the
176. 5:46rain knobs down.
177. 5:47>> [music]
178. 5:47>> That's lifetime, rate, and coverage
179. 5:50percentage. For example, if you lower
180. 5:52the height of the rain parts, you can
181. 5:54shorten the lifetime of the particle,
182. 5:56which means fewer on screen at any given
183. 5:58moment. Lowering the rate turns a
184. 6:00downpour into a shower, and lowering the
185. 6:03coverage percentage [music] just means a
186. 6:05smaller storm. Mobile devices have much
187. 6:07lower particle limits than desktops, so
188. 6:10if you implement a dynamic system like
189. 6:11this one, test early, [music] test
190. 6:13often, and consider enabling streaming.
191. 6:17The other major hurdle is roof
192. 6:18detection. Particles don't collide, so
193. 6:20if you don't perform roof detection,
194. 6:22they flow right through [music] houses
195. 6:24and bridges and whatever else and can
196. 6:26break immersion.
197. 6:27My crude version of roof detection
198. 6:29involves checking whether there's a part
199. 6:31along the path of the rain [music] and
200. 6:32shortening the lifetime of the rain
201. 6:34particles so that they stop right before
202. 6:36reaching that part.
203. 6:38This is maybe not easy when there's no
204. 6:40wind, but a bit easier. With wind, we
205. 6:43have to angle the ray in such a way that
206. 6:45it approximates the path of the rain.
207. 6:48Think of it like a right triangle, where
208. 6:49the ray travels along the hypotenuse,
209. 6:51but you measure the leg, which [music]
210. 6:53is how far the rain falls before it hits
211. 6:55the part.
212. 6:56From that height and the rain speed,
213. 6:58gravity, and drag, you can determine how
214. 7:01long the particle lifetime should be so
215. 7:02that it stops right before the part.
216. 7:04This approach [music] has some important
217. 7:06limitations. The rain part only casts
218. 7:08one ray, so the smaller your rain parts
219. 7:11are, the more accurate the roof
220. 7:12detection is. But, more parts [music]
221. 7:15means more emitters and rays means a
222. 7:17bigger performance hit to your game, so
223. 7:19you have to strike [music] a balance.
224. 7:21Also, the rain doesn't actually fall in
225. 7:23this neat triangle pattern. Instead, it
226. 7:26starts off following a curve,
227. 7:27accelerating until it hits terminal
228. 7:29velocity, at which point the influence
229. 7:31from the wind becomes constant. So, my
230. 7:34fixed angle method isn't perfect. If you
231. 7:37want to disable roof detection or rip
232. 7:38the system out altogether, I've tried to
233. 7:41make that as easy as possible.
234. 7:43To close things out, I should mention
235. 7:44these systems are not mutually
236. 7:46exclusive. You can do it all. You can
237. 7:48have a system that dynamically enables a
238. 7:502D overlay and fires up the splash
239. 7:53emitters that you've manually positioned
240. 7:55all around the world.
241. 7:56I obviously haven't seen the underlying
242. 7:58implementation, but that appears to be
243. 8:00what Acquire and Square Enix are doing
244. 8:02here in Octopath Traveler II.
245. 8:05To my eyes, [music] the rain is a 2D
246. 8:07overlay
247. 8:08and you can see two types of particle
248. 8:09emitters, one for [music] rain on
249. 8:11impact, the other for rain splashing
250. 8:13upward.
251. 8:14The fixed camera makes the overlay a
252. 8:16great fit and I suspect the splash
253. 8:17emitters were placed by hand since you
254. 8:20can spot the occasional inconsistency.
255. 8:23You can find all the code from this
256. 8:24video as a Rojo project in our new
257. 8:26Roblox Resources repository. [music]
258. 8:29Link right there in the description.
259. 8:31If you have strong thoughts about
260. 8:32handling weather in Roblox games or just
261. 8:34think it's more interesting topic of
262. 8:36conversation than I do, be sure to let
263. 8:38me know in the comments. Thank you so
264. 8:40much for watching
265. 8:42and I'll see you in the next one.