Forgot password?
EasyAR Portal Tutorial View Content

EasyAR Beginners Guide(3)--App with AR QR code(2)

AlbertLee 2017-8-16 10:26

App with AR QR code(2)

We keep developing samples from the last tutorial EasyAR beginner guide (3) --- QR code and AR App. In the last tutorial, we talked about how to build a QR code + AR demo by using unity package. This tutorial will teach you how to develop this demo and make it better.


Step 1:Prepare

First is target images’ preparation. In this demo I used images below. (QR code can be made by your own)

Create a folder “StreamingAssets” in Unity, import target images. Create a folder “Scripts”, import prepared resources.

Step 2:Make ImageTarget

Drag ImageTarget into hierarchy

Remove the Script on the ImageTarget, import "EasyImageTargetBehaviour" onto it. (this part is basic operations, you can learn it in previous tutorial: EasyAR Starter guide (1) --- model display.)

Fill in target image information, Set up the name and the size of that imported target image with QR code

In order to see detail information of target image, we need to build a material to show it. Create Material, change the shader into Mobile/Diffuse, like below.

Now it can be displayed in Unity editor which helps us set up Scan effects.

Step 3:Make scanning effect

Drag prefab scan under ImageTarget.

Modify Scan’s position and scale.

Write script “Move” to achieve scanning effect. The script is very easy and just update Scan material’s texture and offset under “Update”.

Step 4:Make UI to display QR code contents

We can use NGUI to make UI. The idea is to create a label base on your QR code text contents. (What we achieved from script is to separate contents and display them on different labels). In this demo, I created two labels (display EasyAR and Cool) and one Button (redirect). You can set up specific positions by yourself. The effect is like below.

I put three UI widgets (label, button) under Empty GameObject, “b”. Add Tween animation onto b, which makes it much cooler. Here I use Tween/Scale mode.

Finally, hide “b” GameObject.

Step 5:Write Code

First, let’s modify “Move” Script. The idea is, set up a scanning period. When scanning reach the time, we can make object invisible , and display the UI widgets we prepared.

Assign b into script in Unity

Next, modify "ARIsEasyBehaviour" script that is bound with "EasyAR_ImageTracker-1_QRCode-1". The goal is to achieve displaying UI after receiving QR code text.

Define UIlabel at the beginning.

public UILabel text1;
public UILabel text2;

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

For button’s interaction, we achieve redirection to EasyAR SDK2.0 official website after clicking. It’s very simple, we only need one line code:
Application.OpenURL ("");

Now, we can achieve Demo’s effect. For QR code and AR application, they are mainly applied into AR name cards. Here I only give you an overview, you can create funny AR App based on your creativity.

  • bigbaak 2018-1-9 02:17
    Hi, everyone. Why I don't see attached photos of this  lesson?
  • sachin1995 2017-11-2 14:57
    Where can i find Scan prefab