骨骼動畫中使用網(wǎng)格渲染(Mesh)來提升表現(xiàn)力已經(jīng)越來越常見了，因此從推出 Spine 骨骼動畫支持開始，架不住社區(qū)內(nèi)要求支持網(wǎng)格渲染的呼聲，Cocos Creator v1.4版本的引擎中一次性的升級了 Spine 和 DragonBones 兩大骨骼動畫格式的運(yùn)行時庫，在 WebGL 渲染模式和原生平臺上都可以完美顯示網(wǎng)格渲染了。
自發(fā)布，Cocos后臺迅速被來自五湖四海的技術(shù)答疑和熱情點(diǎn)贊淹沒。Cocos君不眠不休加班加點(diǎn)嘔心瀝血(盡瞎bibi)跪求辦公室?guī)孜患夹g(shù)大牛給有疑問的小萌新們再詳細(xì)介紹介紹，機(jī)會有限，先看先得!
什么是網(wǎng)格動畫
不同于逐幀動畫，網(wǎng)格動畫最大的優(yōu)勢在于：在不增加圖片資源的基礎(chǔ)上實(shí)現(xiàn)炫酷的動畫效果。
所謂網(wǎng)格就是在圖片矩形邊界內(nèi)自定義多邊形，提高紋理集的空間使用率。網(wǎng)格動畫就是通過移動網(wǎng)格點(diǎn)來變形圖片，實(shí)現(xiàn)網(wǎng)格的扭曲，拉伸，轉(zhuǎn)面等偽3D效果的動畫。
在網(wǎng)格動畫的理論基礎(chǔ)上，可以實(shí)現(xiàn)圖片的自由變形，以及蒙皮動畫。目前最流行的兩個動畫編輯器 Spine 和 DragonBones 都有支持網(wǎng)格動畫的功能。
注：Spine 超鏈接
DragonBones
如何在Creator中使用網(wǎng)格動畫
在 Creator 1.4 版本中，實(shí)現(xiàn)了 WebGL 環(huán)境下對 Spine 和 DragonBones 兩種網(wǎng)格動畫的支持。下面就以 Spine 動畫資源的使用為例介紹一下如何使用網(wǎng)格動畫。
首先，將 Spine 動畫資源導(dǎo)入到 Creator 中，如下圖：
然后，通過拖拽動畫資源到場景中創(chuàng)建一個骨骼動畫節(jié)點(diǎn)：
根據(jù)實(shí)際情況調(diào)整節(jié)點(diǎn)和 Spine 組件的屬性，并保存場景：
最后，點(diǎn)擊預(yù)覽場景就可以看到動畫效果了：
在這個動畫中，正在靈活甩動的尾巴就是通過 Spine 中的網(wǎng)格動畫功能來實(shí)現(xiàn)的。
同樣，我們也可以在 Creator 中使用 DragonBones 動畫資源。具體使用方法可自行參考 Creator官網(wǎng)中的文檔。 這里簡單給大家展示一下運(yùn)行效果(其中翅膀和尾巴的動畫也是通過網(wǎng)格動畫來實(shí)現(xiàn)的)：
相關(guān)鏈接
Creator 1.4 版本下載
Creator 示例工程
Spine 編輯器
DragonBones 編輯器
如轉(zhuǎn)載涉及版權(quán)等問題，請作者與我司聯(lián)系，我司將在第一時間刪除或支付稿酬。
粵公網(wǎng)安備44010602000283號
全部評論