背景

當我們開發一個canvas應用的時候，出於效率的考量，免不了要選擇一個渲染引擎（比如PixiJS)或者更強大一點的遊戲引擎（比如Cocos Creator、Layabox)。

渲染引擎通常會有Sprite的概念，一個完整的介面會由很多的Sprite組成，如果編寫複雜一點的介面，程式碼裡面會充斥建立精靈、設定精靈位置和樣式的“重複程式碼”，最終我們得到了極致的渲染效能卻犧牲了程式碼的可讀性。

遊戲引擎通常會有配套的IDE，介面通過拖拽即可生成，最終匯出場景配置檔案，這大大方便了UI開發，但是遊戲引擎一般都很龐大，有時候我們僅僅想開發個好友排行榜。

基於以上分析，如果有一款渲染引擎，既能用配置檔案的方式來表達介面，又可以做到輕量級，將會大大滿足我們開發輕量級canvas應用的場景。

本文會詳細介紹開發一款可配置化輕量級渲染引擎需要哪些事情，程式碼開源至Github：https://github.com/wechat-miniprogram/minigame-canvas-engine。

配置化分析

我們首先期望頁面可配置化，來參考下Cocos Creator的實現：對於一個場景，在IDE裡面一頓操作，最後場景配置檔案大致長下面的樣子：

  // 此處省略n個節點
  {
    "__type__": "cc.Scene",
    "_opacity": 255,
    "_color": {
      "__type__": "cc.Color",
      "r": 255,
      "g": 255,
      "b": 255,
      "a": 255
    },
    "_parent": null,
    "_children": [
      {
        "__id__": 2
      }
    ],
  },
 

在一個JSON配置檔案裡面，同時包含了節點的層級結構和樣式，引擎拿到配置檔案後遞迴生成節點樹然後渲染即可。PixiJS雖然只是個渲染引擎，但同樣可以和cocos2d一樣做一個IDE去拖拽生成UI，然後寫一個解析器，聲稱自己是PixiJS Creator