【EasyAR】Unity3D EasyAR開發(fā)案例系列教程

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


參考資料

1训挡、EasyAR 初學(xué)者入門指南
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的基礎(chǔ)教程
https://www.cnblogs.com/mafeng/p/7600172.html


EasyAR入門

EasyAR是好用免費的全平臺AR(Augmented Reality岳悟,增強現(xiàn)實)引擎愧驱。

EasyAR支持使用平面目標(biāo)的AR,支持1000個以上本地目標(biāo)的流暢加載和識別腾誉,支持基于硬解碼的視頻(包括透明視頻和流媒體)的播放徘层,支持二維碼識別,支持多目標(biāo)同時跟蹤利职。

EasyAR支持PC和移動設(shè)備等多個平臺趣效,EasyAR不會顯示水印,也沒有識別次數(shù)限制猪贪。

在拿到EasyAR package或EasyAR樣例之后跷敬,你需要一個key才能使用。請確保在使用EasyAR之前閱讀以下內(nèi)容哮伟。


免費注冊

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

*如果郵箱已經(jīng)在視+官網(wǎng)(www.sightp.com )注冊干花,可以直接登錄。


KEY的獲取

準(zhǔn)備好識別圖之后楞黄,我們需要到官網(wǎng)(http://www.easyar.cn/view/open/app.html)來為我們的AR APP申請key池凄。首先點擊 “開發(fā)中心”

這里寫圖片描述

點擊 “添加 SDK license Key” 按鈕,選擇Basic 版本
這里寫圖片描述

接下來填寫應(yīng)用詳情鬼廓,填寫你的應(yīng)用名字與打包移動平臺時必填的package name
這里寫圖片描述

確定好后肿仑,我們可以查看我們的Key
這里寫圖片描述

1.可以對應(yīng)用名稱進(jìn)行修改
2.可以對Bundle ID 進(jìn)行修改
3.若使用的是1.0的sdk,可以查看1.0的 Key


導(dǎo)入EasyAR的SDK

我們到EasyAR官網(wǎng)(http://www.easyar.cn/view/download.html)上下載"EasyAR2.0 package(for unity)"

這里寫圖片描述

當(dāng)然也可以在這里直接下載整理好的
http://pan.baidu.com/s/1dFGaHGH
解壓之后碎税,我們將"EasyAR_SDK_2.0.0_Basic.unitypackage"導(dǎo)入到unity中
這里寫圖片描述

導(dǎo)入之后尤慰,效果如圖:
這里寫圖片描述


使用步驟##

  1. 找一張圖片當(dāng)做識別圖,自己的照片也可以哦雷蹂,推薦顏色不要單一的識別圖伟端,不然一種顏色識別不到就尷尬了。然后在Unity里創(chuàng)建一個名叫StreamingAssets的文件夾匪煌,把圖片拖在這里责蝠。另外再拖一次放在Assets下。


    這里寫圖片描述
    這里寫圖片描述
  1. 接下來我們刪除原有場景的"Main Camera"萎庭,然后打開EasyAR文件夾霜医,把Prefabs文件夾下的EasyAR_Startup預(yù)設(shè)體拖到面板


    這里寫圖片描述
    這里寫圖片描述
  2. 中面板上的EasyAR_Startup,修改它的屬性驳规,把我們之前復(fù)制的key粘貼進(jìn)去


    這里寫圖片描述

    這里寫圖片描述
  3. 找到Primitives文件夾下的ImageTarget預(yù)設(shè)肴敛,把它也拖到面板。把ImageTarget上的ImageTargetBehaviour腳本刪掉,新建一個腳本EasyImageTargetBehaviour医男,拖到ImageTarget物體上

  1. 編寫腳本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

關(guān)于Storage:###

這里寫圖片描述

7.建一個Cube,顏色改為紅色趾代,Cube的位置在識別圖上方,然后把它拖在ImageTarget下當(dāng)它的子物體丰辣。
現(xiàn)在運行游戲撒强,激活I(lǐng)mageTarget,Cube就顯現(xiàn)出來了笙什。一個簡單的AR就做成了飘哨。(EasyAR就這點比較好,可以在Unity里面看效果)琐凭。
在以后的開發(fā)里也可以通過控制ImageTarget的激活和不激活讓物體顯現(xiàn)和消失芽隆,抑或怎么去顯現(xiàn)。


這里寫圖片描述

這里寫圖片描述

8.打包成APK统屈,F(xiàn)ile--buildsetings,場景拖進(jìn)去胚吁,選擇,點擊Playerseting愁憔,設(shè)置一下參數(shù):
我們填寫好信息腕扶,注意Compang Name 與我們申請key時的公司或團隊名相同(比如我申請時填的是:mars),Product Name 也要和我們申請key時填的應(yīng)用名相同(本次的項目演示為:HelloAR)


這里寫圖片描述

我們的Bundle Identifier 也要修改為


這里寫圖片描述

最后是最關(guān)鍵的一部分:我們的Graphics API 使用的是 OpenGLES2
這里寫圖片描述

9.OK吨掌,現(xiàn)在把打包好的APK安裝在Android手機上,運行半抱,掃面這張識別圖,你的模型就出來了膜宋。
怎么樣小伙伴們窿侈,你會了嗎?














EasyAR應(yīng)用-多圖識別

這里寫圖片描述

開發(fā)資源:

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


Step 1:新建項目導(dǎo)入sdk

我們新建一個unity項目秋茫,命名為"ARMultiTarget"


這里寫圖片描述

接著導(dǎo)入我們的EasyAR 2.0 package并進(jìn)行基本環(huán)境的搭建,首先我們像上次操作一樣史简,在unity中新建一個文件夾,命名為"StreamingAssets",將我們的識別圖導(dǎo)入到該文件目錄下


這里寫圖片描述

刪除原有的"Main Camera"肛著,將我們的"EasyAR_ImageTracker-1-MultiTarget" 拖到面板中
這里寫圖片描述

接著我們到官網(wǎng)申請Key填寫到相機上


這里寫圖片描述

Step 2:處理相機

我們要編寫段腳本來處理EasyAR 的多圖識別功能圆兵,在"EasyAR_ImageTracker-1-MultiTarget" 組件上新建一個腳本"HelloARTarget"

這里寫圖片描述

腳本下載: https://pan.baidu.com/s/12tf0aEVwW9Z2AUjK4qJR6Q 密碼:wg2n
腳本具體內(nèi)容如下:

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

我們準(zhǔn)備兩張識別圖


這里寫圖片描述
這里寫圖片描述

接下來我們拖動一個"ImageTarget"組件到面板中


這里寫圖片描述

我們像之前最基礎(chǔ)操作的那樣處理好ImageTarget,使得可以顯示一個model(不懂的可以看看之前的教程:EasyAR基礎(chǔ)入門之顯示模型),我們在其下面新建一個cube策泣,具體效果如下圖:
這里寫圖片描述

我們再建一個ImageTarget衙傀,改變識別圖和cube的材質(zhì),效果如圖:


這里寫圖片描述

這里寫圖片描述

最后我們Build 測試就可以實現(xiàn)預(yù)覽的效果了。
這里寫圖片描述

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

本次的案例是雙卡battle1.0低淡,適合AR開發(fā)初學(xué)者现恼,主要目的是幫助大家更進(jìn)一步了解EasyAR 多圖識別的應(yīng)用場景凯肋,在往后的技術(shù)分享我們會推出完整的AR battle 案例习贫。

預(yù)覽:

這里寫圖片描述

開發(fā)功能描述:

當(dāng)兩張識別圖相碰時粟害,出現(xiàn)“戰(zhàn)斗開始”的提示,兩個怪物播放各自的動畫

開發(fā)素材

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

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


Step 1:開發(fā)環(huán)境搭建

我們在前面已經(jīng)了解了如何用EasyAR SDK來開發(fā)多圖識別甚疟,本次的案例是在此基礎(chǔ)上進(jìn)行開發(fā)的茫陆,當(dāng)然了我們也可以在EasyAR的官方案例進(jìn)行開發(fā)(兩種方法大同小異).上次我們的項目框架如圖:


這里寫圖片描述

將所需的模型資源導(dǎo)入到我們的項目中金麸,目錄結(jié)構(gòu)為:


這里寫圖片描述

Step 2:模型的設(shè)置

將我們準(zhǔn)備好的模型分別替換Cube,并適當(dāng)修改它們的Scale 與 rotation簿盅,效果如圖:


這里寫圖片描述

我們分別對兩個模型進(jìn)行參數(shù)設(shè)置挥下,首先對ImageTarget 下的模型設(shè)置Scale 與 Rotation


這里寫圖片描述

我們還需要對它的Animation修改,在本次案例中桨醋,我們只需要"n2017_idle" 與"n2017_skill_2"棚瘟。效果如圖:
這里寫圖片描述

還需將"n2017_skill_2" 這個Animation 的"Wrap Mode "設(shè)置為"Loop"


這里寫圖片描述

另外一個模型的設(shè)置也是這樣,大家自行設(shè)置喜最,所需的Animation 為"Standby"和"Attack3"
這里寫圖片描述

然后接著為兩個模型添加Box Collider偎蘸,并勾選Is Trigger,在這里瞬内,我們需要設(shè)置Box Collider 的大小迷雪,使得長度稍稍大于圖片的寬度,方便我們的碰撞檢測虫蝶,給大家一個參考的數(shù)值:
這里寫圖片描述

為了使用OnTriggerEnter() 方法章咧,我們還需在一個模型身上掛一個RigidBody 組件
這里寫圖片描述

Step 3:編寫腳本

首先當(dāng)我們的兩張識別圖靠近時,我們顯示一個UI能真,提示“戰(zhàn)斗開始”慧邮,這里我們用NGUI來實現(xiàn)。
PS:對于NGUI不熟悉的可以看看這些教程:
http://www.taikr.com/course/445
http://www.taikr.com/course/34

我們創(chuàng)建個label


這里寫圖片描述

修改label文字內(nèi)容為“戰(zhàn)斗開始”


這里寫圖片描述

效果如圖:
這里寫圖片描述

然后我們在Label 上添加一個Tween-Alpha 腳本來


這里寫圖片描述

我們調(diào)整我們Alpha 從0變到1舟陆,并且設(shè)置動畫時長為2s误澳。
這里寫圖片描述

接著我們編寫新建代碼"PlayAnim",實現(xiàn)當(dāng)兩張識別圖靠近時,出現(xiàn)這個title秦躯,即label忆谓,首先我們要將label 設(shè)為不可見:
這里寫圖片描述

然后編寫代碼:
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 的顯示------首先是設(shè)置label為可見踱承,接著播放它的Tween--Alpha 動畫倡缠,即Alpha 在2s內(nèi)從0--1,即兩張識別圖靠近之后茎活,“戰(zhàn)斗開始”這幾個字在2s內(nèi)出現(xiàn)昙沦。

當(dāng)顯示完后,我們不希望它一直出現(xiàn)载荔,所以我們需要處理它的隱藏盾饮。我們在這個腳本基礎(chǔ)上寫一個方法:

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

然后調(diào)用,操作方法類似unity 給Button添加方法。


這里寫圖片描述

最后我們再來實現(xiàn)動畫的交互丘损,代碼相對簡單普办,屬于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開發(fā)技巧---模型交互操作

AR 開發(fā)中常用的交互功能總結(jié)

我們在EasyAR 初學(xué)者入門系列的第一篇教程中展現(xiàn)了EasyAR 最基本的功能,使得一個模型以AR技術(shù)呈現(xiàn)在我們面前徘钥,實在炫酷衔蹲。掃描識別圖之后展現(xiàn)一個模型,如果僅僅是靜態(tài)的呈础,體驗效果也不是很好舆驶,所以根據(jù)市面上的常見AR APP,給大家總結(jié)了幾種常見的AR模型的交互方式而钞。我們在最基礎(chǔ)的 HelloAR 這個項目的基礎(chǔ)上進(jìn)行開發(fā)贞远,前提是大家已經(jīng)掌握好了如何基礎(chǔ)性的搭建EasyAR+unity 的開發(fā)方式,不懂得伙伴可以跳轉(zhuǎn)到:EasyAR 初學(xué)者入門指南(1)---顯示模型 閱讀笨忌。
關(guān)于交互方式蓝仲,在這里主要給大家提供思路以及腳本文件。

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


Step 1:導(dǎo)入項目

我們以后的開發(fā)都在EasyAR 的官方項目"HelloAR" 的基礎(chǔ)上進(jìn)行官疲,首先我們需要到官網(wǎng)上下載并導(dǎo)入unity中


這里寫圖片描述

下載好后袱结,我們將HelloAR 在unity 中打開


這里寫圖片描述

下載好后,我們將HelloAR 在unity 中打開


這里寫圖片描述

Step 2:點擊模型本身交互

預(yù)覽:


這里寫圖片描述

實現(xiàn)功能:點擊Cube(掃描識別圖出現(xiàn)的模型)我們可以更換它的顏色途凫。

我們先刪除另外兩個不用的ImageTarget垢夹,只在"ImageTarget-JsonFile-idback" 身上做文章


這里寫圖片描述

我們新建一個Material,命名為"blue"


這里寫圖片描述

然后在Cube 上新建一個腳本"ChangeColor",來實現(xiàn)點擊時cube 顏色的改變维费,這段腳本屬于unity 最基本的知識果元,主要是定義兩個Material ,然后在OnMouseDown() 方法中進(jìn)行修改替換犀盟,同時我們也定義了一個布爾類的標(biāo)識位而晒。

腳本地址:鏈接: 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:雙手縮放
預(yù)覽:


這里寫圖片描述

在開發(fā)AR APP功能開發(fā)時,雙手縮放是最常見的功能阅畴,這也是一種最自然的交互手段倡怎,實現(xiàn)這樣的功能也非常的簡單,我們在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);
        //兩個距離之差钠乏,為正表示放大手勢, 為負(fù)表示縮小手勢
        float offset = newDistance - oldDistance;
        //放大因子春塌, 一個像素按 0.01倍來算(100可調(diào)整)
        float scaleFactor = offset / 100f;
        Vector3 localScale = transform.localScale;
        Vector3 scale = new Vector3(localScale.x + scaleFactor,
            localScale.y + scaleFactor,
            localScale.z + scaleFactor);
        //在什么情況下進(jìn)行縮放
        if (scale.x >= 0.05f && scale.y >=0.05f && scale.z >= 0.05f)
        {
            transform.localScale = scale;
        }
        //記住最新的觸摸點晓避,下次使用
        oldTouch1 = newTouch1;
        oldTouch2 = newTouch2;
    }
}

