您的位置:首页 > 其它

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

2017-09-11 14:13 225 查看
我们接着上一篇的案例继续进行开发。上一篇了我们讲解了如何用EasyAR 的unitypackage从零构建一个简单的二维码+AR的demo,这一篇了我们在此基础上继续完善demo。

预览:



资源:
NGUI插件:链接: https://pan.baidu.com/s/1jHHKniQ 密码: vpyz
资源地址:链接: https://pan.baidu.com/s/1eR5biRS 密码: w3yb
代码地址:链接: https://pan.baidu.com/s/1skD2uRz 密码: by3v
Step 1:准备

首先是关于识别图的准备,在这次的案例演示中我使用了如下的图片(二维码可以自己制作):

在unity中我们新建一个文件夹"StreamingAssets",将识别图导入。并且新建文件夹“Scripts”,导入提前准备好的资源,框架图如下:



Step 2:制作ImageTarget

将ImageTarget拖入到面板中



remove掉原来挂在ImageTarget上的脚本,将我们导入的"EasyImageTargetBehaviour" 挂在上面(这部分属于EasyAR
图像识别最基本的操作,不懂的可以看看:)



填写识别图信息,将我们导入的那张带有二维码的识别图名字与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应用。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: