What’s AlloyStick
AlloyStick 是首款專為HTML5開發(fā)的2D骨骼動畫引擎。可以用于HTML5動畫開發(fā)、HTML5游戲開發(fā)。AlloyStick 主要由骨骼動畫引擎和骨骼動畫編輯器兩部分組成。骨骼動畫編輯器提供強大的骨骼動畫編輯功能,拖拽骨骼組合角色,通過設置動畫關鍵幀,輸出動畫數(shù)據(jù)。js動畫庫根據(jù)輸出數(shù)據(jù),依靠強大的自動補間和骨骼關系,就可以制作出逼真、生動的Canvas骨骼動畫,可以暢快的運行在PC、手機、平板等設備里。
AlloyStick 官網(wǎng):http://alloyteam.github.io/AlloyStick/
Why is Skeleton animation ?
骨骼動畫將動畫對象抽象出拆分成一個個層級關系的骨骼,骨骼上綁定對應的部件貼圖,通過對各個骨骼在關鍵幀進行移動,縮放,旋轉(zhuǎn)等操作來實現(xiàn)動畫對象的行為動畫效果。
目前HTML5游戲動畫都是使用精靈圖來實現(xiàn)的,設計師需要繪制大量的精靈圖,逐幀播放產(chǎn)生動畫效果。原始精靈圖動畫帶來最大的兩個問題是:大量的位圖資源和動畫不可。相對于spriter動畫,骨骼動畫能有以下幾個突出的優(yōu)勢
基于骨骼運動的角色會看上去更生動逼真、富有生命
相對于Spriter動畫,骨骼動畫的圖片容量可以減少90%
更精準的碰撞檢測,結合物理引擎,實現(xiàn)逼真動畫效果
動畫自動補間
結合Spriter動畫制作更完美的動畫
骨骼可控。動畫過程中,骨骼可以通過js控制變化,例如:通過射擊把敵人的骨骼擊中脫落。
輕松實現(xiàn)角色裝備更換,甚至可對某骨骼做特殊控制或事件監(jiān)聽
相應的,骨骼動畫在CPU運算上會帶來一定的消耗。
for What ?
本身骨骼動畫應用地方最多就是游戲,所以,第一版整體設計都是偏向于HTML5游戲。比較特別的是,用戶群很大一部分是程序員。所以,在編輯動畫整體設計上都趨向于小白化,即使不懂任何動畫軟件也能快速上手。同時,我們將來會提供一套百搭的火柴人素材,并且可以矢量輸出,讓沒有設計師的單身程序員擺脫木有素材的困擾(依舊不能擺脫單身)。
對比于其他的骨骼動畫引擎,我們趨向于簡單化,就像火柴小人一樣,簡單卻靈活生動,這也是AlloyStick名字由來?!境绦騿T也能做出非常棒的骨骼動畫】,這是我們的愿景。
后繼拓展:Flash動畫在移動上夭折,那么我們希望未來AlloyStick能定制化,兼容場景式HTML5動畫,至少原理上是相通的。
How is it ?
AlloyStick只負責動畫部分,不帶游戲引擎,最終版本是能夠嵌入第三方游戲引擎中。當然你也可以期待我們的游戲引擎,帶上碰撞檢測的特性,這樣就會變得非常有趣?,F(xiàn)版本是:我們只做動畫的實現(xiàn),跟游戲引擎獨立分離。
目前,AlloyStick還處于開發(fā)階段。js庫部分還有很多計劃中的功能沒有實現(xiàn)。我們需要把時間投放在動畫編輯器上。因為,我們的動畫編輯器還在加班加點中。。。