如翼視點
首頁>如翼視點>文章內容
【干貨】用2D資源實現3D動畫效果
發表時間:2023-09-01
本文將以圖文教程的形式分享養成類互動游戲“天天領雞蛋”的動效制作過程。


項目背景

在設計好游戲的整體視覺后,讓整個游戲“動”起來就成了最迫切需要解決的問題。動起來的小雞才會更加可愛!作為一款3D視角的互動小游戲,互動性自然是最重要的。動效的設計一方面能夠讓畫面活起來,另一方面使用戶能立即獲得操作反饋,提升游戲體驗。


一、小雞動效設計

初始設計了呼吸、張望、跳躍3個動作,在待機狀態下隨機循環播放,穿插銜接,讓畫面中的小雞持續在活動。同時設計了4個反饋類的動效:喂食、撫摸、生蛋、收集,用戶在進行游戲操作的時候能對應得到快速的反饋。

1)C4D動效制作:當時剛剛入職,項目時間緊迫,用骨骼做動效時間上來不及(其實是那時候還不會0.0),于是采用了快捷的變形器+PSR的形式,快速完成了動效的制作。



2)AE導出Lottie:把C4D渲染導出的序列幀,以單張的形式導入AE(序列幀格式插件無法導出),用bodymovin插件導出json格式的Lottie動畫。



bodymovin輸出設置:



導出的Lottie文件,demo方便前端搭建時進行預覽(用谷歌瀏覽器就能直接打開進行預覽);images的圖片可以用TinyPNG網站進行壓縮,可以減小體積。



三維動畫效果演示:



3)補做骨骼動畫:后續考慮到視頻動畫等的演繹,在小雞的動效上線后抽時間把骨骼動畫也做了出來。



二、3D動畫轉2D

C4D制作的動畫序列幀體積較大,8個裸雞基礎動作就高達14M,嚴重拉低了游戲的加載速度和性能,影響用戶體驗。為此需要尋找一種新的動效實現方式,既能保留3D的動畫效果,又能減小體積保證游戲的性能。3D動效導出的序列幀占用最多的是不斷重復的每一幀畫面像素,然而每一個畫面都是這么些內容,只是每一幀之間有細微的區別。如果能把相同的像素內容整合起來,幾十張的序列幀簡化成一張圖片,將3D的動畫序列幀以2D資源的單張圖片+關鍵幀來實現的話,就可以極大地減小體積。



DragonBones龍骨軟件可以在2D資源的基礎上,利用骨骼結合錨點變形的方式,在龍骨軟件上重制2D動效,就可以模擬出3D的動畫效果。(不要問為什么不用Spine,因為要錢TwT)正逢裝扮中心玩法要上線,舊的格式每增加一個皮膚,就要再增加14M的體積,是完全無法實現的。

1)Ps拆解:帶皮膚的也是一樣的處理方式,C4D只需要渲染單張PNG圖片,然后在Photoshop中對圖片進行拆分,并把底層被挖掉的圖片填補完整,避免動畫過程中穿幫。



2)Ps導出龍骨格式:需要從龍骨軟件里把插件安裝到Photoshop去,在龍骨頂欄菜單幫助-PSD導出插件安裝指引,按照指引安裝好插件。然后在Photoshop頂欄菜單界面文件-腳本-導出到DragonBones,就可以在龍骨軟件中打開了。所有圖層的位置會跟Photoshop中的位置對齊。



3)在龍骨中制作動畫:B站有且只有一個系列教程,自己學去吧~



4)輸出龍骨格式的動畫文件進行交付:其中貼圖文件又可以放到TinyPNG進行一次壓縮。



部分用戶可能會遇到無法導出的情況,原因是龍骨軟件的公司Egret白鷺科技在2022年6月初破產了,不再對龍骨軟件提供服務和更新......解決方案是到https://nodejs.org/en官網下載一個nodejs軟件安裝上去,然后復制它新的這個node.exe,替換掉龍骨安裝路徑下的node文件就可以了。



3D動畫效果和龍骨動畫效果對比:



通過3D向2D資源的轉化,把序列幀中重復出現的像素精簡到一張貼圖上,并以代碼的形式運行動畫,優化了接近30倍的體積。同時實現了模板化換膚的功能,減少設計制作和前端搭建的工作量,真正意義上實現了事半功倍。



3D動畫效果和龍骨動畫資源對比:



三、文件分層-組合倍增

為了進一步減少每個龍骨貼圖中重復的道具,繼續優化體積,于是重新對游戲的動畫邏輯進行了梳理。將小雞的動畫進行拆解,分出道具層和小雞層,通過把不同的道具與10個基礎動作組合的形式,滿足更多的應用場景。(新增了歡迎、激動、回家3個新動效,同時把喂飼料和喂金盆整合成了一個動效)



選擇對應的一個基礎動作,結合相應的道具進行表達,借此實現了應用場景動畫的倍增

中層小雞基礎動作 + 前層道具 / 后層道具



總結

用2D資源的龍骨動畫重新實現3D資源的C4D動畫,優化了30倍的文件體積、減少了設計師和前端一半的工作量、實現了模板化的換膚功能,極大地提升了游戲性能的同時,還保障了優質的游戲體驗。




作者:繼安Haivy
如翼推薦                           
国产九九精品视频免费播放4,美欧精品视频第1页,日本一道本高清视频二区,A片一级片免费