精灵帧SpriteFrame的特性是记录一个纹理的指定渲染区域。通过Sprite::createWithSpriteFrame即可渲染纹理的这块区域。这样做的好处就是减少纹理创建次数（glTexImage2D），另一方面可以支持batch drawing。

一、使用示例

语雀内容

二、数据结构


class CC_DLL SpriteFrame : public Ref, public Clonable
{
    // ***********************
    // **** 纹理绘制区域相关数据
    // ***********************
    Vec2 _offset;
    Vec2 _anchorPoint;
    Size _originalSize;
    Rect _rectInPixels;
    bool   _rotated;
    Rect _rect;
    Rect _centerRect;
    Vec2 _offsetInPixels;
    Size _originalSizeInPixels;
    Texture2D *_texture;            // 绘制的纹理
    std::string  _textureFilename;    // 纹理的image file path
    PolygonInfo _polygonInfo;
};

三、创建方法

class CC_DLL SpriteFrame : public Ref, public Clonable
{
public:
    // filename:    texture filename，注意并不会立即加载，而是在getTexture时，“懒加载”
    // rect:        指定在image file纹理的渲染区域。
    static SpriteFrame* create(const std::string& filename, const Rect& rect);
    static SpriteFrame* createWithTexture(Texture2D* pobTexture, const Rect& rect);
    static SpriteFrame* create( 
                const std::string&  filename,        // texture filename
                const Rect&         rect,             
                bool                 rotated,         // 为true，texture顺时针旋转90°
                const Vec2&         offset,         // A specified offset.
                const Size&         originalSize);    // size in pixels of the frame before being trimmed
    static SpriteFrame* createWithTexture(
                Texture2D*         pobTexture, 
                const Rect&     rect,
                bool             rotated, 
                const Vec2&     offset, 
                const Size&     originalSize);
    // Overrides
    virtual SpriteFrame *clone() const override;
    bool initWithTextureFilename(const std::string& filename, const Rect& rect);
    bool initWithTextureFilename(const std::string& filename, const Rect& rect, bool rotated, const Vec2& offset, const Size& originalSize);
    bool initWithTexture(Texture2D* pobTexture, const Rect& rect);
    bool initWithTexture(Texture2D* pobTexture, const Rect& rect, bool rotated, const Vec2& offset, const Size& originalSize);
    SpriteFrame* clone() const {
        // no copy constructor    
        SpriteFrame *copy = new (std::nothrow) SpriteFrame();
        // 注意这里只考虑了_texture，并没有考虑_textureFilename情况
        copy->initWithTexture(_texture, _rectInPixels, _rotated, _offsetInPixels, _originalSizeInPixels);
        copy->setPolygonInfo(_polygonInfo);
        copy->autorelease();    
        return copy;
    }
}

四、SpriteFrameCache

SpriteFrameCache用于从plist文件批量加载并缓存spriteFrame。

1、plist格式

plist文件包含的内容如下：


<!-- **************************************************************** -->
<!-- *************************plist文件格式*************************** -->
<!-- **************************************************************** -->
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">            <!-- 最顶层标签总是plist -->
<dict>                                        <!-- 内容总是一个dict标签中，其实就可以看成是一个字典 -->
  <key>frames</key>                <!-- Dictionary of sprites -->
  <dict>
        <!-- ******************************************************** -->
        <!-- ********************format=3的 frame******************** -->
        <!-- ******************************************************** -->
      <key>grossinis_sister1.png</key>        <!-- sprite frame -->
      <dict>
          <key>aliases</key>                                <!-- 别名，和sprite frame等价 -->
          <array/>
          <!-- 
              difference vector between the original sprite's center 
              and the center of the trimmed sprite.
          -->
          <key>spriteOffset</key>        
          <string>{0,-11.5}</string>                                                    
          <key>spriteSize</key>                    <!-- size of the trimmed sprite -->
          <string>{50,116}</string>    
          <key>spriteSourceSize</key>        <!-- size of the original sprite -->
          <string>{52,139}</string>
          <key>textureRect</key>                <!-- the position of the sprite in the sprite sheet -->
          <string>{{336,1},{50,116}}</string>
          <key>textureRotated</key>            <!-- true if the sprite is rotated clockwise -->
          <false/>
          <!-- 以下是可选属性（optional） -->
          <key>triangles</key>                    <!-- 顶点索引，和下面vertices、verticesUV一一对应 -->
          <string>16 18 19 16 17 18 ......</string>
          <key>vertices</key>                        <!-- 顶点坐标(xy) in sprite coordinates -->
          <string>45 29 48 46 48 65 ......</string>
          <key>verticesUV</key>                    <!-- 纹理坐标(uv) in sprite sheet -->
          <string>380 7 383 24 383 4 ......</string>
          <key>anchor</key>                            <!-- spriteframe ancho point -->
          <string>{0,0}</string>
      </dict>
        <!-- ******************************************************** -->
        <!-- ********************format=0的 frame******************** -->
        <!-- ******************************************************** -->
      <key> grossinis_sister1.png </key>     <!-- sprite frame -->
      <dict>
          <key>x</key>
          <integer>1</integer>
          <key>y</key>
          <integer>0</integer>
          <key>width</key>
          <integer>54</integer>
          <key>height</key>
          <integer>130</integer>
          <key>offsetX</key>
          <real>7.5</real>
          <key>offsetY</key>
          <real>-0.5</real>
          <key>originalWidth</key>
          <integer>91</integer>
          <key>originalHeight</key>
          <integer>139</integer>
      </dict>
        <!-- ********************************************************** -->
        <!-- ********************format=1/2的 frame******************** -->
        <!-- ********************************************************** -->
      <key> grossinis_sister1.png </key>     <!-- sprite frame -->
      <dict>
          <key>frame</key>
          <string>{{336,1},{50,116}}</string>
          <key>rotated</key>                            <!-- format = 2 -->
          <false/>
          <key>offset</key>
          <string>{336,1}</string>
          <key>sourceSize</key>
          <string>{336,1}</string>
      </dict>
  </dict>
  <key>metadata</key>                                <!-- additional information about the sprite sheet -->
  <dict>
    <key>format</key>                                <!-- plist file format，0 ~ 3 -->
    <integer>3</integer>
    <key>textureFileName</key>
    <string>test_polygon.png</string>
    <key>size</key>                                    <!-- size of the texture (optional) -->
    <string>{387,157}</string>    
    <key>smartupdate</key>
    <string>$TexturePacker:SmartUpdate:5d4bd9b2c1ccd4361684aa299e869f18:750202f899ee4528e778a4b6691034fc:2c73308d8a452f8dfa4d258c8527607b$</string>
    <key>textureFileName</key>            <!-- name of the texture's image file -->
    <string>test_polygon.png</string>
  </dict>
    <key>texture</key>            <!-- key标签后面接了一个dict标签，通过这个key可以找到这个dict -->
    <dict>
        <key>width</key>            <!-- key标签后面接了一个integer标签，通过这个key可以找到这个integer-->
        <integer>256</integer>
        <key>height</key>
        <integer>256</integer>
    </dict>
