[Flash] Elec­tric Dog Flash Ani­ma­tion Power Tools for Animator

在Flash中製作2D動畫（在此指的是紙片人式2D動畫，類似骨骼動畫之形式）是相當麻煩的，原因之一是操作太過原始、瑣碎，浪費相當多的時間，而Elec­tric Dog Flash Ani­ma­tion Power Tools（以下簡稱EDAPT）這個工具，透過commands及metadata使的操作變得更加簡單快速，並且具有階層性骨架結構的操作功能。這個工具的好處是輕量能簡易上手，功能不龐大，適合單純使用Flash的使用者，唯使用此工具可能會需要一段時間做Setup，因此實際上是否能帶來更有效的製作流程得看製作需求與個人習慣而定。官方網站如下：

Flash Power Tool - Elec­tric Dog Flash Ani­ma­tion Power Tools

要注意這個工具是從強化Flash的操作之角度所設計，而其提供的一些功能（commands）其實都可以手動完成，EDAPT只是幫你做了自動化處理，當然也有手動無法替代的功能，這就是他最重要的部份。

此工具主要的功能是：

1. Magnet Target
   透過預先設置在元件內的Magnet Target（一個作為定位用的元件），別的元件即可吸附到這個位置上（執行指令後，會去尋找最近的有效Magnet Target並將所選元件對齊該位置）。
   ※可以把Magnet Target想成是骨頭的結束點，而起始點就是元件的註冊點。
2. Hierarchy Rig
   能夠定義骨架階層，建立一個骨架結構，再把場景上的元件綁定到骨架結構上，如此就可以達到具有骨架階層關係的操作系統，例如可以自動選擇所有子元件。

EDAPT原本提供的Set Magnet Target command並不是很人性化，因此我修改了一個版本，將該command的運作方式改為：

1. 先選擇場景上想要成為Parent的元件
2. 再選擇要成為Child的元件
3. 執行Command
4. 即可在父元件內的正確位置上產生Magnet Target

日後再將此command share出來。

[Flash]製作Extensions - 封裝ZXP擴充功能

本文寫的是針對Flash CS6版本的Extension製作，在CC版本中Extension的封裝已經改由Extension Packager負責。

製作Extension時必須要先製作一個mxi檔案，用於敘述這個Extension的資訊，而這個mxi檔案最機車的地方就是所有要封裝的檔案都必須要寫在其中…因此如果你有30個檔案就要寫30行…而這個mxi檔案主要需要編寫的地方是…

[PNG] PNG壓縮工具 - 更佳的壓縮率 - PNG Gauntlet

對遊戲研發來說，美術素材絕對是整個遊戲容量的最大問題來源，尤其現在的手遊市場、中國低階市場對遊戲容量（包）的要求更是嚴苛。那麼美術人員能夠做什麼樣的優化，讓美術資源佔用更少容量呢？從量最大的Texture來說，大部分的美術人員用Photoshop等工具存出圖檔後就不會再做任何處理，但其實Photoshop在檔案輸出的部份優化的並不是很好，我們可以透過其他的工具讓輸出的圖片容量更小，且達到幾乎完全相同的品質。在此就介紹一個可以有效壓縮PNG的軟體「PNG Gauntlet」，這個軟體是我在參與2013 GDC Taipei時聽到Qubit Games的創始人兼美術總監路致遠先生提到才知道的，因為過往我也是個不太care這個問題的美術…

PNG Gauntlet

http://pnggauntlet.com/

[Flash]Transformation Matrix

本篇僅做紀錄用

座標系

原點{x:0, y:0}在左上角
+x向右
+y向下

Affine transformation

http://en.wikipedia.org/wiki/Affine_transformation

Flash的Transformation Matrix：

[DragonBones]讓物件隱藏顯示又保有骨架繼承

由於DragonBones的骨架結構是具有繼承效果的（會繼承父骨頭的位置、傾斜），因此當父骨頭（圖層）沒有內容物（空白關鍵影格），而子骨頭又還有內容物時，就會造成子骨頭的位移繼承錯誤，跑出奇怪的動態結果，而這個問題的解決方法就是用隱藏內容物來替代刪除內容物。

隱藏內容物只是將影格中的元件不顯示，元件仍然存在在影格之中，如此可讓內容物不被看到但又不會丟失骨架繼承，但這個技巧只能作用在影片片段元件上，可以透過屬性面板中的顯示頁籤的『可見』參數設定該元件會不會被顯示出來，而DragonBones會把這個參數寫入匯出的資料中，在xml檔案內參數名稱是hide。

