Unity3d EasyAR開發案例系列教程

時間 2020-07-20

標籤 unity3d unity easyar 開發案例系列教程简体版

原文原文鏈接

這篇文章介紹如何使用EasyAR.unitypackage配置EasyAR

參考資料

一、EasyAR 初學者入門指南
http://forum.easyar.cn/portal.php?mod=view&aid=2
二、EasyAR入門
https://www.easyar.cn/doc_sdk/cn/Getting-Started/Getting-Started-with-EasyAR.html
三、Unity – 使用easyAR的基礎教程
https://www.cnblogs.com/mafeng/p/7600172.htmlphp

EasyAR入門

EasyAR是好用免費的全平臺AR（Augmented Reality，加強現實）引擎。html

EasyAR支持使用平面目標的AR，支持1000個以上本地目標的流暢加載和識別，支持基於硬解碼的視頻（包括透明視頻和流媒體）的播放，支持二維碼識別，支持多目標同時跟蹤。app

EasyAR支持PC和移動設備等多個平臺，EasyAR不會顯示水印，也沒有識別次數限制。框架

在拿到EasyAR package或EasyAR樣例以後，你須要一個key才能使用。請確保在使用EasyAR以前閱讀如下內容。dom

免費註冊

使用EasyAR以前須要使用郵箱在www.easyar.cn註冊編輯器

*若是郵箱已經在視+官網（www.sightp.com ）註冊，能夠直接登陸。ide

KEY的獲取

準備好識別圖以後，咱們須要到官網（http://www.easyar.cn/view/open/app.html）來爲咱們的AR APP申請key。首先點擊「開發中心」

點擊「添加 SDK license Key」按鈕，選擇Basic 版本

接下來填寫應用詳情，填寫你的應用名字與打包移動平臺時必填的package name

肯定好後，咱們能夠查看咱們的Key

1.能夠對應用名稱進行修改
2.能夠對Bundle ID 進行修改
3.若使用的是1.0的sdk，能夠查看1.0的 Keyoop

導入EasyAR的SDK

咱們到EasyAR官網（http://www.easyar.cn/view/download.html）上下載」EasyAR2.0 package(for unity)」

固然也能夠在這裏直接下載整理好的
http://pan.baidu.com/s/1dFGaHGH
解壓以後，咱們將」EasyAR_SDK_2.0.0_Basic.unitypackage」導入到unity中

導入以後，效果如圖：
測試

使用步驟

找一張圖片當作識別圖，本身的照片也能夠哦，推薦顏色不要單一的識別圖，否則一種顏色識別不到就尷尬了。而後在Unity裏建立一個名叫StreamingAssets的文件夾，把圖片拖在這裏。另外再拖一次放在Assets下。
動畫
1. 接下來咱們刪除原有場景的」Main Camera」，而後打開EasyAR文件夾，把Prefabs文件夾下的EasyAR_Startup預設體拖到面板
2. 中面板上的EasyAR_Startup，修改它的屬性，把咱們以前複製的key粘貼進去
找到Primitives文件夾下的ImageTarget預設，把它也拖到面板。把ImageTarget上的ImageTargetBehaviour腳本刪掉，新建一個腳本EasyImageTargetBehaviour，拖到ImageTarget物體上
編寫腳本EasyImageTargetBehaviour

using UnityEngine; namespace EasyAR { public class EasyImageTargetBehaviour : ImageTargetBehaviour { protected override void Awake() { base.Awake(); TargetFound += OnTargetFound; TargetLost += OnTargetLost; TargetLoad += OnTargetLoad; TargetUnload += OnTargetUnload; } void OnTargetFound(TargetAbstractBehaviour behaviour) { Debug.Log("Found: " + Target.Id); } void OnTargetLost(TargetAbstractBehaviour behaviour) { Debug.Log("Lost: " + Target.Id); } void OnTargetLoad(ImageTargetBaseBehaviour behaviour, ImageTrackerBaseBehaviour tracker, bool status) { Debug.Log("Load target (" + status + "): " + Target.Id + " (" + Target.Name + ") " + " -> " + tracker); } void OnTargetUnload(ImageTargetBaseBehaviour behaviour, ImageTrackerBaseBehaviour tracker, bool status) { Debug.Log("Unload target (" + status + "): " + Target.Id + " (" + Target.Name + ") " + " -> " + tracker); } } }

六、接下來，咱們填寫以下信息

- Path: 識別圖的路徑
- Name:識別圖的名字
- Size:識別圖的大小

注意，咱們必定要將Storage 的格式修改成Assets

關於Storage：

7.建一個Cube,顏色改成紅色，Cube的位置在識別圖上方，而後把它拖在ImageTarget下當它的子物體。
如今運行遊戲，激活ImageTarget，Cube就顯現出來了。一個簡單的AR就作成了。（EasyAR就這點比較好，能夠在Unity裏面看效果）。
在之後的開發裏也能夠經過控制ImageTarget的激活和不激活讓物體顯現和消失，抑或怎麼去顯現。

8.打包成APK，File–buildsetings,場景拖進去，選擇，點擊Playerseting，設置一下參數：
咱們填寫好信息，注意Compang Name 與咱們申請key時的公司或團隊名相同（好比我申請時填的是：mars），Product Name 也要和咱們申請key時填的應用名相同（本次的項目演示爲：HelloAR）

咱們的Bundle Identifier 也要修改成

最後是最關鍵的一部分:咱們的Graphics API 使用的是 OpenGLES2

9.OK，如今把打包好的APK安裝在Android手機上,運行，掃面這張識別圖，你的模型就出來了。
怎麼樣小夥伴們，你會了嗎？

EasyAR應用-多圖識別

開發資源：

源碼：https://pan.baidu.com/s/1cYaJmnBTqFcVMG2bggQaTQ 密碼:br4d

Step 1:新建項目導入sdk

咱們新建一個unity項目，命名爲」ARMultiTarget」

接着導入咱們的EasyAR 2.0 package並進行基本環境的搭建,首先咱們像上次操做同樣，在unity中新建一個文件夾,命名爲」StreamingAssets」，將咱們的識別圖導入到該文件目錄下

