cocos之Gif图

Gif的提取
图片的动态显示
Atlas及图集资源
- 图集资源
- Atlas使用

Gif的提取

放入PS，导出图层各图片,注意要背景透明。
图片命名从0开始，与脚本中数组的显示一致。

图片的动态显示

由于图片进入cocos后图片无背景，导致图片大小不一，这样显示时就会出现如下问题：（图片大小位置不一）
要将每张图片的TrimType属性设置为none（一张一张的设置）

 @property( [cc.SpriteFrame] )frames: cc.SpriteFrame[] = [];//或者 frames: cc.SpriteFrame[] = new Array();sprite:cc.Sprite=null;index:number=1;interval:number=0.1;onLoad () {this.sprite=this.node.getComponent(cc.Sprite);}start () {this.schedule(this.onTimer,this.interval)}onTimer(){if(this.frames.length==0)return;this.sprite.spriteFrame =this.frames[this.index];this.index++;if(this.index >= this.frames.length)//这里不适用取余，数字在不断增大超出表示范围this.index = 0;}onDestroy(){this.unschedule(this.onTimer);}

注意添加数组的属性时，变量类型的说明 @property( [cc.SpriteFrame] )
数组声明的两种方式：
frames: cc.SpriteFrame[] = [];
frames: cc.SpriteFrame[] = new Array();

要额外注意：所有添加的属性调用时都要使用this来调用
最终效果：

Atlas及图集资源

图集资源类似雪碧图，是将要加载的图片整合到一张图片上的图。方便文件的分类、加载。

图集资源

cocos需要的图集资源需要TexturePacker生成的图集文件（png和plist文件）
安装教程：https://blog.csdn.net/u013654125/article/details/80676715.
需要注意的是:生成图片资源时，Layout栏内要选择TrimType设置为none,否则之后在软件内无法修改，不然做好后发现问题就·······

Atlas使用

plist文件是一个XML文件，描述每个子图的信息

导入后能够看到全部图片的信息，之后全选片能够设置TrimType.

添加脚本：内容和上面基本相同，只是需要增加获取Atlas属性并将其内部图片给frames数组。

 @property( [ cc.SpriteAtlas ] )atlas : cc.SpriteAtlas  = null;@property( [cc.SpriteFrame] )frames: cc.SpriteFrame[] = [];//或者 frames: cc.SpriteFrame[] = new Array();sprite:cc.Sprite=null;index:number=1;interval:number=0.1;onLoad () {this.sprite=this.node.getComponent(cc.Sprite);// 从图集中获取所有帧图片if(this.atlas != null)this.frames = this.atlas.getSpriteFrames();}start () {this.schedule(this.onTimer,this.interval)}onTimer(){if(this.frames.length==0)return;this.sprite.spriteFrame =this.frames[this.index];this.index++;if(this.index >= this.frames.length)//这里不适用取余，数字在不断增大超出表示范围this.index = 0;}onDestroy(){this.unschedule(this.onTimer);}

cocos之Gif图相关推荐

cocos creator开发微信小游戏(五)贪吃蛇大作战
目录小游戏介绍小游戏cocos creator场景图小游戏部分JS代码开发中碰到的问题工程及说明小游戏介绍贪吃蛇小游戏:贪吃蛇试玩(首次加载比较慢),类似贪吃蛇大作战的小游戏.当玩家的蛇 ...
RTC领域首个AI算法大赛 AI in RTC 2019 创新挑战赛圆满落幕
10月24日,由声网 Agora .RTC 开发者社区主办,数据科学学习社区 DataCastle共同协办,涂图科技.LeanCloud.极光.达观数据等合作伙伴提供支持的AI in RTC 2019 ...
从技术、服务到共创声网 Agora 携手合作伙伴共建 RTC 生态
10 月 24 日,实时音视频云服务开创者声网 Agora 在北京召开"未来·与声俱来"品牌发布会.作为品牌的首次正式对外发声,本次发布会展示了声网用 RTC 技术赋能全行业的战略 ...
华为云有没有实力挑战阿里云？
看了下面很多人的回答,感觉好多人对于云计算世界的理解还停留在两年前啊~~ 作为业内一线,同时也是近距离观察华为云的合作伙伴,我还是想给大家普及一下现在云计算的新理念.新趋势. 一.关于OpenStac ...
【python】plist图集拆分
1.使用cocos creator的可以到官方商店找对应的插件工具,不过不是免费的... :( ,链接地址:cocos creator合图拆分 2.使用cocos studio就简单一些,直接新建工程 ...
【Cocos Creator 3.x】如何进行光照烘焙（使用光照贴图）
前言这是一篇基础教程篇,在于帮助使用者快速理解并使用 Cocos Creator 3.x 引擎提供的光照贴图功能. 光照贴图 Cocos Creator 引擎的官方文档是这么描述的: 当我们进行 ...
Cocos Creator 案例源码分享三（3D贴图）
刚学Cocos Creator,想实现一个效果:立方体切换每面的颜色,网上搜索了一堆例子都是整个立方体的纹理切换,而且每个面的效果都是一样的,官方文档也没有给出合适的例子,后面通过查看引擎代码,终于摸 ...
基于cocos creator画六维图
这个仅仅是一个代码例子. 1.cocos creator的左下方资源管理器,点右键,弹出菜单,创建一个Scene,默认名称就可以. 2.同样在再创建一个JavaScript,名称为drawsix 3. ...
cocos黑暗斩_动态合图你真的用好了吗？| Cocos Creator
支持动态合图的渲染组件: Sprite. Label( BITMAP 模式). 注意事项: 在场景加载前,动态合图系统会进行重置, SpriteFrame贴图的引用和 uv 都会恢复到初始值. 查看方 ...
Cocos Creator - 动态合图(dynamicAtlasManager)
步骤 Cocos Creator - 动态合图(dynamicAtlasManager) 前言启用.禁用动态合图贴图限制支持定制的渲染组件调试总结 Cocos Creator - 动态合图( ...

cocos之Gif图

cocos之Gif图

Gif的提取

图片的动态显示

Atlas及图集资源

图集资源

Atlas使用

cocos之Gif图相关推荐

最新文章

热门文章