04_第一个可交互的AR项目

AR交互

为了增加用户体验,我们往往会在项目中加入可以交互的元素,例如:按钮,选择框等等,用于用户和程序之间的互动。

在项目中添加按钮

添加按钮

修改Canvas

修改按钮属性

可以选中元素后,在右侧对元素属性进行修改。

为按钮添加点击事件

在合适的脚本中添加点击时的事件,本案例中,是需要改变识别后出现的Cube的颜色,所以,选择在上一节中的GenerateImageAnchor脚本中添加方法,方法如下:

public void setRedColor()
{
    print("改变前: " + imageAnchorGO.GetComponent<Renderer>().material.color);
    imageAnchorGO.GetComponent<Renderer>().material.color = Color.red;
    Debug.Log("点击红色按钮易以后颜色为: " + imageAnchorGO.GetComponent<Renderer>().material.color);
}

public void setBlueColor()
{
    print("改变前: " + imageAnchorGO.GetComponent<Renderer>().material.color);
    imageAnchorGO.GetComponent<Renderer>().material.color = Color.blue;
    Debug.Log("点击红色按钮易以后颜色为: " + imageAnchorGO.GetComponent<Renderer>().material.color);
}

public void setYellowColor()
{
    print("改变前: " + imageAnchorGO.GetComponent<Renderer>().material.color);
    imageAnchorGO.GetComponent<Renderer>().material.color = Color.yellow;
    Debug.Log("点击红色按钮易以后颜色为: " + imageAnchorGO.GetComponent<Renderer>().material.color);
}

此处学习使用两种方法打印日志


在按钮事件出点击添加,并选在上步骤中添加的对应的操作对象和方法。
为按钮添加点击事件

同理,多个ImageAnchor需要使用共同的方法,只需要进一步在onclick处添加对应的对象和方法:
为按钮添加点击事件

编译运行,得到效果

并且可以在Xcode控制台看到日志
控制台日志

修复空对象的Bug

在变换颜色之前,加入判断,判断当前对象是否不为空

public void setRedColor()
{
    // 判断当前对象不为空
    if (imageAnchorGO != null)
    {
        print("改变前: " + imageAnchorGO.GetComponent<Renderer>().material.color);
        imageAnchorGO.GetComponent<Renderer>().material.color = Color.red;
        Debug.Log("点击红色按钮易以后颜色为: " + imageAnchorGO.GetComponent<Renderer>().material.color);
    }
    else
    {
        Debug.Log("当前imageAnchorGO为空");
    }

}

public void setBlueColor()
{
    if (imageAnchorGO != null)
    {
        print("改变前: " + imageAnchorGO.GetComponent<Renderer>().material.color);
        imageAnchorGO.GetComponent<Renderer>().material.color = Color.blue;
        Debug.Log("点击红色按钮易以后颜色为: " + imageAnchorGO.GetComponent<Renderer>().material.color);
    }
    else
    {
        Debug.Log("当前imageAnchorGO为空");
    }
}

public void setYellowColor()
{
    if (imageAnchorGO != null)
    {
        print("改变前: " + imageAnchorGO.GetComponent<Renderer>().material.color);
        imageAnchorGO.GetComponent<Renderer>().material.color = Color.yellow;
        Debug.Log("点击红色按钮易以后颜色为: " + imageAnchorGO.GetComponent<Renderer>().material.color);
    }
    else
    {
        Debug.Log("当前imageAnchorGO为空");
    }
}

加入手机日志显示

在插件商店中找到Log Viewer插件,下载并导入。
Log Viewer

点击Report -> Create,使用该插件

image.png

重新打包该项目,然后在屏幕上画圆圈,即出现日志系统。
日志显示


注:本ARKit系列博客是根据 【子羽老师】发布在腾讯课堂的ARKit视觉风暴课程学习整理总结:https://ke.qq.com/course/575145

# AR  ARKit 

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×