Step 3:任意拖動

預(yù)覽:

這里寫圖片描述

腳本地址:鏈接: 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;// 目標(biāo)物體的屏幕空間坐標(biāo)

    private Vector3 _vec3TargetWorldSpace;// 目標(biāo)物體的世界空間坐標(biāo)

    private Transform _trans;// 目標(biāo)物體的空間變換組件

    private Vector3 _vec3MouseScreenSpace;// 鼠標(biāo)的屏幕空間坐標(biāo)

    private Vector3 _vec3Offset;// 偏移

    void Awake() { _trans = transform; }

    IEnumerator OnMouseDown()

    {

        // 把目標(biāo)物體的世界空間坐標(biāo)轉(zhuǎn)換到它自身的屏幕空間坐標(biāo)

        _vec3TargetScreenSpace = Camera.main.WorldToScreenPoint(_trans.position);

        // 存儲鼠標(biāo)的屏幕空間坐標(biāo)(Z值使用目標(biāo)物體的屏幕空間坐標(biāo))

        _vec3MouseScreenSpace = new Vector3(Input.mousePosition.x, Input.mousePosition.y, _vec3TargetScreenSpace.z);

        // 計算目標(biāo)物體與鼠標(biāo)物體在世界空間中的偏移量

        _vec3Offset = _trans.position - Camera.main.ScreenToWorldPoint(_vec3MouseScreenSpace);

        // 鼠標(biāo)左鍵按下

        while (Input.GetMouseButton(0))

        {

            // 存儲鼠標(biāo)的屏幕空間坐標(biāo)(Z值使用目標(biāo)物體的屏幕空間坐標(biāo))

            _vec3MouseScreenSpace = new Vector3(Input.mousePosition.x, Input.mousePosition.y, _vec3TargetScreenSpace.z);

            // 把鼠標(biāo)的屏幕空間坐標(biāo)轉(zhuǎn)換到世界空間坐標(biāo)(Z值使用目標(biāo)物體的屏幕空間坐標(biāo))吕世,加上偏移量彰触,以此作為目標(biāo)物體的世界空間坐標(biāo)

            _vec3TargetWorldSpace = Camera.main.ScreenToWorldPoint(_vec3MouseScreenSpace) + _vec3Offset;

            // 更新目標(biāo)物體的世界空間坐標(biāo)
            _trans.position = _vec3TargetWorldSpace;
            // 等待固定更新
            yield return new WaitForFixedUpdate();

        }

    }
}

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


AR交互操作實例---玩轉(zhuǎn)僵尸

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

通過視+ APP上的一個案例來了解熟悉AR開發(fā)常用的交互技巧

在上一篇的EasyAR 開發(fā)技巧---模型交互操作 我們熟悉了比較流行的移動端AR的交互技巧,今天我們在此基礎(chǔ)上繼續(xù)深入的了解命辖,通過一個類似視+ APP 的一個實例來復(fù)習(xí)或熟悉AR開發(fā)的交互技巧况毅。

預(yù)覽:

<iframe class="player" src="http://player.youku.com/embed/XMjUyMzY5NDIzMg==" height="400" width="480" frameborder="0" allowfullscreen="" data-src="http://player.youku.com/embed/XMjUyMzY5NDIzMg==" style="width: 480px; height: 400px;"></iframe>

相關(guān)資源:

iTween 插件:鏈接: https://pan.baidu.com/s/1nuNMajn 密碼: b9nv


Step 1:開發(fā)準(zhǔn)備

下載EasyAR SDK,搭建EasyAR 開發(fā)的最基本環(huán)境尔艇。(前面有基礎(chǔ)教程:EasyAR 初學(xué)者入門指南(1)---顯示模型
ok,接下來我們刪除unity原有的Main Camera尔许,把EasyAR_Startup的攝像機拖入到面板中。

這里寫圖片描述

接著把導(dǎo)入的怪物模型拖入面板中(注意:我們這里并沒有用到Imagetarget终娃,因為不需要識別功能味廊。大家還可以腦洞大開,來為模型的展現(xiàn)增加個緩沖顯示效果棠耕,在這里我就不實現(xiàn)了余佛,主要把AR 移動端的核心知識給大家分享一下)
這里寫圖片描述

Step 2:修改相關(guān)參數(shù)

先修改AR相機的角度,使其X值旋轉(zhuǎn)270度


這里寫圖片描述

接下來使怪物Y值旋轉(zhuǎn)180度窍荧,并放大2倍辉巡,修改默認(rèn)動畫(也可以不修改,只不過使的看起來效果更驚艷)蕊退。


這里寫圖片描述

給怪物添加BoxCollider郊楣,并勾選is Trigger

Step 3:實現(xiàn)點擊怪物播放動畫實現(xiàn)交互

首先給物體再加一個Animation,根據(jù)你自己的喜愛添加相應(yīng)的Animation


這里寫圖片描述

接下來新建一段代碼實現(xiàn)動畫交互瓤荔,代碼十分簡單净蚤,我們在上一篇(交互操作)上講過,大家套用框架就好输硝。

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");
}
}

