1 00:00:00,200 --> 00:00:04,570 In this video, we'll design the animated stars on the Pickups. 2 00:00:04,600 --> 00:00:07,571 This will make them stand out in the level, 3 00:00:07,572 --> 00:00:13,220 but also indicate the player that they can collect these gems. 4 00:00:13,250 --> 00:00:18,020 We're going to use a technique called Particles to achieve that. 5 00:00:18,040 --> 00:00:24,580 Particles allow you to create all kinds of visual effects, to represent chaos, 6 00:00:24,600 --> 00:00:28,820 to create flames, to also create these sparkles here, 7 00:00:28,850 --> 00:00:33,700 and to very quickly change the look and feel of their animation. 8 00:00:34,490 --> 00:00:41,380 To get started, open the Obstacle Course 2D Part 2, Pickups, pickup.tscn scene, 9 00:00:41,410 --> 00:00:45,700 which I have here, and we'll start by adding a new Particles node. 10 00:00:45,730 --> 00:00:49,180 Press Control A and add a Particles 2D node, 11 00:00:49,210 --> 00:00:53,060 the last one, not the CPU Particles 2D. 12 00:00:53,090 --> 00:00:58,300 The Particles 2D node has more features than its CPU counterpart. 13 00:00:58,330 --> 00:01:05,050 The CPU Particles 2D node is designed for compatibility with older devices. 14 00:01:05,080 --> 00:01:09,378 The Particles 2D node will spawn small Sprites 15 00:01:09,578 --> 00:01:13,490 and scatter them and animate them over time. 16 00:01:13,520 --> 00:01:17,820 To get started, we want to give the Sprite a texture. 17 00:01:17,850 --> 00:01:21,495 So we go to the Textures category in the Inspector, 18 00:01:21,496 --> 00:01:27,229 and right-click on Texture, quick load while looking for sparkle.png 19 00:01:27,230 --> 00:01:31,900 so little star, you can see the stars appear there. 20 00:01:31,930 --> 00:01:33,829 They are stacking up, currently. 21 00:01:33,830 --> 00:01:35,685 They are not being animated because 22 00:01:35,686 --> 00:01:39,210 while lacking the parameters to do so. 23 00:01:39,240 --> 00:01:42,933 To change the animation of your Sprites, 24 00:01:42,934 --> 00:01:47,060 you want to expand the process material in the Inspector 25 00:01:47,061 --> 00:01:51,490 and there click, and we're going to create a new Particles material. 26 00:01:51,520 --> 00:01:56,930 This is a built-in resource that gives you many parameters to create your Particles. 27 00:01:56,960 --> 00:02:00,210 If you create a Shader material instead, 28 00:02:00,240 --> 00:02:04,460 you can make completely custom animations using code. 29 00:02:04,490 --> 00:02:10,340 But for now, we're going to click our newly created material to expand it, 30 00:02:10,370 --> 00:02:14,540 and we're going to start working on the many properties in there. 31 00:02:14,570 --> 00:02:19,380 I'm not going to cover them all because as you can see, there's a lot of them 32 00:02:19,410 --> 00:02:24,157 and they depend a lot on the precise effect that you create. 33 00:02:24,158 --> 00:02:27,580 We're going to only cover the ones that we need here. 34 00:02:27,610 --> 00:02:30,100 First is the Emission Shape. 35 00:02:30,130 --> 00:02:33,854 Currently, all the Sprites spawn at the same position, 36 00:02:34,054 --> 00:02:36,820 but we want to scatter them around the gem. 37 00:02:36,850 --> 00:02:40,450 We're going to change the shape from point to Sphere, 38 00:02:40,480 --> 00:02:42,800 and then we have to change the radius 39 00:02:42,801 --> 00:02:46,029 so we can increase that to see that the stars 40 00:02:46,030 --> 00:02:48,500 start to appear in different positions. 41 00:02:48,530 --> 00:02:51,143 The shape is a sphere rather than a circle 42 00:02:51,144 --> 00:02:55,540 because the underlying code is compatible with 3D. 43 00:02:55,570 --> 00:03:00,980 The next thing we want to do is perhaps, change the scale of these Particles. 44 00:03:01,010 --> 00:03:04,929 We're going to go down to the Scale category 45 00:03:05,114 --> 00:03:08,956 and we're going to lower it maybe, half that should be fine. 46 00:03:08,957 --> 00:03:10,937 Yes, maybe 0.4, okay. 47 00:03:11,143 --> 00:03:14,500 Now, the sparkles look a bit better. 48 00:03:14,530 --> 00:03:17,180 The next thing that we want is for them... 49 00:03:17,210 --> 00:03:18,300 Well, two things. 50 00:03:18,330 --> 00:03:21,100 First, we want to move the particles up, 51 00:03:21,130 --> 00:03:25,380 so we're going to use the Move tool in the toolbar and Shift, click and drag 52 00:03:25,410 --> 00:03:28,747 to center them on our little gem 53 00:03:28,947 --> 00:03:33,960 just so they're not spawning below the gem, right. 54 00:03:34,320 --> 00:03:40,740 With that, we want to make the stars move up, instead of down. 55 00:03:40,770 --> 00:03:43,340 To do so, we can use the gravity. 56 00:03:43,370 --> 00:03:48,340 Currently, it's making the stars accelerate downwards. 57 00:03:48,370 --> 00:03:52,060 We want to make them go up, so we're going to use a negative value. 58 00:03:52,090 --> 00:03:55,757 You can say minus 100 on the vertical axis, 59 00:03:56,186 --> 00:04:00,429 you can see how already you could use that for healing effects 60 00:04:00,430 --> 00:04:05,900 and games for dust coming off the floor, you name it. 61 00:04:05,930 --> 00:04:11,924 But for now, we're going to continue with a bit of variation 62 00:04:11,925 --> 00:04:16,457 to the star's angle and the angular momentum, 63 00:04:16,458 --> 00:04:20,380 because right now, they are all aligned and it looks really off. 64 00:04:20,410 --> 00:04:23,740 So we're going to expand the Angular Velocity. 65 00:04:23,770 --> 00:04:30,940 It's basically the angular momentum of the stars and we can increase it. 66 00:04:30,970 --> 00:04:37,180 For example, we can say velocity it's in degrees, so 180, right? 67 00:04:37,210 --> 00:04:39,300 It's going to make them all turn. 68 00:04:39,330 --> 00:04:45,740 And then we can crank up the random slider to randomize the speed. 69 00:04:45,770 --> 00:04:49,300 A value of Velocity Random of zero, 70 00:04:49,330 --> 00:04:53,700 means that all the particles have the same angular momentum, right? 71 00:04:53,720 --> 00:04:55,843 But if you crank this up to one, 72 00:04:55,844 --> 00:05:02,156 they will all have a random value between 0 and 100 and 80 degrees 73 00:05:02,157 --> 00:05:04,039 per second rotation speed. 74 00:05:04,040 --> 00:05:09,471 You can play a bit with the slider and choose something that looks good to you. 75 00:05:10,186 --> 00:05:16,757 The next thing that I like to change is animating the scale of the stars 76 00:05:16,758 --> 00:05:18,900 because it's the next thing that looks off to me. 77 00:05:18,920 --> 00:05:20,980 You can see how they disappear. 78 00:05:21,010 --> 00:05:24,060 Instead, we want them to either fade out 79 00:05:24,090 --> 00:05:27,420 or another technique is to animate their Scale. 80 00:05:27,450 --> 00:05:30,557 We can go back down to the Scale category 81 00:05:30,686 --> 00:05:34,457 and you can see the Scale Curve property. 82 00:05:35,090 --> 00:05:43,020 This allows us to use Curve to animate the scale of particles over time. 83 00:05:43,040 --> 00:05:45,843 Click the Scale Curve to create a new Curve Texture 84 00:05:45,844 --> 00:05:50,020 and then click the result to get your curve in here, 85 00:05:50,040 --> 00:05:52,660 then click the Curve to edit it. 86 00:05:52,690 --> 00:05:59,100 It pops a little editor in which you can see the curve, right here. 87 00:05:59,130 --> 00:06:06,860 Right now, the scale of these particles is constant over time. 88 00:06:06,890 --> 00:06:15,380 When it writes one, it's a multiplier, so it's 0.4 times what's on the Curve here. 89 00:06:15,410 --> 00:06:19,940 It's constantly at 0.4, the texture scale. 90 00:06:19,970 --> 00:06:23,340 Now, what happens if we lower one of these points? 91 00:06:23,360 --> 00:06:27,614 You can see the stars start to grow up to this maximum 92 00:06:27,615 --> 00:06:32,180 at the end of their lifetime when they disappear, right? 93 00:06:32,210 --> 00:06:35,220 If we lower this part of the Curve, 94 00:06:35,250 --> 00:06:38,229 you can see that now, the stars are not as big, 95 00:06:38,230 --> 00:06:42,614 so you can use the Curve as a way to control the maximum scale too. 96 00:06:43,090 --> 00:06:47,885 Now, what I want here is the star to go up and scale 97 00:06:47,886 --> 00:06:50,940 and then to scale back down and disappear. 98 00:06:50,970 --> 00:06:53,814 We can add a new point to the curve to do so, 99 00:06:53,815 --> 00:06:58,300 so right-click somewhere on the Curve and select Add Point. 100 00:06:58,330 --> 00:07:04,782 Then I'm going to move that point up and I'm going to lower the last one 101 00:07:04,783 --> 00:07:08,620 so you can see now, the stars are scaling up 102 00:07:08,621 --> 00:07:11,300 and then back down as they disappear 103 00:07:11,330 --> 00:07:16,300 and you can lower your Curve down to zero for them to disappear completely. 104 00:07:16,330 --> 00:07:20,820 When you select one of these points, you can see the blue handles that appear. 105 00:07:20,850 --> 00:07:24,357 You can click and drag on these handles can be a bit tricky. 106 00:07:24,358 --> 00:07:31,265 But you can use that to control the Curves orientation, like so. 107 00:07:31,465 --> 00:07:34,820 Anyway, for now we have a Scale that doesn't look too bad. 108 00:07:34,850 --> 00:07:37,999 I think that I want to lower the Scale 109 00:07:38,000 --> 00:07:40,460 or perhaps play with the randomness a bit. 110 00:07:40,461 --> 00:07:45,999 Now, the problem is the way the randomness works with the Scale is it randomizes it 111 00:07:46,000 --> 00:07:51,260 between your Scale Value and the default Scale of the Texture. 112 00:07:51,290 --> 00:07:53,780 It's a bit confusing, actually. 113 00:07:53,800 --> 00:07:58,096 We are going to lower the Particle Scale, 2.3 114 00:07:58,296 --> 00:08:02,860 and as I told you, the Scale Curve multiplies that 115 00:08:02,890 --> 00:08:07,380 so this becomes the maximum Scale, basically. 116 00:08:07,410 --> 00:08:12,713 The Curve is going to make the star start small, 117 00:08:12,714 --> 00:08:15,220 then get big and then get small again. 118 00:08:15,250 --> 00:08:19,700 The effect is not looking too bad right now, but we can do a bit better. 119 00:08:19,730 --> 00:08:21,986 One thing that I don't like is how the stars 120 00:08:21,987 --> 00:08:25,460 can go pretty far up above the gem. 121 00:08:25,480 --> 00:08:28,583 It would be nice if they couldn't go that far 122 00:08:28,584 --> 00:08:32,100 and we can use a feature called Damping to do that. 123 00:08:32,130 --> 00:08:39,260 It's going to make them slow down almost to a stop as they fade away. 124 00:08:39,290 --> 00:08:42,471 For that, we expand the Damping category 125 00:08:42,472 --> 00:08:49,256 and we crank up the Damping Value until the particles slow down enough 126 00:08:49,257 --> 00:08:51,543 so they don't go that far up. 127 00:08:51,914 --> 00:08:54,529 They start with that gravity pulling them up 128 00:08:54,530 --> 00:08:57,400 and then slow down almost to a stop. 129 00:08:57,571 --> 00:08:59,740 Right now, our effect is done. 130 00:08:59,770 --> 00:09:03,500 We can open the Pickup Ghost after of course, saving the scene, 131 00:09:03,501 --> 00:09:09,260 to see the sparkles appear there and on the Pickup Speed, as well. 132 00:09:09,280 --> 00:09:11,540 I'm seeing one last thing that I want to change. 133 00:09:11,560 --> 00:09:14,260 There are too many stars, right now. 134 00:09:14,290 --> 00:09:18,029 So we go back to the Pickup scene with the particles to be selected 135 00:09:18,030 --> 00:09:21,457 and go back all the way up to the top of the Inspector, 136 00:09:21,458 --> 00:09:24,540 where we change the amount of particles. 137 00:09:24,560 --> 00:09:28,980 Currently, eight means spawn eight stars per second. 138 00:09:29,010 --> 00:09:33,500 We can lower that down to four, for example, or three. 139 00:09:33,520 --> 00:09:35,740 You just need something a bit more reasonable. 140 00:09:35,770 --> 00:09:38,314 Now if you save and go back to your Pickups, 141 00:09:38,315 --> 00:09:41,529 you will see they have your automated sparkles 142 00:09:41,530 --> 00:09:45,500 and you can test the game to see them in action. 143 00:09:45,530 --> 00:09:48,400 Now, they really help to make the Pickup stand out.