Candle effects

- [Instructor] While you might not expect a holiday special from a tech series, many traditions at this time of year use candles. And that gives us a great time to show you a core animation in emitter, to make a candle flame. So, download the exercise file, you'll find out I set up much of what you need as a CA emitter layer. On the storyboard, I made a candle out of a single white button, and with a view that I called flame view. If you go to the view controller, you'll see that I've started to set this all up. Now, there are two major parts here. And I've already got an error for one of them because I haven't written that code, but the first part here is the emitter cell. And you can see that up top here. The emitter cell creates a particle and that's the single spark in the fire and it has a ton of properties. And I could've just gone through all these properties but I'm going to just show you a couple of them that are more important than others. And, a good way to start figuring out these values for theses properties by the way, is to use a SpriteKit particle emitter. So, I'm going to do a go over here, and I set one up here. So you can see that's an example of a flame for a particle emitter. And you can get that by the way by going to file, new, file and then scrolling down here, you'll find that its the SpriteKit particle file, and you can just use a fire. But I got one here, and I could use the values over here to make my particle for my CA layer, if you need to. So let's go back over here to the view controller, and I'm going to shut all the rest of this off, give us some space. So I already made all this. Now be aware that two emitters don't completely match up in use, and I had tweaked some of these values, and it's not always going to look exactly the same. So, a couple that you should be very careful about here. Number one is lifetime, and the second one is scale. And you'll notice I actually made these as parameters up here in emitter cell, so that we can play around with them. Lifetime is a time a particle exists. You can randomize this with the lifetime range. The same is true with the velocity range underneath it, which is the speed the particle moves. There's also an emission range, which is the cones that the particles show up in. Now I've set this for 16 degrees, or two pi over 45 radiance, since it takes radiance. The scale by the way, is the size of the particle, and you can set that as well. Now once you've halfed this emitter cell, and you filled out all this information, you can build the emitter, which I put into a method underneath here, which is just dying for me to put stuff in. So, from the emitter, I'm going to first set the position of the source at the bottom center. So I'm going to do emitter, .emitter position, equals Cgpoint. And we'll take a float here, and in this first one, I'm going to put flameView, .bounds, and then after that, I'm going to put a midX, so that I'm in the middle, and then tab over here, I'm going to do the same thing for flameview, bounds, and then for this, I'm going to put maxY, so that's the bottom of my view. I'm going to close off the parenthesis. Next, I'm going to set a shape for my emitter. Now for vertical flames, you're going to use a line shape. Emitter, .emitterShape, equals .line. And then I add this cell that I made up above to the emitter in array of emitter cells. So that's going to be emitter, .emitterCells, and that's an array, so I'll put some brackets here, and then I can put my emitter cell in. Now I set this up so that I could set my lifetimes and my scales. So for this first one I'm going to make, and we're going to make a couple of these, I'm going to 0.35 for my lifetime. My scale will be 0.4, and I'll set my color, which will be yellow, which by the way, if you look above here, you'll see it's got to be a CG color, so I've actually converted it up here too. But I'm going to make this yellow. Finally, I got to add it to the layer, so I'm going to do flameView, .layer, .addSubLayer. And that's going to be emitter. All right and you can see down here in view did load, I've already loading this, so that's good to go. So I can go ahead and run this, and I'll do it on a iPhone 11 Pro Max. And there you get a yellow flame, which is great, but let's make this flame look a little bit more realistic, and I'm going to add smoke and a little bit more color to the flames. So I'm going to stop this. So what I'm going to do is do these emitter cells on separate lines, so I'm going to press a return here, and a return here. Okay, so what I'm going to do is put in an emitter cell on top. Now these are in an order. So the back one is the first one in the array, and the top one is the last one in the array. So I'm going to do an emitter cell again. And in the back, I'm going to put some smoke. So I'm going to do this with a lifetime of a little bit bigger, so the smoke goes higher than the flame. I'm going to do a scale at 0.2, and my color is going to be a UI color, and I'm going to do some kind of gray with an alpha in it. So I'm going to do white 0.3, with an alpha of 0.2. And then put a comma, and then another comma, and then put one more emitter cell. And this one will be some orange flame in there. So I'm going to go a 0.2 here, make it a little smaller, in lifetime, so it'll be a little shorter, and then the scale, I'm going to do 0.3, again, a little smaller than the yellow flame, and we'll just use orange here. And, there we go. And you can change these colors around all you like, I'm just going to run this and see what happens. And there you go, there's our flame. This is just a simple use of CA emitter layers. For lots of applications, they make a quick way of adding animations like flames to your app without having to implement SpriteKit for particle animations.