关于COCOSJS的缓存类
发表于2016-05-22
介绍三个缓存时，我们要先理清一个问题：什么是纹理？通俗的解释呢，纹理就是图片的意思啦。当一张图片被加载到内存后，它是以纹理的形式存在的。从这里可以看出，纹理其实就是一块内存！这块内存中存放的是按照指定的像素格式填充的图片像素信息。
Texture2D: 纹理，即图片加载入内存后供CPU和GPU操作的贴图对象。
TextureCache（纹理缓存），用于加载和管理纹理。一旦纹理加载完成，下次使用时可使用它返回之前加载的纹理，从而减少对GPU和CPU内存的占用。
1、TextureCache
TextureCache纹理缓存是最底层也是最有效的纹理缓存。它到底有什么用呢？我先描述一个现象吧：假设游戏中有个界面用到的图片非常多，，第一次点进这界面时速度非常慢（因为要加载绘制很多图片），可第二次点击却一下子就进去了。这是为什么呢？原来Cocos2dx的渲染机制（cocosjs如果在native上面那么渲染方式和cocos2dx渲染机制一样，如果只是在web上面，那么只用到了html5的那一块）是可以重复使用同一份纹理在不同的场合进行绘制，从而达到重复使用，降低内存和GPU运算资源的消耗与开销。举个例子：创建一个精灵
var sp = new cc.Sprite("image.png");
第一次使用image.png这图片有两个步骤，一个是先将图片加载进TextureCache缓存中，下一步是绘制图片，从而将其显示在场景中。
第二次使用image.png时，因为之前image.png已经被放入TextureCache中，所以这里只需从缓存中找到这张图片，然后将其绘制出来就可以。
个人的理解就是：将使用的图片放在缓存中，然后在用的时候就可以到缓存中搜索是否有这个图片的存在，有的话就可以直接使用，将其绘制出来。
2、SpriteFrameCache
SpriteFrame的缓存。跟TextureCache功能一样，不过跟TextureCache不同的是，如果内存池中不存在要查找的图片，它会提示找不到，而不会去本地加载图片。
SpriteFrameCache一般用来处理plist文件(这个文件指定了每个独立的精灵在这张“大图”里面的位置和大小)，该文件对应一张包含多个精灵的大图，plist文件可以使用TexturePacker制作。
首先将plist文件将精灵帧加入精灵帧缓存中：cc.spriteFrameCache.addSpriteFrames(s_grossiniPlist);然后在使用的时候直接获取就可以，例如： var saleIcon = newcc.Sprite("#shop_sale_1.png");
简介：
SpriteFrameCache主要服务于多张碎图合并出来的纹理图片。这种纹理在一张大图中包含了多张小图，直接通过TextureCache引用会有诸多不便，因而衍生出来精灵框帧的处理方式，即把截取好的纹理信息保存在一个精灵框帧内，精灵通过切换不同的框帧来显示出不同的图案。好处是可以加快渲染的速度使游戏达到更加的流畅。通俗的解释：将一些小图或者是琐碎的图片，使用工具打成plist的形式（既减少了所使用的图片的数量，又减少了图片的总体大小），然后将其放入缓存中，开始玩游戏之前就已经将图片先加载进去了，这样在去进入游戏之后，图片就已经存在了，同时再到缓存中取所使用的图片，自然就会快了很多。减少了渲染的次数，自然游戏的性能就提升了。
SpriteFrameCache 的内部封装了一个Map_spriteFrames对象。key为帧的名称。SpriteFrameCache一般用来处理plist文件(这个文件指定了每个独立的精灵在这张“大图”里面的位置和大小)，该文件对应一张包含多个精灵的大图，plist文件可以使用TexturePacker制作。
SpriteFrameCache的常用接口和TextureCache类似，不再赘述了，唯一需要注意的是添加精灵帧的配套文件一个plist文件和一张大的纹理图。下面列举了SpriteFrameCache常用的方法：（详细API请看SpriteFrameCache API :http://cn.cocos2d-x.org/doc/jsdoc/symbols/cc.spriteFrameCache.html）
SpriteFrameCache vs.TextureCache
SpriteFrameCache精灵框帧缓存。顾名思义，这里缓存的是精灵帧SpriteFrame，它主要服务于多张碎图合并出来的纹理图片。这种纹理在一张大图中包含了多张小图，直接通过TextureCache引用会有诸多不便，因而衍生出来精灵框帧的处理方式，即把截取好的纹理信息保存在一个精灵框帧内，精灵通过切换不同的框帧来显示出不同的图案。
跟TextureCache功能一样，将SpriteFrame缓存起来，在下次使用的时候直接去取。不过跟TextureCache不同的是，如果内存池中不存在要查找的图片，它会提示找不到，而不会去本地加载图片。
* TextureCache时最底层也是最有效的纹理缓存，缓存的是加载到内存中的纹理资源，也就是图片资源。
* SpriteFrameCache精灵框帧缓存，缓存的时精灵帧。
*SpriteFrameCache是基于TextureCache上的封装。缓存的是精灵帧，是纹理指定区域的矩形块。各精灵帧都在同一纹理中，通过切换不同的框帧来显示出不同的图案。
-- http://www.cocoachina.com/bbs/read.php?tid=200359 cocos2dx版主ivenyang
个人的理解就是：将许多小图或者是琐碎的图，使用工具打成plist的形式，然后在将这个plist放入到缓存池中去，在使用的时候，添加一下就可以直接使用了。
3、AnimationCache
这个是动画的缓存。对于精灵动画，每次创建时都需要加载精灵帧，然后按顺序添加到数组，再用Animation读取数组创建动画。这是一个非常烦琐的计算过程。而对于使用频率高的动画，例如角色的走动、跳舞等，可以将其加入到AnimationCache中，每次使用都从这个缓存中调用，这样可以有效的降低创建动画的巨大消耗。示例如下：假设有两组动画dance_animate,sleep_animate.
//将其加载到缓存中
AnimationCache::getInstance()->addAnimation(dance_animate,"dance");//第二个参数是动画存入缓存时对应的key
AnimationCache::getInstance()->addAnimation(sleep_animate,"sleep");
//读取缓存中的动画
auto dance_animate = AnimationCache::getInstance()->animationByName("dance");//根据key从缓存中提取动画
auto sleep_animate = AnimationCache::getInstance()->animationByName("sleep");
---- http://blog.csdn.net/star530/article/details/23612487 CSDN的star特530博客
4、cc.SpriteBatchNode 批次渲染
cc.SpriteBatchNode的初始化只要一张图片，也就是那张大图。然后把所有用到那张大图里面的小图的sprite都加到cc.SpriteBatchNode的child，绘制效率就会提高。
创建SpriteBatchNode的时候，如果想要批量渲染，那么需要将它的_useCache设置为true，这样子就可以缓存所有SpriteBatchNode的子节点到画布中了，然后从缓存中提取图片放入到想要的位置，这样就减少了渲染的次数。
一个cc.SpriteBatchNode只能有一个纹理（一个图片文件或者一个纹理图集）.
只有包含在这个纹理中的cc.Sprites才能够加入到cc.SpriteBatchNode中
所有加入到cc.SpriteBatchNode中的cc.Sprites都会在同一次WebGL渲染调用中被渲染
如果cc.Sprites没有加入到一个cc.SpriteBatchNode中，那么每个cc.Sprite都将调用一次WebGL的渲染过程，这样效率会很低
限制:
- 只有cc.Sprite类型或者继承于cc.Sprite类型的结点才可以加入
比如particles, labels 还有 layer都不能加入到cc.SpriteBatchNode中
- 所有子节点要么是带有锯齿要么是防锯齿的，不能同时拥有两种类型的子节点
这是因为锯齿效果是纹理的一个属性，而所有在cc.SpriteBatchNode中的精灵都使用同一个纹理。
---- 以上来至于官方API http://cn.cocos2d-x.org/doc/jsdoc/symbols/cc.SpriteBatchNode.html
普通的渲染只是：准备，渲染，清除。准备，渲染，清除。...准备，渲染，清除。
而cc.SpriteBatchNode 就是准备 ，渲染，清除 一次就ok
使用方法：
先创建一个 spriteBatchNode，然后在将所使用的图片sprite添加到spriteBatchNode里面去，这样就可以直接渲染出来所有的图片了。
本人的理解：新建一个spriteBatchNodeCavas画布，然后将所有想要的图片就放入到这个画布里面去，最后的时候，直接渲染一次spriteBatchNodeCavas就可以将所有的图片都展示出来，个人觉得挺像是bake的。
也可以参考cocos2dx的CCSpriteBatchNode http://cocos2d.9tech.cn/news/2013/0925/29100.html 这个有具体例子，更加直观一些