渐进式编程课

Cocos Creator 目录

第 2 课2026.09.02

在 Cocos Creator 3.x 中相对父节点摆放子节点。

第 2 课：节点局部坐标与变换

日期：2026-09-02
课程序号：第 2 课
知识点：setPosition、setRotationFromEuler 与 setScale

用途

在 Cocos Creator 3.x 中相对父节点摆放子节点。

核心概念

节点 position 表示局部位置；世界位置使用 worldPosition。
欧拉角接口按角度设置旋转，缩放是相对倍数。

最小代码或操作示例

ts

import { _decorator, Component } from "cc";
const { ccclass } = _decorator;
@ccclass("PlaceNode")
export class PlaceNode extends Component {
  start(): void {
    this.node.setPosition(100, 0, 0);
    this.node.setRotationFromEuler(0, 0, 30);
    this.node.setScale(1, 1, 1);
  }
}

3～5 分钟练习

把组件挂到带可见 Sprite 的子节点，运行后移动父节点；再把子节点设为一半大小。

参考答案

ts

this.node.setScale(0.5, 0.5, 0.5);
// 父节点移动时，子节点 worldPosition 变化，position 仍为 (100, 0, 0)。

与上一课的联系

上一课认识 Node 与 Component；本课由组件修改所属节点的局部变换。