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 ;)
Cocos2D添加精灵纹理滤镜实现图像复古效果的转换的更多相关文章
- Cocos2D中的纹理(textures)的解释
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 免责申明:本博客提供的所有翻译文章原稿均来自互联网,仅供学习交流 ...
- 图像柔光效果(SoftGlow)的原理及其实现。
图像柔光效果在很多商业软件中都有实现,比如美图秀秀,光影魔术手等.其能针对原始图像产生一副新的比较平滑感觉光线比较柔和的效果,给人一种朦胧美,如下面几幅图所示: ...
- 【温故而知新-Javascript】图片效果(图像震动效果、闪烁效果、自动切换图像)
1.当鼠标指针经过图像时图像震动效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- 给UIScrollView添加category实现UIScrollView的轮播效果
给UIScrollView添加category实现UIScrollView的轮播效果 大家都知道,要给category添加属性是必须通过runtime来实现的,本教程中给UIScrollView添加c ...
- 为 Elasticsearch 添加中文分词,对比分词器效果
转自:http://keenwon.com/1404.html 为 Elasticsearch 添加中文分词,对比分词器效果 Posted in 后端 By KeenWon On 2014年12月12 ...
- Win8 Metro(C#)数字图像处理--2.44图像油画效果算法
原文:Win8 Metro(C#)数字图像处理--2.44图像油画效果算法 [函数名称] 图像油画效果 OilpaintingProcess(WriteableBitmap src ...
- Win8 Metro(C#)数字图像处理--2.43图像马赛克效果算法
原文:Win8 Metro(C#)数字图像处理--2.43图像马赛克效果算法 [函数名称] 图像马赛克效果 MosaicProcess(WriteableBitmap src, i ...
- Win8Metro(C#)数字图像处理--2.15图像霓虹效果
原文:Win8Metro(C#)数字图像处理--2.15图像霓虹效果 [函数名称] 图像霓虹效果函数NeonProcess(WriteableBitmap src) 上述公式进行开方即可. [函 ...
- Win8Metro(C#)数字图像处理--2.17图像木刻效果
原文:Win8Metro(C#)数字图像处理--2.17图像木刻效果 [函数名称] 图像木刻效果函数WoodCutProcess(WriteableBitmap src) [函数代码] ///& ...
随机推荐
- hdu 5317 合数分解+预处理
RGCDQ Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Submi ...
- ●BZOJ 2393 Cirno的完美算数教室
题链: http://www.lydsy.com/JudgeOnline/problem.php?id=2393 题解: 容斥原理,暴力搜索,剪枝...和 [Scoi2010 幸运数字] 一样的(只是 ...
- LCD接口和RGB介绍【转】
转自:https://www.cnblogs.com/hzl6255/p/5470583.html 阅读目录 1. 介绍 2. 接口类型 3. RGB 4. YUV 5. FOURCC 回到顶部 1. ...
- springmvc上传文件方法及注意事项
本文基于注解的配置,敬请留意 基于注解整合 一.springmvc为我们提供两种上传方式配置: org.springframework.web.multipart.commons.CommonsMu ...
- solr6.6初探之配置篇
一.solr的简介 1) solr是企业级应用的全文检索项目,它是基于Apache Lucence搜索引擎开发出来的用于搜索的应用工程 2) solr最新版本6.6 下载地址:下载地址 二 启动与配置 ...
- python绘制散点图,柱状图和折线图
示例:散点图 最常见的散点图之一是x-y散点图.下面的代码会大致告诉你一个matplotlib是如何工作的,你会看到如何一点点建立起一个散点图. 我们正在使用点的x和y位置的一些构成数据.运行下面的代 ...
- 缓冲区(buffer)与缓存(cache)
下面介绍缓冲区的知识. 一.什么是缓冲区 缓冲区(buffer),它是内存空间的一部分.也就是说,在内存空间中预留了一定的存储空间,这些存储空间用来缓冲输入或输出的数据,这部分预留的空间就叫做缓冲区, ...
- Redis从入门到精通:初级篇
原文链接:http://www.cnblogs.com/xrq730/p/8890896.html,转载请注明出处,谢谢 Redis从入门到精通:初级篇 平时陆陆续续看了不少Redis的文章了,工作中 ...
- QRCode.js:使用 JavaScript 生成二维码
什么是 QRCode.js? QRCode.js 是一个用于生成二维码的 JavaScript 库.主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库. 基本用法 ...
- drools 手动创建kmoudle.xml文件
@Test public void test() { KieServices kieServices = KieServices.Factory.get(); KieResources resourc ...