專案簡介

在這個專案裡，我們會製作一張 AR 雪人立體卡片，當相機拍到卡片的圖案以後，會跳出一些動畫。我們會使用到 Spark AR 的圖形辨識（Image Tracking）功能，並且會練習基本的 Spark AR 操作。

這個教學是為了純新手設計的。本篇教學會附上每一個步驟的截圖，即使是從來沒用過 Spark AR 的新手，一定也能跟著本篇完成這個 AR 卡片。完成這張卡片後，應該就能了解大部分 Spark AR 的基本功能。

素材下載

本篇專案會用到的素材、卡片模板、以及已經完成的範例專案下載： Project A - Snowman.zip

Spark 專案設定

建立新專案

  1. 打開 Spark AR Studio 並選擇 “Create New” → “New Project”
  2. 選擇圖片辨識 “Target Tracking”.
  3. 現在新的專案已經成功建立了，並且擁有圖片辨識的功能。你應該可以在 Scene（場景）的視窗裡面看到 fixedTargetTracker0 這個物件
  4. 如果你沒有看到 fixedTargetTracker0 這個物件，你也可以用另外的方法加入這個物件。在 Scene 視窗上點滑鼠右鍵，選 “Add” → “Fixed Target Tracker”

匯入檔案素材

  1. 在 Assets（素材）視窗，點下方的 “Add Asset” → “Import from Computer” 然後選擇下載好的素材
  2. 匯入完成後，便可以在 Assets 視窗內看到一個新的 texture（貼圖）資料夾，裡面有剛剛匯入的圖片

設定圖片辨識

選擇辨識圖檔

  1. 選擇 Scene 裡面的 fixedTargetTracker0 物件，然後在右方的 Properties 視窗內可以看到許多選項
  2. 按一下 “Texture” 旁邊的小箭頭，然後選 “bg-tracking-target” 這個圖片

    如果你沒看到這個選項，那表示你還沒有把圖片匯入專案裡，請重新做一次上方「從電腦匯入素材」的部分
  3. 設定成功後，畫面中間的圖會變成你選的那張圖。這時候就已經完成圖片辨識的設定了，現在 Spark AR 已經具備辨識這張圖的功能

測試辨識效果

並不是每張圖都適合作為辨識圖，因此在我們正式開始製作專案前，最好先測試看看圖片的辨識效果。等確認辨識效果沒問題後，我們再正式開始製作，以免辨識圖需要改，可能也會連帶影響專案的製作內容

  1. 在 fixedTargetTracker0 物件上按滑鼠右鍵，選 “Add” → “Plane”，新增一片方塊模型
  2. 要確認這個新增出來的 plane 的層級是正確的放在 fixedTargetTracker0 底下

    如果層級關係正確的話，這個物件的名稱在 Scene 視窗內會稍微往右一點，並且在 fixedTargetTracker0 旁邊會有一個小小的三角形符號。如果你新增 plane 後沒有看到這個三角形小符號，你可以拖拉 plane 物件到 fixedTargetTracker0 的名稱上，便可以改變 plane 的層級關係
  3. 接著我們要來實際測試辨識圖的辨識效果了。Spark AR 雖然有一個 simulator（模擬器視窗），但很可惜並不能用來預覽圖片辨識的結果，所以我們要把這個效果安裝到我們手機裡面，才能做測試
  4. 選擇左下角的 “Test on the device” 按鈕，然後可以選擇要上傳到 Facebook 或是 Instagram。如果你沒有看到 Facebook 和 Instagram 的按鈕，可以點一下 “Send App” 標題旁邊的小三角形來展開選項
  5. 等到上傳完成後，手機裡的 Facebook / Instagram 應用程式會跳出新的通知
  6. 點選通知後，手機就會直接打開攝影機，並開啟剛剛上傳的濾鏡（可能會跳出測試同意的選項，選擇同意就可以了）。接著將你的手機鏡頭對準卡片，如果成功辨識，應該可以在卡片上看到一塊方型的格子圖。你可以試著移動手機的視角，從不同角度拍卡片試試看，看圖片是不是保持在相同的位置
  7. 如果你有成功看到方形的圖案，那表示圖片辨識的功能沒問題，那我們就可以正式來製作 AR 的卡片內容了！

