增强现实 - 植树(仅限高级版,难度:2级)
-
用到的相关知识
介绍
在这篇教程中,我们将制作一个增强现实(AR)游戏。玩家在地上点击即可植树。
提示:对于前10步,大家可以用电脑来开发项目。但最后2步,要在带后置摄像头的移动设备上的浏览器运行项目,比如平板、智能手机。
第1步 - 新建一个带三维坐标轴的空场景
请新建一个项目,删除小狗角色,在“空的1”角色中添加如下积木。因为这个角色将包含地面,请将其改名为“地面”。
大家可以在“三维场景”类别中找到积木“创建三维场景”和“显示三维坐标轴”。
如下所示, x轴指向右,y轴指向前(指向屏幕内),z轴指向上。大家可以在舞台上拖动鼠标使摄像机绕坐标系旋转:
第2步 - 添加一个大平面
在“地面”角色中,我们添加一个大平面,长宽都为1000000。颜色并不重要,因为我们在后续步骤中会使它透明。
得到如下结果:
第3步 - 开启鼠标选取事件
接下来,我们开启鼠标选取事件,从而使玩家能够选取平面上的任意地方。
注意,这个新增积木的第1个输入框我们空着,这样的话,当前角色的任意物体都变成可选取的,包括第2步添加的平面。你也可以填写“地面”,结果一样。
第4步 - 保存选取的位置
现在我们处理选取事件。首先,我们添加2个新变量“目标x”和“目标y”,用来存放选取点的x坐标和y坐标:
如果在场景中显示这2个变量,大家会看到,每当点击地面上的不同位置,这两个值就会发生变化。
第5步 - 添加一个新角色“树”
为了在三维世界中添加树,首先需要再添加一个角色“树”。这是关键的一步,如果大家在当前的“地面”角色添加树,那么这些树也将变成可选取的,这会让玩家感到混乱。
一般来说,对于这种世界跟踪增强现实项目,地面非常重要。我们只想让地面可被选取,所以我们要把其他全部三维物体放到别的角色中。
现在有两个角色:“地面”和“树”。
第6步 - 发送和接收消息“植树”
这两个角色用消息进行沟通。
在“地面”角色中,每当玩家在地面上点击一个地方,就广播一条新消息“植树”:
在“树”角色中,我们要接收这条消息,然后就可以添加树了:
第7步 - 当收到消息后添加一个树模型
在“树”角色中,每当收到消息“植树”,我们就添加一棵树。默认情况下,树总是被添加到场景中心,所以我们要把树移到玩家点击的地方,点击的坐标位置存放于变量“目标x”和“目标y”。
现在,每当你点击地面,就会种植一棵树:
第8步 - 隐藏和显示
我们的方案有个小问题。新加的树总是先在原点出现,然后移动到选取点。慢放镜头如下:
为了让树直接在选取点出现,我们可以用一个简单的方法:- 当我们添加树模型时,我们设置为隐藏。
- 把树移动到目标点后,后面放一个积木“显示”,即可改为可见:
改动之后,树就会出现在我们点击的地方:
第9步 - 让树生长
为了更好玩,我们添加一个树生长的动画。要进行如下两处改动:
- 每当我们添加树,可以让树起初非常小,目标高度设置为20。
- 树显示以后,我们将其放大10倍,用时非常短。
现在我们就得到了树生长的动画:
第10步 - 切换至增强现实世界跟踪仿真
到目前为止,增强现实方面的东西我们还没有做。现在该切换至增强现实模式了。回到“地面”角色,添加积木“切换到AR世界摄像头”。我们将开启仿真模式,并检查是否一切都运行正常。
就得到如下结果。摄像机视野会稍有不同,但选取事件用法相同:
第11步 - 连接真实世界
现在我们准备好连接到真实摄像头了。大家需要在移动设备上打开这个项目,例如平板电脑和智能手机。
大家只需要把仿真模式改为“否”,即可打开真实摄像头。另外,我们把地面的颜色的透明度改为50%,这样就可以透过地面看到真实场景。
当你在移动设备上运行项目时,后置摄像头的影像会替代场景的蓝色背景,大家仍然可以点击地面植树:
第12步 - 整理项目
地面和三维坐标轴有助于开发项目,但在真实场景中明显会破坏所添加物体的画面。在发布项目之前,我们要把地面的透明度设为100%。注意,尽管我们看不到地面了,但选取事件对透明地面仍然管用。同时,我们还要把三维坐标系设置为隐藏。
最终演示效果如下:
创意扩展
使用这个方法大家可以制作很多有趣的项目。大家是否想试试下方这些创意思路:
-
其他物体类型:大家可以添加其他类型的物体,如形状、模型和人物化身。大家还可以用按钮或者下拉菜单让玩家能够选择添加哪种物体。
-
随机:每当添加一个新物体,大家可以把它的大小和颜色设置为随机。