【spine】原理介紹和程序實現

　　忽然間，微博上被@了，一看原來是以前的關於介紹 spine 的文章引發的。而後就是一陣慚愧，又開了一坑，而後就木有了。雖然，一直在研究 spine，可是的確沒寫下來相關的內容。因而，趕忙，補了一些內容。

　　官網內容轉發，沒啥技術含量。我本身寫的運行庫也完成了，雖然還須要打磨，可是比官方的更符合2dx 的風格。作了許久以後，對 spine 的理解更深了一點，而後就胡亂介紹下設計思路和爲何這麼作。

概念

---

先來介紹下 spine 中的一些術語和概念

• Bone 骨骼

spine 是骨骼編輯器,因此骨骼是基礎。每一個骨骼都會有旋轉，縮放，位移的屬性。而後骨骼能夠有子節點，最終造成了一個樹型結構。能夠對應2dx 裏面的 node

• Slot 插槽

骨骼上的一個掛載點。不是全部的骨骼上都能放置東西的，由於不少骨骼其實只參與計算，真正重要的骨骼，也就是須要掛載其餘東西的骨骼上必須放置插槽。slot 只是用來標記特殊的骨骼位置，自己只有一個顏色屬性，也能夠說，重要的骨骼節點能夠稱爲 slot。

• Attachment 附件

掛在插槽上的內容，能夠是圖片，也能夠是斷定區域，只要是你能想到的東西，均可以當成附件。

• Draw order 描畫順序

骨架上插槽的一個順序列表。用來控制描畫的前後順序。

• Animation 動畫

基於時間軸的一個骨骼狀態列表。

• Skin 皮膚

一套附件的集合，相似於換裝。

• Bounding Box 邊界框

用來指定骨骼上的邊界的多邊形的區域。

• atlas 圖集

貼圖集合，小圖片合併在一塊兒，就成了圖集。

實現

---

上面大體介紹了一些基本概念，而後咱們從實現角度上來講下爲啥這麼設計。

首先，假設咱們須要一個骨骼系統。很酷，是的，最近的確比較火。因而，咱們就設計了一個樹狀的骨架，每一個節點就是（Bone）。

很簡單啊，再想下，骨骼上要放圖片啥的，因而咱們就要能訪問到特定的骨骼，遍歷太傻了，好吧，咱們給這些骨骼加個名字，這樣就能訪問到具體 骨骼了，那這些名字就叫 slot。

好吧，可能有些人以爲，slot 和 bone 本質上同樣，爲啥須要分開呢，不必的。我只能說事情其實並不簡單，來想下，咱們已經有了一個完美的骨架，圖片也在應該在的骨骼上了。那咱們該如何顯示圖片麼？遍歷麼，從根結點開始，一直到最下層的節點，無論你用啥排序，這個順序是固定的，可是現實老是很殘酷，不少時候，咱們須要不停調整圖片描畫的順序，也就是調整樹的節點排序，啊，好麻煩。那怎麼辦，咱們指定下骨骼描畫的順序吧（Draw order），這些特定的骨骼也就是 slot。

你看，這下完美了，也就是 bone 用來計算位置，slot 用來控制描畫。

完美的骨骼系統，必定要有碰撞區域（bounding box），這和圖片差很少,一個用於顯示,一個用於邊界判斷,好吧,那就抽象成一個概念叫（p_w_upload），因而，slot 上就能夠附加不一樣的 p_w_upload 了。

終於能夠換附件了，可是一個一個換好累。因而，咱們把一組附件合在一塊兒，組成了 skin。這下簡單了，一換 skin，整個世界就變樣了。

啊，作着作着，就發現圖片太多了，要優化啊。怎麼辦，簡單，把小圖片合在一塊兒，每一個圖片對應了一個大圖裏面的一個區域，這就是 atlas。

啊，不早了，先說到這裏吧，下次有空繼續。