WEBVTT 1 00:00:04.409 --> 00:00:08.963 Realistic Commons Portal Effect 2 00:00:08.963 --> 00:00:11.607 GCC Academy 3 00:00:27.200 --> 00:00:29.798 Hello, this is Park Hyun-sang 4 00:00:29.799 --> 00:00:33.200 Today, we'll be creating a portal effect, 5 00:00:33.200 --> 00:00:35.099 simulating the separation of space 6 00:00:35.099 --> 00:00:40.360 when transitioning to another location 7 00:00:40.360 --> 00:00:42.520 Such effects are widely used 8 00:00:42.520 --> 00:00:46.520 not only in games but also in movies 9 00:00:46.520 --> 00:00:52.400 For instance, the ending sequence of the Unreal 5 showcase featured a similar effect 10 00:00:52.400 --> 00:00:55.599 We’ll design an effect with naturally flowing particle movements 11 00:00:55.599 --> 00:00:59.826 to draw users’ attention effectively 12 00:01:00.075 --> 00:01:03.847 Creating Portal Effect 13 00:01:04.360 --> 00:01:06.379 To begin, 14 00:01:06.379 --> 00:01:09.680 let’s create a Niagara System 15 00:01:09.680 --> 00:01:13.480 This time, instead of using a preset template, 16 00:01:13.480 --> 00:01:17.480 we’ll create an empty Niagara System 17 00:01:17.480 --> 00:01:18.959 to create one 18 00:01:18.959 --> 00:01:23.279 Let's name it FX_Portal 19 00:01:23.279 --> 00:01:24.760 Open it 20 00:01:24.760 --> 00:01:27.279 You’ll notice that no emitter exists 21 00:01:27.279 --> 00:01:30.480 making an empty Niagara system 22 00:01:30.480 --> 00:01:34.120 This is likely your first time building from scratch 23 00:01:34.120 --> 00:01:37.239 without pre-existing templates 24 00:01:37.239 --> 00:01:39.689 Right-click 25 00:01:39.689 --> 00:01:42.360 and don't select an existing template 26 00:01:42.360 --> 00:01:45.160 Let's go with Add Empty Emitter 27 00:01:45.160 --> 00:01:48.160 to work with each step 28 00:01:48.160 --> 00:01:50.860 First, in the Emitter Update section, 29 00:01:50.860 --> 00:01:53.760 add the Emitter State module, 30 00:01:53.760 --> 00:01:56.858 which controls how long 31 00:01:56.858 --> 00:01:59.320 the system is going to operate 32 00:01:59.320 --> 00:02:02.519 Set the Lifecycle to Self 33 00:02:02.519 --> 00:02:05.760 and enable Infinite 34 00:02:05.760 --> 00:02:10.479 Next, same with the Update, 35 00:02:10.479 --> 00:02:15.440 add the Spawn Rate module 36 00:02:15.440 --> 00:02:19.039 We'll set it to generate around 100–300 particles at a time 37 00:02:19.039 --> 00:02:22.919 Because rendering and other functions are not yet configured, 38 00:02:22.919 --> 00:02:25.880 these particles won’t be visible 39 00:02:25.880 --> 00:02:28.600 When particles are spawned, 40 00:02:28.600 --> 00:02:34.800 let's add Initialize Particle 41 00:02:34.800 --> 00:02:38.039 which allows us to set basic things 42 00:02:38.039 --> 00:02:41.479 like the size and others 43 00:02:41.479 --> 00:02:44.720 We'll do other thing like Update later 44 00:02:44.720 --> 00:02:50.520 add the Sprite Renderer in the Renderer section 45 00:02:50.520 --> 00:02:55.119 Now the particles are visible 46 00:02:55.119 --> 00:02:57.479 With this Spawn Rate, 47 00:02:57.479 --> 00:03:01.880 the particles are generated, by 100 a second, 48 00:03:01.880 --> 00:03:05.320 though they’re overlapping in a cluster 49 00:03:05.320 --> 00:03:09.440 Add the Initialize Particle to set a constant spawn rate 50 00:03:09.440 --> 00:03:12.600 and include the Shape Location 51 00:03:12.600 --> 00:03:14.279 By default, this is set to a sphere shape, 52 00:03:14.279 --> 00:03:18.160 which gives the particles a rough, spherical distribution 53 00:03:18.160 --> 00:03:22.000 Since portal effects 54 00:03:22.000 --> 00:03:24.639 often feature circular 55 00:03:24.639 --> 00:03:28.279 or flat, round shapes 56 00:03:28.279 --> 00:03:31.839 to visually connect to other spaces, 57 00:03:31.839 --> 00:03:34.901 it is usually a sphere 58 00:03:34.901 --> 00:03:38.720 Or more like a flat circle 59 00:03:38.720 --> 00:03:40.759 For that, we need Torus 60 00:03:40.759 --> 00:03:42.909 We’ll change the Shape Primitive setting 61 00:03:42.909 --> 00:03:45.360 to Torus, or a donut-like shape 62 00:03:45.360 --> 00:03:48.080 While it might appear 63 00:03:48.080 --> 00:03:49.980 similar to a ring or disc 64 00:03:49.980 --> 00:03:52.000 at first glance, 65 00:03:52.000 --> 00:03:54.100 Flat ring or disc shapes 66 00:03:54.100 --> 00:03:56.919 lack vertical dimensions 67 00:03:56.919 --> 00:04:00.639 while torus shapes have height with a constant thickness 68 00:04:00.639 --> 00:04:03.289 If we increase 69 00:04:03.289 --> 00:04:05.320 the radius to 300 70 00:04:05.320 --> 00:04:09.080 and widen the handle radius, 71 00:04:09.080 --> 00:04:11.030 the handle 72 00:04:11.030 --> 00:04:14.080 represents the thickness of the torus, 73 00:04:14.080 --> 00:04:15.479 or the donut here 74 00:04:15.479 --> 00:04:18.880 This range can be adjusted to your preference, 75 00:04:18.880 --> 00:04:22.519 allowing you to create a consistent thickness 76 00:04:22.519 --> 00:04:25.239 and size for the portal effect 77 00:04:25.239 --> 00:04:28.600 Currently, the particles appear too large, 78 00:04:28.600 --> 00:04:33.480 so go to the Initialize Particle module and set the sprite size to Uniform 79 00:04:33.480 --> 00:04:38.079 Instead of a size of 10, reducing it to 1 is sufficient 80 00:04:38.079 --> 00:04:41.529 I initially exaggerated the size 81 00:04:41.529 --> 00:04:43.200 for better visibility 82 00:04:43.200 --> 00:04:46.519 Portals often allow people to pass through, 83 00:04:46.519 --> 00:04:51.119 so a radius of 300 units for the Shape Location 84 00:04:51.119 --> 00:04:54.679 means a portal with a 6-meter diameter 85 00:04:54.679 --> 00:04:56.640 It's a very large portal 86 00:04:56.640 --> 00:05:00.000 It's big enough for a building or a truck to fit through 87 00:05:00.000 --> 00:05:04.160 We’ll reduce the radius to 150 for a more moderate size 88 00:05:04.160 --> 00:05:08.359 You can now see particles forming 89 00:05:08.359 --> 00:05:11.239 the torus shape at closer range 90 00:05:11.239 --> 00:05:13.789 To make the portal effect appear 91 00:05:13.789 --> 00:05:16.640 as though dimensions are shifting 92 00:05:16.640 --> 00:05:20.380 in a more naturalistic way, 93 00:05:20.380 --> 00:05:22.920 I made the handle thicker for demonstration 94 00:05:22.920 --> 00:05:25.459 But for this, rather than 95 00:05:25.459 --> 00:05:27.640 the thick spread of the particles, 96 00:05:27.640 --> 00:05:30.040 the clump will look much better 97 00:05:30.040 --> 00:05:33.040 We’ll set the Handle Radius to 5, 98 00:05:33.040 --> 00:05:36.799 creating a thin ribbon-like shape 99 00:05:36.799 --> 00:05:40.320 For color adjustments, we move to Initialize Particle 100 00:05:40.320 --> 00:05:43.839 Previously, we used red with an RGB value of 8, 1, 0.2 101 00:05:43.839 --> 00:05:48.440 This time, we’ll use blue, setting the RGB to 0.2, 1, 8 102 00:05:48.440 --> 00:05:52.040 to emit a bluish glow like this 103 00:05:52.040 --> 00:05:55.239 The particles need to rotate now 104 00:05:55.239 --> 00:05:59.480 A portal is inherently an unnatural phenomenon, 105 00:05:59.480 --> 00:06:02.180 because a sudden spatial opening 106 00:06:02.180 --> 00:06:05.359 is unstable by nature 107 00:06:05.359 --> 00:06:10.440 To emphasize this instability, 108 00:06:10.440 --> 00:06:14.119 the particles should not remain static 109 00:06:14.119 --> 00:06:17.640 Instead, they should appear 110 00:06:17.640 --> 00:06:20.198 as if they are constantly moving 111 00:06:20.198 --> 00:06:21.799 and fluctuating 112 00:06:21.799 --> 00:06:25.000 To create the swirling, dynamic effect, 113 00:06:25.000 --> 00:06:28.239 we add Vortex Force to the Particle Update module 114 00:06:28.239 --> 00:06:34.279 Initially, you may encounter a warning indicating that SolveForcesAndVelocity is missing 115 00:06:34.279 --> 00:06:38.640 Clicking Fix Issue will automatically resolve this 116 00:06:38.640 --> 00:06:42.760 The Vortex Force simulates a swirling, whirlpool-like motion 117 00:06:42.760 --> 00:06:46.239 that makes the particles rotate 118 00:06:46.239 --> 00:06:49.480 and spread outward in a natural, circular motion 119 00:06:49.480 --> 00:06:52.839 It should move to make this shape 120 00:06:52.839 --> 00:06:55.289 This rotation is 121 00:06:55.289 --> 00:06:58.519 useful for achieving this shape 122 00:06:58.519 --> 00:07:00.269 As you see, 123 00:07:00.269 --> 00:07:04.279 we need more particles 124 00:07:04.279 --> 00:07:09.399 With a spawn rate of around 300–600 particles, 125 00:07:09.399 --> 00:07:14.200 the effect becomes more pronounced 126 00:07:14.200 --> 00:07:17.720 However, it’s important to adjust the force 127 00:07:17.720 --> 00:07:20.839 and verify the effect from different angles 128 00:07:20.839 --> 00:07:25.640 Things like the value or axis of the Vortex matter 129 00:07:25.640 --> 00:07:28.839 The Vortex Force Amount is not set to 200 130 00:07:28.839 --> 00:07:31.889 This determines the rotational intensity of the particles 131 00:07:31.889 --> 00:07:34.799 A higher value causes faster dispersion, 132 00:07:34.799 --> 00:07:37.799 while a lower value 133 00:07:37.799 --> 00:07:42.559 creates slower movement. 134 00:07:42.559 --> 00:07:43.659 As of now, 135 00:07:43.659 --> 00:07:48.399 they are just being pulled towards outside 136 00:07:48.399 --> 00:07:52.447 Adjusting Origin Pull Amount 137 00:07:52.447 --> 00:07:55.799 to around 100 pulls particles inward 138 00:07:55.799 --> 00:07:58.849 before they disperse outward, 139 00:07:58.849 --> 00:08:00.799 creating a visually dynamic effect 140 00:08:00.799 --> 00:08:04.519 So this is the sketch of that movement 141 00:08:04.519 --> 00:08:09.319 The particles are spawned, and they meet the vortex, 142 00:08:09.319 --> 00:08:12.079 and they are puled outward, 143 00:08:12.079 --> 00:08:14.679 just like this, like so 144 00:08:14.679 --> 00:08:18.920 As particles swirl around the vortex, their movement is centered 145 00:08:18.920 --> 00:08:23.559 at the origin and gradually disperses outward 146 00:08:23.559 --> 00:08:26.359 The degree to which the particles 147 00:08:26.359 --> 00:08:30.880 are pulled inward and their circular motion around the center 148 00:08:30.880 --> 00:08:34.630 are determined by two key parameters, 149 00:08:34.630 --> 00:08:37.039 Origin Pull Amount 150 00:08:37.039 --> 00:08:40.719 and Vortex Force Amount, for which, 151 00:08:40.719 --> 00:08:45.200 I will assign values like 100 and 300 respectively 152 00:08:45.200 --> 00:08:49.050 It results in particles orbiting near the center 153 00:08:49.050 --> 00:08:50.840 before breaking free and dispersing, 154 00:08:50.840 --> 00:08:53.119 which creates a compelling swirling motion 155 00:08:53.119 --> 00:08:55.769 However, at this moment, 156 00:08:55.769 --> 00:08:59.400 because the particles currently appear as small dots, 157 00:08:59.400 --> 00:09:03.840 the visual impact of the effect is not as prominent 158 00:09:03.840 --> 00:09:10.239 To address this, we'll use the Scale Sprite Size module, 159 00:09:10.239 --> 00:09:13.520 meaning changing the size of Sprite 160 00:09:13.520 --> 00:09:17.919 We used a random graph to change its size 161 00:09:17.919 --> 00:09:21.799 We'll be using the Speed value to do it now 162 00:09:21.799 --> 00:09:24.599 We’ll press the Fix issue button here 163 00:09:24.599 --> 00:09:27.249 Before entering the Vortex, 164 00:09:27.249 --> 00:09:29.119 after pressing Fix issue, 165 00:09:29.119 --> 00:09:31.960 let's observe how the particles behave 166 00:09:31.960 --> 00:09:33.360 How have they changed? 167 00:09:33.360 --> 00:09:35.660 At lower speed values, 168 00:09:35.660 --> 00:09:38.719 the particles maintain their original size at 100% 169 00:09:38.719 --> 00:09:41.960 However, at higher speed values, they grow to a maximum of twice their size 170 00:09:41.960 --> 00:09:45.400 We’ll leave the X-axis scale as it is 171 00:09:45.400 --> 00:09:48.400 and increase the Y-axis scale to 10 times, 172 00:09:48.400 --> 00:09:51.000 or even 20 times, if needed 173 00:09:51.000 --> 00:09:54.599 This adjustment makes the particles stretch vertically based on their speed 174 00:09:54.599 --> 00:09:57.640 For the Y axis, it stretches upwards 175 00:09:57.640 --> 00:10:00.540 They're spinning as if 176 00:10:00.540 --> 00:10:03.200 they are all standing straight 177 00:10:03.200 --> 00:10:05.425 Like this, 178 00:10:05.425 --> 00:10:08.880 faster particles are elongated, while slower ones remain shorter 179 00:10:08.880 --> 00:10:12.359 We can make them like so 180 00:10:12.359 --> 00:10:14.209 However, 181 00:10:14.209 --> 00:10:17.719 the current rotation flow is around a specific axis, 182 00:10:17.719 --> 00:10:19.760 but the sprites, aligned with the Y-axis, 183 00:10:19.760 --> 00:10:22.799 stand straight like so 184 00:10:22.799 --> 00:10:24.449 Ideally, the elongation should align 185 00:10:24.449 --> 00:10:28.179 with the rotation flow for a more natural appearance 186 00:10:28.179 --> 00:10:31.000 To address this, the alignment in the Sprite Renderer 187 00:10:31.000 --> 00:10:33.300 This Alignment 188 00:10:33.300 --> 00:10:36.919 Let's adjust it to match the speed-based rotation, 189 00:10:36.919 --> 00:10:40.239 and see what happens to the particles 190 00:10:40.239 --> 00:10:43.889 The upright particles dynamically change 191 00:10:43.889 --> 00:10:46.159 their orientation likest his, to other directions 192 00:10:46.159 --> 00:10:47.758 To be exact, 193 00:10:47.758 --> 00:10:49.359 initially, sprites that faced the camera 194 00:10:49.359 --> 00:10:50.609 that looked like these 195 00:10:50.609 --> 00:10:53.039 now stretch due to their speed 196 00:10:53.039 --> 00:10:55.679 and adjust to align 197 00:10:55.679 --> 00:10:59.960 with their direction of movement 198 00:10:59.960 --> 00:11:02.310 So based on the direction of movement, 199 00:11:02.310 --> 00:11:04.559 our Sprites now look elongated, 200 00:11:04.559 --> 00:11:07.359 making them look more natural 201 00:11:07.359 --> 00:11:10.320 That's the module we've set 202 00:11:10.320 --> 00:11:12.020 Now, you could increase 203 00:11:12.020 --> 00:11:15.080 the sprite size of Initialize Particle 204 00:11:15.080 --> 00:11:17.730 and make it thicker, 205 00:11:17.730 --> 00:11:20.439 the particle boundaries more pronounced 206 00:11:20.439 --> 00:11:26.039 Adjusting the vortex rotation value to 500 allows the particles to spread further 207 00:11:26.039 --> 00:11:29.960 For example, comparing a Pull Amount of 0 208 00:11:29.960 --> 00:11:34.479 o values like 150 or 100 reveals 209 00:11:34.479 --> 00:11:37.880 that the particles briefly converge inward before spreading outward, 210 00:11:37.880 --> 00:11:41.880 enhancing the ring’s definition 211 00:11:41.880 --> 00:11:43.640 So boundaries of the particle effect 212 00:11:43.640 --> 00:11:46.840 are more distinct than when there was no Pull Amount 213 00:11:46.840 --> 00:11:50.040 Those were some basic movements 214 00:11:50.040 --> 00:11:52.159 of the particles 215 00:11:52.159 --> 00:11:56.400 When observing the current application of Vortex Force, 216 00:11:56.400 --> 00:12:00.039 the boundaries appear highly uniform, 217 00:12:00.039 --> 00:12:04.039 giving a clean and precise appearance 218 00:12:04.039 --> 00:12:07.200 However, such perfection may seem monotonous 219 00:12:07.200 --> 00:12:11.880 To introduce variation to this monotonous look, 220 00:12:11.880 --> 00:12:14.880 let's add a Curl Noise Force module 221 00:12:14.880 --> 00:12:19.239 This module, Curl Noise Force, is added 222 00:12:19.239 --> 00:12:22.000 Let's disable Vortex, because movements 223 00:12:22.000 --> 00:12:24.960 make it harder for us to look at Curl Noise Force 224 00:12:24.960 --> 00:12:27.119 ressing the F key in the viewport 225 00:12:27.119 --> 00:12:30.320 helps focus on and compare the particles’ behavior 226 00:12:30.320 --> 00:12:32.679 before and after the Curl Noise is applied 227 00:12:32.679 --> 00:12:35.640 By using the Strength parameter, 228 00:12:35.640 --> 00:12:39.119 increasing the Strength value 229 00:12:39.119 --> 00:12:42.719 makes the particles spread more erratically, 230 00:12:42.719 --> 00:12:44.599 adding a sense of movement 231 00:12:44.599 --> 00:12:47.880 Additionally, for the Frequency parameter, 232 00:12:47.880 --> 00:12:50.320 a higher Frequency 233 00:12:50.320 --> 00:12:54.599 results in more compact in-and-out motion, 234 00:12:54.599 --> 00:12:58.119 whereas a lower Frequency 235 00:12:58.119 --> 00:13:01.719 produces a clearer distinction 236 00:13:01.719 --> 00:13:03.840 between the outward 237 00:13:03.840 --> 00:13:07.719 and inward area 238 00:13:07.719 --> 00:13:10.599 Like out and in 239 00:13:10.599 --> 00:13:14.280 Once these frequency settings are adjusted 240 00:13:14.280 --> 00:13:17.039 to a certain amount 241 00:13:17.039 --> 00:13:19.080 and the Vortex effect reactivated, 242 00:13:19.080 --> 00:13:22.719 with the Noise module placed higher in the stack, 243 00:13:22.719 --> 00:13:25.919 We can change the edge area 244 00:13:25.919 --> 00:13:28.960 or the boundary area over here 245 00:13:28.960 --> 00:13:31.520 Let's exaggerate the effect 246 00:13:31.520 --> 00:13:33.760 I didn't go in too far, 247 00:13:33.760 --> 00:13:36.640 but if Strength is stronger, 248 00:13:36.640 --> 00:13:39.400 the shape of the spread 249 00:13:39.400 --> 00:13:43.039 will have a completely different volume 250 00:13:43.039 --> 00:13:45.239 I tried something stronger now 251 00:13:45.239 --> 00:13:49.400 Let's set it to 150 for some change 252 00:13:49.400 --> 00:13:52.440 Now, the particles are 253 00:13:52.440 --> 00:13:55.159 not making a perfect circle, 254 00:13:55.159 --> 00:13:58.440 but leaving a volumetric spread of particles 255 00:13:58.440 --> 00:14:00.599 That's the change we have 256 00:14:00.599 --> 00:14:03.840 To adjust the values dynamically later, 257 00:14:03.840 --> 00:14:06.440 we will set minimum and maximum values 258 00:14:06.440 --> 00:14:09.679 to allow continuous changes 259 00:14:09.679 --> 00:14:11.629 However, the current work 260 00:14:11.629 --> 00:14:14.119 focuses on establishing baseline values 261 00:14:14.119 --> 00:14:15.840 If patterns appear too uniform, 262 00:14:15.840 --> 00:14:18.520 experimenting with different values 263 00:14:18.520 --> 00:14:20.840 can reveal how the patterns dissipate 264 00:14:20.840 --> 00:14:23.479 or transform, but these values will 265 00:14:23.479 --> 00:14:27.320 not be permanently used in reality 266 00:14:27.320 --> 00:14:31.159 The spreading speed of the particles 267 00:14:31.159 --> 00:14:35.359 can also be adjusted in 268 00:14:35.359 --> 00:14:39.359 the Particle Spawn section using Velocity 269 00:14:39.359 --> 00:14:42.009 By changing the Velocity Mode 270 00:14:42.009 --> 00:14:44.320 to From Point, for instance, 271 00:14:44.320 --> 00:14:46.000 you can make the particles 272 00:14:46.000 --> 00:14:48.640 spread further outward like so 273 00:14:48.640 --> 00:14:51.799 It should be greater than the Force value 274 00:14:51.799 --> 00:14:53.640 to rotate outward like this 275 00:14:53.640 --> 00:14:57.280 Let's make it smaller now 276 00:14:57.280 --> 00:15:00.039 Reduce Velocity Speed, 277 00:15:00.039 --> 00:15:02.119 maybe to a negative number 278 00:15:02.119 --> 00:15:04.039 Then, the pattern shifts to behave differently, 279 00:15:04.039 --> 00:15:06.280 as you can observe 280 00:15:06.280 --> 00:15:09.119 Mixing positive and negative velocity values 281 00:15:09.119 --> 00:15:11.359 all mixed in, 282 00:15:11.359 --> 00:15:15.320 with Vortex and Noise results in this 283 00:15:15.320 --> 00:15:19.119 Let's decrease Force Amount in this Vortex 284 00:15:19.119 --> 00:15:22.239 They're moving inwards like this 285 00:15:22.239 --> 00:15:24.159 Increasing the Force Amount too much 286 00:15:24.159 --> 00:15:27.799 spreads them outward more significantly 287 00:15:27.799 --> 00:15:31.119 600 particles are not a fixed number 288 00:15:31.119 --> 00:15:32.719 If you want, 289 00:15:32.719 --> 00:15:35.039 go ahead with around 3,000 290 00:15:35.039 --> 00:15:38.219 If the Vortex Force Amount 291 00:15:38.219 --> 00:15:40.919 is set too high, such as 1,000, 292 00:15:40.919 --> 00:15:43.159 it can overpower other forces like Noise, 293 00:15:43.159 --> 00:15:47.320 as the bigger Force often ignores the other 294 00:15:47.320 --> 00:15:49.000 So if you want more Noise, 295 00:15:49.000 --> 00:15:50.880 you need to increase Noise 296 00:15:50.880 --> 00:15:53.119 That's how the value 297 00:15:53.119 --> 00:15:55.719 for Noise will be applied 298 00:15:55.719 --> 00:15:57.200 Using the Force value, 299 00:15:57.200 --> 00:16:00.640 you need to be careful with this 300 00:16:00.640 --> 00:16:02.960 If you do not want them to move too far away, 301 00:16:02.960 --> 00:16:05.119 Use Initialize to reduce 302 00:16:05.119 --> 00:16:10.440 their Lifetime to 0.5 to 0.7 seconds 303 00:16:10.440 --> 00:16:13.280 Let's decrease the velocity by a bit 304 00:16:13.280 --> 00:16:14.479 Like this 305 00:16:14.479 --> 00:16:17.021 So these are the three modules 306 00:16:17.021 --> 00:16:20.880 Velocity, Curl Noise, and Vortex Force 307 00:16:20.880 --> 00:16:23.719 These three modules 308 00:16:23.719 --> 00:16:28.760 can be used to adjust the movement, 309 00:16:28.760 --> 00:16:32.880 providing a basic frame while not making it too obvious 310 00:16:32.880 --> 00:16:35.679 By adjusting the settings, you can create 311 00:16:35.679 --> 00:16:37.880 a silhouette with a fluctuating circular outline, 312 00:16:37.880 --> 00:16:39.520 which I'm drawing right now 313 00:16:39.520 --> 00:16:42.599 This is how it looks like 314 00:16:42.599 --> 00:16:47.239 If you change the simulation target from CPU to GPU, 315 00:16:47.239 --> 00:16:49.159 the number of particles 316 00:16:49.159 --> 00:16:52.400 that can be utilized increases 317 00:16:52.400 --> 00:16:54.880 Of course, if you increase 318 00:16:54.880 --> 00:16:57.400 the particles or their Lifetime, 319 00:16:57.400 --> 00:17:00.280 it will also increase in the quantity 320 00:17:00.280 --> 00:17:03.880 And as there are more of them, 321 00:17:03.880 --> 00:17:07.439 it's not advised to use CPU, 322 00:17:07.439 --> 00:17:09.599 though it's not impossible, 323 00:17:09.599 --> 00:17:12.839 because using GPU is 324 00:17:12.839 --> 00:17:16.160 much more helpful in terms of performance 325 00:17:16.160 --> 00:17:18.959 when you're using multiple particles 326 00:17:18.959 --> 00:17:22.800 To achieve visually appealing effects 327 00:17:22.800 --> 00:17:24.920 with distinct patterns, 328 00:17:24.920 --> 00:17:28.400 such as the grainy details visible in this demonstration, 329 00:17:28.400 --> 00:17:30.400 you may need to emit a significant number of particles 330 00:17:30.400 --> 00:17:34.520 After setting the intensity back to 0.7, 331 00:17:34.520 --> 00:17:39.359 you can extend the factory line’s operating time 332 00:17:39.359 --> 00:17:42.059 by doubling, 333 00:17:42.059 --> 00:17:44.800 tripling, or even quadrupling it 334 00:17:44.800 --> 00:17:47.119 Instead of limiting the value to 1, 335 00:17:47.119 --> 00:17:51.760 you can adjust parameters like 336 00:17:51.760 --> 00:17:53.280 the factory’s runtime, rate, lifetime, 337 00:17:53.280 --> 00:17:55.400 and the individual particle’s lifespan 338 00:17:55.400 --> 00:17:57.400 By doing so, some particles will continuously 339 00:17:57.400 --> 00:18:00.880 spawn and decay, maintaining a consistent count, 340 00:18:00.880 --> 00:18:04.760 which naturally outlines the circle’s boundary 341 00:18:04.760 --> 00:18:08.640 When using GPUs, you should address 342 00:18:08.640 --> 00:18:11.079 any warnings that arise, as you see here 343 00:18:11.079 --> 00:18:14.400 It says Missing fixed bounds 344 00:18:14.400 --> 00:18:18.479 Missing fixed bounds, for your emitter 345 00:18:18.479 --> 00:18:20.959 In the Bounds section of the emitter settings, 346 00:18:20.959 --> 00:18:25.280 you can click the three-dot menu 347 00:18:25.280 --> 00:18:29.680 and select Set Fixed Bounds (Emitters) 348 00:18:29.680 --> 00:18:33.280 This action removes the warning 349 00:18:33.280 --> 00:18:36.880 by updating the Fixed Bounds property 350 00:18:36.880 --> 00:18:39.319 Bounds essentially 351 00:18:39.319 --> 00:18:41.869 define the maximum area 352 00:18:41.869 --> 00:18:45.280 where particles can spread 353 00:18:45.280 --> 00:18:47.400 That's the Bounds value 354 00:18:47.400 --> 00:18:51.760 If you reset the Fixed Bounds 355 00:18:51.760 --> 00:18:55.040 to a smaller range, 356 00:18:55.040 --> 00:18:58.800 it can cause problems later when placing effects 357 00:18:58.800 --> 00:19:02.000 This issue will be explained further 358 00:19:02.000 --> 00:19:04.199 when we discuss placing emitters in the world 359 00:19:04.199 --> 00:19:08.680 For now, you should set the Bounds 360 00:19:08.680 --> 00:19:11.119 to accommodate the maximum range 361 00:19:11.119 --> 00:19:13.319 of the emitter’s spread 362 00:19:13.319 --> 00:19:16.400 to ensure more stable particle control 363 00:19:16.400 --> 00:19:18.040 Let's leave it be 364 00:19:18.040 --> 00:19:20.920 Let's do other effects now 365 00:19:20.920 --> 00:19:24.640 Detailed adjustments to the particles will occur 366 00:19:24.640 --> 00:19:29.640 after all components are configured 367 00:19:29.640 --> 00:19:32.640 In the center, 368 00:19:32.640 --> 00:19:36.040 place the particle system in the world 369 00:19:36.040 --> 00:19:37.599 It's there 370 00:19:37.599 --> 00:19:40.160 Let's move it to our world 371 00:19:40.160 --> 00:19:41.680 and make it float a little 372 00:19:41.680 --> 00:19:45.560 Now, let's rotate it 373 00:19:45.560 --> 00:19:49.239 You may notice that rotating it 374 00:19:49.239 --> 00:19:51.560 can cause alignment issues due to the vortex force 375 00:19:51.560 --> 00:19:54.319 It somehow appears correct only 376 00:19:54.319 --> 00:19:56.119 in a specific orientation 377 00:19:56.119 --> 00:20:00.147 To resolve this, for this Vortex, 378 00:20:00.147 --> 00:20:02.647 change the Axis Coordinate simulation 379 00:20:02.647 --> 00:20:04.920 of the Vortex module to Local 380 00:20:04.920 --> 00:20:08.627 Without this adjustment, the simulation’s alignment will differ 381 00:20:08.627 --> 00:20:12.080 depending on whether it’s set to Simulation Space 382 00:20:12.080 --> 00:20:14.360 or Local Space, which is now 383 00:20:14.360 --> 00:20:15.795 For this effect, we aim for the particles 384 00:20:15.795 --> 00:20:18.760 to maintain consistent alignment in the desired local orientation 385 00:20:18.760 --> 00:20:22.360 Now, what we need to do is, 386 00:20:22.360 --> 00:20:25.040 instead of the back of the center, 387 00:20:25.040 --> 00:20:29.799 you need to render a completely new location 388 00:20:29.799 --> 00:20:32.799 Let's start by setting up 389 00:20:32.799 --> 00:20:35.200 a level that represents the destination 390 00:20:35.200 --> 00:20:37.000 For instance, for the level, 391 00:20:37.000 --> 00:20:40.700 if you add a blue cube to the level, 392 00:20:40.700 --> 00:20:43.439 it will help distinguish the area 393 00:20:43.439 --> 00:20:47.139 Let’s assume that this blue cube 394 00:20:47.139 --> 00:20:49.919 symbolizes the destination space 395 00:20:49.919 --> 00:20:52.720 To implement this, you’ll need 396 00:20:52.720 --> 00:20:57.840 a camera that captures this alternate area 397 00:20:57.840 --> 00:21:00.440 From the Place Actor section, 398 00:21:00.440 --> 00:21:03.000 search for Capture, 399 00:21:03.000 --> 00:21:06.600 and you’ll find the Scene Capture 2D camera 400 00:21:06.600 --> 00:21:08.800 Place this camera in the level, 401 00:21:08.800 --> 00:21:12.060 and it will capture the scene from its perspective 402 00:21:12.060 --> 00:21:14.610 The Scene Capture 2D camera 403 00:21:14.610 --> 00:21:17.800 works differently from other cameras we know 404 00:21:17.800 --> 00:21:21.800 Instead of the third-person setups, 405 00:21:21.800 --> 00:21:26.700 let's actually look at the components 406 00:21:26.700 --> 00:21:30.720 by pressing F8 before we move on 407 00:21:30.720 --> 00:21:35.720 The FollowCamera component is the camera attached to the character, 408 00:21:35.720 --> 00:21:39.070 which displays the scene directly 409 00:21:39.070 --> 00:21:41.720 to the player’s screen 410 00:21:41.720 --> 00:21:44.800 To exit the play mode, press ESC 411 00:21:44.800 --> 00:21:46.550 The Scene Capture 412 00:21:46.550 --> 00:21:48.400 captures what it sees and sends it as a texture, 413 00:21:48.400 --> 00:21:52.919 rather than directly displaying it to the user 414 00:21:52.919 --> 00:21:56.760 The Scene Capture camera requires a texture asset 415 00:21:56.760 --> 00:21:59.710 to store the captured visuals, 416 00:21:59.710 --> 00:22:02.040 functioning similarly to a micro SD card 417 00:22:02.040 --> 00:22:05.959 To create this asset, open the Content Browser, right-click, 418 00:22:05.959 --> 00:22:10.440 and select Texture > Render Target 419 00:22:10.440 --> 00:22:13.000 It's usually referred to as RT 420 00:22:13.000 --> 00:22:14.750 PortalDest 421 00:22:14.750 --> 00:22:18.759 Dest as in destination 422 00:22:18.759 --> 00:22:21.559 Once the texture is created, 423 00:22:21.559 --> 00:22:24.320 go to the Details panel for the Scene Capture camera 424 00:22:24.320 --> 00:22:26.479 In the Texture Target field, 425 00:22:26.479 --> 00:22:31.479 assign the newly created Render Texture 426 00:22:31.479 --> 00:22:33.559 After doing so, you can double-click on the texture to open it 427 00:22:33.559 --> 00:22:35.119 Let’s enlarge the window to see it more clearly 428 00:22:35.119 --> 00:22:37.119 Double-click on the texture 429 00:22:37.119 --> 00:22:41.199 You will see the scene being captured by the camera, 430 00:22:41.199 --> 00:22:46.049 albeit at a very low resolution 431 00:22:46.049 --> 00:22:47.880 of 256 pixels 432 00:22:47.880 --> 00:22:52.559 If you want, you can simply change it to 512 or 1024, 433 00:22:52.559 --> 00:22:55.960 which will be applied immediately 434 00:22:55.960 --> 00:22:59.160 This allows for real-time adjustments 435 00:22:59.160 --> 00:23:02.160 to the rendering resolution 436 00:23:02.160 --> 00:23:06.880 Returning to the Niagara system, 437 00:23:06.880 --> 00:23:09.480 we proceed by adding a sprite emitter 438 00:23:09.480 --> 00:23:13.160 to incorporate the captured scene 439 00:23:13.160 --> 00:23:18.479 So let's go back to our Niagara screen 440 00:23:18.479 --> 00:23:23.279 I will add a sprite in Niagara 441 00:23:23.279 --> 00:23:27.399 Right-click and add Add emitter 442 00:23:27.399 --> 00:23:32.360 Then, select SingleLoopingParticle 443 00:23:32.360 --> 00:23:35.279 For SingleLoopingParticle, 444 00:23:35.279 --> 00:23:38.440 the emitter defaults to Self 445 00:23:38.440 --> 00:23:42.199 and runs continuously when switched, from Once to Infinity, 446 00:23:42.199 --> 00:23:44.399 resulting in a loop of one second. 447 00:23:44.399 --> 00:23:47.599 The Initialize Particle module 448 00:23:47.599 --> 00:23:51.317 also syncs the particle lifetime with LoopDuration, 449 00:23:51.317 --> 00:23:56.119 so no further adjustments are necessary 450 00:23:56.119 --> 00:23:58.619 At this stage, you can see 451 00:23:58.619 --> 00:24:02.199 a small sprite point floating 452 00:24:02.240 --> 00:24:05.919 I’ll slightly increase the sprite size from its default 453 00:24:05.919 --> 00:24:09.679 of 10 to better fit the framework 454 00:24:09.679 --> 00:24:12.279 of the effect 455 00:24:12.279 --> 00:24:15.880 that we've roughly created 456 00:24:15.880 --> 00:24:18.610 While viewing from above, no issues appear, 457 00:24:18.610 --> 00:24:23.480 but tilting the angle reveals a problem 458 00:24:23.480 --> 00:24:28.119 This issue arises because the sprite property forces it to always face the camera 459 00:24:28.119 --> 00:24:33.559 As you can see, we have our particle effect to compare to 460 00:24:33.559 --> 00:24:37.920 Looking from above, there is no problem 461 00:24:37.920 --> 00:24:41.000 Even if you check 462 00:24:41.000 --> 00:24:44.300 the Local Space option for the simulation area, 463 00:24:44.300 --> 00:24:47.000 the issue persists 464 00:24:47.000 --> 00:24:50.720 To address this, there are a couple of methods 465 00:24:50.720 --> 00:24:53.660 One way is 466 00:24:53.660 --> 00:24:57.010 to modify the Facing Mode, 467 00:24:57.010 --> 00:24:59.160 which is a viable way 468 00:24:59.160 --> 00:25:01.960 To Particle Spawn, 469 00:25:01.960 --> 00:25:04.299 search for Facing 470 00:25:04.299 --> 00:25:06.700 Facing as in the facing direction 471 00:25:06.700 --> 00:25:10.050 So Sprite Facing and Alignment 472 00:25:10.050 --> 00:25:13.339 Let's add that part 473 00:25:13.339 --> 00:25:17.459 Now, looking at it in all angles, 474 00:25:17.459 --> 00:25:21.339 we can see how the angle is now consistent 475 00:25:21.339 --> 00:25:26.459 In the Sprite Facing options, you can see alignment 476 00:25:26.459 --> 00:25:28.619 for the X, Y, and Z axes 477 00:25:28.619 --> 00:25:33.980 Currently, it’s aligned along the X-axis, 478 00:25:33.980 --> 00:25:36.420 as you see here, 479 00:25:36.420 --> 00:25:40.380 as shown by the vertical alignment 480 00:25:40.380 --> 00:25:42.880 based on the X-axis' Facing 481 00:25:42.880 --> 00:25:45.700 being set to 1 482 00:25:45.700 --> 00:25:48.339 To match the particle’s direction instead, 483 00:25:48.339 --> 00:25:52.940 we set Z-axis alignment to 1 484 00:25:52.940 --> 00:25:57.385 and X-axis to 0 485 00:25:57.385 --> 00:25:59.579 After making this change, save it 486 00:25:59.579 --> 00:26:04.399 and verify that it displays correctly in the world 487 00:26:04.399 --> 00:26:07.749 When viewing in the world, 488 00:26:07.749 --> 00:26:09.899 the alignment looks correct 489 00:26:09.899 --> 00:26:14.019 But if you disable the Local Simulation option, 490 00:26:14.019 --> 00:26:18.100 the particles will revert to aligning with the world’s Z-axis, 491 00:26:18.100 --> 00:26:19.940 which requires caution 492 00:26:19.940 --> 00:26:22.775 Therefore, always ensure that the Local Space option is enabled for proper alignment 493 00:26:23.272 --> 00:26:27.153 Portal Material and Dynamic Parameters 494 00:26:27.153 --> 00:26:31.420 Remember the render texture we created earlier? 495 00:26:31.420 --> 00:26:34.220 In the Sprite Renderer, 496 00:26:34.220 --> 00:26:37.140 let's connect it to the Material property 497 00:26:37.140 --> 00:26:40.940 Start by right-clicking to create a new material 498 00:26:40.940 --> 00:26:48.260 and naming it M_PortalTex 499 00:26:48.260 --> 00:26:49.779 Open the Material Editor, 500 00:26:49.779 --> 00:26:53.019 and since this portal 501 00:26:53.019 --> 00:26:55.299 doesn’t need to be affected by lighting, 502 00:26:55.299 --> 00:26:57.739 set it to Unlit 503 00:26:57.739 --> 00:27:02.140 Additionally, to make the portal transparent 504 00:27:02.140 --> 00:27:05.459 with a circular opening, 505 00:27:05.459 --> 00:27:09.100 configure the material to Masked 506 00:27:09.100 --> 00:27:14.140 This will allow only the circular opening 507 00:27:14.140 --> 00:27:17.339 within the rectangular sprite to remain visible, 508 00:27:17.339 --> 00:27:21.100 which is the desired result for us 509 00:27:21.100 --> 00:27:23.660 To begin, the render texture created earlier 510 00:27:23.660 --> 00:27:26.100 is connected to the Emissive Color in the material, 511 00:27:26.100 --> 00:27:28.619 resulting in the image becoming visible 512 00:27:28.619 --> 00:27:30.540 After applying the settings, 513 00:27:30.540 --> 00:27:33.340 the material is linked directly 514 00:27:33.340 --> 00:27:35.799 to the Sprite Renderer, 515 00:27:35.799 --> 00:27:37.619 making the image appear as intended 516 00:27:37.619 --> 00:27:42.019 At this stage, resizing or masking specific circular areas 517 00:27:42.019 --> 00:27:45.380 will be necessary to refine the appearance 518 00:27:45.380 --> 00:27:48.679 So now we have the image 519 00:27:48.679 --> 00:27:53.019 The next step is masking the material 520 00:27:53.019 --> 00:27:58.980 In material, we need to display a circular image 521 00:27:58.980 --> 00:28:01.500 So we need the masking work done 522 00:28:01.500 --> 00:28:06.859 Right-click and search for Radial 523 00:28:06.859 --> 00:28:10.700 You can add the RadialGradientExponential node 524 00:28:10.700 --> 00:28:13.420 Connecting this node to the Emissive output 525 00:28:13.420 --> 00:28:15.339 initially shows a preview 526 00:28:15.339 --> 00:28:21.530 A white circular gradient in the center 527 00:28:21.530 --> 00:28:25.802 surrounded by black fading edges 528 00:28:25.802 --> 00:28:27.802 So we see a gradient effect 529 00:28:27.802 --> 00:28:30.859 applied to this shape here 530 00:28:30.859 --> 00:28:34.619 This node is then linked to the Opacity Mask, 531 00:28:34.619 --> 00:28:36.979 transforming the material into a masked state 532 00:28:36.979 --> 00:28:42.580 where only the circular area is visibl 533 00:28:42.580 --> 00:28:45.299 Now connect it back to the Emissive Color, 534 00:28:45.299 --> 00:28:47.299 as you see here, 535 00:28:47.299 --> 00:28:51.659 combining the masked circular shape with the rendered image 536 00:28:51.659 --> 00:28:54.659 This alone isn't too cool 537 00:28:54.659 --> 00:28:59.739 To enhance the material’s aesthetic, we'll do a few more things 538 00:28:59.739 --> 00:29:03.780 For example, a Texture Sample node 539 00:29:03.780 --> 00:29:06.059 is added to include a noise texture 540 00:29:06.059 --> 00:29:10.619 A basic Perlin Noise texture is selected 541 00:29:10.619 --> 00:29:12.260 Let's bring it in 542 00:29:12.260 --> 00:29:14.900 It's under Start Contents 543 00:29:14.900 --> 00:29:17.299 Now, we will incorporate 544 00:29:17.299 --> 00:29:21.619 this Noise with this gradient here 545 00:29:21.619 --> 00:29:23.700 Here, the noise texture, 546 00:29:23.700 --> 00:29:27.780 which operates in grayscale, 547 00:29:27.780 --> 00:29:30.179 the red or green channel from the noise can be used, 548 00:29:30.179 --> 00:29:34.460 as they both provide the same grayscale image 549 00:29:34.460 --> 00:29:36.739 This noise texture is added 550 00:29:36.739 --> 00:29:40.059 to the radial gradient like so 551 00:29:40.059 --> 00:29:45.140 So, this is disconnected from the gradient and linked to the Step node, 552 00:29:45.140 --> 00:29:47.859 where it is connected to the X input 553 00:29:47.859 --> 00:29:51.659 After that, it’s reconnected to the Opacity Mask 554 00:29:51.659 --> 00:29:56.140 We’ll set this value to approximately 0.5 555 00:29:56.140 --> 00:29:59.979 ooking at it now, it doesn’t quite resemble a perfect circle 556 00:29:59.979 --> 00:30:04.140 Instead, it appears quite messy, 557 00:30:04.140 --> 00:30:09.260 with only the edges looking rough and torn 558 00:30:09.260 --> 00:30:13.979 The values of the circle itself are 1 at the center 559 00:30:13.979 --> 00:30:17.744 and 0 at the edges 560 00:30:17.744 --> 00:30:20.780 The gradient in between 561 00:30:20.780 --> 00:30:23.059 transitions from 1 to 0 562 00:30:23.059 --> 00:30:25.659 The noise itself is also composed of 563 00:30:25.659 --> 00:30:27.099 values ranging from 0 to 1 in black and white 564 00:30:27.099 --> 00:30:31.380 So, when any value is added to 1, 565 00:30:31.380 --> 00:30:33.859 it ends up exceeding 1 566 00:30:33.859 --> 00:30:36.780 That’s why the center consistently appears intact 567 00:30:36.780 --> 00:30:39.271 However, if the values from the noise, 568 00:30:39.271 --> 00:30:41.671 like 1, are added to the edges where the value is 0, 569 00:30:41.671 --> 00:30:44.260 it becomes visible 570 00:30:44.260 --> 00:30:46.419 These visible sections, 571 00:30:46.419 --> 00:30:48.700 which weren’t meant to be, 572 00:30:48.700 --> 00:30:50.659 occur when 0 has a value added to it 573 00:30:50.659 --> 00:30:52.539 This creates a torn or punctured appearance 574 00:30:52.539 --> 00:30:54.619 Now, we’ll utilize this effect 575 00:30:54.619 --> 00:30:59.619 Currently, the range of values between 0 and 1 is too large 576 00:30:59.619 --> 00:31:03.340 To address this, we’ll use a Multiply node 577 00:31:03.340 --> 00:31:06.979 with the texture and reduce it to 1/10 578 00:31:06.979 --> 00:31:11.340 By applying Multiply, the values that were previously between 0 and 1 579 00:31:11.340 --> 00:31:15.020 will now range from 0 to 0.1 580 00:31:15.020 --> 00:31:18.299 Multiplying 1 by 0.1 gives 0.1, 581 00:31:18.299 --> 00:31:20.539 whereas 0 remains 0 582 00:31:20.539 --> 00:31:23.260 Apply an Add operation 583 00:31:23.260 --> 00:31:27.179 It will create a slight jagged noise effect 584 00:31:27.179 --> 00:31:29.859 only along the edge of the circle, 585 00:31:29.859 --> 00:31:31.940 as you see over here 586 00:31:31.940 --> 00:31:35.219 Naturally, for the original clean circle, 587 00:31:35.219 --> 00:31:37.900 adding a value of 0.1 588 00:31:37.900 --> 00:31:40.419 or subtracting it 589 00:31:40.419 --> 00:31:42.659 to or from the inside 590 00:31:42.659 --> 00:31:44.979 and outside creates these 591 00:31:44.979 --> 00:31:49.580 highlighted areas in white 592 00:31:49.580 --> 00:31:51.820 Then, using the Step node, 593 00:31:51.820 --> 00:31:55.780 we take what was previously a smooth gradient transition 594 00:31:55.780 --> 00:31:58.859 of values and redefine it 595 00:31:58.859 --> 00:32:01.979 sharply between 0 and 1 596 00:32:01.979 --> 00:32:07.299 At this stage, if the image is left static, 597 00:32:07.299 --> 00:32:13.260 it will look very different from the rotating particles 598 00:32:13.260 --> 00:32:16.460 To address this, 599 00:32:16.460 --> 00:32:19.179 we’ll connect a Rotator node 600 00:32:19.179 --> 00:32:21.059 When we link the Rotator, 601 00:32:21.059 --> 00:32:24.900 as you can see, it starts to rotate 602 00:32:24.900 --> 00:32:27.900 Opening the settings below, 603 00:32:27.900 --> 00:32:29.659 you’ll find Speed and Center values 604 00:32:29.659 --> 00:32:31.419 Like this, 605 00:32:31.419 --> 00:32:33.979 when this says Coordinates, 606 00:32:33.979 --> 00:32:37.539 it means that UV is the information that is to be included 607 00:32:37.539 --> 00:32:42.979 The UV values span from 0, 0 to 1, 1 608 00:32:42.979 --> 00:32:47.979 This means the rotation is centered around 0.5, 0.5, 609 00:32:47.979 --> 00:32:51.820 which represents the center of the UV space 610 00:32:51.820 --> 00:32:55.419 If you want to control the speed of this rotation, 611 00:32:55.419 --> 00:32:58.859 you can temporarily remove this and connect a Time node, 612 00:32:58.859 --> 00:33:02.140 combining it with Multiply to adjust the speed 613 00:33:02.140 --> 00:33:06.419 By doing so, you can make the rotation twice as fast, 614 00:33:06.419 --> 00:33:08.700 five times as fast, 615 00:33:08.700 --> 00:33:12.659 or otherwise control its speed 616 00:33:12.659 --> 00:33:16.380 Next, we’ll extend the application of the Step node 617 00:33:16.380 --> 00:33:19.340 to make the edges 618 00:33:19.340 --> 00:33:21.780 glow like the colors of particles 619 00:33:21.780 --> 00:33:26.739 To achieve this, we’ll duplicate it using Ctrl+C and Ctrl+V 620 00:33:26.739 --> 00:33:31.380 hTen, we’ll connect the Add result to X as before 621 00:33:31.380 --> 00:33:35.140 Make it bigger than the Step node used for the Opacity Mask, 622 00:33:35.140 --> 00:33:40.659 by around 0.7, not too much 623 00:33:40.659 --> 00:33:42.659 When applied to the Opacity Mask, 624 00:33:42.659 --> 00:33:47.119 the visible area becomes much smaller than when the value was 0.5 625 00:33:47.119 --> 00:33:53.500 Assuming the entire range spans from 1 to 0, 626 00:33:53.500 --> 00:33:57.619 as viewed from the side, you can consider 627 00:33:57.619 --> 00:33:59.069 a gradient graph 628 00:33:59.069 --> 00:34:02.260 that gradually decreases from 1 to 0 629 00:34:02.260 --> 00:34:07.460 This results in a visible effect, depending on whether 630 00:34:07.460 --> 00:34:09.820 values above 0.7 are treated as 1 631 00:34:09.820 --> 00:34:12.260 the difference being in terms of the visibility 632 00:34:12.260 --> 00:34:14.340 That's what we just created 633 00:34:14.340 --> 00:34:20.140 At this point, the edge is refined by subtracting a wider are 634 00:34:20.140 --> 00:34:23.108 When you observe this adjustment, 635 00:34:23.108 --> 00:34:26.659 the smaller the difference in values, 636 00:34:26.659 --> 00:34:29.460 which I will set as around 0.5, 637 00:34:29.460 --> 00:34:31.859 the thinner the boundary becomes 638 00:34:31.859 --> 00:34:37.059 he boundary is styled to glow like the particle’s colors, 639 00:34:37.059 --> 00:34:42.820 with RGB values set to X: 0.2, Y: 1, and Z or blue: 8 640 00:34:42.820 --> 00:34:46.780 These color values and the texture are blended using the Lerp node 641 00:34:46.780 --> 00:34:49.580 Since only the boundary needs to glow, 642 00:34:49.580 --> 00:34:53.739 the color is connected to B and the texture to A 643 00:34:53.739 --> 00:34:55.739 Let's redo the order 644 00:34:55.739 --> 00:34:59.900 The Subtract output is linked to Alpha 645 00:34:59.900 --> 00:35:02.619 and then to Emissive Color, 646 00:35:02.619 --> 00:35:05.940 which creates the glowing effect along the boundary 647 00:35:05.940 --> 00:35:09.500 For the Step node where the value 0.5 was used, 648 00:35:09.500 --> 00:35:12.539 restore it for the Opacity Mask 649 00:35:12.539 --> 00:35:15.219 that it looks as though a glowing boundary 650 00:35:15.219 --> 00:35:18.460 surrounds a hole in mid-air, 651 00:35:18.460 --> 00:35:19.460 just like this 652 00:35:19.460 --> 00:35:23.419 Next, the Sprite Size in Niagara is adjusted 653 00:35:23.419 --> 00:35:26.859 to align with the boundary, 654 00:35:26.859 --> 00:35:28.859 something like this 655 00:35:28.859 --> 00:35:31.539 Now the rotating image 656 00:35:31.539 --> 00:35:34.859 and particle movements fit seamlessly 657 00:35:34.859 --> 00:35:36.567 If you wish 658 00:35:36.567 --> 00:35:39.219 to reverse the rotation direction, 659 00:35:39.219 --> 00:35:43.780 add a negative value into the Time Multiply 660 00:35:43.780 --> 00:35:45.859 And it'll rotate in reverse 661 00:35:45.859 --> 00:35:48.940 When observing this result, 662 00:35:48.940 --> 00:35:50.900 you might notice one issue 663 00:35:50.900 --> 00:35:54.619 with the boundary’s pattern 664 00:35:54.619 --> 00:35:55.979 Let's slow it down 665 00:35:55.979 --> 00:36:00.700 to something very low like -0.1 666 00:36:00.700 --> 00:36:04.154 Now we see that it has a fixed pattern 667 00:36:04.154 --> 00:36:08.820 Right? So for these, 668 00:36:08.820 --> 00:36:13.340 the portion multiplied by Time and Texture, 669 00:36:13.340 --> 00:36:17.859 Let's copy using Ctrl+C and Ctrl+V 670 00:36:17.859 --> 00:36:20.619 and adjust the spacing slightly 671 00:36:20.619 --> 00:36:23.260 One of the Time values is set to a negative direction 672 00:36:23.260 --> 00:36:27.619 and the other to a positive direction 673 00:36:27.619 --> 00:36:30.179 The results of these two 674 00:36:30.179 --> 00:36:33.059 are then multiplied 675 00:36:33.059 --> 00:36:35.340 This creates a combined effect 676 00:36:35.340 --> 00:36:40.080 where the Noise image rotating in a positive direction 677 00:36:40.080 --> 00:36:43.419 and the Noise image rotating in a negative direction 678 00:36:43.419 --> 00:36:46.140 Both blend together and, 679 00:36:46.140 --> 00:36:47.859 let's zoom in a little more, 680 00:36:47.859 --> 00:36:50.900 you may be able to see this slight movement 681 00:36:50.900 --> 00:36:55.739 Now it just needs a bigger difference in value 682 00:36:55.739 --> 00:37:01.179 Let's try 0.3 for the reverse direction 683 00:37:01.179 --> 00:37:03.179 Then the rough boundary 684 00:37:03.179 --> 00:37:06.859 is changing constantly as you can see 685 00:37:06.859 --> 00:37:09.939 Because the rotation values are identical, 686 00:37:09.939 --> 00:37:14.180 the image has a rough texture 687 00:37:14.180 --> 00:37:17.180 but lacks a strong sense of rotation 688 00:37:17.180 --> 00:37:19.020 So regardless of the direction, 689 00:37:19.020 --> 00:37:20.713 let's make 690 00:37:20.713 --> 00:37:24.263 the value difference for Time Multiply 691 00:37:24.263 --> 00:37:27.339 around tenfolds 692 00:37:27.339 --> 00:37:32.420 Then we can add that flowing effect as well 693 00:37:32.420 --> 00:37:36.619 You could go with the plus direction for both 694 00:37:36.619 --> 00:37:42.140 But I personally think this combination of minus and plus 695 00:37:42.140 --> 00:37:47.140 creates a prettier Noise, that's why I did this 696 00:37:47.140 --> 00:37:49.819 In the area where the Texture 697 00:37:49.819 --> 00:37:55.020 is multiplied to adjust the intensity of the Noise, 698 00:37:55.020 --> 00:37:58.420 if you apply a strong value such as 0.3, 699 00:37:58.420 --> 00:38:03.420 the Noise becomes much more pronounced 700 00:38:03.420 --> 00:38:06.339 So, that concludes 701 00:38:06.339 --> 00:38:10.219 the basic settings in Materials 702 00:38:10.219 --> 00:38:13.979 Now, we align this with Niagara 703 00:38:13.979 --> 00:38:17.219 to allow dynamic adjustments of parameters 704 00:38:17.219 --> 00:38:19.660 using a dynamic parameter 705 00:38:19.660 --> 00:38:23.619 This is the final step to organize the values 706 00:38:23.619 --> 00:38:27.140 First, we’ll create a Dynamic Parameter 707 00:38:27.140 --> 00:38:30.500 and proceed step by step from here 708 00:38:30.500 --> 00:38:34.459 For the first parameter at Index 0, 709 00:38:34.459 --> 00:38:40.780 we’ll create RotSpeed to control the rotation speed 710 00:38:40.780 --> 00:38:44.380 One element will receive the value directly, 711 00:38:44.380 --> 00:38:49.900 while another will reverse it by applying a negative Multiply, 712 00:38:49.900 --> 00:38:51.859 creating a speed difference 713 00:38:51.859 --> 00:38:54.780 So let's say -0.2 for now 714 00:38:54.780 --> 00:38:56.619 That's the default value 715 00:38:56.619 --> 00:39:00.500 to produce an effect where the Noise 716 00:39:00.500 --> 00:39:02.420 subtly oscillates 717 00:39:02.420 --> 00:39:06.540 For the second parameter, we’ll add Noise Strength 718 00:39:06.540 --> 00:39:08.219 to control the intensity of the Noise 719 00:39:08.219 --> 00:39:12.739 Let's connect to this node 720 00:39:12.739 --> 00:39:17.339 The default value can be 0.3, 721 00:39:17.339 --> 00:39:21.099 or even around 0.4 722 00:39:21.099 --> 00:39:25.459 Let's change it so that the Noise effect becomes visible 723 00:39:25.459 --> 00:39:27.660 Let's pull down a little 724 00:39:27.660 --> 00:39:30.420 Then, to allow it to connect with Step, 725 00:39:30.420 --> 00:39:32.660 set the third parameter at Index 2 726 00:39:32.660 --> 00:39:37.780 as StepVal with a default value of 0.5 727 00:39:37.780 --> 00:39:40.219 For the final parameter at Index 4, 728 00:39:40.219 --> 00:39:43.780 we’ll set Line Width to determine the thickness of the line 729 00:39:43.780 --> 00:39:47.699 Set this to a default value of around 0.03 730 00:39:47.699 --> 00:39:49.900 The Line Width will then be added 731 00:39:49.900 --> 00:39:51.979 to this over here, 732 00:39:51.979 --> 00:39:56.979 the Step Value, with Line Width 733 00:39:56.979 --> 00:39:58.739 Let's zoom in 734 00:39:58.739 --> 00:39:59.859 The result of this addition 735 00:40:00.320 --> 00:40:05.480 is connected to the second Step 736 00:40:05.480 --> 00:40:09.330 This allows us to control 737 00:40:09.330 --> 00:40:13.040 the parameters in Niagara 738 00:40:13.040 --> 00:40:16.540 The color node here, 739 00:40:16.540 --> 00:40:19.340 which I created 740 00:40:19.340 --> 00:40:22.440 as a Constant3Vector for explanation purposes, 741 00:40:22.440 --> 00:40:25.390 will be replaced with Particle Color 742 00:40:25.390 --> 00:40:29.210 to pass RGB values 743 00:40:29.210 --> 00:40:31.959 Remove the Constant3 node, 744 00:40:31.959 --> 00:40:34.919 and currently, it’s set to output a white value 745 00:40:34.919 --> 00:40:37.919 Apply this change 746 00:40:37.919 --> 00:40:39.919 And now, 747 00:40:39.919 --> 00:40:43.840 the leftover Alpha value feels incomplete, 748 00:40:43.840 --> 00:40:47.490 so we’ll connect it to the Radius 749 00:40:47.490 --> 00:40:50.320 in the Radial Gradient 750 00:40:50.320 --> 00:40:53.240 This will allow us to control the size of the circle 751 00:40:53.240 --> 00:40:56.560 Let's move this aside separately 752 00:40:56.560 --> 00:40:58.639 Now, save 753 00:40:58.639 --> 00:41:01.160 Now, moving to Niagara, 754 00:41:01.160 --> 00:41:03.210 under the Update section, 755 00:41:03.210 --> 00:41:07.559 create a Dynamic Parameter 756 00:41:07.559 --> 00:41:11.309 Then, the Dynamic Parameter connected to the material 757 00:41:11.309 --> 00:41:14.040 is automatically listed up 758 00:41:14.040 --> 00:41:18.080 Set RotSpeed to 5, 759 00:41:18.080 --> 00:41:20.599 NoiseStrength to 0.3, 760 00:41:20.599 --> 00:41:22.440 StepVal to 0.5, 761 00:41:22.440 --> 00:41:27.360 and LineWidth to 0.03 762 00:41:27.360 --> 00:41:30.760 As you can see, a slight effect has appeared 763 00:41:30.760 --> 00:41:34.760 just outside the rectangle 764 00:41:34.760 --> 00:41:39.959 Since we’ve connected the Particle Color, 765 00:41:39.959 --> 00:41:42.186 we now need 766 00:41:42.186 --> 00:41:45.739 to switch the color mode from Unset to Direct Set 767 00:41:45.739 --> 00:41:49.800 Set the Red value to 0.2, 768 00:41:49.800 --> 00:41:53.879 Green to 1, and Blue to 8 769 00:41:53.879 --> 00:41:58.879 Now, the Alpha value is linked to the gradient of the radial texture 770 00:41:58.879 --> 00:42:03.559 When you input 0.5 for Alpha, the circle shrinks 771 00:42:03.559 --> 00:42:06.109 While the naming convention for Alpha, 772 00:42:06.109 --> 00:42:08.479 as for the name goes, 773 00:42:08.479 --> 00:42:11.199 may not be ideal 774 00:42:11.199 --> 00:42:15.960 We could use this to reduce the circle's size as the Alpha value decreases, 775 00:42:15.960 --> 00:42:18.260 and increase the circle's size 776 00:42:18.260 --> 00:42:22.360 as the Alpha value increases 777 00:42:22.360 --> 00:42:26.600 To add more detail to this, 778 00:42:26.600 --> 00:42:30.679 rename the item previously labeled Empty 779 00:42:30.679 --> 00:42:33.831 to OuterCircle 780 00:42:33.831 --> 00:42:35.460 Now Ctrl + C 781 00:42:35.460 --> 00:42:41.160 And keep a blank space to the side 782 00:42:41.160 --> 00:42:44.279 to reduce the size of the details panel 783 00:42:44.279 --> 00:42:45.880 Now, Ctrl V 784 00:42:45.880 --> 00:42:47.680 Let's rename the other one 785 00:42:47.680 --> 00:42:50.160 to InnerCircle 786 00:42:50.160 --> 00:42:52.610 At InnerCircle, let's reduce 787 00:42:52.610 --> 00:42:55.119 the Force Amount of the Vortex Force 788 00:42:55.119 --> 00:42:59.360 Gradually decrease the value to make it negative, 789 00:42:59.360 --> 00:43:02.279 and you’ll see it draw inward like this 790 00:43:02.279 --> 00:43:05.079 Also, observe how adjusting the Origin Pull Amount 791 00:43:05.079 --> 00:43:07.320 changes the result, because as the value increases, 792 00:43:07.320 --> 00:43:09.720 the shape pulls further inwards 793 00:43:09.720 --> 00:43:12.240 Be cautious not to set the value too high 794 00:43:12.240 --> 00:43:16.639 Adjust the Force Amount and Origin Pull Amount 795 00:43:16.639 --> 00:43:19.839 because it can push elements outward instead 796 00:43:19.839 --> 00:43:22.639 So adjust the values accordingly 797 00:43:22.639 --> 00:43:25.339 so you can create a shape 798 00:43:25.339 --> 00:43:28.520 that draws inward in this manner 799 00:43:28.520 --> 00:43:32.360 Additionally, by slightly altering the Noise, 800 00:43:32.360 --> 00:43:36.000 you can achieve a look where even 801 00:43:36.000 --> 00:43:39.160 the inner elements appear to be sucked inward 802 00:43:39.160 --> 00:43:44.199 This softens the previously sharp edges of the image 803 00:43:44.199 --> 00:43:48.559 and makes the transitions smoother 804 00:43:48.559 --> 00:43:51.759 Let’s apply this to the world and see how it looks 805 00:43:51.759 --> 00:43:56.320 When viewed in the game view, this is how it looks 806 00:43:56.320 --> 00:44:00.105 This concludes the creation of the portal effect 807 00:44:01.570 --> 00:44:04.600 Particle Movements in Unreal 808 00:44:04.600 --> 00:44:09.360 We especially explored adding noise 809 00:44:09.360 --> 00:44:12.880 to uniform shapes like circles 810 00:44:12.880 --> 00:44:16.559 We also learned how to utilize GPU simulation 811 00:44:16.559 --> 00:44:21.279 to handle a large number 812 00:44:21.279 --> 00:44:24.399 of particles effectively 813 00:44:24.399 --> 00:44:28.640 Additionally, we discussed using render textures and multiple cameras 814 00:44:28.640 --> 00:44:33.239 to create the illusion of elements existing in the same space. 815 00:44:33.239 --> 00:44:35.989 Let’s summarize what we’ve covered in this session 816 00:44:35.989 --> 00:44:37.440 and conclude here 817 00:44:37.440 --> 00:44:38.160 Thank you 818 00:44:39.057 --> 00:44:39.607 Portal Effect Creation Create an empty Niagara system and name it FX_Portal Select Add Empty Emitter to add an empty emitter 819 00:44:39.607 --> 00:44:40.107 Add Emitter State, set LifeCycle Mode to Self, and Loop Behavior to Infinite 820 00:44:40.107 --> 00:44:40.607 Spawn Rate : 600 After Initialize Particle, Lifetime : 0.5 After Initialize Particle, 821 00:44:40.607 --> 00:44:41.237 Color(0.2, 1, 8, 1), Sprite Size mode: Uniform, 1 After Shape Location, Shape Orimitive: Torus, 822 00:44:41.237 --> 00:44:41.885 LargeRadius : 150, HandleRadius : 5 After Vortex Force Vortex Force Amount : 1000, 823 00:44:41.885 --> 00:44:42.386 Vortex Axis : (0, 0, 1) Click Fix Issue to add Solve Force and Velocity Scale Sprite Size By Speed 824 00:44:42.386 --> 00:44:42.970 min: (1, 1) max: (1, 20) Click Fix Issue to add Particle State Curl Noise 추가 후 Noise Strength: 825 00:44:42.970 --> 00:44:43.495 220, Noise Frequency: 25 Add Velocity, Velocity Mode: From Point, VelocitySpeed: -62 826 00:44:43.495 --> 00:44:44.136 Sim Target of Emitter Properties: GPU Compute Sim Fix Bounds: Set Fixed Bounds(Emitters) 827 00:44:44.136 --> 00:44:44.986 Render Texture and Portal Effect Place a Scene Capture 2D actor in the level 828 00:44:44.986 --> 00:44:45.786 Create a Render Target texture asset named RT_PortalDest with a size of 512×512 829 00:44:45.786 --> 00:44:46.636 Connect the Render Target to the Texture Target of Scene Capture 2D Add Effect and SingleLoopingParticle 830 00:44:46.636 --> 00:44:47.386 Emitter State's LoopBehavior: Infinity Initialize Particle's Sprite Size: 280 831 00:44:47.386 --> 00:44:48.236 Add Sprite Facing and Alignment Sprite Facing: (0, 0, 1) 832 00:44:48.236 --> 00:44:49.102 Enable Emitter Properties Local Space 833 00:44:49.102 --> 00:44:49.775 Portal Material and Dynamic Parameters Create M_PortalTex Material, Shading Model: Unlit, Blend Mode: Masked 834 00:44:49.775 --> 00:44:50.455 Connect M_PortalTex to the Sprite Renderer material Add a RadialGradientExponential node and connect it to Opacity Mask 835 00:44:50.455 --> 00:44:51.059 Connect the RT_PortalDest texture to Emissive Color Create Texture Sample, select T_Perlin_Noise_M 836 00:44:51.059 --> 00:44:51.657 RadialGradientExponential and Add Connect Step Result to Opacity Mask with Step X 837 00:44:51.657 --> 00:44:52.231 Create a Time node and multiply it by 5 Connect the result to a Rotator, and use the output to connect to the UV input of the Perlin Noise 838 00:44:52.231 --> 00:44:52.914 Add a Step node and input the value 0.55 Connect the Add to X and subtract it from Step Create a Constant3, (0.2, 1, 8) 839 00:44:52.914 --> 00:44:53.568 Create a Lerp node Connect RT_PortalDest to Lerp A, Constant3Vector to Lerp B, and the result of the subtraction to Lerp Alpha 840 00:44:53.568 --> 00:44:54.115 Copy all nodes from Time ~ Multiply, then adjust the copied Multiply values so that the two Time nodes use different values 841 00:44:54.115 --> 00:44:54.615 Dynamic Parameter Setup Index[0] (RotSpeed): Connect to Time Multiply B Multiply by -0.2 and connect to other time 842 00:44:54.615 --> 00:44:55.115 Index[1] (NoiseStrength): Connect to two Noise Texture Multiply B, G value 0.4 843 00:44:55.115 --> 00:44:55.615 Index[2] (StepVal): Default 0.5. Connect the result to Subtract in Step Y Index[3] (LineWidth): Determines line thickness, default 0.03 844 00:44:55.615 --> 00:44:56.115 Add StepVal and LineWidth using Add and connect the result to Subtract in Step Y 845 00:44:56.115 --> 00:44:56.615 Use Particle Color for RGB values Delete the Constant3Vector node 846 00:44:56.615 --> 00:44:57.232 Configure Dynamic Material Parameters: RotSpeed: 5, NoiseStrength: 0.3, StepVal: 0.5, LineWidth: 0.03 847 00:44:57.232 --> 00:44:57.753 Adjust Initialize Particle Color to (0.2, 1, 8, 0.5) Duplicate the emitter and name it OuterCircle 848 00:44:57.753 --> 00:44:58.337 Duplicate the emitter and name it InnerCircle Vortex Force Amount: -223 Vortex Origin: 180 849 00:44:58.337 --> 00:44:58.823 Curl Noise Strength: 98