骨骼動畫在遊戲製作過程中必不可少。在建模的基礎上,通過動畫工具製作角色的一系列動畫以備遊戲使用。
2D骨骼動畫方面國內一直採用Spine 2D製作,對Spine 2D的應用和效果筆者不再贅述,本文為各位美術工作者帶來另外一個具有實力的骨骼動畫製作工具:「Sprite Studio」。
下面來看一個視頻,該視頻是Sprite Studio官方製作的一個動畫效果。
此視頻是從Sprite Studio工具中直接進行錄製,沒有做過任何的後期視頻處理。各位看官可以看到該動畫效果除了常規的移動,替換等效果外還有旋轉,變形等較高級的功能。此外視頻中的所有特效也全部由Sprite Studio內部進行製作,也就是說Sprite Studio自帶粒子發射器,能夠在工具中直接製作特效。
基本的移動,旋轉等變化製作最基本的骨骼動畫,Sprite Studio可以將模型圖片網格化用於變形在實際應用中可以讓動作更加平滑。較好的使用方式甚至可以做到3D旋轉效果。
上視頻就是官方製作的一個3D旋轉效果,通過網格變形以及其他旋轉移動等操作使得看起來像是一個3D建模的模型再旋轉一般。
可以從上面兩個實例中看出Sprite Studio的強大功能,那麼下面就跟隨筆者一起了解一下該工具的使用方法吧。
本文主要為Sprite Studio的用法以及實際在UE4中的應用來全方位的為各位看官介紹Sprite Studio。
(1)基本介紹
Sprite Studio為Web Technology公司研發,現如今Web Technology公司已經被CRI Middleware所收購,成為其下的公司。
Web Techonlogy主要針對於2D圖形壓縮,2D骨骼動畫等方面進行產品研發,主要產品有2D骨骼動畫工具「Sprite Studio」,圖片壓縮工具「imesta7」以及四格漫畫工具「コミPo!」等。
Sprite Studio為本文重點介紹內容,主要針對2D骨骼動畫以及自帶粒子特效系統,為遊戲開發者提供骨骼動畫以及粒子特效製作工具,除此之外動畫也完全能夠在Sprite Studio中直接製作。
imesta7是圖片壓縮工具,主要是各種圖片壓縮技術,例如減色處理等,將圖片大小進行壓縮,可以應用於各種紋理貼圖等圖片大小的處理上。
コミPo!則為4格漫畫製作工具,提供各種素材效果,同時用戶可以導入自己的3D模型方便直接製作四格漫畫,為漫畫方式宣傳提供極其大的便利。
(2)Sprite Studio功能介紹
本文終點為Sprite Studio,在此後的文章中,我們聚焦於Sprite Studio,一步一步的從資源導入到功能全方位介紹Sprite Studio的功能和效果。
1)新建工程
Sprite Studio在創建骨骼動畫時需要建立工程,一個工程可以包含多個角色,一個角色可以包含多套骨骼,每個骨骼下可以創建多種動畫。
打開Sprite Studio編輯器,點擊File,選擇New Project創建一個新的工程,選擇好對應的路徑,填寫好工程名稱後選擇保存即可創建工程如下圖:
創建完成後將會自動回到Sprite Studio編輯器內容中,此時可以看到左上角的工程名稱已經為我們所創建的了。每次創建工程都會生成一個sspj的文件該文件為Sprite Studio的工程文件,後續所有操作均在該工程文件中進行。用戶可以從這些sspj文件中打開已經創建的工程。
2)資源導入
創建工程後回到Sprite Studio界面,可以看到左上角的Category類別中有多個類文件夾圖標內容。
「Animations」為動畫資源,我們所創建的所有動畫均會放置在其中。
「Cell Map」則為導入的素材自動在Sprite Studio中生成ssce應用文件,我們需要在此內容中將各種圖片碎片切割,以備使用。
「Reference Images」則是我們導入的素材,當導入素材後該素材內容也會在該文件夾中顯示。
「Effects」為特效文件,Sprite Studio自帶粒子發射器,能夠創建複雜的特效,所創建的所有特效均會存儲在其中。
下面就讓我們一起進行資源的導入吧。
首先右鍵點擊「Category」下的「Cell Map」選擇「New File(X)」,而後會彈出文件選擇框,選擇我們想導入的素材點擊打開,而後可以對其進行重命名完成後點擊保存即可,如圖:
可以導入的素材類型有很多如:
「bpm」,「gif」,「psd」,「png」,「pvr」,「tga」,「tif」,「webp」等。
導入完成後可以看到在「Cell Map」以及「Reference Image」中出現了導入的素材。
以上導入素材就已經完成,可以看到導入的素材是角色各種部位的拆分結構,那麼接下來我們就需要用這些各個部件來組成我們的2D模型以備製作骨骼動畫。
3)創建動畫
①原件切割
在上述過程中我們創建了一個工程並導入的相關素材,導入的素材則是各個部件的拆分體,如果我們創建動畫則需要將各個部件拆分出來,並且組建真正的2D模型以便進行動畫的製作。
在Sprite Studio中對部件的拆分極其容易,我們選擇「Cell Map」中的素材部分,在右側的Cell Map視圖中可以看到當前素材部分包含的內容,滑鼠放在其中的網格上左鍵按住不放後進行拖拽可以選擇資源的一部分內容如圖:
拖拽選目標範圍後進行雙擊就可以將選中範圍內的資源進行單獨切割,使之生成對應的部件,並且彈出Edit cell的編輯框,這裡可以更改原件的中心位置,一般情況可以直接選擇默認,如需修改可以修改Pivot即可,同時可以對生成的原件進行重命名。
重複上述內容直至所有原件全部切割拆分完成即可。
切割過程中建議按照提示方格範圍進行切割,即切割時邊緣位置都在提示方格的外邊緣上,這樣使得後期進行處理網格時可以直接行進網格化。
Tips:當前網格如果不滿足效果,例如網格太大,則可以調整網格大小,使之能夠達到包圍整個原件部分又不會空餘太多的效果。如圖所示,對比兩個圖可以看到16的網格更加的細小可以採用。
按如上步驟將我們所有的素材全部切割成可以合成2D模型的原件即可。
②創建模型及其動畫
為了能夠創作動畫,我們需要能夠支持動畫的模型,上述過程中我們將所有模型所需要的原件全部切割出來,此時需要按照原件覆蓋關係將所有需要的原件排布成所需模型的樣子。
右鍵點擊「Animations」選擇「New File」創建一個新的動作,在彈出的文件框選擇需要放置的路徑以及填寫對應的名稱,如下圖所示:
完成後即可創建一個待編輯的模型和動畫部分內容:
動畫名稱可以進行重命名,上圖中「Normal.ssae」是一個模型下所有資源的集合,包含模型以及動作內容。「Setup」則是創建模型部分,可以將原件在此內容中進行排布來創建模型。「anime_1」則是動作部分,可以由用戶自主命名,動作如何製作皆在此中進行製作。
創建好後,我們選擇「Setup」可以看到Layout界面變紅,並且Frame Control部分出現了root,也就是說這裡自動創建了一個基準位置,整個模型會跟隨這個基準位置進行製作。如下圖所示:
完成後,選擇cell list中的原件部分,按照優先級進行排布。
Tips:在模型創建中具有優先級和父子關係。
優先級:根據原件在Frame Control自上而下的順序,優先級逐漸增高,優先級高的原件與優先級低的原件出現重合時,優先級高的原件會覆蓋在優先級低的原件上,此概念和PS中的圖層相同,優先級越高圖層越靠上。
父子關係:在Frame Control中,具有父子關係,一個原件下可以掛靠另一個原件,掛靠後付原件進行移動,旋轉等操作時,子原件會跟隨付原件進行移動和旋轉等。
父子關係有利於一部分內容的整體控制,例如頭在轉動時,眼睛,耳,頭髮等均會跟隨轉動,所以眼睛,耳,頭髮等可以為頭部原件的子原件,如此一來頭部轉動時他們也會跟隨轉動。
了解了優先級和父子關係後,我們根據需要將所有原件在Setup中進行排布,完成模型創作如圖。
完成後一個簡單的2D模型即可創建完成,下面我們開始進行動作的製作。
在Sprite Studio中,動作製作主要在Frame Control以及Attribute中。Sprite Studio在製作動作中遵循幀製作,也就是定義關鍵幀在關鍵幀上更改模型部件的位置,旋轉等來達到模型動作的目的。
Sprite Studio中的關鍵幀定義非常容易,所有可用屬性全部顯示在Attribute中,用戶可以直接在Attribute中進行更改設置關鍵幀即可。所有均在屬性中製作,因此在製作時不用費力找實現功能的位置,這一點極其方便。
下面我們以較為簡單的例子來向各位看官展示如何製作簡單的動畫。
基本旋轉
為了讓各位看官比較容易的看到效果,排除其他影響,因此筆者將這裡的模型刪去了大部分,只留下整個手臂和身體。
此次我們要做的是將整個手臂揮舞至頭頂,做出一個從上而下揮舞的Attack的簡單動作。
因此我們需要將整個手臂包含袖口以及手上升至頂端再揮舞下來。
整個動作效果我們由旋轉了實現。
首先再Frame control中選擇我們想要更改的目標。我們選擇FrontShouder也就是前手臂。
由於我們需要將手臂旋轉到頭頂,因此再第一幀我們需要設置一個關鍵幀,讓其記住當前的旋轉如圖。
如上圖,選擇部件以及第一幀後,再Attribute界面下的General中找到Z Axis Rotation,點擊其左側的原點使其點亮,即可在改幀上創建關鍵幀,並且記住當前點亮的屬性信息,圖中除了旋轉外還記錄了位置等其他信息,這些信息均記錄在第一個關鍵幀中以備其他後續幀修改時做到變化效果。
為了進行旋轉,我們再選擇第27幀,更改其Z Axis Rotation,並且點亮左側圓點。如圖所示:
此時一個簡單的旋轉就能夠完成,可以拖動遊標從第一幀到27幀看效果,可以看到1-27幀整個手臂在旋轉上去。
Tips:注意到在General下方有個勾選「Create Key When Value Changed」,勾選了該選項後,每次更改了屬性值,都會自動創建關鍵幀,非常方便。
Tips:各位看官還記得前面提到的父子關係嗎,父子關係的好處在這裡體現的淋漓盡致,由於袖口和手都是手臂的子部件,因此在手臂旋轉的時候,袖口和手會跟隨旋轉,這樣極大的減少了我們每個進行調節的時間。
以同樣方式我們分別在31幀和45幀分別做旋轉值變化,從而使得手臂上升再下降。
以此類推,我們分別對袖口和手臂做旋轉操作,使得整個表現更為自然,最終效果如圖:
一個簡單的旋轉效果創作出來,可以使的角色進行動作,賦予了一個簡單2D模型的運動效果。
移動
移動和旋轉類似,只是控制的屬性不同,之前我們的旋轉以屬性Z Axis Rotation控制,在不同的幀上創建不同屬性值以及關鍵幀做到了整個手臂旋轉的效果。
同樣我們可以再不同的幀上創建不同的移動屬性值以及關鍵幀即可做到移動的效果。
如圖所示,我們在Base部件上創建關於Y Position的關鍵幀。
以更改Y Position值來使得整個模型在Y方向上進行運動。
效果如圖所示:
除移動旋轉外還有一些其他基本內容,比如放大縮小,透明度變化等均能夠在屬性中進行調整,同時設置關鍵幀來製作動作效果以及表現。
資源替換
資源替換指在動作創建中,使用新的資源替換舊資源以達到效果變化的目的,常用於眼睛,嘴巴等變化,使用資源替換的好處在於能夠直接讓美術資源進行迭代,不需要藉助工具輔助手段來變更表情效果,如此整體表現較好。
較為細緻的表情替換可以使用較大量的資源,以多資源做過渡圖片,當圖片形成逐幀替換時,效果會非常優秀。
在Sprite Studio中資源替換極其便捷,這裡我們以替換角色眼睛為例。為了方便觀看,筆者同樣只保留了基礎頭部部分。
我們選擇Eye部件,在屬性面板中將Reference Cell屬性點亮,此時在第一幀位置創建了一個關鍵幀。如圖所示:
再選擇第十五幀,點擊Reference Cell右邊的Edit按鈕,在彈出的窗口選擇需要替換的資源,如圖:
雙擊資源後完成創建,可以看到在第十五幀,資源得到了正確替換。
同理,我們分別在第四十七幀和第五十七幀,分別替換資源,57幀資源為還原最初的眼睛部件,最終效果如圖:
之後我們分別做嘴巴的資源替換,頭部運動,頭髮運動等,可以完整的完成一個較好的動畫效果:
上圖中,通過資源替換眼睛和嘴巴,表現出了正在集中用力的表情效果。當然整體效果還不夠細微,各位看官如果有興趣可以自行添加資源更加細化的表現效果。
資源替換除了將原件從資源圖片中切割下來進行替換外,還能同過調取UV的位置來進行替換。
同樣為上述內容效果,我們不再使用Reference Cell功能,而是選擇UV X Translation功能來實現。
如圖,在我們需要更改的幀上,選擇UV X Translation,此時會根據部件的原件,也就是Eye的原始資源,根據其切割大小向X軸平移一定距離後選擇此時位置的切割原件進行替換。
如上圖,當選擇UV X Translation的值為0.125時,原本切割眼睛的範圍框移動到了第二個眼睛類型資源上,此時可以直接調用該範圍框內的資源內容,以直接替換。
這種方式和前直接資源替換效果一致,只是方式不同。
其他功能簡介
除了上述介紹的移動,旋轉,資源替換外Sprite Studio還有其他的很多屬性功能。
透明度(Opacity):可以更改部件的透明度,讓部件從完全不透明到完全透明之間過渡。
大小(Scale):更改部件的大小,無論X軸亦或者Y軸,都能隨心所欲的更改其大小用於變形。
優先級(Priority):優先級決定了部件的層級關係,在Sprite Studio中你可以定義一個部件每一幀的優先級,以便完成在某些時候下層的圖層需要蓋過上層圖層的效果。
隱藏(Hide):用於隱藏部件,可以直接更改部件是否可見,在立體內層旋轉效果中比較常用,可以通過部件的隱藏來顯示正面與背面,以此做到3D旋轉的目的。
除了上述最常用功能外Sprite Studio還提供了其他很多功能,稍後將為各位看官介紹一些較為高級的用法,用於骨骼創建以及變形效果以及例子特效系統。
③高級動畫
高級動畫部分主要介紹在Sprite Studio最基礎的動畫製作上進行更優效果製作。用戶可以使用這些較為高級的效果來製作更為平滑,效果更好的動畫效果。
在動畫方面比較稍有了解的會知道骨骼動畫一詞,而上述的所有內容中我們沒有做任何和骨骼相關的內容,僅僅是資源切割到模型創建。
骨骼動畫是通過骨骼將整個模型連結起來,通過骨骼運動來做出動畫效果,和各種生物結構類似,每個模型都可以有自己獨特的骨骼系統,骨骼的運動帶動了模型各個部件的運動。
和骨骼動畫息息相關的是變形,在正常的生物上骨骼帶動肢體的運動會引起皮膚肌肉等變形,而在2D骨骼動畫中,骨骼帶動各個部件變形,通過形變做到平滑過渡效果。
在Sprite Studio想創建骨骼,則各個原件必須為網格。網格為部件變形提供基礎和依據。
網格化
上文提到在Sprite Studio中使用骨骼功能必須要將原件網格化,網格化是將原件進行網格拆分,由外包圍頂點和內部劃分點。外包圍定點在部件的外部,將部件全部包圍起來,內部劃分點則位於部件內部,用以網格化最小單元以及變形效果。注意外包圍頂點除了特殊情況不要放在部件內部。
網格化部件首先選擇動Animations中動畫的Setup部分:
而後選擇Cell List中的部件,右鍵點擊後選擇Edit Mesh:
點擊後打開網格編輯界面,可以從Auto中自動計算網格,調整F到C就可以改變網格數量的多少,當完成後選擇Apply,就會自動跳入到Manual中,如圖:
跳轉到Manual中後就可以根據之前自動生成的各種頂點基礎上進行手動調節,選中部件上的任何頂點可以進行刪除,在Type中的Vertex Point點亮的情況下,點擊部件空白位置就會生成外包圍頂點,同理在Divide Point點亮的情況下,點擊部件內部的空白位置就會生成內部劃分點。用戶可以在此界面中自行定義各種頂點的數量,位置等。如圖:
當完成後,點擊右上角關閉,在彈出的對話框中點擊Yes即可完成部件的網格化。如圖:
完成後自動生成了網格化的原件,對比源原件可以看到名稱後面加了一個(mesh)說明該原件現在為網格化的。
現在我們已經有了網格化的部件,下面可以進行骨骼的創建。
Tips:並非只有網格化才能創建骨骼,而是因為在Sprite Studio中他要創建網格必須要有Joint Parts,非網格化原件不能作為Joint Parts的子部件,因此不能跟隨骨骼進行運動,創建骨骼沒有意義。
骨骼創建
我們在Animations中新建一個動作,選中Setup將我們剛網格化的原件拖到Setup編輯界面上,創建模型。
如上圖所示,完成網格化模型的創建,各位注意Frame Control下方的部件中,由於網格化的原因,在拖入Setup編輯界面時自動創建了一個Joint Parts。所有骨骼都可以以此創建。
我們選中Joint_1,點擊Frame Control下方的Add Bone Parts,創建一個骨骼如圖所示:
創建完成後,可以在Setup編輯界面中看到創建的骨骼:
Tips:如果看不到骨骼說明沒有選擇骨骼可見,點擊layout的骨骼可見按鈕即可:
創建完成後我們在Setup編輯界面調整骨骼位置直至到目標位置即可:
可以將滑鼠放在紅色圓圈部分進行旋轉,滑鼠放在黃色圓圈部分進行縮放。如此一來調整骨骼位置,大小和朝向後完成一個骨骼創建,同理我們以此骨骼為基礎,再創建額外3個骨骼:
此時所有該部件的骨骼創建完畢。
骨骼的父子關係和部件一致,父骨骼旋轉,移動等子骨骼會跟隨旋轉和移動等。
變形功能
變形功能時基於網格化部件以及骨骼的一種表現效果,當網格化部件的網格點發生變化,或者骨骼進行變化時,部件會根據計算自動的發生壓縮,拉升,旋轉等效果。
這裡我們主要從兩個方面展示。一個是網格點引起的變形,另一個是骨骼引起的變形功能。
網格點變化變形
網格點變化變形顧名思義是網格點發生轉變時引起部件的變形效果。
首先我們選擇一個原件,將其網格化,調整該部件的頂點如圖所示:
同樣完成後創建動畫,並將該部件拖入到Setup編輯界面製作簡單模型。
完成後我們選擇動畫,再在編輯器下方將動畫總幀數調整問40幀,同時在第一幀創建關鍵幀,並且將屬性最下方的Deform點亮以此來製作變形效果:
我們選擇第二十幀,並在Animation編輯界面分別將先前創建的兩個內部劃分點移動到圖中所示的位置:
同理,在第40幀的時候將所有頂點還原。查看整個動畫:
整個效果非常簡單,但是能看除變形引起的旋轉效果:
大家可以看到上圖中的效果其實就是文章一開始的機器人身體部分的旋轉效果,實際上機器人的旋轉主要運用的就是網格點變化引起的變形效果做成的旋轉效果。
網格變化引起的效果根據動作設計師的需求而不斷變化,所能做的也完全由設計師自行製作和設計。
骨骼形變
骨骼形變是部件在網格化的基礎上,通過改變骨骼的位置,大小等引起的整個部件的形體變化效果。
在創建骨骼的內容中我們已經創建了一個網格化部件,並且為其添加了4個骨骼,下面我們就通過骨骼變化來看看骨骼運動引起的效果。
如圖所示,我們將整個動畫的時間更改為40幀,並在20幀將各個骨骼進行旋轉,在40幀還原:
通過骨骼的旋轉可以看到整個部件進行了變形效果,變形的平滑程度取決於網格化時頂點的數量,頂點數量越多,就會越平滑。
通過將機器人所有的部件均網格化並且添加骨骼後做出動畫效果如圖;
骨骼動畫中,骨骼數量越多動畫可製作的越細膩,同時工作量就會增加很多。實際骨骼多少需要設計師自行判斷和創建。
曲線功能
曲線功能是Sprite Studio針對各個關鍵幀之間值變化的調整,以上我們所有展示的功能所有關鍵幀之間均為線性變化,但有時候我們需要的不是線性變化以表現力量感,特殊效果等。此時我們有兩個選擇,一個是創建更多的關鍵幀,讓關鍵幀控制每時每刻的動畫效果,做到先慢後快的效果,另外一個是使用曲線功能,使得在間隔多幀的兩個關鍵幀之間參數的變化是非線性的,以此來做到先慢後快的效果。
對比兩個方式,第一種方式更加細膩,所有動畫效果完全由設計師調整,但是工作量急劇提升。第二種雖然效果並不一定很容易的控制好,但工作量很小,僅僅調整曲線變化即可。
對於一些無需非常細微的變化,完全可以使用曲線功能來減少工作量並做到較好的效果。
在上面的說明中我們針對骨骼引起變形製作了一個簡單的動畫,下面我們就看看曲線變化是如何影響動畫效果的吧。
回到我們的原始動畫效果如圖:
整個骨骼變動是線性的,現在我們開始調整其變化方式:
選中第20幀關鍵幀,在屬性內容中選擇Z Axis Rotation後面的曲線變化按鈕如圖:
更改曲線變化方式如圖:
將所有骨骼的20幀關鍵幀都照此處理,完成後會看到如下圖所示的動畫效果:
對比兩個效果可以看到,曲線變化帶來的是不同幀位置的變化,結果引起了真箇效果從快到慢變化,繼而從慢到快恢復。整個變化效果不再局限於線性,可以大膽的使用整個效果。
在曲線中可以隨意的增加點,以此來在動畫中增加關鍵幀,非常方便的調節效果。
動畫嵌入
在Sprite Studio中,一個動畫能夠被當作原件嵌入到另外一個動畫中,同時該動畫能夠在嵌入的動畫中再次進行操作,方便整體製作和細節調整。
比如多個角色的踩球動作,因為球的運動是固定的,每個角色有不同的動作,那麼共有的球的動作就可以作為一個動畫原件嵌入到各個角色的動作當中。
這樣一來球的動作僅用製作一次,各個角色動作不包含球,僅從中調用,減少了每次都要再做球動作的複雜工序,節省人力。
如圖所示,我們製作了兩個動畫,第一個為彈球效果動畫,第二個為角色落地彈起動畫。
動畫效果如圖所示:
這兩個動畫分派在不同的動畫中,第一個就是共用動畫,第二個則為角色特有動畫,在Sprite Studio中可以直接將兩個動畫合成為一個。
我們以角色動畫為基準,將第一個動畫作為嵌入動畫嵌入到角色動畫中。
選中角色動畫,並且點亮Anime List中的Change List Type按鈕,此時可以看到除了本動畫外的其他所有動畫均顯示在Anime List中,如圖:
在Anime List中選擇需要嵌入的動畫,直接拖入到Frame Control的部件中,注意層級關係如圖:
可以看到,被嵌入的動畫以一個部件的形式進入到Frame Control中,嵌入後的動畫可以隨意調整相關屬性,最終效果如圖:
從圖中可以看到兩個動畫完全嵌入到一起,角色落地後會被彈起。整個操作也非常的便捷,非常利於製作重複性的動作效果。
④粒子特效
Sprite Studio除了上述所講的動作製作外,它還具有製作特效的功能,在Sprite Studio中擁有粒子發射器,可以創建粒子特效,創建好的粒子特效又可以嵌入到動作中,從動作到特效均可以在Sprite Studio中完成,不用再讓程序將特效綁定在動作中,減少了很多工作量。
為了創建粒子特效首先我們需要將粒子特效需要的貼圖素材添加到工程中,添加方式和模型原件素材添加方式相同。
添加完成後,選擇Category下的Effect,右鍵選擇New File,添加新的粒子特效文件。
點擊後在彈出的文件框中命名並選擇需要放置文件的位置,點擊保存即可創建。
創建完成後,雙擊創建的特效文件此時會彈出粒子特效的製作窗口。
粒子特效的效果全部在該窗口中進行編輯和調整。
"Preview"主要用於預覽粒子效果。
"root"則是粒子特效的構成元素,一個特效文件可以包含多個粒子特效效果。
"image"部分則是素材源,可以點擊下方的黑色圖片進行選擇資源。
"Command Selector"為效果控制,特效的所有效果均在此選擇,其下方擁有很多粒子發射器效果,勾選後即可啟用,取消勾選則棄用。
"Required"下方內容則是各個粒子發射器效果的細節調整部分,所有粒子發射器的細節部分均在此調整。
進入Effect Editor後,首先選擇我們製作粒子特效的素材,點擊image下方的黑色圖片選擇我們需要的特效資源原件,雙擊後即可完成,如圖:
此時我們點擊Frame下方的播放按鈕,可以看到整個特效播放出來,但是由於沒有調整效果,特效發生了爆炸效果。
因此接下來我們來調整Command Selector部分的粒子發射器效果以及各個參數。
創建的發射器選用的粒子效果如下:
各個效果器的具體參數值如下圖,圖中為對應上面效果器依次向下:
按照上面圖片中所有參數填寫後,就完成了一個粒子特效的創建。各位看官可以隨意調整直至自己想要的效果為止。
最終完成效果如圖:
完成粒子特效後,我們需要將粒子特效放在動畫中。
如圖,選擇已經創建的動畫文件,點擊Frame Control下的Add Effect Parts創建特效部件:
創建完成後,在右側屬性相關處Effect點擊Selected Effect後方的按鈕選擇建立的特效並雙擊進行添加:
添加完成後就可以看到特效已經添加到動作中去了,但是特效的位置以及播放時機不正確,此時我們只需要調整播放幀以及位置即可,如下面兩圖:
我們通過創建特效,在特效編輯器中調整粒子發射器的各項參數和效果,並將特效添加至動作中,以此來將特效綁定在動作上。
Sprite Studio通過編輯器本身的特效以及動作各種系統和功能能夠有效且迅速的創建很多效果非常優秀的內容,下面筆者為各位看官帶來Sprite Studio官方製作的一段視頻,運用了Sprite Studio的各種功能製作的動畫效果:
視頻中雖然沒有較為激昂的戰鬥效果,但整體畫面唯美,其中運用了Sprite Studio的旋轉,變形等,粒子特效構成了各種特效效果以及光影效果。背景的更替也充分表現了Sprite Studio的強大功能與大場面表現。
Sprite Studio本是一個工具,相信各位看官了解了其功能後在使用中一定能做出極其好的效果。
上面我們主要介紹了Sprite Studio的功能,如何創建動畫以及如何創建特效。
Sprite Studio對於主流的引擎也是全面支持,例如Unreal4,Unity等,可以通過簡單的幾個步驟就能輕易的將其導入到引擎中並實時應用。
下文主要是通過Sprite Studio和Unreal4,向各位看官介紹如何將Sprite Studio導入到Unreal4中並實時具體應用的。
Sprite Studio到Unreal4的集成
集成Sprite Studio到Unreal4中需要集成插件,集成插件可以在Sprite Studio的官網下載.
下載並且解壓後我們能看到在解壓包中具有一個plugins的文件夾,該文件夾就是集成所需要的所有內容。
Sprite Studio的集成是將plugins文件夾直接複製到unreal4的工程文件目錄下即可。
因此在集成前需要先創建unreal4工程。
Tips:創建的Unreal4工程如果為藍圖類,注意要添加C++項,以便進行編譯集成。
如圖所示我們只需要將plugins文件夾拖入到工程文件夾中即可:
完成後重新打開Unreal4工程,在編輯選項卡中確認Sprite Studio已經集成並啟用。點擊編輯選項卡,點擊插件選項打開插件管理。
在插件中查看項目,確保Sprite Studio已經集成並且已經啟用。
當看到上述內容後,說明已經正常集成和啟用完成。
下面我們將導入Sprite Studio文件,在前面的文章中我們知道,Sprite Studio創建的工程為sspj文件,我們需要導入的也是sspj文件。
在Unreal4的內容瀏覽器合適的位置進行導入,如圖筆者選擇新建一個Sprite Studio的文件夾用以存放sspj資源文件。
點擊內容瀏覽器下方的導入按鈕,在彈出的文件框中選中之前創建的sspj文件,確定導入。導入後需要的素材文件以及sspj文件會一併導入到unreal4中。
如上圖所示,最終導入後會有ssproject的文件以及該工程中包含的素材文件。
為了查看工程中製作的所有動作,我們雙擊ssproject即可打開。
在打開的資源編輯中,我們選擇AnimePack以及Animation,選擇我們之前創作的動作進行預覽。
所有創作的內容均可以在此界面中進行預覽。
完成的動畫部分除了預覽外,我們需要將其完全正常的導入到遊戲中以供使用。
Unreal4擁有強大的3D動畫藍圖系統,但是針對2D動畫,動畫藍圖系統並不能使用,因此我們需要使用Unreal4自帶的藍圖,以及Sprite Studio集成在Unreal4中的藍圖進行創作。
使用藍圖前我們需要創作基本藍圖。而Sprite Studio導入後的資源文件不能直接進行藍圖創作,因此我們需要自行先創建一個藍圖,再添加Sprite Studio部件。
如圖我們創建一個Actor藍圖。
雙擊打開創建的藍圖,選擇組件下方的SsplayerComponent:
再在右側的細節中選擇資源文件:
之後,再在Sprite Studio Play Settings中調整Auto Play Anim Pack Name 以及Auto Play Animation Name直至合適的動作,即可在視口窗口看到動畫播放了。
如此一來,動畫文件就變成可以使用的藍圖文件了。
為了使用藍圖文件我們需要使用藍圖API來創建動畫播放,在Sprite Studio集成於Unreal4中有很多個藍圖,筆者這裡將所有藍圖均分享上,相關內容為日文:
可以看到,藍圖擁有很多,我們以較為簡單的事例來展示這些藍圖的使用方式。
如圖所示,我們製作一個非常簡單的循環播放的動作,角色先在原地站立,過一段時間進行一次攻擊,以此循環下去。
第一部分內容,為當開始遊戲後,調取藍圖內事件「wait」。
事件「wait」的作用則是播放Sprite Studio動畫「wait」。經過2秒延遲後,調取藍圖內事件「Animation」
「Animation」作用則為播放Sprite Studio動作「attack1」,而後下圖中最下面的邏輯為,當動作播放結束時,判斷動作是否為attack1也就是attack1的動作播放完成,則會重新回到事件「wait」,如此一來角色就會無限循環重複性質的進行動作了。
除了利用動作循環外,筆者還增加了敵人的血量以及攻擊扣血邏輯,以及當血量為0時角色會播放死亡動作,最終將其移除的整個邏輯:
如此一來,該角色在場景種會不斷的進行攻擊,且當其被攻擊直至血量為0時,該角色會死亡並播放死亡動作並最終消失。
對於玩家操控角色,同樣全部使用藍圖進行製作,玩家可以移動,跳躍,站立以及攻擊。整個藍圖如下:
最終可以看到效果:
該角色完全由玩家操控,任何行為都是玩家操縱。
除此之外,對於攻擊筆者稍加裝飾,上圖中可以看到兩個攻擊動作,實際上為筆者在藍圖中做的概率播放動作:
筆者通過給定範圍隨機來做概率播放某個動作,最終玩家在攻擊時會有一定的概率播放不同的動作。
綜上,Sprite Studio集成在Unreal4是極其便利的,而且依託於強大的藍圖功能,能夠很快速的創建遊戲原型以及測試效果。
Sprite Studio本身在2D動畫製作除了最基本功能外還具有優秀的網格,骨骼變形,替換,曲線變化等等效果,還具備由粒子發射器能夠直接創作特效。
對於美術來說完備的工具能夠減少開發溝通成本,強大工具能力又能夠創作更好的效果。
而在引擎對接上,Sprite Studio也具有完備的插件,可以迅速的集成到引擎中並加以使用。
在國內目前2D骨骼動畫絕大多數使用的是Spine,而現在Sprite Studio也同樣具備強大效果和製作能力,可以為各位美術製作更好的效果,為各位遊戲從業者製作更豐富有趣,效果更好的遊戲提供強大的支持。
·END·