cocos2d-x教程：动作系统与计时器-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46192491/article/details/122803386

本文介绍了cocos2d-x中如何处理按钮回调事件，包括通过GUI和脚本两种方式添加事件。此外，还讲解了预制体prefab的概念及其在资源复用中的作用。在动作部分，探讨了ruanAction和cc.tween在实现游戏对象动画中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.按钮回调事件

1.通过GUI添加事件

2.通过脚本添加事件

将beginBtn按钮组件拖动到canvas下的脚本组件loadingTS的begin Btn内

const { ccclass, property } = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {
    @property(cc.Node)
    beginBtn: cc.Node = null;

    onLoad() {
        //内部函数:参数1:事件类型 参数2:回调函数
        this.beginBtn.on(cc.Node.EventType.TOUCH_START, function (event) {
            console.log(event);
            console.log("通过内部回调函数点击了开始按钮");
        })
        //外部函数
        this.beginBtn.on(cc.Node.EventType.TOUCH_START, this.btnClick)
    }
    btnClick() {
        console.log("通过btnClick函数点击了开始按钮")
    }
}

二.预制体prefab

重复使用的资源可以做成预制体,通过动态加载预制体prefab文件夹必须在resources文件夹下.

三.动作

1.ruanAction

const { ccclass, property } = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {
    @property(cc.Node)
    beginBtn: cc.Node = null;
    onLoad() {
        // this.beginBtn.runAction(cc.moveBy(2, cc.v2(0, 300)));
        //执行组合动作
        this.beginBtn.runAction(cc.sequence(
            cc.moveBy(3,cc.v2(0, 300)),//3秒内向上移动300
            cc.scaleBy(2, 3),//2秒内放大3倍
            cc.callFunc(//动作的回调函数
                function () {
                    console.log("动作执行完毕!")
                })
        ))
    }
}

const { ccclass, property } = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {
    @property(cc.Node)
    beginBtn: cc.Node = null;
    onLoad() {
        //.easing进行动作修饰
        //caseIN从第2秒开始由慢变快
        let act1 = cc.moveBy(5, cc.v2(200, 200)).easing(cc.easeIn(2));
        this.beginBtn.runAction(act1);
    }
}

2.cc.tween

const { ccclass, property } = cc._decorator;
@ccclass
export default class NewClass extends cc.Component {
    @property(cc.Node)
    beginBtn: cc.Node = null;
    onLoad() {
        cc.tween(this.beginBtn)
            .to(2, { position: cc.v3(200, 200) })
            .to(2, { position: cc.v3(100, 100) })
            .union()//将前面的动作合成一个动作
            .repeat(3)//将合成后的动作重复3次
            .start()//开始执行动作
    }
}