找回密码
 立即注册
搜索
EasyAR 教程 Unity 查看内容

EasyAR 初学者入门指南(3)---二维码+AR的应用(下)

AlbertLee 2017-8-2 12:09

EasyAR实现二维码+AR的应用第二篇章

我们接着上一篇(EasyAR 初学者入门指南(3)---二维码+AR的应用(上))的案例继续进行开发。上一篇了我们讲解了如何用EasyAR 的unitypackage从零构建一个简单的二维码+AR的demo,这一篇了我们在此基础上继续完善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。



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


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

实现到这里,我们基本上就可以完成案例效果了。关于二维码+AR的应用,目前主要应用到AR名片上,在这里我只给大家一个案例框架,大家可以开开脑洞,开发出更好玩的AR应用。

鲜花
鲜花 (1)
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋

刚表态过的朋友 (1 人)

分享至 : QQ空间
收藏
  • AlbertLee 2017-9-11 14:14
    xiaocan: 插件的链接挂了
    囧!不好意思,百度网盘和谐太快了,,已经更新链接了。谢谢反馈。
  • xiaocan 2017-9-6 18:29
    插件的链接挂了
  • AlbertLee 2017-9-1 10:09
    leiyi123: 博主,链接都挂了
    没有失效啊
  • leiyi123 2017-8-31 18:38
    博主,链接都挂了