Unity 3D + Vuforia製作AR人物互動

阿新 • • 發佈：2019-01-19

話說之前說過了咱與本地漫展商合作推出AR app，雖然他們之前也已經做過了但是隻有Android版，後來因為某些問題於是準備是讓咱來接手後續的開發。（其實本來只是打算說iOS可以咱來做…而已…
不過在還沒開始談的時候就已經通過某種渠道獲得了人物模型和動畫，花了差不多4天時間從零開始完成了AR識別到人物展示以及人物動作這幾個過程，而經過一段時間的“放假”之後最近則是直接完成了人物的互動。可以說目前以及可以達到上架的地步了。
嘛其實整個流程做完之後回頭看其實還是很簡單的，於是打算做本教程，當然因為沒徵得同意所以人物模型什麼的是沒辦法放出的，原始碼也是。但是看完整個流程下來不需要原始碼也行啦～

OK廢話不多說趕緊開始吧～
首先先確認需求，咱要做的是在某圖片上展示個人物會跳舞，觸控之後會有不同的反應。

接著是確定開發平臺，雖然Unity 3D支援Android，但是如果想要做到iOS上還必須有Mac才行，當然Unity3D這個甚至可以製作到各種遊戲機上不過目前咱沒這個需要。目前就以iOS和Android為主吧～

確認平臺之後就是工具了，首先Unity 3D是必須的（下載地址），官方有30天試用版，至於破解什麼的自己去找谷歌娘要吧～
接著是Vuforia SDK（下載地址），這個是高通的AR方案，支援Android、iOS以及Unity 3D，咱們目前只需要Unity3D的，所以直接下載就好了。
最後是對應平臺的SDK，iOS的話需要Xcode（下載地址），當然還需要真機除錯需要iOS付費開發者賬戶以及證書。嘛這些網上很多就不再重複說了。
如果是Android的話則需要Eclipse（

下載地址）以及Android SDK（下載地址），配置方法網上也很多所以不再重複說了…
嘛作為手機app開發者連這些都沒用過或者說不知道的話那真是失格呢（笑）。

還有素材別忘記準備了喔！
1.識別用圖片。
2.人物模型/動畫，貼圖。

接下來先來建立識別用圖片的“檔案”吧～

將準備好的識別用圖片到這裡建立Database並新增Target提交圖片。（注意提前註冊好賬號喔～

最後將生成好的檔案下載下來，不過注意下載的時候要選擇Unity Editor。

接著開啟Unity 3D，首次開啟會有個非常華麗的遊戲演示….不過比較殘念我們做的不是普通遊戲所以新建一個Sence。
然後將前面下載好的Vuforia SDK（vuforia-unity-android-ios-2-6-7.unitypackage檔案）開啟，匯入到Unity 3D裡。

於是在Project欄裡應該能看到一堆東西。

接著到Assets/Qualcomm Augmented Reality/Prefabs/裡把ARCamera和ImageTarget拖到Hierarchy那欄裡。

首先匯入前面製作好的圖片識別檔案（AR.unitypackage），接著在ARCamera的Inspector面板裡的Data Set Load Behaviour下能找到剛才匯入的那些。勾選之後下面會出現Active，同樣勾選了。

*PS:別忘記調整Camera下的Clipping Planes，將Far設定得儘量大一些。不然AR識別的距離限制得非常近。

然後到ImageTarget的Inspector面板，在Image Target Behaviour下的Data Set裡選擇要作為AR識別的圖片包。下面的Image Target裡選擇要作為識別的圖片。

接著匯入製作好的3D模型（咱用的是Maya製作好的fbx檔案，內建兩段動畫，另外有幾張人物貼圖也一併匯入），然後將人物模型拖到ImageTarget裡面作為子專案。
因為場景太暗於是咱還放了一盞燈…

然後調整匯入的人物的大小，發現人物只有框架沒有貼圖，於是在人物模型的Inspector面板裡面按Select鍵，勾選Import Materials，然後下面的Material Naming選擇Model Name + Model’s Material這個選項，最後別忘了Apply。這樣人物應該變彩色了。

目前可以識別圖片人物也能顯示了，但是人物還是不能動的，於是切換到Rig頁面，Animation Type選擇Legacy，然後Generation選擇Store in Root(new)，Apply。
接著切換到Animations頁面，因為咱的fbx檔案已經包含了動畫所以直接勾選Import Animation，Clips裡能看到2段動畫。注意選擇好對應的時間軸區間。

其中Default Take是咱需要迴圈播放的，而ArmatureAction則是觸控之後只播放一次的，播放完之後則繼續迴圈播放Default Take。接著Default Take裡的Wrap Mode設定是Loop，而ArmatureAction的Wrap Mode則是選擇Once。
嗯別忘了Apply。

