2013/3/1

Spriter好好玩系列 (二) ---- Spriter 基本操作


這篇來講基本操作。

首先到這個頁面去下載,Spriter 同時支援了win及mac,請找自己需要的版本去下載


目前免費提供的版本是alpha4.1版,未來正式版也會分free及pro付費版,free版會有一些功能限制,這個頁面有詳細說明,有興趣可以看看。

各位應該有注意到下載頁面右邊有放了兩支影片,上面還寫了"Don't try Spriter without watching these first"。對,沒錯,請務必看過這兩支影片再來試會比較快。因為目前還在alpha 版,作者幾乎沒有提供任何教學、範例、說明書之類的,而軟體本身介面也沒有簡單到像iPhone一樣可以不看說明書就會用,所以建議是先耐心看過影片後,再來使用。

以下我就挑一些重點來說明

.新建Project時會請你選擇一個folder,請直接選擇你放置動畫元件的folder,這些元件才會出現在你右邊的清單裏,然後就可以從右邊的清單拉進stage裏。(如下圖)


.如下圖,當游標在A區時,滑鼠滾輪可縮放stage;當游標在B區時,滾輪可縮放timeline;C區也可設定stage的縮放,但他會自動隱藏,游標移到A及C區時會出現。


.下圖為Timeline區。Spriter的Timeline是以ms為單位,這樣比較能通用於各種平台。圖中a處為playhead,拖動playhead至你要新增keyframe的地方,然後直接調整你的角色,keyframe就會自動產生。另外也可以在拖動playhead至某時間點後,直接按下Add Keyframe(圖中b點),便會以當下角色的狀態產生一個新的keyframe。最後c點的按鈕為"是否要將最後一個keyframe做tween回到第0ms的keyframe"。(也就是頭尾串接的動畫)

另外上圖有顯示"CurrentPlaybackTime:391",為目前playhead所在的詳細位置,你可以在"391"那個地方點擊滑鼠,會出現手動輸入框,可精準調整playhead位置。

.左邊是目前出現在stage上的元件列表,可drag移動上下層關係,愈下面的layer在Stage裏表示愈上層。

值得一提的是,Spriter可在不同Keyframe中變換Layer的順序,這在以往Flash上是十分麻煩的事情。

.點擊Stage上的元件都會出現如下圖的畫面,元件四週的九個方塊是形變控制點,而a點可控旋轉,另外b點是中心點,所有形變、旋轉都是以b為中心。如果想直接輸入數字來控制元件,可點擊c點開啟詳細面板。


.提到旋轉,就不能不知如何調整中心點位置。一般情況下,只要拖曳中心點的那個圓圈即可,但一個新拉進stage的元件,Spriter預設會把中心點設在左上角,與左上角的形變控制點重疊在一起,直接移動的話會變成是點到形變,而不是中心點,所以在點擊時要注意一下游標位置。

當游標移至重疊的中心點時,中心點的圓圈會放大以方便分辨,這時若點擊在綠色區域,則會移動中心點,若點擊在紅色區域,則做形變控制。

.Spriter也支援元件中途變換不同圖片的功能,只要在stage上以右鍵點擊元件,就會秀出小面板讓你切換。此變換只對目前的keyframe有作用,之前的keyframe還會是舊的那張圖。也就是"換圖"這件事也是keyframe包括的內容之一。


.再來是類似Flash中的Onion Skin功能,可以讓你看到前幾格或後幾格keyframe的位置,這是2D動畫中十分重要的功能。開啟後效果如下圖

紅色表示前幾格,綠色表示後幾格。開始方式請參考下圖紅、綠色塊的位置,以playhead為分界點,timeline線以上的這塊區域,在紅色範圍內按右鍵拖拉即可設定過去的keyframes顯示,而綠色範圍內右鍵拖拉即可設定未來的keyframes顯示


.在Timeline上也以一次選取多個Keyframes,下圖中,先點一下a,按著"shift"不放再點一下b,即可選取多個keyframes。選取後,可進行移動、複製貼上等功能,也可在選取多個的狀態下,按著"alt"不放,去拖拉a點或b點,即可做整串keyframe的壓縮及放大。


.Spriter也提供了Bones系統及IK功能,只要在stage上空白處,按著"alt"同時以滑鼠點擊拖拉即可拉出一個Bone。在選取某個Bone的狀況下新增Bone的話,則新的Bone則會是原來選取的Bone的Child。選取任何Bone時,都會以顏色提示其主從關係,如下圖


.另外也可以在左側的Bone Hierarchy面板調整Bone的主從關係,在這面板也可以為各個Bone命名,以及將元件與Bone綁定,如下圖,head_2.png即與bone_000綁定在一起。這個面板是以樹狀結構呈現,一切都用拖拉即可完成。最後要注意一點,這個面板會列出所有Bones及stage上的元件,如果沒看到元件,可能是右上角的眼睛沒點開。(Show Sprites in Heirarchy)


.在調整Bone時,一樣有方形的形變控制點及圓形的旋轉控制點,當按著"shift"同時調整旋轉控制點的話,即可開啟IK功能。而在Bone上按下右鍵的話,會出現IK的錨點功能,也就是這段Bone的終點會釘在某個位置,並牽制其他Bone的變動。


.完成一串動畫即可存成一則animation,右側下的Animations可檢視目前所有的animation,並可在此面板中新增、複製、刪除animation,一個SCML檔可存入多個animations


.最後當所有動作都完成時,選擇"File"->"Save Project"即可存檔(同時會產生scml檔),然後就可以拿去做程式開發了。

.Spriter目前還在alpha,所以還有很多bug,例如偶爾會無預警關閉,用IK時bone會往奇怪的角度旋轉、莫明產生keyframe…等,都不是什麼大問題,不過建議就是勤於存檔,並期待正式版時這些bug都清掉。若發現什麼bug想通報作者的話,可參考這篇的回報方式。



Index:
Spriter好好玩系列 (一) ---- 什麼是Spriter ?
Spriter好好玩系列 (二) ---- Spriter 基本操作
Spriter好好玩系列 (三) ---- 使用SpriterAS
Spriter好好玩系列 (四) ---- 使用SpriterMC

沒有留言: