系統雛型發展介紹

原本用來進行開發之 FLARToolkit 在用來製作單一 marker 的擴增實境時難度並不高，不 過在需要載入 multi-marker 並將各個 marker 對應編號，在實作上難度相當高，為了不延誤研 究時程的進行，轉而嘗試以 FLARManager Flash CS4 版

（http://rawkes.com/blog/2010/01/26/tracking-multiple-augmented-reality-markers-flarmanager-an d-papervision）和 EZFLAR（https://github.com/tcha-tcho/EZFLAR）進行開發，在經過多方嘗 試後，本研究採用語法整合度較高的 EZFLAR 作為開發套件，以縮短開發的時程。

要在擴增實境中達成可觸式的效果，必須依靠 FLARMarkerEvent.as 對 marker 的偵測，

從 Butterfly Animation（http://wonderfl.net/c/yUB8）可以發現，由於 FLARToolkit 本身沒有 FLARMarkerEvent.as 這個類別檔，程式開發者是直接將其寫在主程式中（如圖 18），而非以 import 的方式載入，這在單一 marker 時不會產生太大的問題；不過在 multi-marker 的環境中，

一方面要程式判別是哪一個 marker，一方面又要程式依照對應的 marker 產生相對應的功能，

不僅會造成程式碼過於冗長，而且在開發過程的除錯階段也不易找出問題所在。

圖 18 Butterfly Animation 主程式中所包含的 MarkerEvent

在 FLARManager Flash CS4 版的套件中，則改進這方面的問題，以 xml（如圖 19）的方 式，直接對 marker 進行編碼，這對於程式開發而言，相當的簡潔明瞭，不過在載入 3D 物件 和 PV3D 的方法上，步驟仍然相當繁瑣。

圖 19 以 xml 管理的各個 marker pattern

EZFLAR 的套件中，不僅整合了 FLARMarkerEvent.as，並且針對物件的宣告與載入做了 進一步的改善，只要將要載入的物件名稱與路徑設定好（EZFLAR 預設支援副檔名有：swf、

flv、dae、md2、jpg、jpeg、png、gif 和 mp3 等多媒體檔案），即可將相關的物件載入，對於 開發者而言相當的簡便，並且依照載入的物件順序自動編號（如圖 20）。

圖 20 EZFLAR 載入的物件示意圖

由上圖可以看出載入的物件總共有 8 個，依序為：

1. atlas-1.pat 對應 b3s_ani.DAE，名稱為 mydae4，系統自動編號為 0。

2. AR_marker_right.pat 對應 right.gif，名稱為 mypng2，系統自動編號為 1。

3. AR_marker_left.pat 對應 left.gif，名稱為 mypng3，系統自動編號為 2。

4. AR_marker_down.pat 對應 down.gif，名稱為 mypng4，系統自動編號為 3。

5. AR_marker_up.pat 對應 up.gif，名稱為 mypng5，系統自動編號為 4。

6. AR_marker_big.pat 對應 big.gif，名稱為 mypng6，系統自動編號為 5。

7. AR_marker_small.pat 對應 small.gif，名稱為 mypng7，系統自動編號為 6。

8. video-1.pat 對應 02.swf，名稱為 myflv，系統自動編號為 7。

在需要對單一 marker 做設定時，只要如圖 21 所示即可：

圖 21 各 marker 的設定

其規則為：「（編號 , “名稱＂）.設定值;」，以 3D 物件編號 0 為例，「_ezflar.getObject(0,＂

mydae4＂).rotationX=-90;」即表示對 0 號物件名稱為「mydae4」的 3D 物件以 X 軸為中心旋 轉-90 度。

在完成各個物件的載入之後，若要實作出可觸式擴增實境的按鈕，則只需要在相關的三 個 function 中設定即可：

1. _ezflar.onAdded(function(marker:FLARMarkerEvent):void{

});

2. _ezflar.onRemoved(function(marker:FLARMarkerEvent):void{

});

3. _ezflar.onUpdated(function(marker:FLARMarkerEvent):void{

});

透過偵測各個 patternId 編號的有無以及程式碼撰寫位置的不同，來實作擴增實境的按 鈕，進而發展出：單一按壓單一動作、單次觸發連續動作與單次按壓連續動作等，總計三種 擴增實境的功能按鈕，以下逐一說明。

一、單一按壓單一動作

當偵測到 marker 時，3D 皇蛾物件不動作，當偵測到 marker 被移除時，3D 皇蛾則產生 動作，因此將相關的程式碼撰寫於_ezflar.onAdded 和_ezflar.onRemoved 之中，如圖 22 與圖 23 所示：

圖 22 marker 被偵測到時_ezflar.onAdded 內的程式碼

圖 23 marker 被移除時_ezflar.onRemoved 內的程式碼

這是最初設計使用的單一按壓單一動作的可觸式擴增實境按鈕（如圖 24），不過在進行 內容效度討論後，認為頻繁的按壓與 WebCam 偵測皆須要等待時間，在操作上較為不順暢，

