高見龍

Developer & Instructor, 喜愛非主流的新玩具 :)

Zoë – 從SWF匯出SpriteSheet的方便工具

前一篇簡單的介紹了一下EaselJS，其中有個類別叫做SpriteSheet，其實它就是把一些連續動作的圖片排排站的集合拼成一張圖，把檔案及相關的frame data包成SpriteSheet之後，再讓這些連續圖檔連續播放，感覺就會像動畫了。在之後的文章應該還會有更多關於SpriteSheet的說明，如果你還是沒辦法想像Spritesheet是怎麼回事，你可以回想一下設計師在Flash做動畫的時候，會在時間軸上安插一堆的關鍵影格(Key Frame)，然後讓每個關鍵影格的動作都稍微有些變化，大概就是這樣的概念，只是HTML5並沒有時間軸可以用。

一個跑步的角色的SpriteSheet圖片可能會長這樣：

image

感謝Maso哥提供!

若你之前曾經用Flash做過些小遊戲，有些動態效果你已經做成MovieClip了，你當然可以打開繪圖軟體來一塊一塊的拼貼成SpriteSheet圖檔，然後還得自己寫frame data，這樣實在有些辛苦。有鑑於此，Grant Skinner大神用Adobe AIR寫了個叫做Zoë小工具，可以讓你很容易的把SWF裡的東西轉成SpriteSheet圖檔，而且還順便幫你產生一個給EaselJS用的frame data。(GS大神請受我一拜!)

安裝

請到Zoë的下載頁面下載相關檔案，再來解壓縮、安裝，應該沒什麼太大的難度。(Zoë是用Adobe AIR寫的，所以你的電腦也需要安裝AIR的runtime)

使用

打開安裝好的Zoë，然後把SWF拖進去，它會自動開始幫你算邊界(bound)，或是你也可以自己切到Bounds功能按下Calculate按鈕：

image

再切到Export功能，勾選EaselJS，按下Export按鈕：

image

然後，你會得到一張拼好的png圖檔像這樣：

image

同時你還會得到一個同名的js檔，內容如下：

1
2
3
4
5
6

var frameData = {
  run:[0,4]
};
var img = new Image()
img.src = "hero.png"
var spriteSheet = new SpriteSheet(img,48,68,frameData);

如果你發現你的frameData裡面是空的，可能是因為你少了label關係，這是我在Flash IDE裡的樣子：

image

老實說這軟體沒什麼好介紹的，就是執行、匯出..就這樣。

用這樣轉檔有什麼好處? 首先，如果你之前有做好的動態，至少不用再手工拼貼連續圖。就算是從頭開始做，對設計師來說，在Flash使用關鍵影格來做動態也是很方便的(這是Flash的強項啊)。

動手寫code了

接下來，來試著讓這個SpriteSheet動起來!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <title>SpriteSheet Demo</title>
  <script type="text/javascript" src="easel.js"></script>
  <style type="text/css" media="screen">
    #my_canvas{
      background-color: gray;
    }
  </style>
  <script type="text/javascript">
    var stage;

    function init()
    {
      var canvas = document.getElementById("my_canvas");
      stage = new Stage(canvas);

      var frameData = {
        run:[0,4]
      };
      var img = new Image()
      img.src = "hero.png";
      var spriteSheet = new SpriteSheet(img,48,68,frameData);

      var hero = new BitmapSequence(spriteSheet);
      hero.gotoAndPlay("run");

      stage.addChild(hero);
      stage.update();

      Ticker.setFPS(24);
      Ticker.addListener(this);
    }

    function tick()
    {
      stage.update();
    }
  </script>
</head>
<body onload="javascript:init();">
<canvas width="200" height="80" id="my_canvas"></canvas>
</body>
</html>

效果如下：

或按這裡檢視。

程式碼跟上一個範例沒有太大的差別，中間那段SpriteSheet的內容是從剛剛產出的同名js剪過來的。但SpriteSheet本身並不是DisplayObject的一種，所以需要來個BitmapSequence來把它包起來，然後執行閃客們都很熟悉的gotoAndPlay()：

1
2

var hero = new BitmapSequence(spriteSheet);
hero.gotoAndPlay("run");

看吧，不用幾行程式碼就能讓帥氣的廖添丁動起來了!!

最後，要再感謝一下Maso哥提供的原始檔。至於會不會在不久的將來就會看到HTML5版的廖添丁呢.. 也許大家可以期待一下囉。

Comments