Everyone likes candles around the holidays. Add a candle by learning how to make a CAEmitterLayer.
- [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.
Author
Updated
1/19/2021Released
1/23/2018Note: Because this is an ongoing series, viewers will not receive a certificate of completion.
Skill Level Beginner
Duration
Views
Related Courses
-
Swift: Delegations and Data Sources
with Steven Lipton1h 6m Intermediate
-
New This Week:
-
Introduction
-
Welcome1m 10s
-
-
iOS Development Tips Weekly
-
Use Xcode Git repositories6m 59s
-
Read and write text files6m 47s
-
Use the Xcode 9 simulators4m 24s
-
Layout and iPhone X5m 35s
-
Read JSON files7m 59s
-
Make a camera on iPad7m 50s
-
Motion effects7m 27s
-
Tricks with Asset Manager6m 40s
-
Array tricks10m 56s
-
Image and color literals6m 48s
-
Why use uint8?10m 14s
-
Using hex color9m 39s
-
Deep dive into dictionaries9m 11s
-
Tapping a map7m 3s
-
Update old apps3m 47s
-
Using Apple Pencil8m 42s
-
Using property lists7m 44s
-
Using popovers8m 23s
-
Attributed string jazz9m 18s
-
3D text with SceneKit5m 54s
-
UIColor class extensions5m 46s
-
Timer accuracy6m 25s
-
Animate maps5m 17s
-
Xcode 10 storyboard changes7m 46s
-
Use code snippets8m 40s
-
Customizing the tab bar8m 31s
-
The Settings bundle9m 26s
-
Use the speech synthesizer6m 45s
-
Make round buttons7m 45s
-
Embed table views6m 36s
-
Make a toggle button7m 37s
-
Drop shadows6m 24s
-
Blur and vibrancy effects8m 48s
-
Views in playgrounds6m 52s
-
Launch the Settings app4m 45s
-
Draw paths in UIViews8m 4s
-
CALayer masks7m 14s
-
Protocols and time pickers6m 38s
-
Sliders as knobs7m 36s
-
Fix stackview disasters8m 9s
-
Using haptics4m 57s
-
Test flight9m 8s
-
Replacing segmented controls9m 50s
-
Ranges6m 48s
-
Unicode characters8m 36s
-
Thrown errors9m 41s
-
Actions in table views7m 5s
-
Make and use closures7m 4s
-
Using ARC6m 20s
-
Get BASIC with swift strings7m 56s
-
Convert CSV files10m 7s
-
Strings to doubles8m 14s
-
Enums13m 4s
-
Selection in text views5m 30s
-
Generate QR codes5m 13s
-
String interpolation6m 59s
-
Xcode changes5m 52s
-
Use Dark Mode on storyboards4m 45s
-
Use SF Symbols8m 42s
-
Structs6m 18s
-
Quick SwiftUI8m 55s
-
Working with sets7m 28s
-
Segue Actions4m 38s
-
Checkboxes in SwiftUI6m 15s
-
To-do lists in SwiftUI4m 27s
-
Quick Help in SwiftUI6m 29s
-
Models in SwiftUI6m 38s
-
SwiftUI in Xcode Playgrounds6m 39s
-
Basic PencilKit5m 45s
-
Setter and Getters5m 15s
-
UITextViews and coordinators6m 22s
-
Dark Mode in code6m 1s
-
Candle effects7m 53s
-
RealityKit5m 44s
-
NumberFormatter6m 7s
-
Tuples4m 42s
-
Protocols6m 16s
-
Property wrappers5m 19s
-
iPad to macOS6m 11s
-
Type properties5m 11s
-
SwiftUI animation8m 24s
-
@Binding in public6m 38s
-
SwiftUI ScrollView5m 30s
-
MapKit points of interest6m 14s
-
SF Symbols configuration5m 44s
-
Custom SF Symbols8m 7s
-
Use SwiftUI GeometryReader4m 15s
-
Proportional SwiftUI views8m 22s
-
Custom modifiers in SwiftUI6m 22s
-
Dependency injection6m 28s
-
Xcode themes7m 16s
-
Basic generics5m 58s
-
Selections in watchOS7m 23s
-
SwiftUI borders and shapes8m 54s
-
SwiftUI gradients11m 13s
-
Special parameters8m 49s
-
Overriding operators8m 29s
-
Basic measurements9m 26s
-
Key paths7m 9s
-
Recursive structs8m 38s
-
Outline views in SwiftUI5m 42s
-
TextEditor and Scribble4m 51s
-
Color pickers8m 54s
-
Changes to enums in Swift6m 15s
-
Date pickers6m 54s
-
SwiftUI labels3m 26s
-
SwiftUI maps6m 5s
-
Collection views for SwiftUI3m 50s
-
Scribble bugs4m 48s
-
The joys of UUID5m 8s
-
SwiftUI swipe gesture4m 2s
-
Holiday special: Let it snow6m 17s
-
Embed images in SwiftUI text5m 44s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Candle effects