Cocos2D添加精灵纹理滤镜实现图像复古效果的转换

简介:

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


大家知道Cocos2d本身是一个非常强悍的2d游戏引擎,其中自带了很多使用的图像处理功能,但是别忘了Apple自带的Core Graphics里也有很多强大的图像处理功能,比如滤镜 CIFilter.

Apple在iOS上提供了近百种不同的滤镜效果,可以用来方便快捷的渲染图像.至于CIFilter的具体使用大家可以参考苹果CG编程相关的书籍,这里由于篇幅原因不深入介绍了.

在这些滤镜中,我们选择一个复古类型的滤镜(CISepiaTone)来说明使用方法:

CIImage *ciImage = [CIImage imageWithCGImage:cgImage];
    CIFilter *filter = [CIFilter filterWithName:@"CISepiaTone"];
    [filter setValue:ciImage forKey:@"inputImage"];
    [filter setValue:@(0.9) forKey:@"inputIntensity"];
    CIImage *outputImage = [filter outputImage];

寥寥几行代码实现了将样板图像转换为滤镜效果的输出文件.

接下来的关键就是如何将精力的纹理转换为图片,下面是转换方法:

-(UIImage*)convertSpriteToImage:(CCSprite*)sprite{
    CGSize size = sprite.contentSize;
    _rt = [CCRenderTexture renderTextureWithWidth:size.width height:size.height];
    [_rt begin];
    [sprite visit];
    [_rt end];
    return [_rt getUIImage];
}

显示通过精灵大小设置对应渲染器的渲染大小,然后取得渲染后精灵的图片文件.

因为用滤镜处理图片对性能有不小的影响,所以为了效率因素,我们接下来写一个缓存用来存放滤镜过滤后的效果:

-(CCSpriteFrame*)getSF{
    CCSpriteFrame *sf = self.spriteFrame;
    for (NSDictionary *dict in _sfMDict.allKeys) {
        NSString *name = dict[@"Name"];
        CGRect rect = [dict[@"Rect"] CGRectValue];

        if ([sf.textureFilename isEqualToString:name] &&
            CGRectEqualToRect(sf.rect, rect)) {
            return _sfMDict[dict];
        }
    }
    return nil;
}

大家可以看到只有在缓存中找不到对应CCSpriteFrame时才实际处理图片(返回nil表示不在缓存中),否则直接使用之前处理过的图片,这样可以极大的提升效率.

最后需要在Sprite的精灵帧改变的时候调用滤镜处理方法,所以我们重载其setSpriteFrame方法:

-(void)setSpriteFrame:(CCSpriteFrame *)spriteFrame{
    [super setSpriteFrame:spriteFrame];
    if (_isRTCaused) {
        _isRTCaused = NO;
        return;
    }
    [self transferSF];
}

因为在滤镜处理后也要修改精灵的SpriteFrame所以这里用一个BOOL类型的变量_isRTCaused区分一下,否则必定死循环也 ;)

下面我们看一下实际的效果,这是正常游戏人物的显示:

这里写图片描述

下面是应用复古滤镜后人物的效果:

这里写图片描述

最后是实际游戏运行的效果,注意这是在模拟器上运行略有卡顿,在真机上还是很顺畅的:

这里写图片描述

可以看到所有游戏人物的显示都被复古化了,包括游戏界面按钮中的人物,因为我是在GC类上做的效果.

有了Cocoa中强大的图像处理能力更是对Cocos2D如虎添翼,后面如果大家感兴趣我们再说说其他特效,比如马赛克效果,曝光效果等等,see you ;)

相关文章
|
6月前
|
算法 Shell 计算机视觉
【特效】对实时动态人脸进行马赛克及贴图马赛克处理及一些拓展
【特效】对实时动态人脸进行马赛克及贴图马赛克处理及一些拓展
148 0
|
1月前
ThreeJs给物体添加贴图
这篇文章详细说明了在Three.js中如何给3D物体添加贴图,并展示了实现局部贴图的技术和方法。
67 1
ThreeJs给物体添加贴图
|
5月前
|
图形学
【实现100个unity特效】shader实现3D物品闪光和描边效果
【实现100个unity特效】shader实现3D物品闪光和描边效果
76 0
OpenCV-怀旧色滤镜
OpenCV-怀旧色滤镜
|
计算机视觉 C++ Python
Python相片图片编辑工具-翻转旋转亮度磨皮裁剪添加文字
这篇博客针对<<Python相片图片编辑工具-翻转旋转亮度磨皮裁剪添加文字>>编写代码,代码整洁,规则,易读。 学习与应用推荐首选。
106 0
【Three.js入门】纹理及其常用属性、透明纹理、环境遮挡贴图与强度
【Three.js入门】纹理及其常用属性、透明纹理、环境遮挡贴图与强度
472 0
|
前端开发 数据可视化
【视觉基础篇】13 # 如何给简单的图案添加纹理和复杂滤镜?
【视觉基础篇】13 # 如何给简单的图案添加纹理和复杂滤镜?
87 0
【视觉基础篇】13 # 如何给简单的图案添加纹理和复杂滤镜?
|
iOS开发 MacOS Windows
Unity2D像素游戏开发——Aseprite简单人物绘画+动画制作导出精灵表示例
Unity2D像素游戏开发——Aseprite简单人物绘画+动画制作导出精灵表示例
655 0
Unity2D像素游戏开发——Aseprite简单人物绘画+动画制作导出精灵表示例
Halcon极坐标转换,图文解说,含点坐标的转换
Halcon极坐标转换,图文解说,含点坐标的转换
886 0
Halcon极坐标转换,图文解说,含点坐标的转换
|
计算机视觉
opencv 实现图像倒影(渐变)效果【源码】
opencv 实现图像倒影(渐变)效果【源码】
190 0
opencv 实现图像倒影(渐变)效果【源码】