Unity3d EasyAR開發案例系列教程

本文轉載自查看原文 2018-06-13 15:38 11189

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

參考資料

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

EasyAR入門

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

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

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

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

免費注冊

使用EasyAR之前需要使用郵箱在www.easyar.cn注冊

*如果郵箱已經在視+官網（www.sightp.com ）注冊，可以直接登錄。

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的 Key

導入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);
        }
    }
}

6、接下來，我們填寫如下信息
這里寫圖片描述
- 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
捕獲的功能現在就可以實現了

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Unity3D插件開發教程【Unity3D】Unity3D開發《我的世界》之七、番外篇 Unity3d Platformer Pro 2D游戲開發框架使用教程 Unity3D教程寶典之地形 Unity3D教程：盡量避免使用foreach Unity3D Ngui教程ScrollView Unity3D開發入門教程（一）——搭建開發環境 Vue多頁面開發案例 Unity3D Demo項目開發記錄 Unity3D游戲開發地形系統(四)