Cocos2D结合CoreGraphics实现RPG人物中空黑洞吸入效果

大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处.
如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;)

之前的博文中我们实现了RPG人物的复古效果.

现在我们再完点high的,我们准备实现这么一种效果:

人物从中心点开始形成一个空洞,洞的边缘产生一种吸入变形效果.

有了上一篇的铺垫,我们可以很快搞定它.

首先看一下Apple对其CIHoleDistortion滤镜的说明:

Creates a circular area that pushes the image pixels outward, distorting those pixels closest to the circle the most.

Localized Display Name
Hole Distortion

inputImage  
A CIImage object whose display name is Image.
inputCenter 
A CIVector object whose attribute type is CIAttributeTypePosition and whose display name is Center.

Default value: [150 150]
inputRadius 
An NSNumber object whose attribute type is CIAttributeTypeDistance and whose display name is Radius.

Default value: 150.00

以上是滤镜对应的3个参数,很简单:

第一个是输入图片,第二个是黑洞的中心点,最后一个是黑洞的半径.

官方网站还给出了应该显示的效果:

好了,下面我们把它放到游戏中去:

//将CGImage转换为CIImage
    CIImage *ciImage = [CIImage imageWithCGImage:_image.CGImage];
    //用过滤器生成新的CIImage
    CIFilter *filter = [CIFilter filterWithName:@"CIHoleDistortion"];
    CIVector *vector = [CIVector vectorWithX:sz.width*_image.scale/2
                                           Y:sz.height*_image.scale/2];
    [filter setValue:ciImage forKey:@"inputImage"];
    [filter setValue:vector forKey:@"inputCenter"];
    [filter setValue:@(10.0) forKey:@"inputRadius"];
    CIImage *outputImage = [filter outputImage];

以上我们选择RPG人物的中心点为黑洞的中心,且黑洞的半径为10.

编译运行游戏,效果如下:

放大一点看一下效果:

可以看到上图中的狗狗的肚子里出现了背景草地上一朵小花.

一般来说要想实现该效果,需要自己写OpenGL ES的端点和片段着色器,但是我们通过Cocoa提供的滤镜,避免了较底层的方法,而且实现起来非常简单.