當耐特

快速入口

不讀文章可以直接拐向這里：

spritecow二代:https://kmdjs.github.io/arejs-tool-sprite/

寫在前面

工欲善其事必先利其器，最近fork了一份spritecow代碼進行了大量升級改造，
作為AlloyRenderingEngine的開發輔助工具之一，確確實實地提高了開發效率，游戲或前端開發更加便利。
因為改造后，有些交互使用點需要特別提醒才能發現，所以特意錄制了gif教程。

取色

取色很簡單，點哪里，該點的顏色會自動生成在下方。

Rect自動識別和導出

矩形區域是系統自動選擇，需要的操作是點擊或者選區，操作后會自動選擇最小能容納該元素的矩形
區域。

這里需要特別注意的是，選擇完畢如果還想要下載導出，需要【鼠標右鍵】點擊該選區。

頂點數據提取

頂點自動提取可以方便地提取容納圖形的最小多邊形，可用于游戲開發中的碰撞檢測等。

這里需要注意的是，提取出來的坐標是相對于圖片右上角的世界坐標，如果需要相對于該多邊形的最小矩形區域
的坐標系統（也就是最小矩形區域的左上角為【0，0】），那該怎么辦？

不用擔心，我特意為導出的坐標寫了一個校正函數，用來將世界坐標轉成相對于矩形區域的坐標，代碼如下：

    function correctingVertexList(vertexList) {
        var firstVertex = vertexList[0],
            minX = firstVertex.x,
            minY = firstVertex.y,
            i = 1,
            len = vertexList.length;
        for (; i < len; i++) {
            var vertex = vertexList[i];
            vertex.x < minX && (minX = vertex.x);
            vertex.y < minY && (minY = vertex.y);
        }
        i = 0;
        for (; i < len; i++) {
            var vertex = vertexList[i];
            vertex.x -= minX;
            vertex.y -= minY;
        }
    }

代碼很容易懂，就不做解釋了。

趕緊體驗一把 :https://kmdjs.github.io/arejs-tool-sprite/

Have Fun！