刪除原有的」Main Camera」，將咱們的」EasyAR_ImageTracker-1-MultiTarget」拖到面板中

接着咱們到官網申請Key填寫到相機上

Step 2:處理相機

咱們要編寫段腳原本處理EasyAR 的多圖識別功能，在」EasyAR_ImageTracker-1-MultiTarget」組件上新建一個腳本」HelloARTarget」

腳本下載: https://pan.baidu.com/s/12tf0aEVwW9Z2AUjK4qJR6Q 密碼:wg2n
腳本具體內容以下：

using UnityEngine; using EasyAR; namespace EasyARSample { public class HelloARTarget : MonoBehaviour { private const string title = "Please enter KEY first!"; private const string boxtitle = "===PLEASE ENTER YOUR KEY HERE==="; private const string keyMessage = ""
            + "Steps to create the key for this sample:\n"
            + " 1. login www.easyar.com\n"
            + " 2. create app with\n"
            + " Name: HelloARMultiTarget-SameImage (Unity)\n"
            + " Bundle ID: cn.easyar.samples.unity.helloarmultitarget.si\n"
            + " 3. find the created item in the list and show key\n"
            + " 4. replace all text in TextArea with your key"; private void Awake() { if (FindObjectOfType<EasyARBehaviour>().Key.Contains(boxtitle)) { #if UNITY_EDITOR UnityEditor.EditorUtility.DisplayDialog(title, keyMessage, "OK"); #endif Debug.LogError(title + " " + keyMessage); } } } }

Step 3: 處理ImageTarget

咱們準備兩張識別圖

接下來咱們拖動一個」ImageTarget」組件到面板中

咱們像以前最基礎操做的那樣處理好ImageTarget,使得能夠顯示一個model（不懂的能夠看看以前的教程：EasyAR基礎入門之顯示模型），咱們在其下面新建一個cube，具體效果以下圖：

咱們再建一個ImageTarget，改變識別圖和cube的材質，效果如圖：

最後咱們Build 測試就能夠實現預覽的效果了。

EasyAR多圖識別簡單案例—雙卡battle1.0

本次的案例是雙卡battle1.0，適合AR開發初學者，主要目的是幫助你們更進一步瞭解EasyAR 多圖識別的應用場景，在日後的技術分享咱們會推出完整的AR battle 案例。

預覽：

開發功能描述：

當兩張識別圖相碰時，出現「戰鬥開始」的提示,兩個怪物播放各自的動畫

開發素材

源碼：連接: https://pan.baidu.com/s/1jHNOZ6e 密碼: n2hy

NGUI插件：連接: https://pan.baidu.com/s/1eRG8KN4 密碼: 8mf9

Step 1:開發環境搭建

咱們在前面已經瞭解瞭如何用EasyAR SDK來開發多圖識別，本次的案例是在此基礎上進行開發的，固然了咱們也能夠在EasyAR的官方案例進行開發（兩種方法大同小異）.上次咱們的項目框架如圖：

將所需的模型資源導入到咱們的項目中，目錄結構爲：

Step 2：模型的設置

將咱們準備好的模型分別替換Cube，並適當修改它們的Scale 與 rotation，效果如圖：

咱們分別對兩個模型進行參數設置，首先對ImageTarget 下的模型設置Scale 與 Rotation

咱們還須要對它的Animation修改，在本次案例中，咱們只須要」n2017_idle」與」n2017_skill_2」。效果如圖：

還需將」n2017_skill_2」這個Animation 的」Wrap Mode 「設置爲」Loop」

另一個模型的設置也是這樣，你們自行設置，所需的Animation 爲」Standby」和」Attack3」

而後接着爲兩個模型添加Box Collider，並勾選Is Trigger，在這裏，咱們須要設置Box Collider 的大小，使得長度稍稍大於圖片的寬度，方便咱們的碰撞檢測，給你們一個參考的數值：

爲了使用OnTriggerEnter() 方法，咱們還需在一個模型身上掛一個RigidBody 組件

Step 3：編寫腳本

首先當咱們的兩張識別圖靠近時，咱們顯示一個UI，提示「戰鬥開始」，這裏咱們用NGUI來實現。
PS：對於NGUI不熟悉的能夠看看這些教程：
http://www.taikr.com/course/445
http://www.taikr.com/course/34

咱們建立個label

修改label文字內容爲「戰鬥開始」

效果如圖：

而後咱們在Label 上添加一個Tween-Alpha 腳原本

咱們調整咱們Alpha 從0變到1，而且設置動畫時長爲2s。

接着咱們編寫新建代碼」PlayAnim」,實現當兩張識別圖靠近時，出現這個title，即label，首先咱們要將label 設爲不可見：

而後編寫代碼：

using System.Collections; using System.Collections.Generic; using UnityEngine; public class PlayAnim : MonoBehaviour { public TweenAlpha label; // Use this for initialization
    void Start () { } // Update is called once per frame
    void Update () { } void OnTriggerEnter(Collider col) { label.gameObject.SetActive (true); label.PlayForward (); } }

經過碰撞檢測，咱們處理label 的顯示——首先是設置label爲可見，接着播放它的Tween–Alpha 動畫，即Alpha 在2s內從0–1，即兩張識別圖靠近以後，「戰鬥開始」這幾個字在2s內出現。

當顯示完後，咱們不但願它一直出現，因此咱們須要處理它的隱藏。咱們在這個腳本基礎上寫一個方法：

public void Hide() { label.gameObject.SetActive (false); }

而後調用，操做方法相似unity 給Button添加方法。

最後咱們再來實現動畫的交互，代碼相對簡單，屬於unity最基本東西

using System.Collections; using System.Collections.Generic; using UnityEngine; public class PlayAnim : MonoBehaviour { private Animation anim; // Use this for initialization
    void Start () { anim = GetComponent<Animation> (); } // Update is called once per frame
    void Update () { } void OnTriggerEnter(Collider col) { anim.Play ("n2017_skill_2"); col.gameObject.GetComponent<Animation> ().Play ("Attack3"); } }

完整腳本地址：連接: https://pan.baidu.com/s/1kVmP095 密碼: 4kzx
原文連接：http://forum.easyar.cn/portal.php?mod=view&aid=4

EasyAR開發技巧—模型交互操做

AR 開發中經常使用的交互功能總結

咱們在EasyAR 初學者入門系列的第一篇教程中展示了EasyAR 最基本的功能，使得一個模型以AR技術呈如今咱們面前，實在炫酷。掃描識別圖以後展示一個模型，若是僅僅是靜態的，體驗效果也不是很好，因此根據市面上的常見AR APP，給你們總結了幾種常見的AR模型的交互方式。咱們在最基礎的 HelloAR 這個項目的基礎上進行開發，前提是你們已經掌握好了如何基礎性的搭建EasyAR+unity 的開發方式，不懂得夥伴能夠跳轉到：EasyAR 初學者入門指南（1）—顯示模型閱讀。
關於交互方式，在這裏主要給你們提供思路以及腳本文件。

源碼：連接: https://pan.baidu.com/s/1pKSy5jP 密碼: yy2b

Step 1:導入項目

咱們之後的開發都在EasyAR 的官方項目」HelloAR」的基礎上進行，首先咱們須要到官網上下載並導入unity中

下載好後，咱們將HelloAR 在unity 中打開

下載好後，咱們將HelloAR 在unity 中打開

Step 2:點擊模型自己交互

預覽：

實現功能：點擊Cube（掃描識別圖出現的模型）咱們能夠更換它的顏色。

咱們先刪除另外兩個不用的ImageTarget，只在」ImageTarget-JsonFile-idback」身上作文章

咱們新建一個Material，命名爲」blue」

而後在Cube 上新建一個腳本」ChangeColor」,來實現點擊時cube 顏色的改變，這段腳本屬於unity 最基本的知識，主要是定義兩個Material ，而後在OnMouseDown（) 方法中進行修改替換，同時咱們也定義了一個布爾類的標識位。

腳本地址：連接: https://pan.baidu.com/s/1miidEOS 密碼: 5x6d

using System.Collections; using System.Collections.Generic; using UnityEngine; public class ChangeColor : MonoBehaviour { public Material blue; public Material id; private bool isClick = false; // Use this for initialization
    void Start () { } // Update is called once per frame
    void Update () { } void OnMouseDown() { if (!isClick) { this.gameObject.GetComponent<MeshRenderer> ().material = blue; isClick = true; } else { this.gameObject.GetComponent<MeshRenderer> ().material = id; isClick = false; } } }

Step 2:雙手縮放
預覽：

在開發AR APP功能開發時，雙手縮放是最多見的功能，這也是一種最天然的交互手段，實現這樣的功能也很是的簡單，咱們在Cube 上掛一個腳本,命名爲」Gesture」

腳本地址：連接: https://pan.baidu.com/s/1geDLOPl 密碼: ykwf

using UnityEngine; using System.Collections; public class Gesture : MonoBehaviour { private Touch oldTouch1;  //上次觸摸點1(手指1)
    private Touch oldTouch2;  //上次觸摸點2(手指2)
    void Update() { //沒有觸摸，就是觸摸點爲0
        if (Input.touchCount <= 0) { return; } //多點觸摸, 放大縮小
        Touch newTouch1 = Input.GetTouch(0); Touch newTouch2 = Input.GetTouch(1); //第2點剛開始接觸屏幕, 只記錄，不作處理
        if (newTouch2.phase == TouchPhase.Began) { oldTouch2 = newTouch2; oldTouch1 = newTouch1; return; } //計算老的兩點距離和新的兩點間距離，變大要放大模型，變小要縮放模型
        float oldDistance = Vector2.Distance(oldTouch1.position, oldTouch2.position); float newDistance = Vector2.Distance(newTouch1.position, newTouch2.position); //兩個距離之差，爲正表示放大手勢， 爲負表示縮小手勢
        float offset = newDistance - oldDistance; //放大因子， 一個像素按 0.01倍來算(100可調整)
        float scaleFactor = offset / 100f; Vector3 localScale = transform.localScale; Vector3 scale = new Vector3(localScale.x + scaleFactor, localScale.y + scaleFactor, localScale.z + scaleFactor); //在什麼狀況下進行縮放
        if (scale.x >= 0.05f && scale.y >=0.05f && scale.z >= 0.05f) { transform.localScale = scale; } //記住最新的觸摸點，下次使用
        oldTouch1 = newTouch1; oldTouch2 = newTouch2; } }

Step 3：任意拖動

預覽：

腳本地址：連接: https://pan.baidu.com/s/1pL7Je9l 密碼: s4g5

這樣的功能在市面上的AR APP 中也很常見，好比視+ APP，咱們能夠快速的將模型拖動到任何位置。咱們一樣的在Cube新建段腳本，命名爲」Drag」

using System.Collections; using System.Collections.Generic; using UnityEngine; public class Drag : MonoBehaviour { private Vector3 _vec3TargetScreenSpace;// 目標物體的屏幕空間座標

    private Vector3 _vec3TargetWorldSpace;// 目標物體的世界空間座標

    private Transform _trans;// 目標物體的空間變換組件

    private Vector3 _vec3MouseScreenSpace;// 鼠標的屏幕空間座標

    private Vector3 _vec3Offset;// 偏移

    void Awake() { _trans = transform; } IEnumerator OnMouseDown() { // 把目標物體的世界空間座標轉換到它自身的屏幕空間座標
 _vec3TargetScreenSpace = Camera.main.WorldToScreenPoint(_trans.position); // 存儲鼠標的屏幕空間座標（Z值使用目標物體的屏幕空間座標）
 _vec3MouseScreenSpace = new Vector3(Input.mousePosition.x, Input.mousePosition.y, _vec3TargetScreenSpace.z); // 計算目標物體與鼠標物體在世界空間中的偏移量
 _vec3Offset = _trans.position - Camera.main.ScreenToWorldPoint(_vec3MouseScreenSpace); // 鼠標左鍵按下

        while (Input.GetMouseButton(0)) { // 存儲鼠標的屏幕空間座標（Z值使用目標物體的屏幕空間座標）
 _vec3MouseScreenSpace = new Vector3(Input.mousePosition.x, Input.mousePosition.y, _vec3TargetScreenSpace.z); // 把鼠標的屏幕空間座標轉換到世界空間座標（Z值使用目標物體的屏幕空間座標），加上偏移量，以此做爲目標物體的世界空間座標
 _vec3TargetWorldSpace = Camera.main.ScreenToWorldPoint(_vec3MouseScreenSpace) + _vec3Offset; // 更新目標物體的世界空間座標
            _trans.position = _vec3TargetWorldSpace; // 等待固定更新
            yield return new WaitForFixedUpdate(); } } }

原文連接：http://forum.easyar.cn/portal.php?mod=view&aid=5

AR交互操做實例—玩轉殭屍

原文連接：http://forum.easyar.cn/portal.php?mod=view&aid=6

經過視+ APP上的一個案例來了解熟悉AR開發經常使用的交互技巧

在上一篇的EasyAR 開發技巧—模型交互操做咱們熟悉了比較流行的移動端AR的交互技巧，今天咱們在此基礎上繼續深刻的瞭解，經過一個相似視+ APP 的一個實例來複習或熟悉AR開發的交互技巧。

預覽：

Step 1:開發準備

下載EasyAR SDK，搭建EasyAR 開發的最基本環境。（前面有基礎教程：EasyAR 初學者入門指南（1）—顯示模型）
ok,接下來咱們刪除unity原有的Main Camera，把EasyAR_Startup的攝像機拖入到面板中。

接着把導入的怪物模型拖入面板中（注意：咱們這裏並無用到Imagetarget，由於不須要識別功能。你們還能夠腦洞大開，來爲模型的展示增長個緩衝顯示效果，在這裏我就不實現了，主要把AR 移動端的核心知識給你們分享一下）

Step 2：修改相關參數

先修改AR相機的角度，使其X值旋轉270度

接下來使怪物Y值旋轉180度，並放大2倍，修改默認動畫（也能夠不修改，只不過使的看起來效果更驚豔）。

給怪物添加BoxCollider，並勾選is Trigger

Step 3：實現點擊怪物播放動畫實現交互

首先給物體再加一個Animation，根據你本身的喜好添加相應的Animation

接下來新建一段代碼實現動畫交互，代碼十分簡單，咱們在上一篇（交互操做）上講過，你們套用框架就好。

using UnityEngine; using System.Collections; public class PlayAnim : MonoBehaviour { public Animation anim; void Start() { anim = GetComponent(); } void Update() { if (!anim.isPlaying) { anim.Play ("2HitCombo"); } } void OnMouseDown() { anim.Play ("jumpAttack_RM"); } }

而後咱們要實現的是雙指實現縮放，單指任意拖動，這部分的代碼在前一篇文章（EasyAR開發技巧—模型交互操做）中講過，之後能夠把這些看成經常使用代碼來使用，會比較方便，直接拖動到模型身上便可。

step 4:點哪走哪

在這裏，我只提供本身的一種實現方法，固然實現這種效果能夠有不少方法。
首先，咱們先建一個plane，修改大小爲（2，2，2）

而後，接下來，修改其Tag爲Ground

最重要的一部分，關閉其Renderer，使其不顯示，在這裏咱們只要Mesh Collider

咱們先在這個模型新建個腳本，在這裏咱們用射線檢測的方法來實現。
咱們用Input.touchCount 先判斷是否有觸摸事件，而後獲取Input.GetTouch(0).position ，觸摸手機屏幕的位置，而後射線檢測，實現移動，完整代碼以下：

using UnityEngine; using System.Collections; public class Player : MonoBehaviour { private Vector3 clickPosion; public float speed = 5f; void Start() { clickPosion = transform.position; } void Update() { if (Input.touchCount > 0) { Ray ray = Camera.main.ScreenPointToRay(Input.GetTouch (0).position); RaycastHit hit; Physics.Raycast(ray, out hit); try { if (hit.collider.tag == "Ground") //獲取點擊位置的世界座標
{ Vector3 v = hit.point; clickPosion = new Vector3(v.x, transform.position.y, v.z); transform.LookAt(clickPosion); } } catch { } iTween.MoveTo(gameObject, clickPosion, 4f); } } }

關於iTween 知識：
1.http://edu.manew.com/course/6
2.http://www.xuanyusong.com/archives/2052

EasyAR 二維碼+AR的應用

EasyAR實現二維碼+AR的應用第一篇章

二維碼在咱們生活總早已經是司空見慣了，當AR碰撞上二維碼，必定能夠產生好玩的效果。EasyAR對於二維碼的識別與支持是至關不錯的，因此在這一篇與下一篇的教程中，咱們會分享如何從零開發二維碼+AR 的應用。

Step 1:開發環境

咱們須要新建一個unity項目，並將」EasyAR_SDK_2.0.0_Basic」的unitypackage導入，關於EasyAR+unity 這些基礎操做不懂的能夠看看以前的文章「EasyAR 初學者入門指南（1）—顯示模型」，在這裏我一筆帶過。導入以後，咱們的unity目錄界面應該是這樣的：

咱們刪除原有的Main Camera，將」EasyAR_ImageTracker-1_QRCode-1」拖到面板中。並將官網申請的Key填好。

觀察」EasyAR_ImageTracker-1_QRCode-1」這個預製體，對比與咱們以前經常使用的」EasyAR_Startup」,發現多了一個」BarCodeScanner」的部分。

它上面所掛的腳本」QRCodeScannerBehaviour」使用來實現二維碼的掃描與識別功能的。這是對於它的具體描述：

Step 2:製做二維碼資源

咱們須要準備二維碼的圖片，有許多網站均可以來製做本身的二維碼。我製做的內容大體以下：

你們也能夠發揮本身的腦洞，隨意寫些內容，目前咱們先實現經過EasyAR SDK 來實現掃描二維碼顯示文字的功能。

Step 3：編輯代碼

咱們準備好了二維碼，接下來就是在unity裏編輯代碼來實現功能，首先咱們在」EasyAR_ImageTracker-1_QRCode-1」下新建一個腳本，命名爲」ARIsEasyBehaviour」,

腳本下載地址：連接: https://pan.baidu.com/s/1dF5tigx 密碼: 9ag5

using System.Collections; using UnityEngine; namespace EasyAR { public class ARIsEasyBehaviour : MonoBehaviour { private const string title = "Please enter KEY first!"; private const string boxtitle = "===PLEASE ENTER YOUR KEY HERE==="; private const string keyMessage = ""
            + "Steps to create the key for this sample:\n"
            + " 1. login www.easyar.com\n"
            + " 2. create app with\n"
            + " Name: HelloARQRCode (Unity)\n"
            + " Bundle ID: cn.easyar.samples.unity.helloarqrcode\n"
            + " 3. find the created item in the list and show key\n"
            + " 4. replace all text in TextArea with your key"; private bool startShowMessage; private bool isShowing; private string textMessage; private void Awake() { var EasyARBehaviour = FindObjectOfType<EasyARBehaviour>(); if (EasyARBehaviour.Key.Contains(boxtitle)) { #if UNITY_EDITOR UnityEditor.EditorUtility.DisplayDialog(title, keyMessage, "OK"); #endif Debug.LogError(title + " " + keyMessage); } EasyARBehaviour.Initialize(); foreach (var behaviour in ARBuilder.Instance.ARCameraBehaviours) { behaviour.TargetFound += OnTargetFound; behaviour.TargetLost += OnTargetLost; behaviour.TextMessage += OnTextMessage; } foreach (var behaviour in ARBuilder.Instance.ImageTrackerBehaviours) { behaviour.TargetLoad += OnTargetLoad; behaviour.TargetUnload += OnTargetUnload; } } void OnTargetFound(ARCameraBaseBehaviour arcameraBehaviour, TargetAbstractBehaviour targetBehaviour, Target target) { Debug.Log(" Found: " + target.Id); } void OnTargetLost(ARCameraBaseBehaviour arcameraBehaviour, TargetAbstractBehaviour targetBehaviour, Target target) { Debug.Log(" Lost: " + target.Id); } void OnTargetLoad(ImageTrackerBaseBehaviour trackerBehaviour, ImageTargetBaseBehaviour targetBehaviour, Target target, bool status) { Debug.Log(" Load target (" + status + "): " + target.Id + " (" + target.Name + ") " + " -> " + trackerBehaviour); } void OnTargetUnload(ImageTrackerBaseBehaviour trackerBehaviour, ImageTargetBaseBehaviour targetBehaviour, Target target, bool status) { Debug.Log(" Unload target (" + status + "): " + target.Id + " (" + target.Name + ") " + " -> " + trackerBehaviour); } private void OnTextMessage(ARCameraBaseBehaviour arcameraBehaviour, string text) { textMessage = text; startShowMessage = true; Debug.Log("got text: " + text); } IEnumerator ShowMessage() { isShowing = true; yield return new WaitForSeconds(2f); isShowing = false; } private void OnGUI() { if (startShowMessage) { if (!isShowing) StartCoroutine(ShowMessage()); startShowMessage = false; } if (isShowing) GUI.Box(new Rect(10, Screen.height / 2, Screen.width - 20, 30), textMessage); } } }

咱們在這段腳本文件實現的是首先Target 的識別而後是掃描二維碼以後接收結果並實現繪製在屏幕上，對於Target 的found與load等方法相信你們已經很熟悉了。對於OnTextMessage（）接收返回結果真後賦值給textMessage，並由OnGUI（）進行繪製。咱們Build測試，會實現以下的效果：

PS：在實際的開發中，咱們不會像這樣從零來搭建AR+二維碼的開發環境，通常是直接在EasyAR官網的實例進行二次開發，這樣會大大提升咱們的效率。下一篇咱們會實現二維碼+AR的一個實例。

咱們在此基礎上繼續完善demo

預覽：

資源：

NGUI插件：連接: https://pan.baidu.com/s/1bMgGn8 密碼: uviy
資源地址：連接: https://pan.baidu.com/s/1kVCBiBX 密碼: b3eg
代碼地址：連接: https://pan.baidu.com/s/1pKFAATX 密碼: x7r9

Step 1:準備

首先是關於識別圖的準備，在此次的案例演示中我使用了以下的圖片（二維碼能夠本身製做）：

在unity中咱們新建一個文件夾」StreamingAssets」,將識別圖導入。而且新建文件夾「Scripts」，導入提早準備好的資源，框架圖以下：

Step 2：製做ImageTarget

將ImageTarget拖入到面板中

remove掉原來掛在ImageTarget上的腳本，將咱們導入的」EasyImageTargetBehaviour」掛在上面（這部分屬於EasyAR 圖像識別最基本的操做，不懂的能夠看看：EasyAR 初學者入門指南（1）—顯示模型）

填寫識別圖信息，將咱們導入的那張帶有二維碼的識別圖名字與size配置好

爲了能在unity中看到識別圖的具體信息，咱們創建一個材質球使其顯示。新建Material，模式設置爲Mobile/Diffuse.效果如圖：

這樣在unity編輯器中就能夠顯示了，方便咱們設置Scan掃描特效的配置

Step 3:製做掃描特效

將prefab scan 拖到ImageTarget 下面

適當調整Scan的位置與scale，這裏你們自行調整使其達到一個合適的位置

編寫腳本」Move」，實現掃描效果。腳本的思路其實很簡單，就是在Update裏不斷更新Scan材質球的texture 的offset。

using System.Collections; using System.Collections.Generic; using UnityEngine; public class Move : MonoBehaviour { public float offset_y = 0.5f; void Awake(){} void Start(){} void Update() { offset_y -= Time.deltaTime; this.GetComponent<MeshRenderer>().material.SetTextureOffset("_MainTex",new Vector2(0,offset_y)); } }

Step 4:製做UI顯示二維碼內容

咱們使用NGUI來完成ui的製做。在這裏的思路是根據你的二維碼文字內容創建相應的label（咱們在代碼實現是經過逗號來分割內容分別顯示在不一樣的label上）在本次的案例演示，我創建兩個label（分別顯示EasyAR與Cool）和一個Button（點擊跳轉網頁）。具體的ui位置配置你們能夠自行調試，效果如圖：

我是將三個UI控件（label，button）放在一個Empty GameObject下面，即」b」下面。咱們將」b」添加個Tween 動畫，使其演示效果更加炫酷，在這裏我用的是Tween／Scale這一模式

最後，將」b」這一GameObject 設爲不可見

Step 5：編寫代碼

首先咱們修改完善」Move」這個腳本。思路是這樣的，咱們設置一個掃描時長，當達到這個時長時，咱們設置Scan 這一object不可見，而且把咱們準備好的UI控件顯示，完整代碼以下：
腳本下載地址：連接: https://pan.baidu.com/s/1pKNFKMn 密碼: xh6m

using System.Collections; using System.Collections.Generic; using UnityEngine; public class Move : MonoBehaviour { public float offset_y = 0.5f; public GameObject btns; void Awake(){} void Start(){} void Update() { if(offset_y <= -3.0f) { btns.SetActive(true); btns.GetComponent<TweenScale>().PlayForward(); this.gameObject.SetActive(false); } else { offset_y -= Time.deltaTime; this.GetComponent<MeshRenderer>().material.SetTextureOffset("_MainTex",new Vector2(0,offset_y)); } } }

在unity操做界面將」b」賦值到腳本里

而後咱們修改綁定在」EasyAR_ImageTracker-1_QRCode-1」上的」ARIsEasyBehaviour」腳本文件。主要是實現得到二維碼內容text後將它顯示在咱們準備好的UI上。

在開頭定義UIlabel

public UILabel text1; public UILabel text2;

而後在OnTextMessage（）方法裏實現

private void OnTextMessage(ARCameraBaseBehaviour arcameraBehaviour, string text) { textMessage = text; text1.text = textMessage.Split (',')[0]; text2.text = textMessage.Split (',') [1]; startShowMessage = true; Debug.Log("got text: " + text); }

最後註釋掉原有的OnGUI方法便可。
完整代碼地址：連接: https://pan.baidu.com/s/1jIwvMFs 密碼: c8t8

對於按鈕的交互，咱們實現的是點擊以後跳轉到EasyAR SDK2.0的網頁，實現起來至關簡單，一句代碼便可：Application.OpenURL (「http://www.easyar.cn/view/sdk.html「);

實現到這裏，咱們基本上就能夠完成案例效果了。

EasyAR 開發實例—AR紅包（初級）

原文連接：http://forum.easyar.cn/portal.php?mod=view&aid=10

用EasyAR SDK 來實現一個AR紅包功能

分享一篇如何用EasyAR SDK來開發一個簡單的AR紅包的功能。

預覽：

開發資源：

粒子特效：連接: https://pan.baidu.com/s/1i5swzLN 密碼: dwtr

NGUI插件: 連接: https://pan.baidu.com/s/1qYAyYL2 密碼: 7jb2

Step 1:開發環境搭建

首先咱們下載EasyAR SDK （unity版本）並導入到unity中，併到官網申請開發時所用到的Key值，在unity中，刪除原有的Camera，將EasyAR_Startup拖入到面板中，並將key之填入。注意：在這裏咱們並無用到識別功能，所以不必用ImageTarget。

接下來，咱們準備紅包模型，有些人在導入紅包模型的過程當中可能會遇到貼圖丟失的狀況，在這裏，咱們只需將紅包貼圖從新掛到材質上便可。

在這裏，咱們準備兩個紅包預製體，來實現不一樣的交互。並修改它們的大小以便區分。在這裏我給他們命名分別爲Hong，HongBao。具體詳細參數以下
Hong：

HongBao：

接下來，咱們給兩個紅包添加Tag，分別爲Hong，HongBao。

爲兩個紅包預製體添加BoxCollider，並勾選Trigger。大小本身調節。

最後，咱們爲咱們所交互的那個紅包HongBao添加個動畫。選中它，並在菜單欄Window-Animation，打開後，點擊Create，並保存命名。

接着點Add Property，選Transfrom-Scale

接着點Add Property，選Transfrom-Scale

Step 2:產生紅包

首先咱們先建立幾個隨機點，分別命名point1，point2，point3，這是紅包所降落的位置。參考數值以下：你們能夠自行設置

point1:

point2:

point3:

接下來，咱們建立一段代碼來使得紅包能夠降落，在這裏用Translate來實現，固然你們能夠用其餘方法，好比添加Rigidbody，給個受力也能夠，不過那樣有點麻煩。（補充：當紅包的Z座標小於-8時，就銷燬）

using UnityEngine; using System.Collections; using UnityEngine.UI; public class Move : MonoBehaviour { public GameObject par; // Use this for initialization

void Start () { } // Update is called once per frame

void Update () { transform.Translate (-transform.forward*2f*Time.deltaTime); if (transform.position.z < -8f) { Destroy (this.gameObject); } } }

接下來，建立CreateHong空物體，在上面掛上CreateHong.cs腳本，實現隨機產生紅包。

using UnityEngine; using System.Collections; public class CreateHong : MonoBehaviour { public Transform[] points; public GameObject[] hongbaos; private int index; // Use this for initialization

void Start () { InvokeRepeating ("CreateHongbao",1f,1f); } // Update is called once per frame

void Update () { } void CreateHongbao(){ int i = Random.Range (0, 10); if (i > 1) { index = 0; } else { index = 1; } GameObject go = GameObject.Instantiate (hongbaos [index], points [Random.Range (0, points.Length)].position + new Vector3 (Random.Range (-0.5f, 0.5f), 0, 0), Quaternion.identity) as GameObject; go.transform.Rotate (new Vector3 (270, 180, 0)); } } }

Step 3:交互

當點擊抖動紅包時咱們產生炫酷的粒子特效，將以下方法添加到Move.cs中

void OnMouseDown(){ if (gameObject.tag == "Hong") { Debug.Log ("ddd"); } else if(gameObject.tag=="HongBao") { CreateHong._instace.isCreate = false; GameObject go=GameObject.Instantiate (par,gameObject.transform.position,Quaternion.identity) as GameObject; Destroy (go,2f); } }

並在2s後銷燬該粒子

好了，接下來，咱們用NGUI插件實現產生優惠卷或紅包（這不重要，重要的是實現思路與方法）

效果以下：

首先，咱們建立Sprite

接着添加TweenScale

注意：

接下來咱們使用單例模式在CreateHong.cs腳本中實現：

首先聲明：

publicstaticCreateHong_instace;

接着：

void Awake() { _instace = this; }

而後實現方法供外界調用

public void PlayScale() { daxiao.gameObject.SetActive (true); daxiao.PlayForward (); }

在Move.CS中實現：

void OnMouseDown() { if (gameObject.tag == "Hong") { Debug.Log ("ddd"); } else if(gameObject.tag=="HongBao") { CreateHong._instace.isCreate = false; GameObject go=GameObject.Instantiate (par,gameObject.transform.position,Quaternion.identity) as GameObject; Destroy (go,2f); CreateHong._instace.PlayScale (); } }

完整代碼：Move.cs:連接: https://pan.baidu.com/s/1qYLS77Y 密碼: 9n1u

CreateHong.cs:連接: https://pan.baidu.com/s/1jIBVt4q 密碼: 483i

EasyAR 開發實例—AR禮物

原文連接：http://forum.easyar.cn/portal.php?mod=view&aid=11

EasyAR 開發出一個炫酷的節日禮物效果

預覽：

開發資源：

連接: https://pan.baidu.com/s/1mkWL7Ev7CWOyfp6s4_8JQw 密碼:pznt

Step 1:開發環境

關於用EasyAR SDK 搭建AR 開發環境的文章，不懂得朋友能夠看下」EasyAR 初學者入門指南（1）—顯示模型」。咱們直接講解本次的核心內容。

咱們下好資源後，導入到unity，搭建好基本AR環境。如圖：

Step 2：準備模型

咱們將準備好的資源–禮物與二次元女生導入到unity中，並將三個禮物盒子與女主角拖入到ImageTarget 充當子物體，禮物盒的模型位置在

女主角的模型位置在

拖入以後，根據本身的需求修改其位置，實現其以下效果：

Step 3:編寫腳本

首先爲禮物盒添加Box Collider，並勾選Trigger

新建腳本，名字隨便起，先實現點擊禮物盒後，禮物盒消失二次元女生出現，這裏用到了一個最巧但最經常使用方便的方法Void OnMouseDown（），使用這個方法前提是該物體掛了個Collider

void OnMouseDown() { Destroy(this.gameObject); }

Step 4:添加粒子特效

使用粒子特效來使得更使人驚喜的禮物效果，粒子特效的資源位置在

接下來，編寫腳本，腳本比較簡單，基本思路就是在點擊禮物盒子後，盒子銷燬，建立粒子特效，代碼以下：

using UnityEngine; using System.Collections; public class Explore : MonoBehaviour { public GameObject explore1; public GameObject explore2; public GameObject explore3; public AudioSource sound; // Use this for initialization

void Start () { } // Update is called once per frame

void Update () { } void OnMouseDown() { Destroy (this.gameObject); Instantiate (explore1,transform.position,transform.rotation); Instantiate (explore2, transform.position, transform.rotation); Instantiate (explore3,transform.position,transform.rotation); } }

粒子的選擇與本身的喜愛來選擇，不必定和我同樣，這樣你們能夠實現不一樣的效果。

Step 5:添加音效

音效對一個應用或遊戲給人的用戶體驗影響仍是很大的，給禮物盒子添加AudioSource

using UnityEngine; using System.Collections; public class Explore : MonoBehaviour { public GameObject explore1; public GameObject explore2; public GameObject explore3; public AudioSource sound; // Use this for initialization

void Start () { } // Update is called once per frame

void Update () { } void OnMouseDown() { Destroy (this.gameObject); sound.Play (); Instantiate (explore1,transform.position,transform.rotation); Instantiate (explore2, transform.position, transform.rotation); Instantiate (explore3,transform.position,transform.rotation); } }

OK，就是這樣，用很簡單的代碼就能夠用EasyAR SDK 開發出驚豔的應用。

EasyAR 開發實例—Pokemon Go

原文連接：http://forum.easyar.cn/portal.php?mod=view&aid=14

EasyAR+Pokemon Go

Pokemon Go 做爲去年最火爆的AR遊戲除了讓用戶體驗到AR的神奇外，也讓開發者興奮不已。因此了今天給你們分享如何用EasyAR SDK 來構建相似Pokemon Go 的AR+LBS+IP 的項目。

對於這個較爲龐大的項目打算分幾期來分享，主要功能或教程目錄以下：

1.實現最基礎的Pokemon Go 的拋擲效果

2.集成AR錄屏功能

3.拍照截屏（錄屏）分享朋友圈功能

4.LBS部分，考慮用百度地圖／高德地圖（或Mapbox）來集成

5.添加語音功能

6.UI部分的設計

7.添加對戰功能（精靈PK.即AR聯機對戰）

……..

目前的策劃是這樣的，固然你們有什麼好的想法也能夠在下面評論。今天咱們來實現第一部分—–拋擲精靈球並捕獲皮卡丘。

開發資源：

皮卡丘模型：連接: https://pan.baidu.com/s/1mdhfpFnLc6SQFsubz9qn3w 密碼:2mnj

遊戲音效：連接: https://pan.baidu.com/s/1bphIupp 密碼: xpbe

Step 1:開發環境

咱們將開發資源與EasyAR 2.0 unitypackage 一塊兒導入unity中。框架如圖：

在這裏爲你們準備了不少的PokeBalls 的模型，你們能夠自由選擇：

把 EasyAR_Startup （咱們這裏沒有運用到識別圖片以後展示AR模型，因此不須要ImageTarget），皮卡丘模型，pokeballs 都拖入面板中，效果如圖：

修改皮卡丘位置與旋轉角度（爲了獲取在移動端的最好體驗），你們能夠在不斷測試中調出合適的數值，例如：

修改Pokeballs 位置（十分重要）：

接下來，在皮卡丘上掛上Box Collider，併爲其添加Tag（命名爲Pika）。

爲Pokeballs 添加rigidbody 與 Sphere Collider。

Step 2:實現拋擲
咱們思路是這樣的：點擊pokeball ，進行拋物線運動。如今有兩種方法來實現，一種是經過Rigidbody來施力實現，另外一種是經過transform 來合成加速度實現。

第一種：

在Pokeball 上新建一段腳本：

public class ClickSound : MonoBehaviour { bool drawing = false; public ParticleSystem par; float distance; public float ThrowSpeed; public float ArcSpeed; public float Speed; void OnMouseDown() { distance = Vector3.Distance (transform.position,Camera.main.transform.position); drawing = true; } void OnMouseUp() { this.GetComponent<Rigidbody>().useGravity = true; this.GetComponent<Rigidbody>().velocity += this.transform.forward * ThrowSpeed; this.GetComponent<Rigidbody>().velocity += this.transform.up * ArcSpeed; drawing = false; } void Update() { if(drawing) { Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition); Vector3 rayPoint = ray.GetPoint(distance); transform.position = Vector3.Lerp(transform.position,rayPoint,Time.deltaTime * Speed); } } }

最主要的是判斷點擊擡起以後，爲其添加向前的推力與向上的動力，來實現其運動。接着，實時判斷經過射線來插值的方式實現其運動。

咱們設置好向前與向上的速度後，能夠實現拋擲效果，可是缺點是不夠靈活，很能與皮卡丘進行碰撞檢測。

第二種：

借鑑：http://blog.csdn.net/hiramtan/article/details/51753448
第二種咱們經過transform 的方法來實現（直接綁定咱們須要與之碰撞的對象便可）：

using System.Collections; using System.Collections.Generic; using UnityEngine; public class Throw : MonoBehaviour { public const float g = 9.8f; public GameObject target; public float speed = 10; private float verticalSpeed; private Vector3 moveDirection; private float angleSpeed; private float angle; bool drawing=false; void Start() { float tmepDistance = Vector3.Distance(transform.position, target.transform.position); float tempTime = tmepDistance / speed; float riseTime, downTime; riseTime = downTime = tempTime / 2; verticalSpeed = g * riseTime; transform.LookAt(target.transform.position); float tempTan = verticalSpeed / speed; double hu = Mathf.Atan(tempTan); angle = (float)(180 / Mathf.PI * hu); transform.eulerAngles = new Vector3(-angle, transform.eulerAngles.y, transform.eulerAngles.z); angleSpeed = angle / riseTime; moveDirection = target.transform.position - transform.position; } void OnMouseDown() { drawing = true; } private float time; void Update() { if (drawing) { time += Time.deltaTime; float test = verticalSpeed - g * time; transform.Translate (moveDirection.normalized * speed * Time.deltaTime, Space.World); transform.Translate (Vector3.up * test * Time.deltaTime, Space.World); float testAngle = -angle + angleSpeed * time; transform.eulerAngles = new Vector3 (testAngle, transform.eulerAngles.y, transform.eulerAngles.z); } } }

而後，將對象拖給這段腳本便可：

Step 3:實現碰撞交互

當pokeball 與皮卡丘相碰撞時，咱們定義爲捕獲操做，這是銷燬皮卡丘魚pokeball並播放音效。

首先咱們在 pokeball 下面添加「AudioSource」組件

而後在腳本里添加方法：

void OnTriggerEnter(Collider col) { if (col.tag == "Pika") { sound.Play (); Destroy (col.gameObject); Destroy (this.gameObject,3f); } }

完整代碼：

連接: https://pan.baidu.com/s/1dFMpIcp 密碼: 57bf 捕獲的功能如今就能夠實現了

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

Unity3d EasyAR開發案例系列教程

這篇文章介紹如何使用EasyAR.unitypackage配置EasyAR

參考資料

EasyAR入門

免費註冊

KEY的獲取

導入EasyAR的SDK

使用步驟

關於Storage：

EasyAR應用-多圖識別

開發資源：

Step 1:新建項目導入sdk

Step 2:處理相機

Step 3: 處理ImageTarget

EasyAR多圖識別簡單案例—雙卡battle1.0

預覽：

開發功能描述：

開發素材

Step 1:開發環境搭建

Step 2：模型的設置

Step 3：編寫腳本

EasyAR開發技巧—模型交互操做

Step 1:導入項目

Step 2:點擊模型自己交互

Step 3：任意拖動

AR交互操做實例—玩轉殭屍

預覽：

相關資源：

Step 1:開發準備

Step 2：修改相關參數

Step 3：實現點擊怪物播放動畫實現交互

step 4:點哪走哪

EasyAR 二維碼+AR的應用

Step 1:開發環境

Step 2:製做二維碼資源

Step 3：編輯代碼

咱們在此基礎上繼續完善demo

預覽：

資源：

Step 1:準備

Step 2：製做ImageTarget

Step 3:製做掃描特效

Step 4:製做UI顯示二維碼內容

Step 5：編寫代碼

EasyAR 開發實例—AR紅包（初級）

開發資源：

Step 1:開發環境搭建

Step 3:交互

注意：

EasyAR 開發實例—AR禮物

原文連接：http://forum.easyar.cn/portal.php?mod=view&aid=11

預覽：

開發資源：

Step 1:開發環境

Step 2：準備模型

Step 3:編寫腳本

Step 4:添加粒子特效

Step 5:添加音效

EasyAR 開發實例—Pokemon Go

1.實現最基礎的Pokemon Go 的拋擲效果

2.集成AR錄屏功能

3.拍照截屏（錄屏）分享朋友圈功能

4.LBS部分，考慮用百度地圖／高德地圖（或Mapbox）來集成

5.添加語音功能

6.UI部分的設計

7.添加對戰功能（精靈PK.即AR聯機對戰）

Step 1:開發環境

Step 3:實現碰撞交互