*Spark 專用的測試 App

有時候會因為網路不順導致上傳濾鏡失敗，或因為手機設備的問題，導致看起來的效果和 Spark AR 編輯器裡面看起來不一樣。如果有遇到這些問題，可以考慮使用專門的測試程式（Spark AR Player）來測試濾鏡。使用 Spark AR Player 就可以不透過網路，而是透過手機連接線來把濾鏡安裝到手機上。

關於 Spark AR Player 詳細的安裝、使用方法，請參考 Facebook 的官方教學：Previewing and Testing Effects 和 Mirroring Effects to AR Player

*製作好的辨識圖

辨識圖的辨識效果好壞，跟圖片內容的設計有關。如果你有興趣設計自己的辨識圖，可以參考 Facebook 的官方指南：Best Practice for Target Tracking

設定 AR 內容

3D 的材質

在 3D 軟體裡面，圖片本身並沒有辦法直接顯示出來。你必須要先定義物件的「3D 形狀」（通常稱為 Mesh），然後再透過「材質」（Material）來定義這個形狀外觀，例如顏色、反光光澤、透明度、表面的粗糙感等

所以如果要顯示圖片，也需要透過「材質」。你需要先建立一個新的材質，並把圖片設定成材質的顏色，然後再把這個材質貼到 3D 物件上

如果不會製作 3D 也不用擔心，在我們這一系列的教學裡面，我們不需要另外製作 3D 的物件。我們只會使用 Spark AR 內建的 Plane 物件（看起來就像一張方形的圖片，他其實是一個 3D 物件）

把女孩放入場景

  1. 首先我們要建立放置女孩圖片用的材質。點選 Assets 視窗的 “Add Asset” → “Material”
  2. 把材質重新命名為 “girl-mat”。其實材質的名稱並不會影響我們後續製作的內容，但都給物件正確的命名是一個好習慣，不然製作到後期有很多的物件和材質時，檔案會很亂，到時候就會浪費很多的時間在找東西
  3. 點選剛建立的材質，右邊的視窗便會顯示許多可以設定的選項。點選 Texture 旁邊的小箭頭，然後選擇女孩的圖片
  4. 勾選 “Alpha Test” 的選項，這會讓圖片透明的部分正確變成透明的。這個選項和一些圖層的設定有關，詳細的內容我們會在下一個專案裡面說明，在此先勾選就好了
  5. 材質準備好了，接著來建立形狀。在 fixedTargetTracker0 上按滑鼠右鍵，選 “Add” → “Plane”
  6. 你可以點兩下剛建立的 plane 來重新命名。在這我把它重新命名為 “girl-plane”
  7. 現在這塊 girl-plane 和之前我們建立的 plane0 重疊了，我們稍微把 girl-plane 往前移動一點，讓他們分開，這樣才看得出差異
  8. 點選 girl-plane，然後在右邊找到 “Material” 並點一下旁邊的 “+” 符號，這時你應該可以看到我們剛剛建立好的材質 girl-mat
  9. 選了 girl-mat 後，這塊 plane 就會變成女孩的樣子了。不過現在這個比例有點怪怪的，這是因為 plane 預設創建出來的時候都是正方形的。所以接著我們就要來調整 plane 的比例

調整圖片比例

  1. 點選 Assets 視窗的 girl-image，右邊可以看到這張圖的寬度（width）和高度（height）的資訊，像這張圖是 512 x 1024
  2. 接著根據圖片的長寬比來設定 girl-plane 的 scale（大小）。如果數字很好計算的話，可以直接算出比例，例如 512:1024 就是 1:2，所以把 girl-plane 的 scale X 設為 1，Y 設為 2
  3. 但有時候圖片的長寬比沒那麼好算，所以我通常會直接把他們的「解析度除以 1000」設定成 scale 的 x y 數值（除以 1000 是因為直接輸入原數值會太大）。以這個 girl-plane 來說，就是 0.512 和 1.024。至於 Z 的數值通常沒有差，但不能是 0，不然可能會出問題
  4. 接著可以使用縮放工具來調整 girl-plane 的大小，只要同時針對 x 和 y 一起縮放，就可以維持正確的比例

