【记录】透视相机下的UI交互

版本:CocosCreator3.6.3

需求:种地,地块需要有透视的效果(近大远小),地块的每个小区域(item)可以点击种植作物,美术素材全部为2D素材。

  1. 新建工程
  2. 搭建UI

image

3.新建一个3D相机渲染透视效果,注意新建透视相机的位置是在屏幕的远点,想要照射到canvas需要调整和canvas一样的位置,然后适当调整一下Z值和X轴的旋转角度

掩码只显示3D层级的节点(把land及其子节点的层级设置为3D),原正交相机只显示UI_2D的节点,透视相机的帧缓冲选择只清除深度(避免遮挡其他相机显示的物体)。

image

运行效果

4.在作物(tile)下面新建一个四方形Quad,调整其x、y轴缩放,这里大概是100-100,在改Quad节点上添加一个collider组件用于射线检测

image

5.新建一个控制脚本Land.ts,挂载到land节点上。

6.回到编辑器,把3D相机拖到land节点的显示属性上

image

7.运行

test_1