白鷺時代動畫設計工具DragonBones產品思路分享

2021-03-02 白鷺引擎
近日,白鷺開發者服務平臺推出了一項尋找「精英動畫師,優秀動畫DEMO徵集」的活動,而就在活動推出的同時,D5Power 、CGjoy積極響應,並在其平臺和論壇推出了基於DragonBones製作作品的專項賽事。DragonBones這款獨立骨骼動畫體系,緣何收到動畫製作領域的專業工具平臺與論壇的支持?為了讓更多動畫師和開發者,對DragonBones有一個更全面清晰的認知,我們邀請到了白鷺時代DragonBones的產品負責人劉晨光給大家進行DragonBones產品思路分享。

白鷺引擎技術總監,DragonBones 創始人。研究Flash 14 年,曾就職於Adobe北京研發中心Flash Runtime部門,擔任創新項目主管,參與過Stage3D項目的開發。電競愛好者,目前專注於設計類工具產品的研究。

自我介紹一下,劉晨光,多年伴隨設計師的程序開發者,白鷺時代 DragonBones的負責人。很多人對我的自我描述感覺很奇怪。實際上由於產品的緣故,我接觸的更多的是設計師而非開發者,故常自嘲為「多年伴隨設計師的程序開發者」。近年底,我們也在總結一年以來DragonBones的一些經驗和未來的發展方向。這次我想從四個方面想跟大家說一說DragonBones。動畫從來都是遊戲中最能體現效果的重要組成部分,但往往動畫製作也是遊戲開發中較為頭疼的一個環節。多年的從業經驗告訴我,對於遊戲中的動畫而言,主要存在一下幾個問題。1、設計師很容易被遊戲的技術選型所束縛,難以發揮在動畫效果上做最大化的發揮。2、骨骼動畫對於可以讓遊戲畫面素材提及減小,但是做起來麻煩,效率低。3、沒有專門為移動遊戲所伺服器的動畫製作工具,大部分還是沿用以前頁遊和端由的工具。4、設計師與動畫設計師之間的協同不理想,各種PSD文件導來導去,不勝其煩。5、骨骼動畫與傳統幀動畫不能有效整合,放到一起使用,總有不能和諧處理的地方。在DragonBones開發過程中,我們希望能夠從根本上解決遊戲開發過程中動畫部分的瓶頸。對於上面的五個問題,我們通過不同的方法進行逐一攻克。1、統一的動畫數據格式:DragonBones定義了一套完整的動畫數據格式,這樣便可以適用於任何工具,以及任何引擎。在工具方面,我們支持DragonBones Pro(獨立動畫編輯器)和DragonBones DesignPanel(基於FlashPro的骨骼動畫製作插件)。而程序方面,我們擁有多語言版本的動畫程序庫(DragonBones Library)。這樣,動畫設計師可將精力放置與DragonBones中,而無需關心程序是否能夠完整還原所設計的動畫。2、DragonBones Pro:這是一個完整的獨立動畫編輯器,專門為動畫編輯所準備,更加適合遊戲中動畫製作。3、專門為移動遊戲優化:DragonBones無論在功能的設計上,還是程序庫的優化上,都針對行動裝置做了大量優化,保證在不同手機中維持一個理想的性能狀態。4、插件系統:我們所提供的插件可以將PhotoShop中設計好的圖片直接導出為DragonBones Pro項目文件,然後直接編輯。我們的一些插件可提供對Spine、Cocos等格式的支持,可以方便做工具遷移。5、普通動畫支持:DragonBones Pro不僅僅可以製作骨骼動畫,亦可以製作逐幀動畫。與此同時,在動畫程序庫中,兩種不同的動畫形式可以進行嵌套操作,這極大的增強了兩種形式的動畫相互融合。說了這麼多,從動畫原型設計,到素材設計,再到動畫製作,最終由程序在遊戲中實現,我們能夠做到一個「跨引擎」的動畫製作流程,我們將這個流程總結為一句話便是,DragonBones是為移動開發者服務動畫製作完整工作流產品。很多人對這句話的理解都是用戶想要什麼我們就給什麼,大而全則好。我則不這麼認為。需求永遠都不可能存在盡頭,而將這些全部變為實實在在的功能,則是拖累用戶,讓產品變得愈加臃腫。DragonBones則一直秉承為快不破,動畫製作應該再簡單一些,再方便一些,考慮的再少一些,而不是一味的堆砌功能。這部分我想將幾個產品中的功能詳細說說。1、時間軸:經過多年的洗禮,我相信絕大部分動畫視頻製作類軟體都由時間軸的概念。Adobe的部分產品則更是將時間軸發揚光大。但DragonBones則對時間軸功能一剪再剪,其目是讓用戶所看所用到的東西是正確的東西。以Flash為參考,Flash是模擬翻頁動畫,幀與幀之間沒有時間,這是正確的思路。但目前動畫製作的主流需求應該是點與點,譬如循環動畫第二次循環要去掉開始的重複幀,如此才擁有更完美的動畫表現,DragonBones的時間軸是按照節奏製作和呈現的,設計師所看到動畫點才是他們所關心的內容。2、骨骼體系:比較重要的功能就是骨架嵌套,以及支持同骨骼的序列幀動畫。如果沒有骨架嵌套,很多動畫效果也可實現,但是製作成本卻要翻倍。譬如遊戲中人物與其手上的武器,傳統的是做成單個角色,這樣人物動畫中的動作極為單一,而DragonBones是將人物與武器做成兩個角色,嵌套在一起,如此可以產生更豐富的動作和動畫。所以骨架嵌套嵌套功能孕育而生,這也是為設計師效率所考慮。3、反向動力學約束:所有人都不願意看到一個遊戲中人物的動作如殭屍般僵硬。但大部分人應該知道,人物的動作想要鋼筋有力,亦或是飄飄欲仙,都需要動畫設計師不停的微調,反覆修改每一個關節的運動狀態,這是極為耗時和考驗耐心的工作。而反向動力學約束可以幫助設計師在動畫調整過程中幫助想關聯關鍵做出正確的位置移動。譬如人在站立,需要上身動腳不動,在DragonBones中將人物上下半身分割,並且在下半身嵌套入遊戲場景,簡單的操作即可實現。4、蒙皮動畫:很抱歉,在本文撰寫時,你能看到的版本還不包含該功能。但我總是喜歡將一些好的東西提前分享給大家。蒙皮動畫解決開發者做柔體動畫的需求,無論是飄揚的紅旗還是隨風而動的戰袍,都可以通過蒙皮動畫解決。DragonBones Pro這個獨立骨骼動畫編輯器,實際上也即是設計師工具。它具備目前動畫師需要的幾乎所有功能,而除了上述的重要功能之外,DragonBones最大的特點毫無疑問是可視化編輯,如同PS一樣,動畫師在製作動畫的過程中能夠做到所見即所得。到現在DragonBones不只是單純用於製作遊戲動畫,也可以像Flash那樣製作廣告動畫和其它交互內容。事實上DragonBones年齡要比Egret大兩歲,在加入Egret之前,DragonBones第一個公開發布的版本是在2012年十月的1.4版本,它最主要的是打通了在Flash做動畫,然後搭建了從設計師(動畫)到開發者(遊戲)的工作流。接下來重要的是2.0版本,這個版本基於動畫功能做了大量的升級,譬如可以做動畫融和,動畫之間自動柔和的過渡。3.0版本正式加入到了Egret體系中,在推出DragonBones3.0基礎是JS版本,不過他全面支持各類語言,譬如C++版本支持Cocos、C#支持Unity,而它的核心是製作移動遊戲的動畫體系。今年推出的4.1版本推出了極速模式,其性能比同類產品提升了30%左右,譬如Spine,並且其包體容量在同類產品可能是最小的。到目前位置,DragonBones的程序庫很多修改維護仍來源於社區貢獻,與此同時,我們也一直在與設計師進行溝通反饋,時刻了解設計師在使用過程中的需求與反饋。內部是我們最容易接觸的第一手渠道,其次我們會關注來自QQ群,論壇和開發者沙龍上所搜集的反饋,根據需求指定功能,隨後確定優先級,逐一完善。一開始已經說過,DragonBones一直圍繞動畫服務,在未來,設計師做的動畫,不僅僅可用於遊戲。同時還可以應用於其他領域。譬如,可以直接打包發布,增加互動類功能,可以通過DragonBones製作動畫效果豐富的互動類廣告。在遊戲動畫製作這個方向上,給予功能和性能上的全面提升,並且在性能上全面支持WebGL,提供硬體加速。對於不同維度用戶,DragonBones會提供常用的模板,同時跟雲端的服務相結合,打通白鷺商城,使得美術素材、模板無縫結合。文章的最後,還想提及一個事情,我們非常希望動畫設計師能夠體驗使用我們的產品,給予我們更多的反饋。而近期,我們白鷺開發者服務平臺推出了一項尋找「精英動畫師,優秀動畫DEMO徵集」的活動,與此同時,D5Power 、CGjoy也其平臺和論壇推出了基於DragonBones製作作品的專項賽事。歡迎動畫師們使用DragonBones製作動畫,時下DragonBones正在徵集優秀DEMO,希望動畫師或開發者們提供優秀作品。我更希望開發者與動畫師們一起參與到DragonBones未來的產品設計中來,這也是白鷺時代一直堅持的理念。http://www.egret.com/products-dragonbones
DragonBones最初由Adobe公司於2012年10月主導開發設計的一款專門用於遊戲中骨骼動畫製作的FLASH插件。是目前公認的全球最早的骨骼動畫工作流解決方案。一經推出就受到了眾多遊戲開發設計者的歡迎和追捧。而在此後,白鷺時代作為HTML5移動遊戲新生代企業,接過了DragonBones維護、運營和更新迭代的任務,並在2014年正式將其納入白鷺時代Egret產品序列。目前不少遊戲產品的動畫系統都是在基於DragonBones基礎上設計開發的。風靡中國的動作卡牌手機遊戲《刀塔傳奇》就是其中的一員。欲知更多詳情,請登陸白鷺時代官方網站:http://www.egret.com/。