可見參數可以控制元件的顯示狀態

可見參數會被DragonBones輸出為hide參數

參考：

• http://dragonbones.effecthub.com/doc/DBSkeletonDataFormatSpec_V2.4_cn.xml
  hide: Slot是否隐藏，与把骨骼从时间轴动画删除不同，控制Slot的visible。

[Spine] Spine匯入Unity，使Spine中的Root motion在Unity中實現

Spine進Unity，是不會像FBX一樣可以把FBX中的Root motion直接當作Unity中Game object的Root motion，因此需要額外自己寫script實現，在Spine Forum中有一篇討論串有討論到這個問題：

Applying Root Motion

Mitch 提供了一個解決方案

Had to modify SkeletonAnimation and add a callback between Update and Apply because the Time and LastTime are set to be equivalent by the time UpdateBones is called.

修改了SkeletonAnimation.cs以及SkeletonRootMotion.cs兩個檔案，實現X軸的Root motion。但是我的需求是X及Y軸都需要實現，因此對SkeletonRootMotion.cs做了一些修改，修改後的結果post在Forum中，在這邊補充一下，我不是Programmer所以Code可能不盡完善、正確...

http://esotericsoftware.com/forum/viewtopic.php?f=7&t=1364&start=26

也可以在我的GitHub上查看，檔案內直接保留了Mitch原始的code，可以直接做比對：

https://github.com/januswow/TAG/blob/master/TouchActionGame/Assets/spine-unity/Assets/spine-unity/SkeletonRootMotion.cs

主要的重點是Spine的Frames Data是以[time, x, y, ... time, x, y]的格式寫入，因此在GetXYAtTime()時，frames變數（timeline.frames）的取用需要注意：

float lastFrameX = frames[frameIndex - 2];

float lastFrameY = frames[frameIndex - 1];

另外一個題外話，由於Spine輸出的資訊完全不同於FBX，因此尚無法搭配Mecanim系統，不過nicloay有寫一個Importer，使Spine能夠在Mecanim中運作，可惜的是無法支援全部的資訊，如FFD等...

http://esotericsoftware.com/forum/viewtopic.php?f=11&t=2012

動作流程控制參考：

• PLAYMAKER Integration
  http://esotericsoftware.com/forum/viewtopic.php?f=7&t=3288
• [UNITY] Animation State Workflow?
  http://esotericsoftware.com/forum/viewtopic.php?f=7&t=3772&p=18381&hilit=mecanim#p18381
  在這邊有提到Unity5的Mecanim也許可以支援

[DragonBones]Texture Atlas Packing功能解說

DragonBones本身就具有Texture Atlas Packing的功能，可將所有使用到的圖片素材拼湊成一張貼圖，使用者不需要再使用額外的軟體製作Atlas，相當便利。在此將分享我對此功能的一些小心得…

首先我會建議所有的素材（點陣圖）一定都要先包成元件，原因是…

• 元件才可以做顏色效果（Alpha、進階）
• 元件做補間才不會意外生成額外的點陣圖資源
• 影片片段元件可以使用隱藏顯示功能

Texture Atlas Packing規則，打包的對象須符合以下條件…

• 元件
• 不含動畫（timeline只有一個frame的長度）
• 不含動作名稱label
• （或者是未包成元件的點陣圖或形狀…）

對於符合打包對象條件的元件，需要注意的是

• 打包的對象是元件，而非元件內的點陣圖
• 只要元件的名稱不相同，就會被視為不同的對象並打包起來
  例如重製了一個元件，儘管重製的元件與原始元件內容物一模一樣，也會因為其元件名稱不同，而被各自打包一次
• 會直接將該元件Pack到Atlas之中
• 元件內的內容會直接被合併成一張圖

  

  符合打包條件的元件的內容會被直接合併成一張圖

  
  若要避免這種狀況發生，可以使用下面兩種方法…
• 添加動作名稱label
• 將timeline長度加長到2個frames以上
  （如此該元件會被視為一個獨立的skeleton（armature））
• 不可對元件內的點陣圖做放大變形
  因為Pack的圖素會是放大後的尺寸，而非點陣圖的原始尺寸

匯出

