如何用代碼在2D中用骨骼和點陣圖實現類似3D skinned mesh（蒙皮動畫）的動畫效果？

12-28

為了避免更多答題者的誤會，已將題目修改。
=====================================================================
看到大家的回答讓我有點啼笑皆非，也許是我表達的不夠準確，詳細說一下。我並不是想要簡單的做出一個骨骼動畫遊戲而已，而是要spine能做出來的那種效果的骨骼動畫遊戲。回答者好像都並不了解這些，我舉個具體點的，比如，角色的手臂移動，在spine當中是可以做出移動時帶動肩膀及其附近部分發生形變來模擬真實情況的（手臂移動帶動關節附近肌肉皮膚的形變效果），就像3d中的關節與頂點權重，相關頂點會根據與關節權重的多少發生不同形變（類似skinned mesh），而在spine當中也有類似技術，這個東西在2d中該怎麼實現（dragonbones沒有這個技術）？3d原理我很清楚，但是2d點陣圖沒有頂點的概念。當然這只是其中之一，總的來說就是能用骨骼動畫的方式實現逐幀動畫表現力的技術，如果能有資料或思路就太感謝啦。
PS：我指的底層是相對於遊戲邏輯而言的，並不是相對於系統，遊戲引擎相對於遊戲當然是更底層的技術，而我們在說的顯然是引擎級別的問題，求不糾結並著重於主要問題(O_O)。。 ============================================== 很感謝各位的建議，不過我更傾向於學習一些底層技術（底層主要相對於遊戲邏輯來說）方面的東西，因此能提供學習資料可能會更符合我的目標，關鍵問題並不在於spine到底貴不貴，謝謝了。 =============================================== 如題，本人Flash遊戲開發人員，因不滿足於目前遊戲的表現，想要轉骨骼動畫，但是spine2d pro的價格有點高了，而且想多學習一些東西，請教各位，如果我要做出看起來像spine2d做出的遊戲，應該學些什麼？應該從哪裡入手？最好附上學習資料，以及評估下可能的時間和其他成本。

看到樓主提到dragonBones，勾起了很多從前的回憶，簡單談談我對這個問題的看法。
首先想給dragonBones打打廣告，這個項目最初的原型並非Adobe做的，不過整個框架完善到現在能夠成為一款商業級的2D骨骼系統，可以說是Adobe的功勞，具體來說，是Adobe中國還未解散時由我所在的Flash Runtime組做的，整個框架的主要貢獻者是我在Adobe時的mentor劉晨光和Away3D在中國的作者之一，我的同事廖誠兩位。當時我大三，這個框架其中也多多少少有一些我的貢獻。目前據我了解Egret已經在HTML5的平台上移植了這款原來在AS3上的引擎，主要負責人正是我師父劉晨光，所以如果想要在H5用骨骼動畫，可以考慮使用Egret，算是幫老同事打打廣告~
好，進入正題，說點乾貨。
首先還是從原理開始解釋骨骼動畫，我們常說的骨骼動畫一般分為兩個部分：
1.骨架（Skeleton）
2.蒙皮（Skin）
這兩個部分從邏輯上可以說是完全獨立運作的兩個部分：
第一部分骨架涉及的數據包括兩個，一是骨架的拓撲結構（也就是連接、父子關係），這個部分的描述一般是使用一棵樹來表達和存儲；二是骨架的各種pose，也就是每個動作對應的整個骨架的位置信息，每根骨頭的位置信息在一個關鍵幀都需要單獨用一個矩陣來表達，這個矩陣描述了這根骨頭在其父骨骼坐標系下相對於其初始pose的位置變換，包括縮放（某些情況下並不支持縮放）、平移和旋轉，在3D世界裡這個矩陣是4*4的，在2D世界裡相應的是3*3的矩陣
第二部分蒙皮則表達的是依附在骨骼上的頂點的信息，這裡就涉及了一個概念叫做綁定（Binding），我希望通過這塊的原理說明來解釋為什麼dragonBones沒有提供你需要的動畫類型。骨骼綁定的過程就是確定每個頂點受哪幾根骨骼的影響，每根骨骼影響的權重有多大，譬如肘部的皮膚可能同時受大臂和小臂兩根骨頭的影響，而遠離手肘的部分可能就只受小臂骨頭影響。一般在3D骨骼動畫里，每個頂點最多支持4-8根骨骼同時影響它就已經可以很精確地表達整個蒙皮的效果了。而在dragonBones中，每個頂點只受一根骨骼的影響，正因如此，它不會發生形變。

好，接下來講為什麼dragonBones不提供這個功能，這是因為在3D遊戲中，頂點是表達一個物體的基本數據結構，一個物體是由頂點集合構成的，而在2D遊戲中，像素通常不是基本的數據單元，一個2D模型的基本單元是圖塊，也就是說，你能直接操縱到的，是一個個的圖塊，而不是一個個的頂點或者像素，正因如此，在2D遊戲中通常不存在3D遊戲中複雜的頂點shader，也不存在貼圖紋理的概念。當你需要變形的時候，你需要的是2D模型的每個像素點都有自己的骨骼索引和權重信息。想想我們常使用的sprite sheet，它的基本單位是幀，這是能夠操作的最小單位。dragonBones的初衷是減小資源量，同時實現更為細粒度的動作（比如互動式的），讓美術從繁瑣的逐幀繪製Sprie Sheet的工作中解放出來，所以它把一個角色每一幀的sprite sheet拆分成一個個更小的基本圖塊，譬如胳膊，腿，軀幹等等，而每個基本圖塊仍然是最小的可控制單位。所以我們可以給每個基本圖塊綁定一根骨骼，並且也只能綁定一根骨骼，因為dragonBones是沒有頂點概念的。
而dragonBones之所以沒有頂點的概念，最根本的原因是這完全不符合傳統2D美術資源的製作流程，如果要引入頂點，實際上是相當於把每個人物模型在2D平面上三角化，然後使用類似3D引擎中的vertex shader的思路來傳入2D模型的2D頂點位置、UV信息以及相應的貼圖。要知道，dragonBones以及類似的2D骨骼系統是為了簡化美術的工作流而不是增加！！！如果每個2D人物的製作不是從手繪開始而是從類似3D建模一樣的工作開始，那2D遊戲的成本開銷無疑會增加很多，這違背了這個工具的開發初衷。而且在引入這樣的系統後，整個渲染流程相當於完全推翻，你不可能使用starlling已有的渲染系統完成渲染，因此你只能自己實現一套基於頂點的2D渲染器，而且這個渲染器還必須是基於GPU的，因為CPU根本負擔不起這樣的逐頂點甚至逐像素的操作。
當然，樓主的問題是如何在遊戲中引入可變形的骨骼動畫，我到現在還沒回答這個問題。不過說到這一步，其實相應的實現策略就已經在一定程度上說出來了，具體做法，可在dragonBones的基礎上這樣做修改：
1.保留dragonBones引擎中關於骨架Skeleton部分的實現，包括如何序列化、反序列化、骨骼在引擎中的樹狀表達結構，但在最終計算每個實際渲染部分的位置時，使用新的基於weight linear blend的渲染，只引用骨架的變換矩陣。
2.渲染部分，有且只有自己實現一套類似3D骨骼動畫渲染器的方式，這部分是這個想法的實現難點之一。
3.工具部分，我剛才一直沒提到的，也是最複雜的。因為這件事必須要美術預先給你導出帶有權重的像素集或者2D頂點集。基於現有的美術工具不可能做這麼specific的事情，那就必須自己做一個給2D角色網格化的工具、刷UV的工具、刷權重的工具。當然如果真的是商業遊戲有這個需求，你們可以考慮開發這樣的工具，畢竟它比開發一個同功能的3D工具還是簡單不少，但如果只是自己試驗試驗，那你可能需要相當一段時間考慮如何實現這個工具以及如何讓工具有效地輔助你進行三角化和刷權重、布UV。前提是你有一定的3D建模軟體的使用經驗。
dragonBones是一個優秀的2D框架，它從架構上簡化了美術的工作流，同時減少了資源量，但是單從人物表現的逼真程度來講這樣的2D骨骼動畫還是不如傳統的sprite sheet的視覺效果好，這就好比理論上在3D遊戲中，頂點動畫永遠比骨骼動畫更具有表現力。但在3D遊戲中前者的成本太高，相比來說後者優勢就很明顯，但在2D遊戲中，如果你希望你的人物表現更加栩栩如生，那麼sprite sheet+一個優秀的美術顯然是不錯的方法。

很簡單，用 3D SkinMesh 的方式去做 2D。
需要用多邊形來建模 2D 角色，把頂點的 z 坐標忽略掉，比如統一設為0。
同時平移、旋轉、放縮變換僅僅對 x 和 y 坐標生效，其他的邏輯不變。
如果你不清楚 3D SkinMesh 怎麼做，我們可以另開一題來回答。
個人推薦閱讀這本書，有非常詳細的講解 Introduction to 3D Game Programming: With Directx 11/Frank D. Luna-圖書

有些回答沒搞明白骨骼動畫和蒙皮動畫的區別，當然題主你的表達能力也有點問題啦……

spine你可以買個基本版的，幾十美金而已，做普通的2D動作，應該也夠用了。
免費的flash下面有dragonBones

DragonBones 4.5 會支持這個功能
中文網站：products-dragonbones-Egret Engine-免費開源HTML5遊戲引擎
英文網站： DragonBones

