Unity+SenseAR教程:用手勢發射愛心【源碼】

摘要:Unity+SenseAR2.3開發的AR應用,基於手勢識別功能,發射你的愛心~

洪流學堂,讓你快人幾步。你好,我是你的技術探路者鄭洪智,你可以叫我大智。

今天開頭就不絮叨了,一句“名言”送給大家,然後咱們把代碼微微的一寫。

“雖然今天是情人節,但怎會比學習帶來更多的多巴胺呢?”—— 澹深苟

最終效果

這個教程中使用了最新的SenseAR,可以在很短時間內實現手勢的識別。

咱們這個教程就是識別手槍、比心和愛你的手勢,然後在屏幕上呈現心心的粒子效果。

最終效果.gif

建立工程

注意必須使用Unity 2018.4版本,建議使用2018.4中國增強版最新版。
路徑中一定不要有中文,否則打包可能出現問題。

創建工程.gif

安裝SenseAR 插件

在Packamager中搜索SenseAR XR plugin,我在這用的是最新版的1.1.0-preview.1版本。

安裝sensear.gif

導入示例工程

SenseAR是個新鮮的東西,之前都沒接觸過,所以最好的開始就是先看下示例,看看能做什麼。
如何導入示例工程呢?

1、在Project窗口的Packages中找到SenseAR XR Plugin目錄
2、在目錄上右鍵菜單中選擇Show in Explorer
3、在打開的目錄進入[email protected]\Samples~目錄
4、將目錄中的Example文件夾拖到Unity的Project窗口的Assets文件夾中。

具體流程看到下圖:

導入example.gif

查看示例

導入之後呢,你會發現這裏面有很多很多的場景,手勢場景是這個GestureDetect

哇,還有那麼多其他場景都是什麼用呢?大智這幾天會錄製一個SenseAR全功能解析教程,記得關注哦(公衆號:洪流學堂 b站:大智_Unity技術探路者

這個場景是沒辦法在電腦上運行的,只能發佈到Android手機上運行。

發佈手勢示例

發佈有以下幾步:
1、確保安裝好了Android發佈的環境(JDK目前Unity已經內置了,Android SDK需要自行下載,可以使用Android Studio管理Android SDK),以及Unity的Android Support(推薦在Unity Hub中安裝)。

android support.gif

2、在Unity的Build Settings中將平臺切換爲Android。

切換到android.gif

3、配置工程的Player Settings。

  • Package Name修改一下,別是默認的那個就行,我這設置爲com.Company.ShootLove
  • Mininum API Level設置爲Android 7.0 API level 24

4、 在手機上安裝SenseAR2.3,下載地址是http://openar.sensetime.com/sdks
可能需要先卸載舊版本:小米預裝版本SenseAR在應用設置裏面名稱爲ARServer,OPPO預裝版本SenseAR的名字爲ARUnit

5、將手機開啓開發者模式,USB連接到電腦上

6、記得打開GestureDetect場景,點擊Unity菜單欄File > Build and Run,選擇一個存放apk的路徑。

體驗手勢App

如果打開黑屏檢查下是否安裝了SenseAR2.3,下載地址是http://openar.sensetime.com/sdks

最開始要同意使用攝像頭的權限。

示例.gif

SenseAR支持的手勢有以下14種:

來源:http://openar.sensetime.com/docs

開發

好,到這呢,我們已經體驗了一把SenseAR強大的手勢識別的功能了,那如何用手勢發射愛心呢?

我們決定用三個手勢發射愛心:分別是gun,finger_heart(比心),iloveu三個。

好,回到Unity工程裏面。看一下AR Camera上的ARStandGuesturePainter中的代碼,所有手勢相關的代碼都是在這裏面的。

現在我們的思路就是判斷出gun,finger_heart(比心),iloveu三個手勢之後在界面顯示愛心的特效。

1 做一個心的粒子效果

在AR Camera物體下創建一個粒子效果,這樣粒子效果一會能顯示在咱們的鏡頭中。粒子效果是可以在Scene和Game中預覽的,最終效果在真機上也一致。

粒子效果的貼圖用的是下面的這個白色的小心心(你可以直接下載使用),**爲啥要用白色的呢?**因爲這樣可以在粒子系統裏調它的顏色,五顏六色,隨心所欲。如果你直接用個紅色的心心,那就沒辦法疊加出所有的顏色了。

粒子效果的貼圖,圖片是白色的哦,不是沒有哦,右鍵下載

下面就是你的舞臺了,將這個粒子效果調到你滿意爲止。

大智審美缺陷黨,調的效果如下:

粒子.gif

2 改造腳本

首先在ARStandGuesturePainter腳本中添加一個public的成員變量,用於關聯愛心的粒子特效。

public GameObject HeartParticles;

然後在SetGuestureInfo方法的最後添加下面幾行:

if (guestureInfo.HandGestureType == ArHandGestureType.GUN ||
            guestureInfo.HandGestureType == ArHandGestureType.I_LOVE_YOU ||
            guestureInfo.HandGestureType == ArHandGestureType.FINGER_HEART)
        {
            HeartParticles.SetActive(true);
        }
        else
        {
            HeartParticles.SetActive(false);
        }

然後在Inspector上將粒子效果的物體賦上去,就OK啦。

3 發佈真機

最終效果.gif

更多探索

後面呢,大智還想做的更高級一些,可以根據指頭的方向從指尖發射。大概思路如下,你可以和大智一起探索哦。

1、在ARStandGuesturePainter腳本的m_Points成員變量中獲取到20個手指關節的位置。20個頂點與手指的位置關係如下圖。

2、根據位置計算出來手指的方向,在對應方向上播放粒子效果。

本教程源碼及後續更新

由於源碼後續會更新,就不直接打包傳在這裏了。
本工程的持續更新源碼可以在洪流學堂公衆號回覆愛心獲取。

大智這幾天會錄製一個SenseAR全功能解析教程,記得關注哦(公衆號:洪流學堂 b站:大智_Unity技術探路者


好了,今天就絮絮叨叨到這裏了,祝有情人終成眷屬♥。
沒講清楚的地方歡迎評論。

我是大智,你的技術探路者,下次見!

別走!點贊收藏哦!

好,你可以走了。

發佈了142 篇原創文章 · 獲贊 77 · 訪問量 29萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章