AR動畫可放大縮小平移旋轉(zhuǎn)
可自行下載項目運行到真機上演示
由于項目以及下文用到的素材較大 GItHub 無法上傳 故傳到百度云LLGameAR

AR可放大縮小平移旋轉(zhuǎn).gif

文章目錄

• 一 AR 和 VR 概念
• 二 軟件簡介
  • Unity 3D
  • Vuforia SDK
• 三 開發(fā)環(huán)境的配置
  • 1 注冊和安裝 Unity3D
  • 2注冊 Vuforia 賬號, 下載并導入 Vufoira 的 Unity 插件
• 四 VR 游戲的制作詳細步驟
  • 1 面板的功能
  • 2創(chuàng)建游戲場景
  • 3 要添加 AR 攝像機以及綁定證書
  • 4 上傳識別卡到 Vuforia 官網(wǎng)
  • 5 下載并導入識別卡模型
  • 6 下載并導入游戲?qū)ο竽Ｐ?-
  • 7 編輯游戲?qū)ο?/li>
  • 8 要綁定lean Touch腳本
  • 9 導出 iOS 平臺項目運行手機 大功告成

一 AR 和 VR 概念

首先來理清一個概念 AR 和 VR
AR:增強現(xiàn)實, Augmented Reality 的簡稱
把虛擬物體放在你的周圍
VR: 虛擬現(xiàn)實, Virtual Reality 的簡稱
把你放在虛擬的環(huán)境里

二 軟件簡介:

Unity 3D: 目前最熱門和最易上手的游戲引擎.
優(yōu)點:跨平臺 一次開發(fā) 多方發(fā)布,
Vuforia SDK: 高通開發(fā)的 AR/VR 應(yīng)用開發(fā)包

三 開發(fā)環(huán)境的配置:

1 注冊和安裝 Unity3D

來到 Unity3D 官網(wǎng)

image.png

然后點擊下載 Unity 然后在點擊下載個人免費版

image.png

記得在這里要勾選 iOS 平臺

image.png

安裝完成后

image.png

左邊是附帶的是一個編輯器 用來編輯里邊的腳本程序

然后點擊 Unity 圖標去打開
然后注冊賬號登錄來到這個位置

image.png

這個界面相信大家看英文單詞就知道大概每個按鈕的功能了吧
尤其是 Learn 下邊有很多視頻和教程 都是非常不錯的資源

然后我們創(chuàng)建一個新的工程

image.png

這個就是新工程的默認面板了

image.png

2注冊 Vuforia 賬號, 下載并導入 Vufoira 的 Unity 插件

來到Vuforia官網(wǎng) 然后自行register 然后login
然后來到下載頁面來下載插件

image.png

點擊下載 我們下載這個插件呢 最主要的就是要導入到 Unity 的項目中
怎么導入呢 有兩種方法
1 雙擊下載的插件包 然后在彈出來的面板中選擇 inport 導入就可以了

image.png

2 直接在項目中導入

image.png

在導入的工程中 會彈出這樣的面板

image.png

說的是有一些過時的 API 我們直接選默認的選項就可以了 也就是選在 I Made a Backup

導入成功后 下邊的面板會出現(xiàn)Vuforia 文件夾 接下來我們就可以用它來開發(fā) AI 游戲了

image.png

?????? 做到此處 基本準備工作以及開發(fā)環(huán)境就已經(jīng)配置好了

四 游戲的制作詳細步驟

1 簡單介紹一下面板的功能

image.png

1 Scene:場景的意思 ,默認開始的窗口: 游戲中使用的所有的模型都可以在這里編輯和操作
2 Game: 游戲的意思可以說成是玩家的一個視圖 所有在 scene 窗口中擺放的模型呢 都會通過攝像機直接渲染到Game 窗口,幾乎是同步的所見即所得
3 Hierarchy:層級的意思,主要負責和管理游戲中使用到的模型,相機 燈光 以及相關(guān)組件,在Hierarchy中出現(xiàn)的組件或?qū)ο?是在游戲中一定使用到的
4 Project:項目,工程的意思,項目以及插件 素材都是存在在此處的,Project窗口出現(xiàn)的東西就不一定會在游戲中使用到
5 Inspector:擴展的意思,當在Hierarchy選中一個項目的時候在Inspector下邊就會出現(xiàn)很多信息可供我們編輯,調(diào)試