• 可以設定貼圖的尺寸比例
• 可選擇匯出Atlas或者是各別的png檔案

  

  匯出面板（Design Panel 3.0）

其他需注意的事項

• Flash CS6會無法匯入超過4096*2048的貼圖（Flash CC無此問題）
  會造成無效的BitmapData錯誤訊息

[DragonBones]變換顯示順序 Changeable Z-Order

在製作角色動畫時，時常會有要變換顯示順序的需求，例如原本在身後的武器要移動到身前來，而在Flash要達成這效果，自然就是新增一個同樣也是武器的圖層在想要的順序上，但此時需要注意的是DragonBones對於這點有提供一項功能：Changeable Z-Order，可將這些因變換顯示順序需求而新增的圖層與原始圖層視為同一個骨頭（圖層），利用這點可以有效減少DragonBones角色的骨頭總數，降低進入引擎後的效能消耗。

而要實現這個功能必須要符合規則：

• 這些圖層的名稱需要完全一樣
• 這些圖層的影格不可互相重疊

  

  變換顯示順序時圖層必須同名且影格互不重疊

如此DragonBones才能正確的將這些圖層視為同一個骨頭（圖層），如果在匯入DragonBones之後發現這些圖層被DragonBones自動加上後綴流水號即代表失敗了。另外也可以在Export後的skeleton檔案（在此舉例xml）中進行驗證，檢查frame的z值是否有正確變化。

skeleton.xml內的z值

[DragonBones]事件觸發

DragonBones可利用Flash中所設定的影格標籤來觸發事件，達成Hit frame等目的，而設定的標籤須符合「@事件名稱」的規則，如：@attack。

事件Label

另外標籤所在的圖層也會造成差異，有以下兩種案例：

• label圖層

設定在label圖層中的事件，在API中是屬於AnimationEvent，此種事件只能獲取到骨架（armature）

AnimationEvent

• bone圖層（label圖層之外的圖層都是bone圖層）

設定在bone圖層中的事件，在API中是屬於FrameEvent，此種事件可獲取到所屬的骨頭（bone）

因此將事件設定在bone圖層中時，可以順便獲取所屬影格中的元件位置來做定位，舉例，當事件發生時會呼叫一個分離特效並產生在角色的手上，那就可以把事件種在手的圖層中，或者是額外的定位圖層中。 

FrameEvent

[Flash]製作Extensions - 建立 SWF Panel

Flash Extension的Panel可以用SWF檔案來呈現，先在Flash中把需要的Panel製作出來，並且撰寫ActionScript進行控制，也可與JSFL做溝通，如此就可呈現一個完整的流程。

在此列出幾項重點：

• 可利用組件來製作Panel

  

  Flash組件

• SWF檔案必須置放在Flash Config目錄中的WindowSWF目錄內
  
  如此在Flash啟動時才能正確加載面板到Menu>視窗>擴充功能中。
  
  WindowSWF目錄的所在路徑預設是（Win 7）：
  \\Users\user_name\AppData\Local\Adobe\flash_version\language\Configuration\
  如果不是在此可利用JSFL的fl.configDirectory來查找。
• 讓SWF與JSFL溝通：MMExecute
  
  MMExecute("fl.runScript(fl.configURI + 'WindowSWF/filename.jsfl', 'function_name';)");
  
  fl.runScript(fileURI [, funcName [, arg1, arg2, ...]])
  
  MMExecute可以在ActionScript中實現JSFL指令，再透過JSFL的fl.runScript可以去呼叫指定的JSFL檔案。
  
  第一個引數，是目標JSFL檔案的路徑，為管理方便一般會將該Extension所用到的JSFL統一集中在一個目錄內並置放在WindowSWF目錄中。在此可透過fl.configURI獲取Flash Config目錄路徑。

  

  Flash Config WindowSWF目錄路徑（Win 7）

  第二個選擇性引數，是指定執行該JSFL內特定的Function。
  

  

  MMExecute

• Panel及JSFL的更新不需重新啟動Flash
  
  只有首次的Panel載入需要重新啟動Flash，在這之後只要覆蓋原始檔案即可即時更新。

為組件按鈕增加圖示

預設的組件按鈕只能夠從屬性面板設定Label，想要圖示按鈕的話需要透過Action Script：

 btn.setStyle("icon", as_linkage);

as_linkage為元件庫中Icon元件的AS連結名稱，該元件的註冊點將會對齊按鈕的左上方。

