第三章 系統架構與研究方法
第一節 研究方法
第三章 系統架構與研究方法
本研究透過下列所述之研究方法、觀察與訪談法、以及研究流程等三節，
分別說明本研究的實施方法與步驟。
第一節 研究方法
本研究預期透過擴增實境的技術、行動載具的互動設計與擴增實境應用 程式的相關案例分析，探討擴增實境的技術應用於行動載具應用程式的開發，
提供不同的介面設計與互動模式。本研究採用系統需求分析、雛型開發試驗來 開發應用程式，反覆修正開發雛型之後，再以觀察法觀察使用者操作應用程式 的過程及訪談使用者操作之後的感受相互應用，最後分析與歸納出擴增實境技 術應用於行動載具的應用程式開發之結論與建議，研究方法內容敘述如下：
一、文獻回顧與分析
本研究採用文獻回顧、分析、蒐集與本研究相關的文獻資料。並針對擴 增實境的技術與發展、行動載具擴增實境之技術與套件的介紹與發展、擴增實 境應用程式的實例等文獻，統整與分析相關理論與應用，作為擴增實境技術運 用在型動載具應用程式開發的基礎。
二、雛型開發法
本研究經由文獻回顧及分析，開發實作上的需求與要點，將運用擴增實 境技術開發行動載具上的應用程式。本研究使用雛型開發來驗證，以雛型開發 進行實作雛型設計，藉由雛型開發的快速驗證需求、使用者參與度高、開發彈 性高、接受程度高等優點，進行開發的流程，最後完成本研究。
依據本研究提出幾項需求，來進行雛型的設計。
1. 使用行動載具的擴增實境套件開發應用程式。
2. 以 IOS 系統的智慧型載具為開發平台。
3. 開發多樣的互動功能及簡單直覺的介面設計，提供良好的互動體驗。
4. 結合生活化的應用開發應用程式。
20
圖 3-1 本研究雛型開發流程圖
本研究的雛型開發以林淑芬（1993）所提出的系統雛型發展法進行雛型 開發，分成系統規畫、需求分析、系統設計、建立雛型、評估雛型，本研究將 以這五個項目作為系統開發步驟，項目說明如下：
1.需求分析：分析應用程式所需要的功能，規畫相關需求。
2.系統設計：本研究預期以擴增實境技術結合行動載具開發應用程式。
3.建立雛型：透過雛型開發流程與步驟，以擴增實境技術結合行動載具 開發相關的應用程式應用案例。
4.評估雛型：透過觀察與訪談使用者的反應、回饋及意見來修正雛型。
雛型開發流程圖 3-2 如下所示。
需求分析
系統開發與設計
建立雛型
評估雛型
實作成果
uforia的無標 使用3DM
使用者意見 介面 移動、旋轉 uforia的無標
使用3DM
22 MAX及Unit
雛型一開發 MAX及Unit
雛型二開發
arkerless)辨 作
ty3D製作 發
arkerless)辨 作
ty3D製作 發
程圖
程圖 改雛型
iPhone及iP 辨識
改雛型 iPhone及 辨識
Pad
及iPad
Niel 重點 uforia的無標
使用FFCod
23 及 Borsook,T
式直接回答訪 der轉檔及U
雛型三開發
海報」開發流 法與訪談法
覺器官及相 阮綠茵(2007 關問題與意
arkerless)辨 作
Unity3D製作 發 iPhone及 辨識 及iPad
25
第四章 系統設計與實作
本研究將開發出三項實驗應用程式案例，分別為「手指足球」、
「變裝喬巴」及「魔術海報」，實驗應用案例建置使用 Qualcomm（高通公司）
所開發的 Vuforia 行動載具擴增實境套件，Vuforia 是針對行動載具所開發的應 用套件，是 Unity3D 軟體的外掛程式，內容包含了適合於行動載具擴增實境的 動作（Action），且使用無標記式的辨識技術，可以開發出符合本研究需求的應 用程式。其他軟體的部分會使用 3Ds Max2012 及 Unity3D 3.4.2 製作 3D 模型，用 Photoshop CS5 設計圖卡與應用程式介面，Xcode 4.3.2 設定應用程式的內容；硬 體的部分則需要使用 iPhone4 或是 iPad2 以上規格的行動載具，以下將有詳細的 介紹。
第一節 應用案例一：手指足球
一、設計概念
足球是一項很常見的運動項目，通常是用雙腳來進行競賽或遊戲，本研 究應用案例嘗試運用擴增實境的技術與互動方式，結合足球運動，讓使用者在 操作行動載具中的擴增時竟應用程式時，可以與螢幕畫面上的足球進行互動，
使用者只要透過手指觸碰足球，足球就能滾動，也可以多人一起操作，達到於 樂的效果。本應用案例透過趣味的操作方式及創新的互動模式呈現，讓使用者 留下深刻的印象。
二、3D 模型設計
手指足球的足球模型設計是以 3Ds Max 2012 軟體製作，再匯出到
Unity3D 使用，而因為模型的檔案格式有很多種，兩個軟體之間能相容的格式只 有 fbx 檔，因此在設計模型時，必須在 3Ds Max 2012 中把足球的材質、貼圖設 定完成，再匯出成通用的 fbx 檔，才能匯入 Unity3D 讀取使用。FBX 格式的檔 案是一種記錄 3D 模型與動畫的檔案格式，本來是一套 FilmBox 所使用的檔案格 式，後來 FBX 檔案格式變成了 AutoDesk 公司的 3D Studio Max、Maya、
MotionBuilder 互相專換資料的通用檔案格式。圖 4-1 及圖 4-2 為手指足球的模型 設計。
三
機互 球物 為
、互動介面
本研究 互動介面是 物件上，就
「手指足球
圖
面設計 究是運用圖卡 是利用 Vufor 就能透過行動 球」的互動示
圖 4-1 使用 3
圖 4-2 使用
卡（Marker ria 套件的虛 動載具的攝 示意圖。
26
3Ds Max 20
用 Unity3D
）為媒介進 虛擬按鍵技 攝影機辨識物
012 製作模型
讀取模型
進行人機介面 技術，透過軟
物件被碰觸 型
面設計，手 軟體設定將 觸的方向而滾
手指足球的人 將按鍵依附在
滾動。圖 4-人 在足
-4
27
圖 4-3 手指足球圖卡設計
圖 4-4 「手指足球」的互動示意圖
「手指足球」的 Marker 是設計成一座迷你的足球場，使用者能在球場範 圍內用手指操控足球，周圍則設計了界線，當足球碰到界線時會反彈到場內，
表 4-1 為應用案例一軟硬體的細項，硬體載具 iPad2 及 iPhone4，作業系統為 iOS 使用 iPad 或 iPhone 感應圖卡
應用案例對應的圖卡
使用者可以任意移動位置
使用者操作行動載具
5.0 Vuf
四 3Ds Max20 Unity3D 3.4 Photoshop C Xcode 4.3.
Vuforia 1.5 式設計
3Ds Max20
表 4-1 手
012、Unity3
手指足球軟硬
3D、Xcode
硬體項目
iPad
互動模式是
4.3.2、Pho
硬體
otoshop CS5
ne4
fbx 以使
Vuforia 1.5 將
29 Unity3D 3.4.2 er 上傳至 Q Qualcomm 的 型與圖卡進行
Windows OS
好的 3D 模型 換成 Unity3D 再來就匯出 i
iOS
30
的檔案格式，最後再由 Xcode 4.3.2 設定並傳輸至 iPad 或 iPhone 運作。如圖 4-2 手指足球整合示意圖。
圖 4-5 手指足球整合示意圖
Unity 3D
3Ds Max 2012匯出 fbx 檔
製作 Marker
安裝 Vuforia 1.5
設定 3D 模型足球的互動方式 及與圖卡的連結設定
匯入
匯出 iOS 格式
Xcode 應用程式設定
iPad 或 iPhone 運作應用程式
手指
步驟
當 3 Auto 步驟
使用 攝影 網站 My track 轉檔 Unit 步驟
指足球應用
驟 1：用 3D
3D 模型建立 odesk(*.FBX 驟 2：製作
用 Photoshop 影機在辨識 站(網址：ht Trackables kable，輸入 檔分析，最
ty3D 使用。
驟 3：安裝
程式的製作 表 Ds Max 2012
立完成時，
X)。
Marker 並上
p 設計 Mark 識時能比較有
ttps://ar.qual
建立一個 N 入 trackable 最後將給 Uni。
Vuforia 1.5
作流程如下 表 4-3 「手指
2 將足球 3D
將檔案匯出
上傳 Qualco
ker 的圖案 有效率。完
lcomm.at/qd
New Project的格式與尺
出（Export
omm 的網站
，圖案最好 完成後另存為
devnet/sdk/io
，輸入新專 尺寸，然後
rackable Ass 示。 sets Package
置 Qualcomm 的 入，接著在
Pack 的連 Data 增 V Virt 步驟
在 F
Qualcomm 的 程式的擴增 夾的路徑中 驟 4：匯入足 連結
動 Unity3D 樣才能使用
kage 及足球 連結。從 Pr
a 設定給 M VirtualButto tualButton 群 驟 5：用 Un Vuforia 擴 球模型，接下
roject 中新增 Marker，Ima
on 讓 3D 模型 群組起來。
nity3D 匯出
Build Settin
址：https://a vuforia-sdk-就可以使用 再用 Unity
個新的專案 增實境的程 下來就可以 增 ARCame ageTarget 屬
型能有互動
出 iOS 格式檔
ng，Platform
32
ar.qualcomm
ios-1-5-8.zip 用套件了。m.at/qdevnet/
p，接著將程
Marker 與 Vu
勾選 Vuforia-再來匯入 Ma Marker 與 eTarget，在 ata 設定給 3 後將 3D 模
S，在 Player
/sdk/ios)下載
程式安裝到uforia 套件
-ios-1-5-9.un arker 的 Trac Vuforia 套件 在 ARCamera
3D 模型 soc 模型、Image
r Settings 中
載開發 iOS 到 Unity3D 資
AR 程式庫
nitypackage ckable Asset 件 AR 程式 a 屬性中的
ccer，接著新 eTarget 與
中設定要匯出
iPad 步驟
Unity3D 輸出 前，藉由傳
出的.xcodep 傳輸線把 iPa
34
者除了能看到人物不同視角的面貌，更能藉由虛擬按鍵來控制喬巴帽子的顏色，
讓喜愛喬巴的使用者有跟虛擬人物互動的感覺。
二、3D 模型設計
變裝喬巴的卡通人物模型是以 3Ds Max 2012 軟體製作，再匯出 FBX 檔給 Unity3D 使用。因為需要讓人物模型能變裝，所以使用 5 種不同顏色的材質貼圖 給模型使用，材質貼圖的設計是使用 Photoshop 針對人物帽子的部分變換藍、綠、
紫、黃等顏色，修改好之後分別存成 TGA 的圖片格式，就能一同匯進 Unity3D 來運用。圖 4-6 為變裝喬巴的模型設計，圖 4-7 為變裝喬巴模型的貼圖設計。
圖 4-6 變裝喬巴的模型設計
圖 4-7 變裝喬巴模型的貼圖設計
三、互動介面設計
變裝喬巴互動介面是以 Vuforia 套件的虛擬按鍵為基礎，在設計 Marker 時，設定虛擬按鍵的區塊範圍，只要攝影機辨識到有物體觸碰虛擬按鍵，就會 啟動虛擬按鍵設定好的動作去執行。
35
圖 4-8 變裝喬巴圖卡設計
變裝喬巴的 Marker 設計了 BLUE、GREEN、PURPLE 及 YELLOW 等四個 虛擬按鍵區塊，當我們觸碰到 BLUE 區塊，人物喬巴的帽子就會變藍色，觸碰 到 GREEN 區塊，人物喬巴的帽子就會變綠色，觸碰到 PURPLE 區塊，人物喬 巴的帽子就會變紫色，觸碰到 YELLOW 區塊，人物喬巴的帽子就會變黃色，如 圖 4-9 所示。圖 4-10 則為互動示意圖。
圖 4-9 變裝喬巴的四種帽子變化
36
圖 4-10「變裝喬巴」互動示意圖
本應用案例所使用的軟硬體技術與「手指足球」相同，但由於使用四個 虛擬按鍵，使用大螢幕的 iPad2 操作會有比較好的操作感及體驗效果。
表 4-4 變裝喬巴軟硬體項目
軟體 硬體
3Ds Max2012 Unity3D 3.4.2 Photoshop CS5
Xcode 4.3.2 Vuforia 1.5
iPad2 或 iPhone4
四、互動模式設計
本研究在「變裝喬巴」運用到的互動模式有圖卡的旋轉、放置、移動及 虛擬按鍵。圖卡的旋轉、放置、移動在擴增實境當中是一項很常用的互動模式，
使用者能夠透過轉動圖卡來改變虛擬 3D 物件的視角與深度；虛擬按鍵設計四 個選項，使用者能藉由碰觸按鍵改變虛擬 3D 物件的貼圖顏色。
使用者能夠透過轉動圖卡來改變虛擬 3D 物件的視角與深度；虛擬按鍵設計四 個選項，使用者能藉由碰觸按鍵改變虛擬 3D 物件的貼圖顏色。