6.8 CAEmitterLayer

在iOS 5中，苹果引入了一个新的CALayer子类叫做CAEmitterLayer。CAEmitterLayer是一个高性能的粒子引擎，被用来创建实时例子动画如：烟雾，火，雨等等这些效果。

CAEmitterLayer看上去像是许多CAEmitterCell的容器，这些CAEmitierCell定义了一个例子效果。你将会为不同的例子效果定义一个或多个CAEmitterCell作为模版，同时CAEmitterLayer负责基于这些模版实例化一个粒子流。一个CAEmitterCell类似于一个CALayer：它有一个contents属性可以定义为一个CGImage，另外还有一些可设置属性控制着表现和行为。我们不会对这些属性逐一进行详细的描述，你们可以在CAEmitterCell类的头文件中找到。

我们来举个例子。我们将利用在一圆中发射不同速度和透明度的粒子创建一个火爆炸的效果。清单6.13包含了生成爆炸的代码。图6.13是运行结果

清单6.13 用CAEmitterLayer创建爆炸效果

#import "ViewController.h"

#import 


@interface ViewController ()


@property (nonatomic, weak) IBOutlet UIView *containerView;


@end



@implementation ViewController


- (void)viewDidLoad

{

    [super viewDidLoad];

    

    //create particle emitter layer

    CAEmitterLayer *emitter = [CAEmitterLayer layer];

    emitter.frame = self.containerView.bounds;

    [self.containerView.layer addSublayer:emitter];


    //configure emitter

    emitter.renderMode = kCAEmitterLayerAdditive;

    emitter.emitterPosition = CGPointMake(emitter.frame.size.width / 2.0, emitter.frame.size.height / 2.0);


    //create a particle template

    CAEmitterCell *cell = [[CAEmitterCell alloc] init];

    cell.contents = (__bridge id)[UIImage imageNamed:@"Spark.png"].CGImage;

    cell.birthRate = 150;

    cell.lifetime = 5.0;

    cell.color = [UIColor colorWithRed:1 green:0.5 blue:0.1 alpha:1.0].CGColor;

    cell.alphaSpeed = -0.4;

    cell.velocity = 50;

    cell.velocityRange = 50;

    cell.emissionRange = M_PI * 2.0;


    //add particle template to emitter

    emitter.emitterCells = @[cell];

}

@end

图6.13 火焰爆炸效果

CAEMitterCell的属性基本上可以分为三种：

• 这种粒子的某一属性的初始值。比如，color属性指定了一个可以混合图片内容颜色的混合色。在示例中，我们将它设置为桔色。
• 例子某一属性的变化范围。比如emissionRange属性的值是2π，这意味着例子可以从360度任意位置反射出来。如果指定一个小一些的值，就可以创造出一个圆锥形
• 指定值在时间线上的变化。比如，在示例中，我们将alphaSpeed设置为-0.4，就是说例子的透明度每过一秒就是减少0.4，这样就有发射出去之后逐渐小时的效果。

CAEmitterLayer的属性它自己控制着整个例子系统的位置和形状。一些属性比如birthRate，lifetime和celocity，这些属性在CAEmitterCell中也有。这些属性会以相乘的方式作用在一起，这样你就可以用一个值来加速或者扩大整个例子系统。其他值得提到的属性有以下这些：

• preservesDepth，是否将3D例子系统平面化到一个图层（默认值）或者可以在3D空间中混合其他的图层
• renderMode，控制着在视觉上粒子图片是如何混合的。你可能已经注意到了示例中我们把它设置为kCAEmitterLayerAdditive，它实现了这样一个效果：合并例子重叠部分的亮度使得看上去更亮。如果我们把它设置为默认的kCAEmitterLayerUnordered，效果就没那么好看了（见图6.14）.

图6.14 禁止混色之后的火焰粒子

6.9 CAEAGLLayer

当iOS要处理高性能图形绘制，必要时就是OpenGL。应该说它应该是最后的杀手锏，至少对于非游戏的应用来说是的。因为相比Core Animation和UIkit框架，它不可思议地复杂。

OpenGL提供了Core Animation的基础，它是底层的C接口，直接和iPhone，iPad的硬件通信，极少地抽象出来的方法。OpenGL没有对象或是图层的继承概念。它只是简单地处理三角形。OpenGL中所有东西都是3D空间中有颜色和纹理的三角形。用起来非常复杂和强大，但是用OpenGL绘制iOS用户界面就需要很多很多的工作了。

为了能够以高性能使用Core Animation，你需要判断你需要绘制哪种内容（矢量图形，例子，文本，等等），但后选择合适的图层去呈现这些内容，Core Animation中只有一些类型的内容是被高度优化的；所以如果你想绘制的东西并不能找到标准的图层类，想要得到高性能就比较费事情了。

因为OpenGL根本不会对你的内容进行假设，它能够绘制得相当快。利用OpenGL，你可以绘制任何你知道必要的集合信息和形状逻辑的内容。所以很多游戏都喜欢用OpenGL（这些情况下，Core Animation的限制就明显了：它优化过的内容类型并不一定能满足需求），但是这样依赖，方便的高度抽象接口就没了。

在iOS 5中，苹果引入了一个新的框架叫做GLKit，它去掉了一些设置OpenGL的复杂性，提供了一个叫做CLKView的UIView的子类，帮你处理大部分的设置和绘制工作。前提是各种各样的OpenGL绘图缓冲的底层可配置项仍然需要你用CAEAGLLayer完成，它是CALayer的一个子类，用来显示任意的OpenGL图形。

大部分情况下你都不需要手动设置CAEAGLLayer（假设用GLKView），过去的日子就不要再提了。特别的，我们将设置一个OpenGL ES 2.0的上下文，它是现代的iOS设备的标准做法。

