2026年10月4日 Cocos学习笔记02-范围转思路

通过制作小游戏是学习一个引擎、学习一门语言最快的方式。

目前有一个需求是需要通过锁定方向来确定蓄力因数，方向越正，蓄力因数越大，蓄力因数范围是0-1。

思路设计如下图所示。

　　

 

@ccclass('DirCtrl')
export class DirCtrl extends Component {

    //角度实体
    @property(Node)
    dirObj: Node = null!;
    //角度最小值
    @property
    dirMin: number;
    //角度最大值
    @property
    dirMax: number;
    //角度当前值
    @property
    dirCur: number = 0;
    //移动速度
    @property
    dirMoveTimeDelay: number = 5;

    start() {
        this.dirObj.angle = this.dirMax;
        tween(this.dirObj)
            .to(this.dirMoveTimeDelay, { angle: this.dirMin }, { onUpdate: (target, process) => { console.log(this.DirPower(process)); } })
            .to(this.dirMoveTimeDelay, { angle: this.dirMax }, { onUpdate: (target, process) => { console.log(this.DirPower(process)); } })
            .union()
            .repeatForever()
            .start();
    }
    //方向蓄力
    DirPower(value: number): number {
        return 1-(Math.abs(value-0.5)*2);
    }
}

 

测试效果如下所示。

　　

 

这里需要解释下，箭头是上来来回循环的，图中因为录屏软件问题，无法完整录制全称移动轨迹，而仅仅录制了单程轨迹。

因为初次学习Cocos和TS，所以书写规范和优化尚待提高。