然后我們要實現(xiàn)的是雙指實現(xiàn)縮放塞栅,單指任意拖動,這部分的代碼在前一篇文章(EasyAR開發(fā)技巧---模型交互操作)中講過腔丧,以后可以把這些當(dāng)作常用代碼來使用放椰,會比較方便,直接拖動到模型身上即可愉粤。

step 4:點哪走哪

在這里砾医,我只提供自己的一種實現(xiàn)方法,當(dāng)然實現(xiàn)這種效果可以有很多方法衣厘。
首先如蚜,我們先建一個plane压恒,修改大小為(2,2错邦,2)


這里寫圖片描述

這里寫圖片描述

然后探赫,接下來,修改其Tag為Ground


這里寫圖片描述

最重要的一部分撬呢,關(guān)閉其Renderer伦吠,使其不顯示,在這里我們只要Mesh Collider
這里寫圖片描述

這里寫圖片描述

我們先在這個模型新建個腳本魂拦,在這里我們用射線檢測的方法來實現(xiàn)毛仪。

我們用Input.touchCount 先判斷是否有觸摸事件,然后獲取Input.GetTouch(0).position 芯勘,觸摸手機屏幕的位置箱靴,然后射線檢測,實現(xiàn)移動荷愕,完整代碼如下:

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") //獲取點擊位置的世界坐標(biāo)
{
Vector3 v = hit.point;
clickPosion = new Vector3(v.x, transform.position.y, v.z);
transform.LookAt(clickPosion);
}
}
catch
{
}
iTween.MoveTo(gameObject, clickPosion, 4f);
}
}
}