16-5-15更新內容：
DragonBones 4.6發布了支持骨骼綁定權重和蒙皮動畫。發兩段視頻和大家分享
視頻封面用DragonBones製作動畫—在線播放—優酷網，視頻高清在線觀看視頻DragonBones製作蒙皮動畫—在線播放—優酷網，視頻高清在線觀看視頻

謝邀。如果你打算換一種技術實現，可嘗試以下方案：
Cocos2D-x + DragonBones
需要C++背景。

Unity3D + UNI2D 2.0
值得一提的是UNI2D不僅支持骨骼動畫，也支持幀動畫。

實際上Spine並不貴。另外Spine其實可以導出到Cocos2D-x和Unity3D上，也許是目前做骨骼動畫的最佳選擇了。

直接在2d里寫2d的骨骼動畫效率低，也肯定差。因為2d根本沒有物體的體積數據啊，你拿什麼來優美的變形。
非要用2d來2d變形也無非就是預先設立好一堆參數來產生偽裝的變形效果。
但是與其這樣偽裝，不如直接用3d的模型預渲染輸出2d的圖片，發行之前先預渲染好數據，這樣不會拖慢手機端的速度。
如果是PC端，一般都是直接做3d的卡通渲染唄，只是光照模型不強調立體感而已。

第一次聽說骨骼動畫居然應用到2d上面，看來資源一點都不是問題了。也算是我孤陋寡聞了。上面提到的Spine2D,DragonBones倒是覺得真沒必要一定要用他們。

既然自己寫flash遊戲，所以題主趕緊自己去開發一個，真的寫出來了巨方便，哪裡覺得不爽都可以改。題主趕緊去寫吧。我還記得13年當初完全不懂as3直接開寫編輯器，也不過花了兩周完成了下面的編輯器。題主肯定比我厲害，期待大作。

題主「不滿足於目前遊戲的表現。」

我倒是挺滿足的，我反正完全跟不上呀。

題主跟我思想一致，是要學習技術，題主不是要使用！推薦cocos2dx推薦unity的等等xxx成熟工具流的可以省省了。
正巧昨天也為了了解2d骨骼，裝了dragonbone和spine對比看了一下，答主沒有實踐經驗，也是半吊子，說錯請猛噴。
dragonbone：
龍骨那個好像只是做了關鍵幀插值，就是在flash里擺好關鍵幀，然後把movieclip屬性在一段時間內tween過去下一個動作就可以了，然後調整每個部件tween的時間差，讓各個動畫錯開，所以看起來比較自然。優點就是對於flasher好上手，缺點雖然他的demo里動畫都很漂亮，但個人覺得，只能擺關鍵幀，不能實時看效果，要手動一個一個調時間差再看效果，應該很難做出想像中的動畫。它面板里有骨骼，但那個骨骼不能動，好像只是為了重用補間動畫，弄個假的。
spine：
這個軟體昨天裝後還不會用，需要看教程（不會用還來答個屁）。這應該是缺點。但看介紹，動上肢，下肢可以跟著動，支持IK就知道是真骨骼了，應該跟3d骨骼原理一樣，簡化版。

題主問需要具備哪些知識，如果要做dragonbone，應該可以直接動手了。。。
如果要做spine對flasher要求比較高，要跳出flash api思維，補圖形學和數學知識了（我也正在補），一切變換都是矩陣~~~
骨骼變換的核心原理就是矩陣相乘，首先要搞懂怎麼用矩陣變換2d圖片，旋轉，移動。不要管flash的DisplayObject和Matrix3D類，要自己實現矩陣，或看懂Starling等在stage3d里是如何實現的，這裡離圖形學和數學近一點。
旋轉矩陣移動矩陣相乘順序，先移動後旋轉，先旋轉後移動的區別，然後矩陣相乘有什麼效果，知道flash的parent變換他的child就跟著變換就是一個矩陣相乘的結果。然後就差不多了，動畫就是記錄關鍵幀的矩陣，然後變換而已，關於IK，我還沒學到那，先不說了

挖下墳，發現沒人能給出真正有價值的回答。
這個涉及到的本質是圖片變形技術。再具體一點的就是網格式圖片變形。國外有相關的演算法論文（國內的不用看了，都是抄國外的）。關於圖片變形已經有很成熟的演算法了。
附論文網址，http://kucg.korea.ac.kr/seminar/2006/src/PA-06-22.pdf。相關的演算法論文國外還有。
題主可以想像下美圖秀秀的瘦臉功能，都是一個意思，但是美圖秀秀的演算法不是基於網格的。

另外，spine在github上有個開源API，基於C的，至於其中有沒有具體的演算法我沒自己看過，題主可以自己去演技下

一個3D骨骼動畫 2D版超精簡Demo，原理和實現幾乎同3D一致
C#寫的，看完就懂了

為什麼不用unity？
uni2d插件更符合你的要求
可以看到源碼，學習思路