可能因此影響使用者的使用意願與心情，所以將系統運作模式改為觸發後連續動作。

圖 24 單次按壓單一動作

二、單次觸發連續動作

在經過內容效度討論後改將運作方式改為單次觸發連續動作，實作的方法則是將擴增實 境的按鈕撰寫於_ezflar.onRemoved 和_ezflar.onUpdated 之中，以形成當 WebCam 沒有偵測到 marker 加入或被移除時，即保持 onRemoved 的狀態，若 marker 加入，則透過程式內的 onUpdated

機制持續執行該項設定，其程式碼如圖 25 與圖 26 所示：

圖 25 marker 被移除或不存在時_ezflar.onRemoved 內的程式碼

圖 26 marker 被加入時_ezflar.onUpdated 內的程式碼

觸發後連續動作解決了流暢性的問題，但其缺點在於以 WebCam 偵測立方體上的 marker 做觸發，一放上去就會改變，對於使用者而言，除了需要一點時間去熟記各個面的對應關係 外，再加上 WebCam 鏡頭廣度比較窄，使用者在操作立方體上的 marker 時，常會干擾、遮蔽 到 3D 皇蛾物件的 marker，造成操作上的不連貫，因此將此操作模式排除。

三、單次按壓連續動作

由於以立方體為操作的模式不完全符合需求，因此將操作介面由立體的介面改為平面的 按鈕介面，並考量到鏡頭廣度的問題，將擴增實境按鈕數由原本的 6 個改為 4 個，另外，在 測試中也發現，複雜度較高的 marker，容易因為現場光源與光影的影響，而讓程式產生誤判 的情況，因此一併修改影片播放的對應 marker，如表 14 所示：

表 14 修正後各 marker 的對應關係表

編號 功能說明 Marker 圖形 Marker 所對應的物件

1.

控制 3D 皇蛾物件 的 Y 軸轉動

2.

控制 3D 皇蛾物件 的 Z 軸轉動

3.

3D 皇蛾物件的放 大

4.

3D 皇蛾物件的縮 小

5.

影片播放

6.

3D 虛擬物件-皇蛾

（影片改編自：http://www.youtube.com/watch?v=9r9Laslf4hc&NR=1）

由上述的兩個操作介面發展過程中可以發現，流暢性與簡單、易用對於使用者而言相當 重要，因此本次將原來構想的立方體操作介面，修改為平面 4 個按鈕 marker 和 1 個 3D 皇蛾 物件 marker，讓使用者在操作上更一目瞭然，若要播放影片則將紙張翻面即可。

在程式的撰寫上，則是將程式碼置於_ezflar.onAdded 和_ezflar.onUpdated 之中，當 marker 偵測到時，3D 皇蛾物件維持原狀，當 3D 皇蛾物件仍在，但是按鈕的 marker 被移除或被遮蔽，

則持續旋轉 Z 軸和旋轉 Y 軸（如圖 27 與圖 28）；但是，放大與縮小的功能因為是兩個相反的 功能屬性，無法兩個都同時以旋轉 Z 軸和旋轉 Y 軸一般的方法撰寫，變通的辦法是在

_ezflar.onUpdated 之中將兩個 marker 設定為一正一負且絕對值相等的數值，使其在兩個 marker 都有偵測到的情況下，互相抵銷，處於靜止狀態，當其中一個被移除或遮蔽，無法相互抵銷 時，則產生放大或縮小的功能（如圖 29），另外再於_ezflar.onRemoved 中設定放大或縮小 marker 被移除或遮蔽時與 3D 皇蛾物件的對應關係（如圖 30）

圖 27 偵測到編號 1 和 2 維持原狀

圖 28 當編號 1 或 2 不見但編號 0 仍在則旋轉 Z 軸或 Y 軸

圖 29 當編號 3 和 4 都在時數值會互相抵銷，反之則放大或縮小

圖 30 當編號 3 和 4 被移除時_ezflar.onRemoved 中不產生作用

不過進行內容效度評估時卻發現，原本採用 U 字形排列的按鈕，可能因為手指要按上方 的按鈕卻未習慣 AR 按鈕不可遮蔽的特性，而誤觸下方的按鈕，形成同時觸發兩個按鈕的狀 態（如圖 31），有影響使用者操作意願與心情的疑慮，因此再將按鈕的排列方式調整為一字 排列情況（如圖 32），而影片播放則如前述將 marker 至於後方，翻面即可播放（如圖 33 影 片改編自：http://www.youtube.com/watch?v=9r9Laslf4hc&NR=1，詳細實驗場地佈置圖如附錄 3 所示）。

圖 31 採用 U 形排列可能產生誤觸的情況

圖 32 採用一字形排列的 AR 按鈕

誤觸

圖 33 marker 對應皇蛾生態解說影片