尽管不需要GLKit也可以做到这一切，但是GLKit囊括了很多额外的工作，比如设置顶点和片段着色器，这些都以类C语言叫做GLSL自包含在程序中，同时在运行时载入到图形硬件中。编写GLSL代码和设置EAGLayer没有什么关系，所以我们将用GLKBaseEffect类将着色逻辑抽象出来。其他的事情，我们还是会有以往的方式。

在开始之前，你需要将GLKit和OpenGLES框架加入到你的项目中，然后就可以实现清单6.14中的代码，里面是设置一个GAEAGLLayer的最少工作，它使用了OpenGL ES 2.0 的绘图上下文，并渲染了一个有色三角（见图6.15）.

清单6.14 用CAEAGLLayer绘制一个三角形

#import "ViewController.h"

#import 

#import 


@interface ViewController ()


@property (nonatomic, weak) IBOutlet UIView *glView;

@property (nonatomic, strong) EAGLContext *glContext;

@property (nonatomic, strong) CAEAGLLayer *glLayer;

@property (nonatomic, assign) GLuint framebuffer;

@property (nonatomic, assign) GLuint colorRenderbuffer;

@property (nonatomic, assign) GLint framebufferWidth;

@property (nonatomic, assign) GLint framebufferHeight;

@property (nonatomic, strong) GLKBaseEffect *effect;



@end


@implementation ViewController


- (void)setUpBuffers

{

    //set up frame buffer

    glGenFramebuffers(1, &_framebuffer);

    glBindFramebuffer(GL_FRAMEBUFFER, _framebuffer);


    //set up color render buffer

    glGenRenderbuffers(1, &_colorRenderbuffer);

    glBindRenderbuffer(GL_RENDERBUFFER, _colorRenderbuffer);

    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, _colorRenderbuffer);

    [self.glContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.glLayer];

    glGetRenderbufferParameteriv(GL_RENDERBUFFER, GL_RENDERBUFFER_WIDTH, &_framebufferWidth);

    glGetRenderbufferParameteriv(GL_RENDERBUFFER, GL_RENDERBUFFER_HEIGHT, &_framebufferHeight);


    //check success

    if (glCheckFramebufferStatus(GL_FRAMEBUFFER) != GL_FRAMEBUFFER_COMPLETE) {

        NSLog(@"Failed to make complete framebuffer object: %i", glCheckFramebufferStatus(GL_FRAMEBUFFER));

    }

}


- (void)tearDownBuffers

{

    if (_framebuffer) {

        //delete framebuffer

        glDeleteFramebuffers(1, &_framebuffer);

        _framebuffer = 0;

    }


    if (_colorRenderbuffer) {

        //delete color render buffer

        glDeleteRenderbuffers(1, &_colorRenderbuffer);

        _colorRenderbuffer = 0;

    }

}


- (void)drawFrame {

    //bind framebuffer & set viewport

    glBindFramebuffer(GL_FRAMEBUFFER, _framebuffer);

    glViewport(0, 0, _framebufferWidth, _framebufferHeight);


    //bind shader program

    [self.effect prepareToDraw];


    //clear the screen

    glClear(GL_COLOR_BUFFER_BIT); glClearColor(0.0, 0.0, 0.0, 1.0);


    //set up vertices

    GLfloat vertices[] = {

        -0.5f, -0.5f, -1.0f, 0.0f, 0.5f, -1.0f, 0.5f, -0.5f, -1.0f,

    };


    //set up colors

    GLfloat colors[] = {

        0.0f, 0.0f, 1.0f, 1.0f, 0.0f, 1.0f, 0.0f, 1.0f, 1.0f, 0.0f, 0.0f, 1.0f,

    };


    //draw triangle

    glEnableVertexAttribArray(GLKVertexAttribPosition);

    glEnableVertexAttribArray(GLKVertexAttribColor);

    glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, 0, vertices);

    glVertexAttribPointer(GLKVertexAttribColor,4, GL_FLOAT, GL_FALSE, 0, colors);

    glDrawArrays(GL_TRIANGLES, 0, 3);


    //present render buffer

    glBindRenderbuffer(GL_RENDERBUFFER, _colorRenderbuffer);

    [self.glContext presentRenderbuffer:GL_RENDERBUFFER];

}


- (void)viewDidLoad

{

    [super viewDidLoad];

    //set up context

    self.glContext = [[EAGLContext alloc] initWithAPI: kEAGLRenderingAPIOpenGLES2];

    [EAGLContext setCurrentContext:self.glContext];


    //set up layer

    self.glLayer = [CAEAGLLayer layer];

    self.glLayer.frame = self.glView.bounds;

    [self.glView.layer addSublayer:self.glLayer];

    self.glLayer.drawableProperties = @{kEAGLDrawablePropertyRetainedBacking:@NO, kEAGLDrawablePropertyColorFormat: kEAGLColorFormatRGBA8};


    //set up base effect

    self.effect = [[GLKBaseEffect alloc] init];


    //set up buffers

    [self setUpBuffers];


    //draw frame

    [self drawFrame];

}


- (void)viewDidUnload

{

    [self tearDownBuffers];

    [super viewDidUnload];

}


- (void)dealloc

{

    [self tearDownBuffers];

    [EAGLContext setCurrentContext:nil];

}

@end

图6.15 用OpenGL渲染的CAEAGLLayer图层

在一个真正的OpenGL应用中，我们可能会用NSTimer或CADisplayLink周期性地每秒钟调用-drawRrame方法60次，同时会将几何图形生成和绘制分开以便不会每次都重新生成三角形的顶点（这样也可以让我们绘制其他的一些东西而不是一个三角形而已），不过上面这个例子已经足够演示了绘图原则了。