坐标、向量与 2D 空间
级别:首作必学。 先掌握坐标和基础向量,就足以处理多数 2D 布局、点击与移动。复杂线性代数按需深入。
四种容易混淆的空间
| 空间 | 典型问题 |
|---|---|
| 设备屏幕像素 | 手机有多少物理像素,像素比是多少 |
| 窗口或触摸坐标 | 手指相对可见区域在哪里 |
| Cocos UI / 世界坐标 | 引擎中的相机和 Canvas 如何映射画面 |
| 节点本地坐标 | 卡牌相对棋盘父节点在哪里 |
不要用一次减去屏幕中心的方式处理所有转换。父节点的平移、缩放、旋转和锚点都可能参与结果。Cocos UI 触摸常用 event.getUILocation(),再由目标父节点的 UITransform 转成本地坐标。
// Cocos 3.8 片段,导入 EventTouch、UITransform、Vec3。
const p = event.getUILocation(); // event: EventTouch
const local = board.getComponent(UITransform)!
.convertToNodeSpaceAR(new Vec3(p.x, p.y, 0));
// board 必须是当前 UI 层级中的目标坐标节点。
非空断言仅用于前置条件已经明确的教学片段。实际项目在初始化时验证组件存在,避免第一次触摸才暴露错误。
锚点与网格
锚点影响节点位置如何对应矩形内部的位置。做居中棋盘时,先固定父节点空间和卡牌锚点,再计算每行每列的位置:
const x = (column - (columns - 1) / 2) * (cardWidth + gap);
const y = ((rows - 1) / 2 - row) * (cardHeight + gap);
示例假定卡牌锚点居中、父节点为棋盘中心、Y 向上、同一行高。需要自适应时让布局系统计算间距与可用区域,别把示例尺寸当成所有手机的像素值。
向量、距离与插值
两个位置相减得到方向向量;方向归一化后乘速度,得到移动量。计算距离可先比较平方距离,避免不必要的开方。对零长度向量必须有处理,否则方向没有定义。
插值 a + (b - a) * t 可以表达从起点到终点的变化,通常约束 t 在 0 到 1。缓动改变的是进度映射,不改变目标位置。首作优先使用引擎 Tween,先学会开始、结束和取消。
练习与检查
给棋盘父节点缩放到 0.8,再改变画布尺寸,检查点击位置和视觉位置是否一致。把原点、锚点和节点边界临时显示出来,通常比反复调偏移量更快。
完成标准:能画出触摸点到棋盘本地坐标的转换过程,并说明换屏后应该重算哪个布局参数。