關(guān)于iTween 知識:
1.http://edu.manew.com/course/6
2.http://www.xuanyusong.com/archives/2052


EasyAR 二維碼+AR的應(yīng)用

EasyAR實現(xiàn)二維碼+AR的應(yīng)用第一篇章

二維碼在我們生活總早已是司空見慣了衡怀,當(dāng)AR碰撞上二維碼,一定可以產(chǎn)生好玩的效果安疗。EasyAR對于二維碼的識別與支持是相當(dāng)不錯的狈癞,所以在這一篇與下一篇的教程中,我們會分享如何從零開發(fā)二維碼+AR 的應(yīng)用茂契。

Step 1:開發(fā)環(huán)境

我們需要新建一個unity項目蝶桶,并將"EasyAR_SDK_2.0.0_Basic" 的unitypackage導(dǎo)入,關(guān)于EasyAR+unity 這些基礎(chǔ)操作不懂的可以看看之前的文章“EasyAR 初學(xué)者入門指南(1)---顯示模型”掉冶,在這里我一筆帶過真竖。導(dǎo)入之后,我們的unity目錄界面應(yīng)該是這樣的:

這里寫圖片描述

我們刪除原有的Main Camera厌小,將"EasyAR_ImageTracker-1_QRCode-1" 拖到面板中恢共。并將官網(wǎng)申請的Key填好。


這里寫圖片描述

觀察"EasyAR_ImageTracker-1_QRCode-1"這個預(yù)制體璧亚,對比與我們之前常用的"EasyAR_Startup",發(fā)現(xiàn)多了一個"BarCodeScanner" 的部分讨韭。


這里寫圖片描述

這里寫圖片描述

這里寫圖片描述

它上面所掛的腳本"QRCodeScannerBehaviour"使用來實現(xiàn)二維碼的掃描與識別功能的。這是對于它的具體描述:
這里寫圖片描述

這里寫圖片描述

這里寫圖片描述

Step 2:制作二維碼資源

我們需要準(zhǔn)備二維碼的圖片癣蟋,有許多網(wǎng)站都可以來制作自己的二維碼透硝。我制作的內(nèi)容大致如下:


這里寫圖片描述

大家也可以發(fā)揮自己的腦洞,隨意寫些內(nèi)容疯搅,目前我們先實現(xiàn)通過EasyAR SDK 來實現(xiàn)掃描二維碼 顯示文字的功能濒生。

Step 3:編輯代碼

我們準(zhǔn)備好了二維碼,接下來就是在unity里編輯代碼來實現(xiàn)功能幔欧,首先我們在"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);
        }
    }
}

我們在這段腳本文件實現(xiàn)的是首先Target 的識別然后是掃描二維碼之后接收結(jié)果并實現(xiàn)繪制在屏幕上丽声,對于Target 的found與load等方法相信大家已經(jīng)很熟悉了。對于OnTextMessage()接收返回結(jié)果然后賦值給textMessage觉义,并由OnGUI()進(jìn)行繪制雁社。我們Build測試,會實現(xiàn)如下的效果:


這里寫圖片描述

PS:在實際的開發(fā)中晒骇,我們不會像這樣從零來搭建AR+二維碼的開發(fā)環(huán)境霉撵,一般是直接在EasyAR官網(wǎng)的實例進(jìn)行二次開發(fā),這樣會大大提高我們的效率厉碟。下一篇我們會實現(xiàn)二維碼+AR的一個實例喊巍。


我們在此基礎(chǔ)上繼續(xù)完善demo

預(yù)覽:

這里寫圖片描述

資源:

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

Step 1:準(zhǔn)備

首先是關(guān)于識別圖的準(zhǔn)備屠缭,在這次的案例演示中我使用了如下的圖片(二維碼可以自己制作):


這里寫圖片描述

在unity中我們新建一個文件夾"StreamingAssets",將識別圖導(dǎo)入箍鼓。并且新建文件夾“Scripts”,導(dǎo)入提前準(zhǔn)備好的資源呵曹,框架圖如下:


這里寫圖片描述

Step 2:制作ImageTarget

將ImageTarget拖入到面板中

這里寫圖片描述