2 創(chuàng)建游戲場景

先將當前場景保存下來 必須保存在指定的位置 否則保存不成功 保存在我們剛開始常見的文件夾里邊

image.png

image.png

創(chuàng)建完成后 就發(fā)現(xiàn)下邊的面板中多了 Scene1場景

image.png

3 要添加 AR 攝像機以及綁定證書

• 添加 AR攝像機

image.png

Main Camera 一般場景會默認為我們創(chuàng)建一個 Main Camera 主攝像機,是一般開發(fā)游戲當中用到的攝像頭, 我們在 Game試圖里邊看到的對象都是需要一個攝像機來進行拍攝玩家才能夠看到這個場景
Directional Light 定向的一個光源

但是我們既然是在做 AR 所以我們應(yīng)該用我們專用的攝像頭也就是vuforia插件中提供的一個AR的攝像頭的一個素材,而不能用我們的 Main Camera 的一個素材 不然的話,Main Camera 素材拍攝出來的 內(nèi)容就不是 AR 增強現(xiàn)實的一個效果 所以我們要把Main Camera 給刪掉 右鍵點擊 delete
然后去底部面板中vuforia中去搜索 然后直接選中 拖到Hierarchy層級下邊就可以

image.png

image.png

• 綁定證書
  來到Vuforia官網(wǎng)

image.png

image.png

創(chuàng)建完成后

image.png

然后點擊 LLGameAR 進去后就可以拿到秘鑰了

image.png

既然有了秘鑰 接下來就是要把秘鑰綁定在我們的 ARCamera 上邊了

image.png

然后把秘鑰填在此處就 OK 了

image.png

4 我們要上傳 識別卡到 Vuforia 官網(wǎng)

Q 為什么要上傳識別卡呢
A 因為現(xiàn)在我們要做的一個場景是攝像頭識別到一張卡后才會出現(xiàn) AR 場景 所以我們需要把這張識別卡上傳到官網(wǎng)

繼續(xù)來到Vuforia官網(wǎng)

image.png

然后點擊項目進去后 添加圖片

image.png

image.png

點擊 Add 后 就可以看到我們創(chuàng)建的的 target 了

image.png

5 下載并導入識別卡模型

image.png

下載后得到

image.png

然后再次將此 package 導入到項目中 導入成功后 項目中會再次對一個下邊的文件夾

image.png

6 下載并導入游戲?qū)ο竽Ｐ?-

此處我這里有比卡丘的模型文件LLGameAR網(wǎng)盤下載 只需要把這個文件夾中的[LLGameAR素材整個文件]直接手動拖入到 Assets 中就可以了

image.png

7 編輯游戲?qū)ο?/h5>

image.png

image.png

image.png

然后將比卡丘對象也拖進去

image.png

然后要對 ARCamera 里邊配置一下屬性

image.png

image.png

好了 現(xiàn)在來運行一下就可以看到比卡丘的動圖了

image.png

LLImagePickerDemo.gif

相信做到此處你已經(jīng)高興壞了吧 穩(wěn)住 我們繼續(xù)哈

8 要綁定lean Touch腳本

接下來 我們要做的就是讓比卡丘可以放大 縮小和轉(zhuǎn)動
我們需要綁定官方提供的 lean Touch 腳本
如下圖在里邊搜索 lean Touch 腳本

image.png

image.png

去下載這個免費的就好了

下載完成后還是 import 導入
然后在 Asset 中就會出現(xiàn)這個下載好的文件夾了

image.png

然后將此文件夾的一些配置直接拖入到比卡丘的配置目錄中 如圖

image.png

9 接下來就要把項目導入手機了 配置一下 IOS 平臺吧

image.png

然后配置一下 標識就可以了

image.png

然后點擊 build 就直接導出一個 xcode 項目 可以直接用 xcode 跑真機就可以了 然后在手機上可以觸摸屏幕對比卡丘進行旋轉(zhuǎn) 放大縮小 和 移動位置了

image.png

大功告成
相信你已經(jīng)了解了如何制作一款簡單的 AR 游戲了吧

參考資料:
Unity3D
Vuforia