白鷺引擎微信號

相關焦點

  • 骨骼動畫編輯器DragonBones4.0發布,讓你優雅告別Flash Pro~
    DragonBones 4.0可以完全脫離Flash環境獨立,包含三大部分:● DragonBones Pro,獨立的骨骼動畫編輯器● DragonBones DesignPanel,基於FlashPro 的骨骼動畫製作插件● DragonBones Library,多語言版本的骨骼動畫程序庫理由1
  • 菜鳥丨2D骨骼動畫工具DragonBones的使用教程
    今天就為大家介紹一套開源的2D骨骼動畫框架和工具——DragonBones,它包含了桌面骨骼動畫製作工具DragonBonesPro和一套多語言版本的DragonBones骨骼動畫庫。下面為大家介紹DragonBones的常用術語和使用方法。
  • DragonBones 4.3 發布!
    DragonBones 是一套由Egret團隊主導製作的2D骨骼動畫解決方案,主要面向移動遊戲開發者和設計師,提供跨語言跨平臺的動畫製作工作流解決方案
  • 電商產品海報設計思路是什麼
    本文由:「學設計上兔課網」原創,圖片素材來自網絡,僅供學習分享 電商產品海報設計思路是什麼?對於設計小白而言,如果剛接到一個製作電商海報的任務,內心多半是茫然的,因為他們根本就不懂從何入手。
  • Yahoo到訪白鷺時代 共謀臺灣HTML5遊戲發展大計
    白鷺開放平臺憑藉「免技術、免商務、免運營甚至免成本」的友善環境,已經為臺灣地區開發者提供從開發到發行運營的一站式服務,包括引擎、開發工具、雲端伺服器、支付功能、產品測試以及運營數據支持等服務內容,為臺灣地區HTML5遊戲的發展,提供了強大助力。
  • 微課設計工具(資訊篇)
    好了,言歸正傳,今天我們來談一談微課設計與製作工具,想寫本次專題緣於雲朵在後臺的留言,雖然林子第一時間給他/她回復過了,但是時間比較倉促,回復地不夠系統,因此想單獨寫一篇相關的經驗分享給大家,以此證明我也是研究過微課的好嗎
  • 《我的英雄學院》製作團隊專訪之BONES社長南雅彥:用畫表達一切,使畫躍動起來
    以下為本片的製作公司「骨頭社」(bones)社長南雅彥的專訪。——bones製作過很多以英雄為主題的作品,那麼請問社長您心目中的英雄形象又是怎樣的呢?同時也請您談談對本次挑戰製作《我的英雄學院》(以下簡稱「英雄學院」)的動畫有何期待。南雅彥 英雄其實算是一個比較普遍的主題。每個時代都有屬於自己的英雄,而英雄也會成為時代的烙印,映照出當時的世界。
  • 洛可可王秋辰:設計賦能產品升級 深挖產品背後市場
    我是來自洛客設計平臺深圳區的負責人,今天很榮幸在這次峰會上帶來關於產品的分享。剛才嘉賓在講全球一體化,以及跨境電商時代機遇下各位的快速增長,我們在整個時代的背景下也有 一些突破。今天這個會場,帶給大家的更多是我們在這個時代背景下,在後疫情時代下,我們如何能夠通過設計創新、通過產品創新,給全球一體化更多的產品賦能。
  • 基金項目:基於場景時代的陶瓷產品創新設計路徑
    基金項目:基於場景時代的陶瓷產品創新設計路徑基金項目:教育部職業院校藝術設計類專業教學指導委員會產品設計專門委員會2019年度教育教學改革項目廖乃徵陶瓷產品與人們的日常生活關係密切,伴隨著科技發展,信息化、網絡化、智能化技術已經逐步改變了人們的生活方式和消費觀念。
  • 《異邦人:無皇刃譚》向向武俠功夫片致敬的Bones致敬
    一部向70年代日本武士片和香港武俠功夫片致敬的動畫,本身的武打動作效果卻已經超越了前兩者,更精細的動作拆解,毫無限制的鏡頭移動,暴力卻不血腥以便讓觀眾將注意力集中於打鬥,這就是動畫的魅力。主角揮砍日本刀卻不限於傳統日本武士拼刀那麼單調的幾種招式來回,日本刀法加中國功夫,動作元素被極大的豐富。
  • 骨骼動畫在Html5使用攻略
    概念骨骼動畫有諸多優點在遊戲,動畫製作,動漫都有非常多的運用。跟幀動畫比較來說,幀動畫的每一幀都是角色特定姿勢的一個快照,動畫的流暢性和平滑效果都取決於幀數的多少。而骨骼動畫則是把角色的各部分身體部件圖片綁定到一根根互相作用連接的「骨頭」上,通過控制這些骨骼的位置、旋轉方向和放大縮小而生成的動畫。
  • Dragonframe(動畫製作工具)中文版分享
    Dragonframe 4是來自國外的一款簡單實用,功能專業的全功能動畫製作工具。
  • 動效老司機分享直播禮物 SVGA 動畫避坑指南
    市面上有較多壓縮方法及文件格式(Gif、WebP、A-PNG等),但都無法保障滿足性能的同時還原出美術設計出的原效果。開發團隊參照CreateJS和BodyMovin工具開發了開發 SVGA。相關歷史看作者自述【SVGA 背後的故事】傳送門:直播App中Android酷炫禮物動畫實現方案(上篇)據悉在 YY 系的產品中有超過十多個產品的使用,應用範圍涵蓋 iOS / Android / Web / PC 客戶端等。通過烘焙關鍵幀記錄每一幀的參數,動畫過程中圖片都在不斷復用,性能得到提升。
  • 動態3D圖設計方法分享
    今年4月份升級之後,我們強化文章首圖的視覺效果,強調了品牌視覺語言「不鏽鋼」材質,沒想到大家反響如此熱烈,做號的初衷就是分享,我自然不會吝嗇,今天就從創作思路到創作執行來個全面一點的分享。① 首先給燈泡建模,建模本身已經夠開一個教程了,這次主要分享思路,建模先不贅述。使用工具:C4D、OCv4.0① 頂部菜單欄→Octane→Dialog。打開OC菜單欄②Materials→Octane Metallic Material③打開材質編輯器,關閉Diffuse。
  • Linus 在 Google 分享了 Git 的設計思路,順帶懟了一大波人(視頻)
    去年在微博上,看到了有位技術博主整理翻譯了一個關於 Linux 創始人 Linus 的演講視頻:「Git 的特點和設計思路幾天前,有朋友推了篇 Linus 相關的文章給我,才想起看過這麼個視頻,但還沒分享過,今天就藉此機會跟大家聊聊吧。相信在座各位,對 Linus Torvalds 這位牛人都不會感到陌生。
  • 東莞三維動畫設計中包含哪幾個工作思路?
    4.三維動畫中主要工作思路——材質燈光材質和燈光應該是緊密相連的,睿全視覺將細緻調節,使其畫面更具有真實性。5.三維動畫中主要工作思路——動畫調節動畫的調節相對來說要難一些,特別是角色動畫的調節,更需要豐富的經驗,角色動畫的調節過程是相當枯燥和繁重的,如果想要得到惟妙惟肖的角色動畫效果,可藉助於動作捕捉系統。
  • 智能製造設計工具軟體工作室
    產品簡介智能製造設計工具軟體工作室主要由計算機、顯示器和作業系統及智能製造設計軟體所組成,軟體主要包含Auto CAD, Autodes Inventor, Aut odesk Revit, Aut odesk3D max , Autodesk mudbox5款設計軟體,AutoCAD
  • 「make no bones about it」的含義和「骨頭」無關!
    大家好,今天我們分享一個非常有用且地道的表達——make no bones about it, 這個短語的含義含義和「骨頭」無關!,其正確的含義是:make no bones about sth 就…直言不諱,毫無顧忌He made no bones about his dissatisfaction with the service. 他直言不諱地說他對服務不滿意。
  • 《動物森友會》島嶼局部設計及建造思路分享
    《動物森友會》中玩家可以對自己的島嶼進行布置,也經常會主動分享自己建設的島嶼下面帶來玩家「夢野久作」帶來的《動物森友會》島嶼局部設計及建造思路分享,希望能幫到大家。 目前就是普普通通的小鎮子,有些布置和自家附近差不多,不做大改只局部調整了。 也沒有怎麼抄過作業,都是群裡摸設計圖,自己懶。如有雷同,就是和大佬們撞腦洞了,畢竟我覺得動森建設大佬們腦洞都特別大!
  • 頂級在線設計工具收藏
    介紹 這是一些精心挑選的在線工具,這些工具都經過了測試,我發現它們非常有用,並與大家分享。 背景 1. SVG BACKGROUNDS