remove掉原來掛在ImageTarget上的腳本款咖,將我們導(dǎo)入的"EasyImageTargetBehaviour" 掛在上面(這部分屬于EasyAR 圖像識別最基本的操作,不懂的可以看看:EasyAR 初學(xué)者入門指南(1)---顯示模型
這里寫圖片描述

填寫識別圖信息奄喂,將我們導(dǎo)入的那張帶有二維碼的識別圖名字與size配置好
這里寫圖片描述

這里寫圖片描述

為了能在unity中看到識別圖的具體信息铐殃,我們建立一個材質(zhì)球使其顯示。新建Material跨新,模式設(shè)置為Mobile/Diffuse.效果如圖:
這里寫圖片描述

這樣在unity編輯器中就可以顯示了富腊,方便我們設(shè)置Scan掃描特效的配置
這里寫圖片描述

Step 3:制作掃描特效

將prefab scan 拖到ImageTarget 下面


這里寫圖片描述

適當(dāng)調(diào)整Scan的位置與scale,這里大家自行調(diào)整使其達(dá)到一個合適的位置


這里寫圖片描述

編寫腳本"Move"域帐,實現(xiàn)掃描效果赘被。腳本的思路其實很簡單,就是在Update里不斷更新Scan材質(zhì)球的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顯示二維碼內(nèi)容

我們使用NGUI來完成ui的制作民假。在這里的思路是根據(jù)你的二維碼文字內(nèi)容建立相應(yīng)的label(我們在代碼實現(xiàn)是通過逗號來分割內(nèi)容分別顯示在不同的label上)在本次的案例演示,我建立兩個label(分別顯示EasyAR與Cool)和一個Button(點擊跳轉(zhuǎn)網(wǎng)頁)龙优。具體的ui位置配置大家可以自行調(diào)試羊异,效果如圖:


這里寫圖片描述

這里寫圖片描述

我是將三個UI控件(label,button)放在一個Empty GameObject下面彤断,即"b"下面野舶。我們將"b"添加個Tween 動畫,使其演示效果更加炫酷宰衙,在這里我用的是Tween/Scale這一模式


這里寫圖片描述

這里寫圖片描述

最后筒愚,將"b"這一GameObject 設(shè)為不可見
這里寫圖片描述

Step 5:編寫代碼

首先我們修改完善"Move" 這個腳本。思路是這樣的菩浙,我們設(shè)置一個掃描時長巢掺,當(dāng)達(dá)到這個時長時句伶,我們設(shè)置Scan 這一object不可見,并且把我們準(zhǔn)備好的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" 腳本文件考余。主要是實現(xiàn)獲得二維碼內(nèi)容text后將它顯示在我們準(zhǔn)備好的UI上。

在開頭定義UIlabel

public UILabel text1;
public UILabel text2;

然后在OnTextMessage()方法里實現(xiàn)

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

對于按鈕的交互楚堤,我們實現(xiàn)的是點擊之后跳轉(zhuǎn)到EasyAR SDK2.0的網(wǎng)頁,實現(xiàn)起來相當(dāng)簡單含懊,一句代碼即可:Application.OpenURL ("http://www.easyar.cn/view/sdk.html");

實現(xiàn)到這里身冬,我們基本上就可以完成案例效果了。


EasyAR 開發(fā)實例---AR紅包(初級)

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

用EasyAR SDK 來實現(xiàn)一個AR紅包功能

分享一篇如何用EasyAR SDK來開發(fā)一個簡單的AR紅包的功能岔乔。

預(yù)覽:


這里寫圖片描述

開發(fā)資源:

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

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

Step 1:開發(fā)環(huán)境搭建

首先我們下載EasyAR SDK (unity版本)并導(dǎo)入到unity中酥筝,并到官網(wǎng)申請開發(fā)時所用到的Key值,在unity中雏门,刪除原有的Camera嘿歌,將EasyAR_Startup拖入到面板中,并將key之填入茁影。注意:在這里我們并沒有用到識別功能宙帝,因此沒必要用ImageTarget。


這里寫圖片描述

接下來募闲,我們準(zhǔn)備紅包模型步脓,有些人在導(dǎo)入紅包模型的過程中可能會遇到貼圖丟失的情況,在這里浩螺,我們只需將紅包貼圖重新掛到材質(zhì)上即可靴患。


這里寫圖片描述

在這里烦味,我們準(zhǔn)備兩個紅包預(yù)制體绢淀,來實現(xiàn)不同的交互。并修改它們的大小以便區(qū)分替蔬。在這里我給他們命名分別為Hong厨幻,HongBao相嵌。具體詳細(xì)參數(shù)如下
Hong:
這里寫圖片描述

HongBao:


這里寫圖片描述

接下來,我們給兩個紅包添加Tag况脆,分別為Hong饭宾,HongBao。
這里寫圖片描述

這里寫圖片描述

這里寫圖片描述

為兩個紅包預(yù)制體添加BoxCollider格了,并勾選Trigger看铆。大小自己調(diào)節(jié)。

最后盛末,我們?yōu)槲覀兯换サ哪莻€紅包HongBao添加個動畫弹惦。選中它否淤,并在菜單欄Window-Animation,打開后棠隐,點擊Create石抡,并保存命名。


這里寫圖片描述

接著點Add Property助泽,選Transfrom-Scale


這里寫圖片描述

接著點Add Property啰扛,選Transfrom-Scale
這里寫圖片描述

Step 2:產(chǎn)生紅包

首先我們先創(chuàng)建幾個隨機點,分別命名point1嗡贺,point2隐解,point3,這是紅包所降落的位置诫睬。參考數(shù)值如下:大家可以自行設(shè)置

point1:


這里寫圖片描述

point2:


這里寫圖片描述

point3:
這里寫圖片描述

接下來煞茫,我們創(chuàng)建一段代碼來使得紅包可以降落,在這里用Translate來實現(xiàn)岩臣,當(dāng)然大家可以用其他方法溜嗜,比如添加Rigidbody宵膨,給個受力也可以架谎,不過那樣有點麻煩。(補充:當(dāng)紅包的Z坐標(biāo)小于-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);

}

}

}

接下來谷扣,創(chuàng)建CreateHong空物體,在上面掛上CreateHong.cs腳本捎琐,實現(xiàn)隨機產(chǎn)生紅包会涎。

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:交互

當(dāng)點擊抖動紅包時我們產(chǎn)生炫酷的粒子特效,將如下方法添加到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插件實現(xiàn)產(chǎn)生優(yōu)惠卷或紅包(這不重要,重要的是實現(xiàn)思路與方法)

效果如下:


這里寫圖片描述

首先籽御,我們創(chuàng)建Sprite


這里寫圖片描述

接著添加TweenScale
這里寫圖片描述

注意:

這里寫圖片描述

這里寫圖片描述

接下來我們使用單例模式在CreateHong.cs腳本中實現(xiàn):

首先聲明:

publicstaticCreateHong_instace;

接著:

void Awake()

{

_instace = this;

}

然后實現(xiàn)方法供外界調(diào)用

public void PlayScale()

{

daxiao.gameObject.SetActive (true);

daxiao.PlayForward ();

}

在Move.CS中實現(xiàn):

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 開發(fā)實例---AR禮物

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

EasyAR 開發(fā)出一個炫酷的節(jié)日禮物效果

預(yù)覽:

這里寫圖片描述

這里寫圖片描述

開發(fā)資源:

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

Step 1:開發(fā)環(huán)境

關(guān)于用EasyAR SDK 搭建AR 開發(fā)環(huán)境的文章练慕,不懂得朋友可以看下"EasyAR 初學(xué)者入門指南(1)---顯示模型"。我們直接講解本次的核心內(nèi)容技掏。

我們下好資源后铃将,導(dǎo)入到unity,搭建好基本AR環(huán)境哑梳。如圖:


這里寫圖片描述

Step 2:準(zhǔn)備模型

我們將準(zhǔn)備好的資源--禮物與二次元女生導(dǎo)入到unity中劲阎,并將三個禮物盒子與女主角拖入到ImageTarget 充當(dāng)子物體,禮物盒的模型位置在


這里寫圖片描述

女主角的模型位置在


這里寫圖片描述

拖入之后鸠真,根據(jù)自己的需求修改其位置悯仙,實現(xiàn)其如下效果:
這里寫圖片描述

這里寫圖片描述

Step 3:編寫腳本

首先為禮物盒添加Box Collider龄毡,并勾選Trigger


這里寫圖片描述

新建腳本,名字隨便起锡垄,先實現(xiàn)點擊禮物盒后稚虎,禮物盒消失二次元女生出現(xiàn),這里用到了一個最巧但最常用方便的方法Void OnMouseDown()偎捎,使用這個方法前提是該物體掛了個Collider

void OnMouseDown()

{

Destroy(this.gameObject);

}

Step 4:添加粒子特效

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


這里寫圖片描述

接下來,編寫腳本茴她,腳本比較簡單寻拂,基本思路就是在點擊禮物盒子后,盒子銷毀丈牢,創(chuàng)建粒子特效祭钉,代碼如下:

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);

}

}

粒子的選擇與自己的喜好來選擇,不一定和我一樣己沛,這樣大家可以實現(xiàn)不同的效果慌核。

Step 5:添加音效

音效對一個應(yīng)用或游戲給人的用戶體驗影響還是很大的,給禮物盒子添加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 開發(fā)出驚艷的應(yīng)用。


EasyAR 開發(fā)實例—Pokemon Go

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

EasyAR+Pokemon Go

Pokemon Go 作為去年最火爆的AR游戲除了讓用戶體驗到AR的神奇外师幕,也讓開發(fā)者興奮不已粟按。所以了今天給大家分享如何用EasyAR SDK 來構(gòu)建類似Pokemon Go 的AR+LBS+IP 的項目。

對于這個較為龐大的項目打算分幾期來分享霹粥,主要功能或教程目錄如下:

1.實現(xiàn)最基礎(chǔ)的Pokemon Go 的拋擲效果

2.集成AR錄屏功能

3.拍照截屏(錄屏)分享朋友圈功能

4.LBS部分灭将,考慮用百度地圖/高德地圖(或Mapbox)來集成

5.添加語音功能

6.UI部分的設(shè)計

7.添加對戰(zhàn)功能(精靈PK.即AR聯(lián)機對戰(zhàn))

........

目前的策劃是這樣的,當(dāng)然大家有什么好的想法也可以在下面評論后控。今天我們來實現(xiàn)第一部分-----拋擲精靈球并捕獲皮卡丘庙曙。

開發(fā)資源:

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

游戲音效:鏈接: https://pan.baidu.com/s/1bphIupp 密碼: xpbe

Step 1:開發(fā)環(huán)境

