Particle effects for iOS development and particles for ios development

Particle effects for iOS development and particles for ios development

Translated by sugar-fried shrimps and Benna, this article proofreads sai, u0u0, iven, and Zilong Mountain

 

IOS 5InUIKitParticle System tutorial

 

Ray's words: This is 15th and the last iOS 5 tutorial in the iOS 5 feast! This tutorial is a free preview section in our new book "iOS 5 tutorial. This week, we will see the last release of the "iOS 5 feast" series-from the epic "iOS 5 feast" and the last broadcast of # ios5feast! :]

This is a tutorial written by Marin Todorov, a member of the iOS tutorial team. He is a software developer with over 12 years of experience and an independent iOS developer, he is also the creator of Touch Code Magazine.

You may have seen particle systems that are used in many iOS apps and games, such as explosion, fire effects, rain or snow. However, most of the effects you see may appear in the game, because UIKit does not provide built-in functions to create a particle system-until iOS 5 appears, this situation will change, this tutorial uses UIKit to create a particle system!

Now, with iOS 5, you can directly use the Particle System in UIkit to bring a lot of exciting visual enjoyment to your applications. Here are some examples that apply very well to particle systems:

• UIKit games: Yes, you can make games through general UIKit (some games work quite well, especially card and board games ). Now, you can make better games with explosion, smoke, and other more attractive things!
• Beautify the UI: when your user moves an object on the interface, it can leave a smoke trace. Why not?
• Dazzling screen transition: why not let the previous scene disappear into a fireball when your application shows the next scene?

I hope you can do something with the UIKit particle system. Maybe you already have some cool ideas. Let's get started!

In this tutorial, we will develop an application called "Draw with fire" to Draw a flame on the screen.

You will work with me to create and set the particle system to achieve the effect on the screen, so that you can implement your ideas step by step. When this application is completed, you can use it to draw a beautiful question mark marked with a flame, just like this:

 

 

New ParticleAPI

 

Two classes will be used when you create a particle system. They are named CAEmitterLayer and CAEmitterCell in the QuartzCore framework.

The general idea is that you create a CAEmitterLayer and add one or more caemittercells to it. Then, each cell generates particles according to the style it is configured.

Besides, CAEmitterLayer inherits from CALayer. You can easily add it anywhere in the UIKit hierarchy!

I think the coolest thing about this new UIKit particle system is that a separate CAEmitterLayer can support multiple caemittercells. This allows you to complete some very complex and cool results. For example, when you create a spring water, you can have a cell that emits water drops, and another cell emits water vapor on the spring water!

 

Getting Started

 

Open Xcode, select File \ New Project from the main menu, select iOS \ Application \ Single View Application template, click Next, and type the program name "DrawWithFire ", type the prefix of "DWF", select "iPhone for Device Family", and check "Use automatic reference counting" (select another option ). Click Next, and then click Create to save the project.

Select your project, and then select the target of DrawWithFire. Next, open the Build Phases tab, expand the Link Binary With Libraies section, click "+", double-click QuartzCore. framework, and add the Quartz drawing function to the project.

We will create a custom UIView class to start the project. This class will have CAEmitterLayer as its layer. In fact, it is very simple to do this by rewriting the + (Class) layerClass method of the UIView Class and returning a CAEmitter Class. Pretty cool!

Create a new file using the iOS \ Cocoa Touch \ Objective-C class template. The class name is dwfparticipant view and inherits from UIView.

Open dwfparticipant view. m and replace it with the following code:

#import "DWFParticleView.h"#import <QuartzCore/QuartzCore.h> @implementation DWFParticleView{    CAEmitterLayer* fireEmitter; //1} -(void)awakeFromNib{    //set ref to the layer    fireEmitter = (CAEmitterLayer*)self.layer; //2} + (Class) layerClass //3{    //configure the UIView to have emitter layer    return [CAEmitterLayer class];} @end

 

Let's repeat the initial code:

• We create a single private instance variable to control the CAEmitterLayer.
• In awakeFromNib, we set fireEmitter as the self. layer of this view. We store it in the fireEmitter instance variable we created, because we will set many parameters on it later.
• + (Class) layerClass is the Class method of UIView. It tells UIKit which Class is used as the root CALayer of the view. Want