1 00:00:00,200 --> 00:00:04,420 In this video, we'll add a smoke trail behind the player's character. 2 00:00:04,450 --> 00:00:07,690 We'll make it so when they move fast enough, the smoke appears, 3 00:00:07,720 --> 00:00:10,514 but if they stop, it stops emitting. 4 00:00:10,810 --> 00:00:12,186 Let's get started. 5 00:00:12,290 --> 00:00:14,989 To get started we open the Godot scene 6 00:00:14,990 --> 00:00:17,620 from the obstacle course, part 2 directory. 7 00:00:17,650 --> 00:00:20,194 We go down Godot.tscn, 8 00:00:20,195 --> 00:00:23,894 and we want to add a new particles 2D node. 9 00:00:24,130 --> 00:00:26,420 Let's get started by setting the texture, 10 00:00:26,450 --> 00:00:29,315 so expand the textures category in the Inspector, 11 00:00:29,429 --> 00:00:31,686 right click on texture, quick load, 12 00:00:31,687 --> 00:00:34,529 and we're looking for smoke.png. 13 00:00:35,320 --> 00:00:39,971 It's going to be an ellipse like this one with a slight shadow. 14 00:00:40,250 --> 00:00:43,500 We'll start by adding the process material 15 00:00:43,501 --> 00:00:46,300 to animate the particles sprite. 16 00:00:46,680 --> 00:00:51,086 Right click on the material slot and select new particles material. 17 00:00:51,370 --> 00:00:52,829 Click to expand it. 18 00:00:53,186 --> 00:00:54,857 We want to do a couple of things. 19 00:00:54,890 --> 00:00:58,957 First we want the particles to have some velocity 20 00:00:58,958 --> 00:01:00,686 away from the character, 21 00:01:00,687 --> 00:01:05,714 Not gravity, this time we want the particles to move behind the character 22 00:01:05,820 --> 00:01:07,047 to be like pushed. 23 00:01:07,247 --> 00:01:11,544 For that we're going to start by expanding the gravity category 24 00:01:11,744 --> 00:01:14,714 and setting the gravity to zero on all three axes. 25 00:01:15,100 --> 00:01:16,900 The particles stop moving, 26 00:01:16,901 --> 00:01:20,429 and then we're going to expand initial velocity. 27 00:01:20,800 --> 00:01:25,930 This is going to be the initial movement speed of our particles, 28 00:01:26,130 --> 00:01:29,060 and we're going to increase it a little bit, 29 00:01:29,090 --> 00:01:34,210 so something like 150, there is enough, 30 00:01:34,240 --> 00:01:41,000 and we can randomize it a little bit like so. 31 00:01:41,114 --> 00:01:43,700 You can see that the particles all go to the right. 32 00:01:43,730 --> 00:01:50,002 Instead, we want them to emit going up to the back of the character. 33 00:01:50,243 --> 00:01:52,443 We're going to change the direction. 34 00:01:52,490 --> 00:01:54,929 We have to set the X direction to zero 35 00:01:54,930 --> 00:01:57,329 and Y to, is it minus one? 36 00:01:57,650 --> 00:01:59,180 In this case it's minus one. 37 00:01:59,214 --> 00:02:02,629 It's a bit particular because as I mentioned in a previous video, 38 00:02:02,630 --> 00:02:05,557 these particles are designed to work in 3D. 39 00:02:06,410 --> 00:02:12,380 In this case a negative direction makes the particles go up, 40 00:02:12,410 --> 00:02:15,000 which can be a bit confusing, but that's how it is. 41 00:02:15,290 --> 00:02:18,371 All right, so we have the initial velocity. 42 00:02:18,372 --> 00:02:20,857 The next thing that we want is perhaps 43 00:02:20,858 --> 00:02:23,543 the particle to be scaled down a little bit. 44 00:02:23,657 --> 00:02:24,586 They are too big. 45 00:02:24,690 --> 00:02:30,171 We go down to the scale category and set the scale to something like .5. 46 00:02:30,614 --> 00:02:34,281 Yeah, we can have the smallest scale be like this 47 00:02:34,481 --> 00:02:38,657 and then add a bit of scale random to have some larger particles 48 00:02:38,658 --> 00:02:40,928 to have more variation as you can see. 49 00:02:41,090 --> 00:02:45,140 Next, we're going to add a bit of animation, two types of animation. 50 00:02:45,170 --> 00:02:47,757 First, we're going to have them scale up 51 00:02:47,758 --> 00:02:52,486 and then back down like before, so the particles don't disappear 52 00:02:52,487 --> 00:02:53,869 as they are doing right now. 53 00:02:53,870 --> 00:02:58,171 Click on the scale curve slot, create a new curve texture 54 00:02:58,429 --> 00:03:00,314 and expand it, expand the curve. 55 00:03:00,592 --> 00:03:02,700 We're going to do the same as before. 56 00:03:02,730 --> 00:03:07,814 Lower the first point, lower the last point as well, 57 00:03:07,829 --> 00:03:12,357 and right click around 25% of the particles lifetime, 58 00:03:12,404 --> 00:03:18,970 and we're going to have the particles scale up the leftmost point, 59 00:03:18,971 --> 00:03:20,886 I want to be a bit larger. 60 00:03:20,970 --> 00:03:24,900 You want something roughly like what you are seeing on screen. 61 00:03:25,286 --> 00:03:27,786 They don't start tiny, they scale up 62 00:03:27,818 --> 00:03:31,260 and then back down a little bit and maybe not as much. 63 00:03:31,290 --> 00:03:33,300 That's for the scale animation. 64 00:03:33,330 --> 00:03:37,580 Next I want to animate the color of these particles. 65 00:03:37,610 --> 00:03:41,857 Expand the color category and we're going to use a color ramp. 66 00:03:41,858 --> 00:03:46,071 Like the scale curve, the color ramp allows you to animate 67 00:03:46,072 --> 00:03:48,886 the shade of the particles over time. 68 00:03:49,130 --> 00:03:52,060 Click on the slot and create a new gradient texture. 69 00:03:52,090 --> 00:03:54,200 You are going to see them turn black. 70 00:03:54,330 --> 00:03:59,572 We're going to expand the gradient, create a new gradient resource in there 71 00:03:59,772 --> 00:04:04,371 and now you can see the particles animate from black to white. 72 00:04:04,610 --> 00:04:08,229 Click to expand the gradient and open the gradient editor. 73 00:04:08,257 --> 00:04:10,671 It works with what we call color stops. 74 00:04:10,730 --> 00:04:15,500 Those are the little vertical pins or boxes that you can see. 75 00:04:15,530 --> 00:04:18,757 You can click and drag them to shape the gradient 76 00:04:18,758 --> 00:04:23,386 and make, for example, the particles black for a longer time. 77 00:04:23,770 --> 00:04:28,294 We're going to pull this pin to the left of the gradient. 78 00:04:28,494 --> 00:04:32,519 On the right side the box with the dark tone 79 00:04:32,520 --> 00:04:34,700 represents the selected pin. 80 00:04:34,720 --> 00:04:38,380 If I click on the white one you can see the slot turns white. 81 00:04:38,410 --> 00:04:41,886 I'm going to select the black box again, 82 00:04:41,887 --> 00:04:45,800 then click on the color to open the color picker 83 00:04:46,305 --> 00:04:48,060 and make it white as well. 84 00:04:48,757 --> 00:04:53,686 It works like the modulate properties of nodes where the color that you choose 85 00:04:53,687 --> 00:04:58,686 is going to multiply and darken the tone of the texture. 86 00:04:58,970 --> 00:05:02,057 What we want to do here is to start transparent, 87 00:05:02,058 --> 00:05:08,103 to have the smoke take its color after a little bit of time 88 00:05:08,104 --> 00:05:09,380 and then fade away. 89 00:05:09,610 --> 00:05:12,157 We'll start by clicking the color slot 90 00:05:12,158 --> 00:05:15,771 and make the leftmost color fully transparent. 91 00:05:16,010 --> 00:05:18,371 You can see now the particles fade in. 92 00:05:19,160 --> 00:05:23,060 Then we're going to move the pin on the right to the left. 93 00:05:23,090 --> 00:05:25,420 You click and drag on it to do that. 94 00:05:25,440 --> 00:05:28,843 You have a bit of a fade in that's really short at the start. 95 00:05:29,114 --> 00:05:32,743 Then we're going to create another pin on the right 96 00:05:32,957 --> 00:05:34,957 by clicking on the gradient, 97 00:05:35,638 --> 00:05:39,420 select the color picker and make it transparent as well. 98 00:05:39,450 --> 00:05:41,443 You have fade in, fade out. 99 00:05:41,650 --> 00:05:45,940 Now I want this tone to be preserved for a bit of time, 100 00:05:45,941 --> 00:05:49,683 so I'm going to click near it to create a new color pin 101 00:05:49,843 --> 00:05:51,486 and move that pin to the right 102 00:05:51,487 --> 00:05:56,986 to maintain the opaque tone for a longer time. 103 00:05:57,250 --> 00:06:00,186 In the gradient editor, where you click 104 00:06:00,187 --> 00:06:06,329 is going to create a new pin that samples the color at the place you click. 105 00:06:06,330 --> 00:06:09,586 If I click more to the right, it's going to make 106 00:06:09,587 --> 00:06:11,329 an almost transparent white. 107 00:06:11,690 --> 00:06:16,543 But if I click very close to my pure opaque white tone, 108 00:06:16,544 --> 00:06:20,286 it's going to make a new pin that's not too transparent. 109 00:06:20,597 --> 00:06:25,743 I can move it to the right to keep the particles opaque for some time. 110 00:06:26,570 --> 00:06:28,740 The particles are a bit too white. 111 00:06:28,770 --> 00:06:32,260 I want to make them a bit gray, purple, something like that. 112 00:06:32,290 --> 00:06:36,620 I'm going to click on my color pins, click on the color picker there, 113 00:06:36,650 --> 00:06:42,786 and maybe select one of the tones in the color palette in there. 114 00:06:43,530 --> 00:06:45,340 Not make them as blue, 115 00:06:45,360 --> 00:06:47,443 I'm going to select some grays. 116 00:06:47,600 --> 00:06:53,343 Same thing for the second color pin, I'm going to go into the grays in there. 117 00:06:54,330 --> 00:06:57,171 I'm playing a bit with the colors because there again, 118 00:06:57,172 --> 00:06:58,899 this is something that you eyeball. 119 00:06:58,900 --> 00:07:02,471 What I feel is that now the particles are a bit too dark, 120 00:07:02,472 --> 00:07:05,786 so I'm going to brighten those a little bit, 121 00:07:06,210 --> 00:07:08,178 and perhaps this one as well. 122 00:07:08,378 --> 00:07:09,060 There you go. 123 00:07:09,090 --> 00:07:11,829 I'm satisfied with the current look of things, 124 00:07:11,830 --> 00:07:15,171 except for at the start, you can see it's a bit brighter. 125 00:07:15,530 --> 00:07:20,018 The reason is that our pins on the left and on the right 126 00:07:20,019 --> 00:07:24,680 are fully transparent, but they are fully transparent white tone, 127 00:07:24,710 --> 00:07:28,957 so we have a transition from white to that darker gray. 128 00:07:29,043 --> 00:07:32,457 I'm going to select the pin there and make it just a bit gray, 129 00:07:32,530 --> 00:07:37,829 so we don't have that jump in tone at the start, 130 00:07:37,830 --> 00:07:40,557 and same thing at the end when it fades away, 131 00:07:40,558 --> 00:07:42,771 going to make the tone a bit more gray. 132 00:07:43,200 --> 00:07:46,871 The last thing that I want to add is a bit of damping like before, 133 00:07:46,872 --> 00:07:49,829 to make the particles change velocity over time, 134 00:07:49,871 --> 00:07:53,249 because right now it's constant and it doesn't look amazing. 135 00:07:53,286 --> 00:07:55,386 Expand the damping category 136 00:07:55,429 --> 00:08:00,171 and we're going to crank it up until the particles start to stop a bit. 137 00:08:01,480 --> 00:08:07,629 We can randomize that value as well, so some particles fly farther than others. 138 00:08:07,630 --> 00:08:12,729 It makes the motion a bit more chaotic and slightly more realistic, let's say. 139 00:08:12,985 --> 00:08:15,257 Next up we are going to do two things. 140 00:08:15,320 --> 00:08:19,300 First, as you can see the particles are showing in front of the character. 141 00:08:19,330 --> 00:08:22,980 We want them to be behind the character instead. 142 00:08:23,010 --> 00:08:25,157 We can do that in the inspector. 143 00:08:25,158 --> 00:08:28,214 We can go down to the visibility category 144 00:08:28,215 --> 00:08:32,529 under Canvas item, and then click show behind the parent. 145 00:08:32,810 --> 00:08:38,343 By default the nodes that are children of another show in front of the parent, 146 00:08:38,344 --> 00:08:41,771 but we can reverse that easily with this property. 147 00:08:41,890 --> 00:08:44,900 Lastly, when you select the Godot node 148 00:08:44,930 --> 00:08:49,300 and you move it, you can see how the particles move with the character. 149 00:08:49,357 --> 00:08:51,385 We don't want that, we want the particles 150 00:08:51,386 --> 00:08:53,614 to stay where they are and just animate. 151 00:08:54,522 --> 00:08:57,129 There's a feature of the particles 2D node 152 00:08:57,130 --> 00:08:58,400 that controls that. 153 00:08:58,530 --> 00:09:01,980 We select the node, go back to the top of the inspector. 154 00:09:02,010 --> 00:09:04,186 I'm going to fold the process material 155 00:09:04,187 --> 00:09:06,556 and textures because we're I'm done with those, 156 00:09:06,557 --> 00:09:09,614 and then expand the drawing category. 157 00:09:09,971 --> 00:09:12,929 You can see this property local coordinate. 158 00:09:13,050 --> 00:09:17,420 What this does is that it makes the motion relative to the parent node, 159 00:09:17,440 --> 00:09:19,543 the good old character here. 160 00:09:19,770 --> 00:09:23,771 But if we turn it off you don't see anything changing at first 161 00:09:23,772 --> 00:09:26,386 except that if you move the character, 162 00:09:26,387 --> 00:09:29,368 now the particles emit in some place 163 00:09:29,369 --> 00:09:32,286 and they are going to move relative to that place. 164 00:09:32,610 --> 00:09:35,480 Okay, the thing is that when you do that, 165 00:09:35,480 --> 00:09:38,656 when you start moving the character, you can see that even though 166 00:09:38,856 --> 00:09:41,978 when it's not moving there are enough smoke bubbles, 167 00:09:42,178 --> 00:09:44,500 when you stop moving there aren't enough. 168 00:09:44,643 --> 00:09:47,043 We need to select the particles again 169 00:09:47,044 --> 00:09:50,429 and crank up the amount at the top of the inspector, 170 00:09:50,629 --> 00:09:52,243 could say something like 20. 171 00:09:52,530 --> 00:09:54,660 Now that should work a bit better. 172 00:09:54,690 --> 00:09:58,671 You can see the smoke trail is a little bit nicer. 173 00:09:59,370 --> 00:10:01,260 That's how our particles are working. 174 00:10:01,290 --> 00:10:04,860 Now we want to change the name perhaps for our code. 175 00:10:04,890 --> 00:10:07,843 We'll call them smoke particles. 176 00:10:08,440 --> 00:10:11,243 If you try the game now you'll see one problem 177 00:10:11,268 --> 00:10:15,580 it's that the smoke is always showing up even when the character is not moving. 178 00:10:15,610 --> 00:10:17,886 That doesn't look too amazing. 179 00:10:17,970 --> 00:10:21,571 We're going to use code to toggle that on and off. 180 00:10:22,120 --> 00:10:25,060 I'll go back to the Godot scene to match your setup, 181 00:10:25,080 --> 00:10:28,514 and there we can click on the script icon 182 00:10:28,515 --> 00:10:30,486 to open the script editor. 183 00:10:30,930 --> 00:10:35,229 We're going to add a new on ready variable to get our smoke particles. 184 00:10:35,429 --> 00:10:38,243 On ready var, smoke particles 185 00:10:38,810 --> 00:10:43,000 and I'm going to use the dollar sign to get the smoke particles node. 186 00:10:43,170 --> 00:10:46,471 Then we only need one line. 187 00:10:46,472 --> 00:10:50,657 It's a line to toggle the smoke particles emitting property. 188 00:10:50,770 --> 00:10:53,980 If we turn it off, the particles stop emitting. 189 00:10:54,010 --> 00:10:55,940 If we turn it on, they keep emitting. 190 00:10:55,970 --> 00:11:01,357 We're going to start with a value of off or pause in code. 191 00:11:01,490 --> 00:11:04,671 Then in the script, we can put that at the end 192 00:11:04,672 --> 00:11:06,800 of the physics process function, 193 00:11:06,801 --> 00:11:09,557 we can say smoke particles that emitting, 194 00:11:09,610 --> 00:11:11,714 that's the property's name and code, 195 00:11:11,929 --> 00:11:12,629 is equal to, 196 00:11:12,690 --> 00:11:14,620 and we're going to use a comparison 197 00:11:14,650 --> 00:11:18,500 that will evaluate to a value of true or false. 198 00:11:18,530 --> 00:11:22,371 The way we can detect the character speed easily 199 00:11:22,372 --> 00:11:24,314 is using the velocity. 200 00:11:24,450 --> 00:11:28,180 We can say velocity.length, 201 00:11:28,210 --> 00:11:32,929 length is a function of the Vector2 class that returns the Vector's length, 202 00:11:33,043 --> 00:11:35,171 is greater than some value. 203 00:11:36,029 --> 00:11:39,529 One thing we can do is if the character is moving too slowly, 204 00:11:39,729 --> 00:11:42,643 for example, at speed slow, we don't show the particles, 205 00:11:42,644 --> 00:11:46,529 but if it's above that threshold, then we can start showing the particles. 206 00:11:46,690 --> 00:11:50,799 We can use a value like speed default divided by two, 207 00:11:50,800 --> 00:11:52,086 something like that. 208 00:11:52,890 --> 00:11:56,420 Now you can run the scene actually and move Godot 209 00:11:56,450 --> 00:12:01,100 and you'll see that when I move the character after a short while, 210 00:12:01,101 --> 00:12:03,371 it starts having these smoke particles. 211 00:12:03,490 --> 00:12:06,657 If I stop the particles stop emitting. 212 00:12:06,729 --> 00:12:09,871 With that you have a nice particle trail. 213 00:12:09,887 --> 00:12:12,243 In the next video, we'll complete the series 214 00:12:12,244 --> 00:12:15,872 with a racetrack overview animation to make the game feel a bit nicer.