我們將開發(fā)資源與EasyAR 2.0 unitypackage 一起導(dǎo)入unity中『铺裕框架如圖:


這里寫圖片描述

在這里為大家準(zhǔn)備了很多的PokeBalls 的模型捌朴,大家可以自由選擇:


這里寫圖片描述

把 EasyAR_Startup (我們這里沒有運用到識別圖片之后展現(xiàn)AR模型,所以不需要ImageTarget)馋袜,皮卡丘模型男旗,pokeballs 都拖入面板中,效果如圖:
這里寫圖片描述

修改皮卡丘位置與旋轉(zhuǎn)角度(為了獲取在移動端的最好體驗)欣鳖,大家可以在不斷測試中調(diào)出合適的數(shù)值察皇,例如:


這里寫圖片描述

修改Pokeballs 位置(十分重要):
這里寫圖片描述

接下來,在皮卡丘上掛上Box Collider,并為其添加Tag(命名為Pika)什荣。
這里寫圖片描述

這里寫圖片描述

為Pokeballs 添加rigidbody 與 Sphere Collider矾缓。
這里寫圖片描述

Step 2:實現(xiàn)拋擲
我們思路是這樣的:點擊pokeball ,進(jìn)行拋物線運動〉九溃現(xiàn)在有兩種方法來實現(xiàn)嗜闻,一種是通過Rigidbody來施力實現(xiàn),另一種是通過transform 來合成加速度實現(xiàn)桅锄。

第一種:

在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);
        }
    }
}

最主要的是判斷點擊抬起之后琉雳,為其添加向前的推力與向上的動力,來實現(xiàn)其運動友瘤。接著翠肘,實時判斷通過射線來插值的方式實現(xiàn)其運動。

我們設(shè)置好向前與向上的速度后辫秧,可以實現(xiàn)拋擲效果束倍,但是缺點是不夠靈活,很能與皮卡丘進(jìn)行碰撞檢測盟戏。

第二種:

借鑒:http://blog.csdn.net/hiramtan/article/details/51753448
第二種我們通過transform 的方法來實現(xiàn)(直接綁定我們需要與之碰撞的對象即可):

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:實現(xiàn)碰撞交互

當(dāng)pokeball 與皮卡丘相碰撞時,我們定義為捕獲操作柿究,這是銷毀皮卡丘魚pokeball并播放音效邮旷。

首先我們在 pokeball 下面添加“AudioSource”組件


這里寫圖片描述

然后在腳本里添加方法:

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

    }
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市笛求,隨后出現(xiàn)的幾起案子廊移,更是在濱河造成了極大的恐慌糕簿,老刑警劉巖探入,帶你破解...
    沈念sama閱讀 221,198評論 6 514
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異懂诗,居然都是意外死亡蜂嗽,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,334評論 3 398
  • 文/潘曉璐 我一進(jìn)店門殃恒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來植旧,“玉大人,你說我怎么就攤上這事离唐〔「剑” “怎么了?”我有些...
    開封第一講書人閱讀 167,643評論 0 360
  • 文/不壞的土叔 我叫張陵亥鬓,是天一觀的道長完沪。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么覆积? 我笑而不...
    開封第一講書人閱讀 59,495評論 1 296
  • 正文 為了忘掉前任听皿,我火速辦了婚禮,結(jié)果婚禮上宽档,老公的妹妹穿的比我還像新娘尉姨。我一直安慰自己,他們只是感情好吗冤,可當(dāng)我...
    茶點故事閱讀 68,502評論 6 397
  • 文/花漫 我一把揭開白布又厉。 她就那樣靜靜地躺著,像睡著了一般椎瘟。 火紅的嫁衣襯著肌膚如雪馋没。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,156評論 1 308
  • 那天降传,我揣著相機與錄音篷朵,去河邊找鬼。 笑死婆排,一個胖子當(dāng)著我的面吹牛声旺,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播段只,決...
    沈念sama閱讀 40,743評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼腮猖,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了赞枕?” 一聲冷哼從身側(cè)響起澈缺,我...
    開封第一講書人閱讀 39,659評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎炕婶,沒想到半個月后姐赡,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,200評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡柠掂,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,282評論 3 340
  • 正文 我和宋清朗相戀三年项滑,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片涯贞。...
    茶點故事閱讀 40,424評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡枪狂,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出宋渔,到底是詐尸還是另有隱情州疾,我是刑警寧澤,帶...
    沈念sama閱讀 36,107評論 5 349
  • 正文 年R本政府宣布皇拣,位于F島的核電站严蓖,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜谈飒,卻給世界環(huán)境...
    茶點故事閱讀 41,789評論 3 333
  • 文/蒙蒙 一岂座、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧杭措,春花似錦费什、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,264評論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至泉懦,卻和暖如春稿黍,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背崩哩。 一陣腳步聲響...
    開封第一講書人閱讀 33,390評論 1 271
  • 我被黑心中介騙來泰國打工巡球, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人邓嘹。 一個月前我還...
    沈念sama閱讀 48,798評論 3 376
  • 正文 我出身青樓酣栈,卻偏偏與公主長得像,于是被迫代替她去往敵國和親汹押。 傳聞我的和親對象是個殘疾皇子矿筝,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,435評論 2 359

推薦閱讀更多精彩內(nèi)容