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

AR交互

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

在项目中添加按钮

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

为按钮添加点击事件

在合适的脚本中添加点击时的事件，本案例中，是需要改变识别后出现的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插件，下载并导入。

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

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

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