Cocos Creator 资源加载流程剖析【五】——从编辑器到运行时

我们在编辑器中看到的资源，在构建之后会进行一些转化，本章将揭开Creator对资源进行的处理。

资源处理的整体规则

首先我们将Creator的开发和运行划分为以下几个场景：

编辑器

当我们将资源放到编辑器中时，Creator会为每个资源生成唯一的uuid以及meta文件，并在项目的library目录下生成对应的json文件来描述这个资源的信息，而uuid与资源的映射关系被放在library目录下的uuid-to-mtime.json文件中。由于资源的引用关系是靠uuid来维系的，所以我们可以在Creator中随意地修改资源文件名、移动资源路径，而不用担心资源的关联丢失问题。

我们在编辑器中编辑的prefab、anim、场景等文件本质上是一个json文件，Cocos Creator 设计了一套json规则用于描述各种资源，prefab的json描述了prefab的结构以及每个节点的属性，但部分属性会放到meta文件中，一般是针对该资源在编辑器中的设置。

预览

预览的时候使用的是library目录下的资源，不仅仅是项目assets目录下的所有资源（包括未被引用到的资源），引擎提供的一些默认资源也可以在library目录下找到。预览的模板位于引擎安装目录下的resources/static/preview-templates，程序的启动脚本为boot.js。

构建

项目构建之后，资源会从library目录下移动到构建输出的目录中，基本只会导出参与构建的场景和resources目录下的资源，及其引用到的资源。脚本资源会由多个js脚本合并为一个js，各种json文件也会按照特定的规则进行打包（所谓的packAssets）。

各种资源的处理

• 基础图片

图片的meta文件大概如下所示，除了ver和uuid之外，还有3个属性：

• Type有sprite和raw两种，如果选择了raw，那么就不会有subMetas等属性，而且在Creator的资源管理器面板中可以发现这个图片左边的小箭头消失了。
• WrapMode为环绕模式，包含clamp差值和repeat重复两种，但这里的设置在Creator中一般是无效的，因为在Sprite组件中是用Type进行控制，它提供了九宫格、平铺、填充等方式。
• FilterModel提供了3种差值过滤选项，Point点差值、Bilinear双线性差值、Trilinear三线性差值，性能依次下降，效果依次提升。

这里的subMetas描述了一个SpriteFrame信息，详情可参考Sprite组件

{
  "ver": "2.0.0",
  "uuid": "a0576798-bdf4-4f06-972e-5557dee6ee1b",
  "type": "sprite",
  "wrapMode": "clamp",
  "filterMode": "bilinear",
  "subMetas": {
    "boss_b_hp1": {
      "ver": "1.0.3",
      "uuid": "5425ad9a-e2e0-4c6e-825b-c3ea43b09e4e",
      "rawTextureUuid": "a0576798-bdf4-4f06-972e-5557dee6ee1b",
      "trimType": "auto",
      "trimThreshold": 1,
      "rotated": false,
      "offsetX": 0,
      "offsetY": 0,
      "trimX": 0,
      "trimY": 0,
      "width": 78,
      "height": 78,
      "rawWidth": 78,
      "rawHeight": 78,
      "borderTop": 0,
      "borderBottom": 0,
      "borderLeft": 0,
      "borderRight": 0,
      "subMetas": {}
    }
  }
}

这样的一个图片会在library/imports/xx目录下生成3个文件（如果将图片的type设置为raw则不会有SpriteFrame对应的json文件），分别是以图片uuid为文件名的json文件和png，以及SpriteFrame的uuid为文件名的json文件。

Texture对应的json文件内容如下，每一个纹理都会生成一个这样的重复的文件：

{
  "__type__": "cc.Texture2D",
  "content": "0"
}

SpriteFrame对应的json文件内容如下：

{
  "__type__": "cc.SpriteFrame",
  "content": {
    "name": "boss_b_hp1",
    "texture": "a0576798-bdf4-4f06-972e-5557dee6ee1b",
    "atlas": "",
    "rect": [
      0,
      0,
      78,
      78
    ],
    "offset": [
      0,
      0
    ],
    "originalSize": [
      78,
      78
    ]
  }
}

在构建之后，资源会被导出到res目录下，json文件放在import目录下，png等资源文件放在raw-assets目录。

• 图集资源

图集分为plist和图片两个文件，图集图片的meta和普通图片的meta一样，而plist文件的meta记录了图集中所有碎图的信息。主要有ver、uuid、rawTextureUuid、size、type以及subMetas等属性，subMetas记录了每一个碎图的meta信息，结构和普通图片的meta一样。

{
  "ver": "1.2.4",
  "uuid": "315d61c8-b6c8-4635-b517-f868dd8b3495",
  "rawTextureUuid": "01979186-b9a2-4130-a307-a2eacb5fe30f",
  "size": {
    "width": 1024,
    "height": 1024
  },
  "type": "Texture Packer",
  "subMetas": {
    "role1001-move1.png": {
      "ver": "1.0.3",
      "uuid": "8e225dbc-7905-416f-a7ac-0730893ad30d",
      "rawTextureUuid": "0