目前為止人物能識別並且可以跳舞了。但是我們需要互動，既觸控式螢幕幕人物會做別的動作。
說白了動作就是切換Animation的Clips，於是開始程式碼上的工作了～
在人物模型（比如咱現在用的是XY_girl__animation）的Inspector面板裡按最下面那個大大的Add Component按鈕，選擇New Script，取個名字（比如咱的Touch Script），Language….嗯咱比較喜歡CSharp就選它吧～（當然你會JAVA可以選它，或者Boo也可以…但是咱下面的程式碼都是C#就是了。

接下來應該應該會開啟MonoDevelop-Unity編輯器了。貼上以下程式碼，根據自己實際需要進行修改：

using UnityEngine;
using System.Collections;
public class TouchScript : MonoBehaviour {
Vector2 m_screenpos = new Vector2();
// Use this for initialization
void Start () {
Input.multiTouchEnabled = true;
}
void MobileInput() {
if (Input.touchCount <= 0)
return;
if (Input.touchCount == 1){
if (Input.touches[0].phase == TouchPhase.Began){
//手指按下了
m_screenpos = Input.touches[0].position;
Debug.Log("TOUCHED");
//如果正在播放著Default Take就開始播放ArmatureAction
if (animation.IsPlaying("Default Take")){
animation.Play("ArmatureAction");
}else{
animation.Play("Default Take");
}
}
}
else if (Input.touches[0].phase == TouchPhase.Moved){
//手指移動了
Debug.Log("MOVED");
}
if (Input.touches[0].phase == TouchPhase.Ended && Input.touches[0].phase != TouchPhase.Canceled){
Vector2 pos = Input.touches[0].position;
Debug.Log("TOUCHOUTED");
//手指鬆開了
}
}
void DesktopInput(){
float mx = Input.GetAxis("Mouse X");
float my = Input.GetAxis("Mouse Y");
if ( mx!= 0 || my !=0 ){
if (Input.GetMouseButton(0)){
//滑鼠按鍵按下了
Debug.Log("CLICKED");
//如果正在播放著Default Take就開始播放ArmatureAction
if (animation.IsPlaying("Default Take")){
animation.Play("ArmatureAction");
}else{
animation.Play("Default Take");
}
}
}
}
// Update is called once per frame
void Update() {
#if !UNITY_EDITOR && ( UNITY_iOS || UNITY_ANDROID )
MobileInput();
#else
DesktopInput();
#endif
//當ArmatureAction播放完畢停下的時候開始迴圈播放Default Take
if(!animation.isPlaying){
animation.Play("Default Take");
}
}
}

儲存之後切換回Unity 3D，接著在選單欄的File裡選Build Settings...，根據實際情況選擇Android或者iOS，然後選擇Build And Run。
Android的話需要選擇APK檔案儲存位置以及AndroidSDK所在路徑。
iOS則是選擇project儲存的位置。
之後就能在手機上看到AR效果了～

Unity 3D也支援自帶除錯的，方法就是按頂上的播放按鈕。

其他Q&A：
1.想多個人物/物體同時出現/識別。
在ARCamera的Inspector面板裡面的QCARBehaviour下面的Max Simultaneous Image Target設定需要同時識別的數量，最高似乎只能5個。
另外圖片太小或者細節相差不大的圖片都不能同時顯示，相同圖片更加不行了。

2.如何新增聲音。
這是之後需要製作的，不過音訊這個比動畫簡單多了，而且可以像上面那樣使用程式碼來觸發音訊播放。

3.動畫除了fbx自帶之外，可以直接在unity裡建立麼？
要知道這本身就是做遊戲的引擎，所以當然可以！咱這裡只是根據咱自己的實際情況來寫，一般的話只需要製作好的人物模型然後直接在unity裡編寫出發以及動作什麼的，程式碼上也可以直接控制，詳細可以去看unity的AnimatorController相關。

還有問題可以留言給出。
原始碼還沒有得到官方授權所以是不能發出來了，但是有問題咱還是能儘量幫忙的～

Unity 3D + Vuforia製作AR人物互動

Unity 3D + Vuforia製作AR人物互動

Unity 3D mesh製作地形工具

Unity 結合 Vuforia開發AR專案基本流程

【unity 3D】關於unity中製作繩子（Rope）的總結

Unity製作AR小程式

【Unity 3D學習】鍵盤控制人物在場景中移動

unity 3d中使用BMFont製作清晰字型

Unity+高通Vuforia SDK——AR播放視訊

5分鐘使用Unity製作AR應用，結合EasyAR製作AR

Unity 3d讓物體成弧線運動（可以製作炮彈發射的軌跡）

【Unity 3D學習】滑鼠點選控制人物移動到目標位置

【Unity 3D】學習筆記三十：遊戲元素——遊戲地形

【Unity 3D】學習筆記四十二：粒子特效

再議Unity 3D

Unity 3D Time 類

Unity 3D之進階篇Transform的叠代器

Unity 3D 實用的10個小技巧

unity 3d 入門一熟悉相關組件

2.GUI控件的使用 --《UNITY 3D 遊戲開發》筆記

Unity結合PlayMaker製作網紅表白程式。

Unity 3D + Vuforia製作AR人物互動

相關推薦