第四章 系統設計與實作
第一節 應用案例一：手指足球
第四章 系統設計與實作
本研究將開發出三項實驗應用程式案例，分別為「手指足球」、
「變裝喬巴」及「魔術海報」，實驗應用案例建置使用 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 物件的貼圖顏色。
綜合這些互動模式的擴增實境互動應用案例，詳細的互動步驟如下表 4-5 所示。
使用 iPad 或 iPhone 感應圖卡
應用案例對應的圖卡
使用者可以任意移動位置
使用者操作行動載具
互動
使用
動步驟1：
當智慧型載
使用
表 用者操作情
載具啟動應
用者操作情
表 4-5 「變裝 情形
應用程式拍攝
情形
37
裝喬巴」互
攝圖卡時，
互動步驟介紹 行動載
螢幕畫面會
行動載 紹
載具顯示畫
會出現人物
載具顯示畫 畫面
物「喬巴」。
畫面
。
39
五、互動應用程式設計
「變裝喬巴」應用案例主要還是以 Unity3D 3.4.2 進行系統的整合，人物 喬巴要先匯出成 FBX 檔，接著用 Photoshop 修改貼圖的顏色，再透過 Vuforia 1.5 將喬巴模型及圖卡的虛擬按鍵連結，圖 4-11 為「變裝喬巴」系統整合的示意圖。
圖 4-11 「變裝喬巴」系統整合示意圖
在 Vuforia 1.5 套件中的虛擬按鍵（VirtualButton），可以變化很多不同的 互動方式，在「手指足球」的應用案例裡，是把虛擬按鍵設定到足球的 3D 模 型上，所以足球能有觸碰滾動的效果，而在「變裝喬巴」的應用案例中，是把 虛擬按鍵設定在圖卡上，因此觸碰圖卡上的按鍵就能設計出讓 3D 物件改變貼 圖的互動方式，詳細的系統設計如下表 4-6 所示。
Unity 3D
3Ds Max 2012匯出 fbx 檔
PhotoshopCS5 製作 Marker
安裝 Vuforia 1.5
設定 3D 模型喬巴的互動方式 (虛擬按鍵)及圖卡的連結設定 匯入
匯出 iOS 格式
Xcode 應用程式設定
iPad 或 iPhone 運作應用程式
步驟
當 3 Auto 步驟 odesk(*.FBX 驟 2：用 Ph
用 Photoshop 取之後，分 驟 3：製作
用 Photoshop 影機在辨識 站(網址：ht Trackables
表 Ds Max 2012
立完成時，
X)。
hotoshop 製作
p 將原本的 分別填上藍、
Marker 並上
p 設計 Mark 識時能比較有
ttps://ar.qual
建立一個 N上傳 Qualco
ker 的圖案 有效率。完
lcomm.at/qd
New Project40
裝喬巴」應 D 模型匯出
出（Export
同顏色的貼圖
devnet/sdk/io
，輸入新專 Qualcomm 的 入，接著在
track 轉檔 Unit 步驟 Pack 的連 Data 增 4 步驟
kable，輸入 檔分析，最
ty3D 使用。
驟 4：安裝
Qualcomm 的 程式的擴增 夾的路徑中 驟 5：匯入喬 連結
動 Unity3D 樣才能使用
kage 及喬巴 連結。從 Pr
a 設定給 M 4 個 VirtualB 驟 6：用 Un
入 trackable 最後將給 Uni
。
Vuforia 1.5
的網站(網址 時竟套件 v
，完成後就 喬巴模型，
，建立一個 Vuforia 擴 巴模型，接下
roject 中新增 Marker，Ima
Button 在圖 nity3D 匯出
的格式與尺 ity3D 的 Tr
址：https://a vuforia-sdk-就可以使用 再用 Unity
個新的專案 增實境的程 下來就可以 增 ARCame ageTarget 屬 圖卡上，設定 出 iOS 格式檔
41
尺寸，然後 rackable Ass
ar.qualcomm
ios-1-5-8.zip 用套件了。 sets Packagem.at/qdevnet/
p，接著將程
Marker 與 Vu
勾選 Vuforia-再來匯入 Ma Marker 與 eTarget，在 ata 設定給 3 擬按鍵對應的
好的圖案，
e 檔案下載
/sdk/ios)下載
程式安裝到uforia 套件
-ios-1-5-9.un arker 的 Trac Vuforia 套件 在 ARCamera
3D 模型 soc
nitypackage ckable Asset 件 AR 程式 a 屬性中的
ccer，接著新 色。
在 F iPad 步驟
Unity3D 輸出 前，藉由傳 機做測試。
驟 8：將應用
用程式傳至
。
Build Settin 的應用程式 code 設定應
出的.xcodep 傳輸線把 iPa
用程式傳至
至 iPad 或 iPh
ng，Platform 式，完成後
S，在 Player 就能輸出了
成最新的 iO
，選插上的
變裝喬巴」
r Settings 中
。
43
第三節 應用案例三：魔法海報
ㄧ、設計概念
在日常生活當中，有很多的印刷品，像是報紙、雜誌、海報、傳單、書 籍等，上面都記載了很多的文字與圖片，如果這些印刷品能像電影哈利波特中
在日常生活當中，有很多的印刷品，像是報紙、雜誌、海報、傳單、書 籍等，上面都記載了很多的文字與圖片，如果這些印刷品能像電影哈利波特中