Cocos Creator2D游戏开发(9)-飞机大战(7)-爆炸效果

news2024/9/22 5:27:39

这个爆炸效果我卡在这里好长时间,视频反复的看, 然后把代码反复的测试,修改,终于给弄出来
视频中这段,作者也是修改了好几次, 跟着做也走了不少弯路; 最后反正弄出来了;
有几个坑;
① 动画体创建位置是enemy_prefab
② enemy_prefab预制体下不用放动画就行;
③ 代码中引用Animation不会有提示,要手动添加

下面直接跟着做把, 争取一次能成吧

在enemy_prefab下创建俩动画体, 命名enemy_animation,explosion_animation
enemy_animation下里就放一张enemy图片,但是节点选择enemy才能创建; 我们要的是文件;
将动画体拖斤enemy_prefab的属性检查器中

最坑的一步来了

Enemy.ts文件中添加动画的引用(需要手动把Animation,放在import 里面)

   @property(Animation) ExploAnim: Animation;   // 添加属性 以便在代码中 播放动画

完整代码如下

import { _decorator, Collider2D, Component, Contact2DType, IPhysics2DContact, Animation } from 'cc';
const { ccclass, property } = _decorator;

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

    @property(Animation) ExploAnim: Animation;   // 添加属性 以便在代码中 播放动画

    private isExplo = false;
    private collider: Collider2D;

    start() {
        this.collider = this.getComponent(Collider2D);
        if (this.collider) {
            this.collider.on(Contact2DType.BEGIN_CONTACT, this.onBeginContact, this); // 碰撞函数注册
        }
    }

    onBeginContact(selfCollider: Collider2D, otherCollider: Collider2D, contact: IPhysics2DContact | null) {

        if (this.isExplo === false) { // 碰撞一次就行了
            this.isExplo = true;
            this.collider.destroy();
            this.ExploAnim.play("explosion_animation");
            this.scheduleOnce(() => {   // 匿名函数  局部函数            
                this.node.destroy();
            }, 0.9);
        }
    }

    update(deltaTime: number) {
        const pos = this.node.getPosition();
        if (pos.y < -400) {
            this.node.destroy();
        } else {
            this.node.setPosition(pos.x, pos.y - 5);
        }
    }
}