代碼生成器插件與Creator預製體文件解析

前言

1. 以前寫過一篇自動生成腳本的工具，可是我給它起名叫半自動代碼生成器。之因此稱之爲半自動，由於我以爲全自動代碼生成器應該作到兩點：代碼生成+自動綁定。以前的工具只作了代碼生成，並無作自動綁定，因此鄙人又花時間研究了CocosCreator的預製體文件，實現了自動綁定的能力，而且支持了插件使用方式。

2. 本篇內容，不只僅是宣傳本身的插件工具，還會幫助你們分析一下Creator的預製體文件格式，使購買插件的同窗能夠將插件價值最大化，也能讓讀者對Creator的預製體文件有所瞭解。

Creator 預製體文件格式分析

1. 首先咱們展現一小段預製體文件。

[
  {
    "__type__": "cc.Prefab",
    "_name": "",
    "_objFlags": 0,
    "_native": "",
    "data": {
      "__id__": 1
    },
    "optimizationPolicy": 0,
    "asyncLoadAssets": false,
    "readonly": false
  },
  {
    "__type__": "cc.Node",
    "_name": "LoginView",
    "_objFlags": 0,
    "_parent": null,
    "_children": [
      {
        "__id__": 2
      },
      {
        "__id__": 6
      },
      {
        "__id__": 18
      },
      {
        "__id__": 21
      },
      {
        "__id__": 33
      },
      {
        "__id__": 42
      },
      {
        "__id__": 63
      },
      {
        "__id__": 84
      }
    ],
    "_active": true,
    "_components": [
      {
        "__id__": 105
      },
      {
        "__id__": 106
      }
    ],
    "_prefab": {
      "__id__": 107
    },
    "_opacity": 255,
    "_color": {
      "__type__": "cc.Color",
      "r": 255,
      "g": 255,
      "b": 255,
      "a": 255
    },
    "_contentSize": {
      "__type__": "cc.Size",
      "width": 960,
      "height": 640
    },
    "_anchorPoint": {
      "__type__": "cc.Vec2",
      "x": 0.5,
      "y": 0.5
    },
    "_trs": {
      "__type__": "TypedArray",
      "ctor": "Float64Array",
      "array": [
        480,
        320,
        0,
        0,
        0,
        0,
        1,
        1,
        1,
        1
      ]
    },
    "_eulerAngles": {
      "__type__": "cc.Vec3",
      "x": 0,
      "y": 0,
      "z": 0
    },
    "_skewX": 0,
    "_skewY": 0,
    "_is3DNode": false,
    "_groupIndex": 0,
    "groupIndex": 0,
    "_id": ""
  }
]

2. 當你第一次看到這個文件的時候可能會有所疑惑，此文件是一個一維數組的json對象。
   數組第一個位置是預製體文件的描述能夠忽略。第二個位置的對象就是這個文件根節點對應的屬性了。也是最重要的部分。從數據的_children 和_components字段能夠看出，引擎是根據__id__這個字段來尋找其餘數據的。只不過這個__id__並不是你所理解的id，而是數組的索引位置。而且配置中全部涉及到尋找其餘數據都是用的這種__id__方式。包括給本身的腳本組件綁定節點。

3. 因爲咱們是要導出和綁定其中的屬性，因此咱們只關注__type__,_name,_childern,_components這幾個屬性就能夠了。

4. __type__： 是一個比較重要的屬性，對於普通的組件，類型會是cc.Node,cc.Sprite,cc.Button之類的。對於腳本的類型比較特別，它並非你定義的類名，而已一串通過處理的字符。可是它的特色就是長。因此我會用長度是否大於20來判斷是不是腳本組件。
   下方是我已經作好綁定腳本的配置內容。也說明若是你要給預製體添加腳本也就是給預製體的數組添加一個下面格式的配置而已。經過下方的配置也能夠看出我給這個腳本綁定了start$VButton，login$VLabel，login$\VLabel，show$VRichText四個變量和testItem$ATestItemView一個數組。

{
    "__type__": "3e347nRcdVAiYpq6icd+8+w",
    "_name": "",
    "_objFlags": 0,
    "node": {
      "__id__": 1
    },
    "_enabled": true,
    "start$VButton": {
      "__id__": 14
    },
    "login$VLabel": {
      "__id__": 19
    },
    "back$VButton": {
      "__id__": 29
    },
    "show$VRichText": {
      "__id__": 40
    },
//綁定的是一個數組，長度爲3
    "testItem$ATestItemView": [
      {
        "__id__": 61
      },
      {
        "__id__": 82
      },
      {
        "__id__": 103
      }
    ],
    "_id": ""
  },

