UIKit Particle Systems in iOS 5 Tutorial

Dynamically Modifying Cells

The last topic for today will be modifying cells in an emitter layer dynamically. Right now the emitter emits particles all the time, and that’s not really giving the feel to the user that they’re really drawing on the screen. Let’s change that by emitting particles only when there’s a finger touching the screen.

Start by changing the birthRate of the cell at creation time to “0” in DWFParticleView.m’s awakeFromNib method:

fire.birthRate = 0;

If you run the app now, you should see an empty screen. Good! Now let’s add a method to turn on and off emitting. First declare the method in DWFParticeView.h:

-(void)setIsEmitting:(BOOL)isEmitting;

Then implement it in DWFParticleView.m:

-(void)setIsEmitting:(BOOL)isEmitting
{
    //turn on/off the emitting of particles
    [fireEmitter setValue:[NSNumber numberWithInt:isEmitting?200:0] 
      forKeyPath:@"emitterCells.fire.birthRate"];
}

Here we’re using the setValue:forKeyPath: method so we can modify a cell that’s already been added to the emitter by the name we set earlier. We use “emitterCells.fire.birthRate” for the keypath, which means the birthRate property of the cell named fire, found in the emitterCells array.

Finally we’ll need to turn on the emitter when a touch begins and turn it off when the user lifts their finger. Inside DWFViewController.m add:

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    [fireView setEmitterPositionFromTouch: [touches anyObject]];
    [fireView setIsEmitting:YES];
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
    [fireView setIsEmitting:NO];
}

- (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event {
    [fireView setIsEmitting:NO];
}

Compile and run the project, and watch out – you’re playing with fire! :]

Where To Go From Here?

Here is an example project with all of the code from the above tutorial.

If you’ve enjoyed this tutorial, there’s a lot more you can play around with from here! You could:

• Experiment with different particle image files
• Go through CAEmitterCell reference docs and have a look at all its properties
• Add functionality to render the image on the screen to a file
• Capture the drawing as a video file
• Add burning flames behind all your text labels in all your apps ;]

And this concludes our free tutorials in the iOS 5 Feast iOS 5 Tutorial Month! If you enjoyed these tutorials, be sure to check out our book iOS 5 By Tutorials, where we have tons of cool new iOS 5 tutorials for you!

Stay tuned for this Wednesday, where we will be announcing the winners of the epic iOS 5 Feast giveaway (over $600 in value)! It’s your last chance to enter (by sending one or more tweets with the hashtag #ios5feast), so be sure to do so if you haven’t already!

Also if you have any comments or questions on this tutorial or on UIKit Particle Systems in general, please join the forum discussion below!

This is a blog post by iOS Tutorial Team member Marin Todorov, a software developer with 12+ years of experience, an independant iOS developer and the creator of Touch Code Magazine.