Cocos2d-JS项目之三:使用合图

studio里使用合图感觉和spriteBatchNode差不多,但有不同,合图只起到在加载资源时减少IO的作用,起不到批渲染的作用。其实想想,studio本来就是用来拼UI界面的,一个上点规模的UI界面里都有N个层、layout、各种widget,树状关系,不在一个层里,是没办法批渲染的。

1、把资源图片加到studio里,新建一个合图文件,然后把需要合并的小图拖到合图文件里。在studio项目里,被拖到合图文件里的小图的左上角会有个黄点。

2、合图文件的属性设置里,间隙设置大于0,避免有时候会出现小图有黑边的情况,其他属性看着设置吧,然后保存、导出,在项目的res目录下,就会出现一个PNG文件和一个plist文件。

3、在其他需要设置纹理的UI里,点击,在右边的属性栏里,找到图片资源属性,可以直接从左边把小图拖过去使用。

4、发布项目,在项目的res目录下发现,虽然有些UI文件使用了小图,但是并没有小图被导出来,studio已经识别出我们的UI使用的图片资源会从 合图导出的PNG和plist文件里 获取。

5、resource.js文件里,要预加载合图文件导出的 .png 文件和 .plist 文件。搞定。

6、代码如果有些精灵也想使用大图里的小图的话,方法如下:

1         var spriteFrameCache = cc.spriteFrameCache;
2         spriteFrameCache.addSpriteFrames(res.Plist_plist, res.Plist_png);
3         var fileName = "resources/common/head1.png";
4         var sprite = new cc.Sprite(spriteFrameCache.getSpriteFrame(fileName));
5         sprite.setPosition(100, 300);
6         this.addChild(sprite);

第三行那里 fileName 的值,要带上一个相对 res 目录的路径,不确定的话,就查看一下合图文件导出的plist文件,里面描述了每一张小图的名字、rect、旋转等各种信息。

时间: 2024-10-11 11:58:11

Cocos2d-JS项目之三:使用合图的相关文章

《Nodejs开发加密货币》之二十六:轻松从Js文件生成UML类图

前言 上一篇<函数式编程入门经典>,罗嗦了很长,很多小伙伴看得云里雾里.这里提供一个实例,让大家切身感受函数式编程的奥妙和趣味.当然,仅仅为了举例而写代码就没有什么意义了,本书提供的例子都是承担了某项任务的具体项目或工具,这个例子自然也不能例外. 本书用到了大量的Uml类图,经常有小伙伴问我用什么工具画的.说实话,前几篇是我个人一点点手工整理的,但后来就感觉在浪费生命,作为程序员,怎么可能容忍这样的事情反复发生.所以,就有了 js2uml(见参考)这个小工具.只不过,当初目的单一,仅仅使用正则

spring mvc 实战化项目之三板斧

接上文希望从一张表(tb_role_info 用户角色表)的CRUD展开spring mvc的项目实战化魅力. 开发技术选型:spring mvc+freemarker+bootstrap+mybatis+mysql. 项目目录结构: (1)业务表 tb_role_info -- ---------------------------- -- Table structure for `tb_role_info` 用户角色表 -- ---------------------------- DROP

cocos2d js ClippingNode 制作标题闪亮特效

1.效果图: 之前在<Android 高仿 IOS7 IPhone 解锁 Slide To Unlock>中制作了文字上闪亮移动的效果,这次我们来看下怎样在cocos2d js 中做出类似的效果. 顺便给我公司的游戏打下广告.https://itunes.apple.com/cn/app/kuang-zhan-san-guo/id691116157? mt=8 2.效果原理 很easy.就是一张白色两边羽化的图片在标题上从左往右移动.可是普通的移动会穿帮.我们须要以标题作为模板来截取白色的图片

白鹭引擎 5.2.7 新增自动合图插件、二进制和声音缓存方案功能

2018年8月13日,白鹭引擎发布5.2.7 版本.本次版本主要新增了两大功能:命令行增加自动合图插件TextureMergerPlugin,微信小游戏支持库增加二进制和声音缓存方案. 同时,本次版本还是对 5.2 版本的一次集中性缺陷修复,更新修复了大家反馈的涉及2D渲染- JavaScript.AssetsManager.微信小游戏支持库的数个BUG.在此,我们要再次特别感谢开发者们通过Egret社区.白鹭引擎小游戏开发微信群等渠道提交的BUG反馈. 5.2.7版本中新增的自动合图插件可以帮

node.js项目中使用coffeescript的方式汇总

Coffeescript作为Javascript低调的小弟实在是有过人之处,使用它可以增进开发效率,减少代码错误, 关键是能大幅提升开发愉悦感.我越来越觉得只要可能就在自己的项目中把coffee用起来. 然而也许你和我一样,在了解完coffeescript的语法后准备一试身手的时候,却面对如何把它引入项目而犯起愁来. 其实coffeescript这种语言因其可以一对一地翻译为javascript的特性,使用起来其实非常灵活. 将其引入项目的方式也不止一个.这里,我先就node项目引入coffee

node.js项目开发问题集锦(不定期更新,随时把开发过程中遇到的问题加上)

1.用express开发站点时,怎么定义通用的头部和尾部 方案1:用类似asp时代的include添加,如ejs模板: <% include ../header.ejs %> <h1 class="page-header"> 这里是内容. 注:..表示header.ejs在上一级目录,ejs扩展名可以去掉,直接写:include ../header </h1> <% include ../footer %> 方案2:用类似于MVC的lay

开源项目spring-shiro-training思维导图

写在前面 终于完成了一个开源项目的思维导图解读.选spring-shiro-training这个项目解读是因为它开源,然后涉及到了很多我们常用的技术,如缓存,权限,任务调度,ssm框架,Druid监控,mybatis-plus,代码生成器等.同时也考虑到了安全方面,做了防止crsf攻击方面控制.作为一个简单易用的权限系统,它也足够我们学习了. 当然,可能解读不会很全,也可能有些写得不对.有些是基于个人的理解,一些网上参考的资料.如果想要理解一个项目单单看别人的解读是不够的,需要你去克隆下来在你的

vue.js项目构建基础

这里构建的vue.js项目依赖node服务器运行. 项目搭建完整步骤: 安装node.js ,转至nodeJs网站http://nodejs.cn/ 下载nodeJs进行安装. 安装完毕检查nodeJs安装是否成功? nodeJs安装完成,自带npm,可以检查npm是否已经安装 安装webpack. webpack是一个模块加载器兼打包工具,在vue项目中,为了更好的管理代码使用模块系统,使用webpack打包. 安装webpack  查看webpack是否安装成功? 安装 vue-cli 脚手

Morris.js和flot绘制折线图的比较

[文章摘要] 最近用开源的AdminLTE做框架感觉效果特别好,其针对图表库Morris.js和flot都提供了不错的支持,也都提供了这两者的例子.不过Morris.js是基于Raphael.js来的,也就是其使用SVG和VML来绘制图形,而flot则是使用Canvas进行绘制,在绘制效率和浏览器兼容性等方面会有出入,同时两者需要的数据格式也不相同.本文中对两者的使用和性能进行了比较. [文章索引] Morris.js的使用 flot的使用 性能比较 [一.Morris.js的使用] Morri