[DragonBones]Design Panel V3.0.0 Release Notes

V3.0.0 Release Notes
V3.0.0 includes High priority bug fixing and improvements.
New Features:
    1. The new Export panel support:
     1)Separate the data format and texture format drop down list.
     2)Export AMF(Binary) data format.
     3)Modifiable skeleton data filename, texture data filename, etc.
    2. Designpanel support drag bones to create bones in armature view.
    3. Animation support gotoAndStop.
    4. Looped Animation support play backward.
    5. Factory and DataParser support delay parse animation data in parse data process.
    6. Improve performance by cache animation and adjust animation sampling rate.
    7. Improve performance by optimize handling still bones.
Improvements:
    1. Designpanel support switch auto tween between key frames in a animation.
    2. Designpanel support quickly play previous and next animation in armature.
    3. Remove DisplayBridge. Use Slot to replace it. Each rendering engine need to extend Slot to integrated with DragonBones.

[Spine] AnimationState Events

在Spine的Runtimes中，AnimationState有幾個Events可以使用。

• Start
• Complete
• End
• Event

這幾個事件的觸發時機是：

• Start
  當一個動作開始播放時（在此推測應該是開始Mixing的時候，尚未驗證…）
• Complete
  當動作（Animation）完成完整的播放時，若是Looping的Animation則會在每個Loop結束時觸發一次。
• 每個循環結束時觸發
• 當動作完整的播放完畢時
• End
  當動作結束時，其他與Complete相同
• 每個循環結束時觸發
• 當動作完整的播放完畢時
• 當動作結束時（例如在動作播放途中被切換成其他動作）
• 動作被終止或者清除掉時
• Event
  當Event Track有設置Event時（在此指Spine Editor中設置的Event）（尚未確認）

在使用End事件時需要注意，不可在End事件中做SetAnimation的動作，因為SetAnimation後動作被打斷又會再觸發End事件，造成無限迴圈的狀況。

Complete與End是Pharan在Spine Forum中所做的說明，來源如下

http://esotericsoftware.com/forum/viewtopic.php?p=17404

[Spine] 動作進入Runtimes時，發生動作互相干擾的問題

使用Spine應該都會遇到一個狀況，就是A動作結束之後進入B動作，卻發現B動作的某些骨頭的動態有問題，看起來是受到A動作干擾，這是因為Spine的設計是當該Track不帶有Keyframes時，就會延續上一個動作的資訊！所以解決方式就是在動作的起始幀對每一個Track上Key。

詳見官網文件：
http://esotericsoftware.com/spine-using-runtimes#Animation-changes

An animation only affects the bones and slots for which it has keyframes.

When animations are applied in sequence, a previous animation may have made changes to bones or slots that a subsequent animation does not have keyframes for.

This can be solved be keying everything at the start of the second animation that the first animation affects.

文件有提到對每個Track打上key是會造成額外的運算負擔，但若是增加的幅度很小，其實也可以無視了。

With many animations this quickly leads to everything being keyed at the start of every animation. This is suboptimal because each property that is keyed adds a small amount of overhead when the animation is applied each frame.

文件也提出第二種解決方式，就是歸回SetupPose，但造成的負面影響是動作可能會發生不順暢、無法crossfading的狀況。 

Another solution is to call setToSetupPose, setBonesToSetupPose, or setSlotsToSetupPose on the skeleton when the current animation is changed (or otherwise write code that changes the slots and bones as needed).

However, this will cause bones that aren't keyed in the second animation to be instantly set to the setup pose state. AnimationState won't be able to do crossfading for those bones.

[Spine] 熱鍵

http://esotericsoftware.com/spine-cheat-sheet

[Flash] JSFL - Convert Symbol to Bitmap in Current Layer

第一次撰寫JSFL，做個紀錄...

目的：

將正在選擇中的唯一圖層中的每個Keyframe中的所有Symbol物件轉為Bitmap

參考：

1. Flash Reference
   http://help.adobe.com/en_US/flash/cs/extend/index.html

Code snippet - [Flash] JSFL - Convert Symbol to Bitmap in Current Layer on Snipplr

[3dsMax] Customize Shortcut

Next/Previous Key Mode Toggle
Alt + ,

Select and Manipulate
Alt + M

Select Object
Q

Scale
R

Layer Manager
Alt + ;

Curve Editor
Alt + '

Save File As
Ctrl + Shift + S