高見龍

iOS app/Ruby/Rails 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