設定女孩的位置

  1. 把女孩放到雪人旁邊。雖然我們從編輯器裡面看不到雪人的位置，但我們可以看著卡片，大概猜一下
  2. 然後把濾鏡放到手機內測試，看看是否放置到正確的位置。如果位置不對的話，就再調整、然後再測試一次，直到位置看起來正確

*移動、縮放、旋轉物件

如果你對 3D 軟體的空間操作不熟悉的話，可以參考這兩篇官方的教學文章：

Using the Manipulators
Navigating the Spark AR Studio Interface

加入文字

就像加入女孩的圖一樣，加入文字的方法，就是為每一個文字建立材質、建立 Plane、然後放到場景裡面。但因為文字物件很多，如果每個物件都分開排的時候，可能會很麻煩（例如：想要修改整體文字的位置，卻得個別調整每個物件）。因此，針對這種情況，我們通常會使用一種群組的技巧

  1. 為每個文字物件建立材質和 Plane 物件。建議為每個材質、物件命名，不然很容易搞混（縮圖也長得很像）
  2. 在 fixedTargetTracker0 上點右鍵，選擇 “Add” → “Null Object”（空物件）。所謂的空物件，就是一個只包含 Trasform（位置、旋轉、大小）資料的物件，除此之外什麼都沒有
  3. 把這個空物件重新命名為 “text-set” 並且把所有的文字物件都拉進這個空物件底下（要在這個物件的層級裡）
  4. 調整每個文字的大小和位置，把它們排成你想要的樣子
  5. 因為現在所有文字物件都在 text-set 底下，所以你現在可以直接移動、旋轉、或縮放整個 text-set 物件，文字的排版就會維持原來的樣子
  6. 如果一來，每當你想要移動文字時，就不需要再分別調整每一個文字物件了

使用 Patch Editor 製作動畫

Patch Editor（或簡稱為 Patch）是 Spark AR 最棒的功能，透過 Patch 我們可以讓任何物件的數值動態改變。接著我們會用 Patch 來對 girl-plane 和文字物件做動畫

用 Loop Animation 測試動畫

  1. 我們先來做 girl-plane 的動畫。點選 girl-plane 然後注意看，右邊的 Scale 數值的旁邊，有一個 “→” 箭頭的圖案。如果數值旁邊有這個圖案，表示這個數值可以透過 Patch Editor 來設定
  2. 點一下 Scale 旁邊的這個箭頭，然後底下會出現 Patch Editor 視窗，然後裡面會有一個黃色的方塊，這個方塊裡面的數值就是我們剛剛點選的 girl-plane 的 Scale 的數值
  3. 這個方塊我們稱為 Patch，在 Spark AR 內有很多不同功能的 Patch。我們可以在 Patch Editor 視窗內點滑鼠右鍵，或按視窗右下方的 “+ Add Patch” 來新增 Patch。新增 Patch 可以透過分類來尋找，或是可以直接在搜尋視窗內輸入 Patch 名稱
  4. 在此我們先新增一個 "Transition" Patch 和一個 "Loop Animation" Patch
  5. 設定 Transition Patch 的 start 數值為 0, 0, 0，然後 end 數值設定成跟 girl-plane's 的 scale 數值一樣。在這個範例裡，數值是 (1.61809, 3.23619, 1)
  6. 每個 Patch 都可以設定輸入（inputs）和輸出（outputs）。每個 Patch 左邊的箭頭是輸入，右邊的箭頭是輸出
  7. 用滑鼠左鍵點選箭頭，然後按住滑鼠左鍵拖拉，可以連接輸出到輸入
  8. 把 Loop Animation 的 progress 連接到 Transform 的 progress；然後把 Transform 的 value 連接到 girl-plane 的 3D scale
  9. 如果連接正確的話，應該會看到 person-plane 開始重複變大變小
  10. 你可以試設定 Transition Patch 的 curve 數值來改變動畫的感覺，挑一個你最喜歡的吧

