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