5. _name: 它是全部節點的名稱，注意，組件是沒有名稱的，因此咱們處理文件的時候也是從根節點深度遍歷全部的子節點，而後在遍歷節點的時候出理它的組件。
   由於Creator的節點都是有名稱的，並且還有空格，支持重名，這些都是代碼生成器所不容許的。因此若是你想導出一個屬性就要用特定的字符標識。
   好比工具如今使用的是$V標識輸出的是一個變量。$A標識輸出的是一個數組，固然數組還須要名稱都相同。

var TAG = '$V'

var LIST = '$A'

固然這裏邊還有一個問題就是一個節點可能掛了不少組件，那咱們要怎麼出理呢？
首先是作一個篩選，只有給定的組件才能夠輸出
var NORMAL_COMP_LIST = ['cc.Label', 'cc.Sprite', 'cc.RichText', 'cc.Button', 'cc.ScrollView']
其次工具會將名稱後邊加上類型，以區別不一樣的組件的狀況。
所以這也是一個可自定義和擴展的部分。

6. _children: 就是遍歷的節點，咱們不用關心這個配置文件的數組有多長，就從這些子節點深度遍歷就能夠了。

7. _components： 遍歷每一個節點的時候咱們再遍歷一次它的全部組件，而後作上邊咱們說的操做。這樣一個文件走一遍以後咱們的類須要的信息也就生成了。

問題討論

1. 既然腳本的類型是 "type": "3e347nRcdVAiYpq6icd+8+w"，那麼咱們怎麼找到對應的腳本文件的名稱呢？
   當你右鍵一個腳本文件，點擊打開Library中的資源選項，會跳轉到一個js文件中
   
   這個文件有四個特色，一是它的文件名是你腳本的uuid.js。二是文件帶有cc._RF.push(module,，三是帶有類型"3e347nRcdVAiYpq6icd+8+w"。四是帶有腳本名稱。因此你只要查找文件中帶有cc._RF.push(module,字段而且帶有你傳入的類型的文件並返回後處理一下就能夠得到腳本名稱了。固然也能夠獲得路徑並作好import from 的設置。
   這裏可能有人會以爲，搜索整個imports路徑是否是很慢，其實不是，即便再慢還能比手動綁定慢嗎？因此這個速度能夠無視。

2. 怎麼處理的creator自帶的meta機制，我是將代碼生成和自動綁定分紅兩個腳本。代碼生成以後會刷新生成腳本的目錄，而後再調用自動綁定的腳本。刷新預製體目錄。
   這裏邊一直強調的就是刷新指定的目錄，而不是刷新整個assets或者整個Script。緣由是我在使用的時候發現，刷新整個目錄會形成編輯器卡死，體驗很很差，因此當你不設置的腳本目錄不存在就作導出時，creator顯示的目錄位置不是實際中硬盤中顯示的位置，重啓編輯器後纔會正確，就是由於我刷新的目錄是你指定的目錄。若是指定的目錄不存在，目錄會建立，可是不會刷新。
   刷新後的預製體文件可能會報錯，能夠無視，雙擊預製體文件從新查看就能夠了。

3. 如何作到綁定嵌套的預製體的節點？
   首先在導出代碼的時候一旦遇到有腳本的節點就返回。繼續遍歷其餘子節點。這樣你的腳本里就不會聲明其餘腳本要聲明的內容。
   而後在綁定的時候首先會找到應該作數據綁定的腳本，而後再深刻遍歷，當你發現你處理的這個節點上有腳本的時候就會用它身上腳本處理它的子節點。因此若是一個節點有多個腳本就只能綁定第一個腳本的數據。

功能介紹

1. 根據預製體文件生成腳本
   

2. 自定義輸入目錄和輸出目錄
   

3. 自動綁定屬性+數組
   使用$V標識變量
   使用$A標識數組
   屬性名稱默認帶有類型。
   

4. 自動綁定button事件
   

5. 可擴展導出屬性類型
   

6. 自動綁定其餘預製體的屬性，和button事件
   

7. 自動導入使用到的其餘腳本
   

手懶不想本身實現的能夠關注公衆號，進入微店購買。

歡迎掃碼關注公衆號《微笑遊戲》，瀏覽更多內容。

歡迎掃碼關注公衆號《微笑遊戲》，瀏覽更多內容。