*動畫曲線 Animation Curves

在這個 Transform 裡面的 curve（曲線） 是在電腦動畫裡面很常見的東西，有時候也稱為 easing type。如果你對這些 curve 的名稱不熟悉的話，這個網站有各種 curve 的視覺化範例：easings.net

設定動畫觸發時機

在製作動畫時，使用 Loop Animation Patch 來預覽很方便，但實際上我們想要的是，讓卡片的圖案被辨識到後，啟動動畫，然後只播一次就好，不要重複輪播。因此現在我們要改用其他的 Patch

  1. 把 Loop Animation Patch 刪掉，然後加入一個 Animation Patch，然後一樣把 progress 連起來
  2. 你會看到動畫並沒有啟動，這是因為我們需要傳送一個觸發的訊號到 "Play Animation"
  3. 把 fixedTargetTracker0 拖進 Patch Editor 視窗，系統會自動產生 3 個 Patch
  4. 把 fixedTargetTracker0 Patch 的 “Found” 數值接到 Animation Patch 的 “Play”
  5. 系統會自動多加入一個 Pulse Patch 來轉換訊號的型態，以符合不同 Patch 的需求
  6. 然後在手機上試試看這個濾鏡，如果成功的話，應該在辨識到卡片的瞬間，會看到女孩的圖蹦出來（縮放的方式出現）

讓動畫依序播放

接著我們要來幫文字加入動畫，基本上概念和剛剛設定的女孩圖片動畫差不多。但在這邊，我們會使用動畫的 OnComplete 輸出和 Delay Patch 來設定動畫的先後順序，幫文字加入類似打字機的效果

  1. 幫每個文字設定縮放動畫，設定的方式就和上面的女孩動畫一樣（Animation Patch 接到 Transition Patch 再接到文字的 Scale 數值）
  2. Animation Patch 有一個 completed 輸出，會在動畫播完的時候觸發。我們把一個文字的 completed 接到另一個文字的 Play，這樣的方是就可以設定動畫的順序，讓文字依序出現
  3. 在中間可以多加入一個 Delay Patch 來延遲觸發的時間，時間的單位是秒
  4. 如果你覺得這邊看起來有點複雜的話，可以打開壓縮檔裡面的範例專案來看看 Patch 的設定。如果打開專案後沒有看到 Patch Editor 視窗，你可以從選單 “View” → “Show/Hide Patch Editor” 來打開 Patch Editor 視窗

製作下雪特效

我們會使用粒子特效（Particle System）來製作下雪的效果，粒子是各種 3D 軟體裡都有的一種功能，專門用來做一些非固態的模擬，像是火焰、煙、水之類的，當然 Spark AR 也有粒子

  1. 建立一個新的材質，準備給粒子特效使用
  2. 把材質的 shader type 設定成 flat，texture 設定成 snow，然後 blend mode 設成 add，並且勾選 “Alpha Test”
  3. 在 Scene 視窗點右鍵選 “Add” → “Particle System” 來加入粒子特效物件
  4. 接著設定粒子特效物件的數值。在上半部的 emitter 部分，把 type 設為 plane；size 設成 0.3, 0.3（這個選項要先把 type 設為 plane 才會出現）；speed 設為 0.03, 60
  5. 下半部還有 particle 的部分要設定。把 scale 設為 0.003, 60；lifespan 設為 2, 60；spin 設為 0, 180；tilt 設為 0, 180
  6. 把 material 設為 snow particle
  7. 把粒子特效物件放到女孩的上方，然後旋轉一下，讓落雪的方向朝下

*關於粒子特效的製作

設計粒子特效，就是透過調整各種不同的數值來達成，因此，學習粒子特效最好的方法，就是實際調調看這些數值，看看效果如何變化

如果你對粒子特效有興趣，你可以參考這篇官方的粒子特效教學：Adding and Editing Particle Systems

做到這裡，這個專案就大功告成囉！
如果一切設定都沒問題的話，在手機上測試時，應該可以看到這樣的成果：