Creator使用压缩纹理

Stella981
• 阅读 421

Creator使用压缩纹理

在深圳Cocos沙龙上,有幸结识了社区中大名顶顶的Colin,Shawn在在论坛上第一次看到Colin的团队用CocosCreator制作的《热血暗黑》时就被深深地震撼到了!更为重要的是,Colin将他的技术心得和宝贵开发经验写成文字,每一篇分享都是满满的干活,而且幸运的是Shawn得到Colin的授权许可,将他的文章散播到奎特尔星球,与你一起欣赏一起成长!

Creator使用压缩纹理

1

概述

之前写过一个关于2DMMO优化的分享,有些人问到其中的压缩纹理要怎么做。其实实施起来很简单,很多看过cocos2dx的人都知道怎么做,这篇分享主要针对对这块不是太了解的新同学。

我假定对这篇分享有兴趣的同学都知道压缩纹理是什么,有什么好处和坏处。如果不大了解,可以先看一下pvr, etc相关的知识。在手游中使用压缩纹理是很常见的需求,通常:

  • IOS会使用PVR来压缩,IOS要求图片高宽必须是2的幂,且必须是正方形。

  • Android会使用ETC1,由于ETC1不能支持透明通道,对于有透明的图,一般也会用ETC1+Alpha的做法。

2

使用工具

生成压缩纹理当然是使用现成的工具了:

IOS

使用PVRTexTool,在这里下载(https://community.imgtec.com/developers/powervr/tools/pvrtextool/),具体的使用方法可能要参考工具的文档,下面是一个简单的例子:

PVRTexToolCLI -i $(infile) -o $(outfile) -square + -pot + -q pvrtcbest -f PVRTC1_4,UBN,lRGB

其中$(infile)和$(outfile)分别是原图片名和压缩后的图片名,如果图片没有透明,PVRTC1_4换成PVRTC1_4_RGB。

Android

使用Mali Texture Compression Tool,在这里下载(https://developer.arm.com/products/software-development-tools/graphics-development-tools/mali-texture-compression-tool/downloads),这个工具可以生成ETC1和带透明通道的ETC1。

# 原始格式etcpack ${infile} ${outfile} -c etc1# 带透明通道etcpack ${infile} ${outfile} -c etc1 -aa

带透明通道的ETC1其实就是将图片和遮罩合成一张图,最终的图片高度是原始图片的2倍。而要正确显示图片,则需要用Shader把遮罩部分作为Alpha值加到原图上。Shader如下所示:

attribute vec4 a_position; 
attribute vec2 a_texCoord; 
attribute vec4 a_color;  
varying vec4 v_fragmentColor; 
varying vec2 v_texCoord; 
varying vec2 v_alphaCoord;
void main() 
{ 
    gl_Position = CC_PMatrix * a_position;
    v_fragmentColor = a_color; 
    v_texCoord = a_texCoord; 
}

precision lowp float;
varying vec4 v_fragmentColor; 
varying vec2 v_texCoord; 
varying vec2 v_alphaCoord;
void main() 
{ 
    vec4 v4Colour = texture2D(CC_Texture0, v_texCoord);
    v4Colour.a = texture2D(CC_Texture0, vec2(0.0, 0.5) + v_texCoord).r;
    gl_FragColor = v_fragmentColor * v4Colour; 
}

3

兼容Web和Native

现在知道如何生成和使用压缩纹理了,要怎么整合进Creator呢?

  • 在开发阶段,我们还是正常使用png, jpg,这样在浏览器和模拟器都能正常显示。

  • 在构建阶段,分成三步走:

  • 用Creator命令行生成原生工程。

  • 调用我们自己的脚本,将工程中的图片转成压缩纹理,但要注意转换后的图片名不要变,比如a.jpg转换后仍然叫a.jpg,只不过内容已经是压缩纹理了。

  • 用Creator命令行编译安装包。

这样打出来的包,在手机中是可以正常显示的,原因是cocos-2dx并不是以文件后缀来判断类型的,它是根据文件内容的头几个字节来判断的。

而cocos-2dx其实还支持gzip压缩格式的,也就是我们将图片转换成pvr或etc1后,还可以再压缩成gzip,最终还是可以正常解析出来。但由于文件大小小了很多,加载速度会变快。

要完成这样的构建流程,你可能需要用一个脚本来实现自动化,我比较推荐python,它的库实在太强大和方便了。

另外,并不是所有的图片都适合用压缩纹理,比如UI图片压缩后会有明显的锯齿,像场景, 特效这类就比较适合。总之,在使用压缩纹理之前,你可能需要对图片类型进行一些规范化。


欢迎关注「奎特尔星球」微信公众号,有代码、有教程、有视频、有故事,一起来玩吧!

Creator使用压缩纹理

本文分享自微信公众号 - Creator星球游戏开发社区(creator-star)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏
评论区
推荐文章
秃头王路飞 秃头王路飞
4个月前
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。languageJavaScript"name":"vuecliversion2","version":"1.0.0","desc
浅梦一笑 浅梦一笑
4个月前
初学 Python 需要安装哪些软件?超级实用,小白必看!
编程这个东西是真的奇妙。对于懂得的人来说,会觉得这个工具是多么的好用、有趣,而对于小白来说,就如同大山一样。其实这个都可以理解,大家都是这样过来的。那么接下来就说一下python相关的东西吧,并说一下我对编程的理解。本人也是小白一名,如有不对的地方,还请各位大神指出01名词解释:如果在编程方面接触的比较少,那么对于软件这一块,有几个名词一定要了解,比如开发环
技术小男生 技术小男生
4个月前
linux环境jdk环境变量配置
1:编辑系统配置文件vi/etc/profile2:按字母键i进入编辑模式,在最底部添加内容:JAVAHOME/opt/jdk1.8.0152CLASSPATH.:$JAVAHOME/lib/dt.jar:$JAVAHOME/lib/tools.jarPATH$JAVAHOME/bin:$PATH3:生效配置
光头强的博客 光头强的博客
4个月前
Java面向对象试题
1、请创建一个Animal动物类,要求有方法eat()方法,方法输出一条语句“吃东西”。创建一个接口A,接口里有一个抽象方法fly()。创建一个Bird类继承Animal类并实现接口A里的方法输出一条有语句“鸟儿飞翔”,重写eat()方法输出一条语句“鸟儿吃虫”。在Test类中向上转型创建b对象,调用eat方法。然后向下转型调用eat()方
刚刚好 刚刚好
4个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
小森森 小森森
4个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本欢迎添加左边的微信一起探讨!项目地址:(https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n)\2.Bug修复更新日历2.情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意),\\和注意
晴空闲云 晴空闲云
4个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
3个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Stella981 Stella981
1年前
Cocos实现对ETC2的支持
!(https://oscimg.oschina.net/oscnet/dbe31317b01b4412a716c20f22359934.jpg"1711134845.jpg")在深圳Cocos沙龙上,有幸结识了社区中大名顶顶的Colin,Shawn在在论坛上第一次看到Colin的团队用CocosCreator制作的《热血暗黑》时就被深深地
helloworld_28799839 helloworld_28799839
4个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue