PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest

preface

The Chinese New Year is coming soon. I wish you all a happy New Year in advance. Do you still remember the happy time of setting off firecrackers and fireworks when I was a child? Fireworks are not allowed in big cities, even in rural areas. Now let’s use ARKit+CAEmitterLayer particle emitter to set off fireworks for everyone.

Let’s implement this effect:

1. Create AR project

1.1, openXCode, Create a project, selectAugmented Reality App

1.2. Set the project name.bundle id, select the rendering engineSceneKitLanguage useSwift

Once created, you will see that the system automatically creates a scene for the plane

class ViewController: UIViewController, ARSCNViewDelegate { @IBOutlet var sceneView: ARSCNView! override func viewDidLoad() { super.viewDidLoad() // Set the view's delegate sceneView.delegate = self // Show statistics such as fps and timing information sceneView.showsStatistics = true // Create a new scene let scene = SCNScene(named: "art.scnassets/ship.scn")! // Set the scene to the view sceneview.scene = scene} }Copy the code

1.3. Delete the plane scene and create a plane geometrySCNPlane

override func viewDidLoad() { super.viewDidLoad() // Set the view's delegate sceneView.delegate = self // Let plane = SCNPlane(width: 0.5, height: 1) let plane = SCNPlane(width: 0.5, height: 1) 1) // Create nodes based on geometric shapes. Let nodes can be created not only on planes, but also on cuboids, spheres, cones, rings, pyramids, and so on. Plane) node. The position = SCNVector3Make (0, 0.1, 1) / / add node sceneView. Scene. The rootNode. AddChildNode (node)}Copy the code

Now a flat scene has been created. Here’s how it looks:

2,CAEmitterLayerParticle emitters implement fireworks

To achieve the fireworks effect, we need to combine CAEmitterLayer with CAEmitterCell. Fireworks require three cells, one for firing, one for exploding, and one for flying sparks after the explosion

Here’s the code:

Private func createFireWorksView() -> UIView {let fireworksBgView = UIView() fireworksBgView.isOpaque = false fireworksBgView.frame = CGRect(x: 0, y: 0, width: 500, height: 1000) let viewSize = fireworksBgView. Bounds. The size / / set CAEmitterLayer let fireworksEmitter = CAEmitterLayer () FireworksEmitter. PreservesDepth = true / / 1, the location of the set to launch fireworksEmitter. EmitterPosition = CGPoint (x: viewSize. Width / 2, y: ViewSize. Height) / / source size determines the size of the source fireworksEmitter. EmitterSize = CGSize (width: viewSize. Width / 2, height: 0) / / launch mode fireworksEmitter. EmitterMode =. The outline shape fireworksEmitter. / / launch emitterShape =. Line / / rendering mode FireworksEmitter. RenderMode =. I.e. the / / used to initialize the seed of the random function fireworksEmitter. Seed = arc4random () % + 1/100 / per second produced by the coefficient of particle number FireworksEmitter. The birthRate = 1 / / 2, launch the let rocket = CAEmitterCell () / / particle parameters of rocket speed multiplier factor. The birthRate = 1 / / emission Angle Rocke.emissionrange = 0 // Velocity rocke.velocity = 500 // Velocity range rocke.velocityRange = 100 // Y acceleration component Rocket. YAcceleration = 70 rocket. Lifetime = 1.02 "01")?. CgImage // Scale rocke.scale = 1 // Particle color rocke.color = Uicolor.red. CgColor rocke.greenrange = 1 rocke.redrange SpinRange = 0 // 3, let Burst = CAEmitterCell() // Speed multiplier factor of particle parameters BirthRate = 1.0 // Speed Burst. velocity = 10 burst.scale = 1 burst.redSpeed = -1.5 burst.blueSpeed = 1.5 Burst. GreenSpeed = 1.0 burst. Lifetime = 0.1 // 4, Let Spark = CAEmitterCell() Spark. BirthRate = 400 Spark. velocity = 300 spark.emissionRange = 2 * cgfloat. PI spark.yAcceleration = 200 // Life cycle spark.lifetime = 1.5 // Spark. Contents = UIImage(named: "01")?.cgImage spark.scalespeed = -0.4 spark.greenspeed = -0.1 spark.redSpeed = 0.4 spark.bluespeed = -0.1 Spark.alphaspeed = -0.25 spark.spin = 2 * cgfloat.pi spark.spinrange = 2 * cgfloat.pi // Particles are added to the CAEmitterLayer fireworksEmitter.emitterCells = [rocket] rocket.emitterCells = [burst] burst.emitterCells = [spark] fireworksBgView.layer.addSublayer(fireworksEmitter) return fireworksBgView } }Copy the code

3, create,SCNMaterialRenderer, willThe fireworks ViewAdd to it

The following code is in step 1.3

3.1. Create a renderer

// Let Material = SCNMaterial() // Set 'fireworks View' to contents. This contents property can set a lot of things, UILabel, UIImage, Even AVPlayer can material. The diffuse. Contents = createFireWorksView ()Copy the code

3.2. Render geometry with renderer

// Use the renderer to render node.geometry? .materials = [material]Copy the code

This is the end of the whole function, the demo address

Reference: CAEmitterLayer Particle emitter magic effect