</dict>
</plist>

plist图片制作工具

TexturePacker
Zwoptex
2、数据结构
```cpp

class CC_DLL SpriteFrameCache : public Ref { ValueMap _spriteFramesAliases; PlistFramesCache _spriteFramesCache; // 缓存SpriteFrame的地方 };

/**

used to wrap plist & frame names & SpriteFrames */ // 缓存SpriteFrame，并缓存了plist、frame name、sprite frame之间的对应关系。 class PlistFramesCache {

// ** // *数据结构 // ** // key: plist // value: SpriteFrame // 注意使用的CCMap结构，不是weak reference，因此这里是真正保存spriteframe的地方。 Map _spriteFrames;

// key: plist // value: frame name std::unordered_map> _indexPlist2Frames;

// key: frame name // value: plist std::unordered_map _indexFrame2plist;

// key: plist // value: isFull std::unordered_map _isPlistFull;

// ****************************************************
// *********方 法
// ****************************************************
// 记录 plist <-> frame name <-> sprite frame的对应关系
void insertFrame(const std::string &plist, const std::string &frame, SpriteFrame *frameObj);
// 仅仅删除了plist <-> frame name 映射记录，没有清除spriteframe
// 即只清除了_indexPlist2Frames、_indexFrame2plist里的相关数据
// 注意，并没有清除_spriteFrames的相关数据，即
bool eraseFrame(const std::string &frame);
bool eraseFrames(const std::vector<std::string> &frame);
// 同上，只不过是通过plist删除
bool erasePlistIndex(const std::string &plist);
// 这里将所有数据清空了，包括spriteFrame
void clear();

};

<a name="zTPV1"></a>
## 3、加载SpriteFrame
```cpp
class CC_DLL SpriteFrameCache : public Ref
{
    // 假设plist文件路径："Images/grossini.plist"，则加载plist配置和Images/grossini.png纹理
    void addSpriteFramesWithFile(const std::string& plist);
    // 功能同上，只不过另外指定了texture
    void addSpriteFramesWithFile(const std::string& plist, const std::string& textureFileName);
    void addSpriteFramesWithFile(const std::string& plist, Texture2D *texture);
    // 功能同上，只不过提供的直接就是plist文件的数据
    // auto plist_content = FileUtils::getInstnace()->getStringFromFile(plist)
    // plist name都是by#addSpriteFramesWithFileContent()
    void addSpriteFramesWithFileContent(const std::string& plist_content, Texture2D *texture);
    // 缓存单个SpriteFrame，
    // plist name都是：by#addSpriteFrame()
    void addSpriteFrame(SpriteFrame *frame, const std::string& frameName);
    // 重新加载
    bool reloadTexture(const std::string& plist);
}

4、清除SpriteFrame


class CC_DLL SpriteFrameCache : public Ref
{
    // 清空所有缓存数据，一般是Memory Warning的时候调用。
    void removeSpriteFrames();
    // 清除所有没有被Sprite使用的SpriteFrame，即没有在被渲染绘制的。
    // 也即是清除引用计数=1的SpriteFrameCount
    // call this method after when starting a new Scene
    void removeUnusedSpriteFrames();
    // 清除指定SpriteFrame
    void removeSpriteFrameByName(const std::string& name);
    // 清除指定plist的所有SpriteFrame
    void removeSpriteFramesFromFile(const std::string& plist);
    void removeSpriteFramesFromFileContent(const std::string& plist_content);
    // 清除指定texture的所有SpriteFrame
    void removeSpriteFramesFromTexture(Texture2D* texture);
}

5、获取SpriteFrame


class CC_DLL SpriteFrameCache : public Ref
{
    // 返回指定name的SpriteFrame
    // 注意： 返回的SpriteFrame可能会被SpriteFrameCache清除，因此最好自己retain。
    SpriteFrame* getSpriteFrameByName(const std::string& name);
}

计算机科学

cocos2dx_精灵帧（SpriteFrame）