时间戳

首页 > 解决方案 > Phaser 3中特定动画完成时的回调？

javascript - Phaser 3中特定动画完成时的回调？

问题描述

我正在使用 Phaser 3 框架创建一个游戏，它有很多动画。在我的代码中，我已经有一个动画可以在播放任何动画后播放（或恢复），这很好。它的代码是

 //This keeps the rolling animation going once the push animation is done
    skater.on('animationcomplete', () => {
        skater.anims.play('roll');
    });

但是对于游戏的其余部分，我需要在相应的动画完成后发生特定的动作。有没有类似于上面那个的函数，我可以将动画的键或名称作为参数传递？

我目前是我在 Phaser 3 讨论板上看到的这个例子。这一切都在create()函数中。

    //Animation key
    const shuvKey = 'shuv'
    //Shuvit animation
    var shuvFrameNames = this.anims.generateFrameNames(
        'sheet', {start: 9, end: 12, zeroPad: 4,
        prefix: 'shuv/'}
    );
    this.anims.create({
        key: shuvKey, frames: shuvFrameNames, frameRate: 32, repeat: 0 
    });
    skater.once(game.Animations.Events.SPRITE_ANIMATION_KEY_COMPLETE + shuvKey, function(animation, frame) {
        score += 3;         
        }, this);

但我得到“未捕获的类型错误：无法读取未定义的属性‘事件’”。我不确定这是否与我的游戏配置有关，所以我将在下面发布。

配置

//Configurations for the physics engine
var physicsConfig = {
    default: 'matter',
    matter : {
        gravity: {
            x: 0,
            y: 2.5, // <--This is the only way I could get the skater to roll up the ramp.
        },
        debug: true //CHANGE THIS TO TRUE TO SEE LINES
    }   
}

//Variables for height and width
var gameHeight = 750;
var gameWidth = 3000;

//Game configurations
var config = {
    type: Phaser.AUTO,
    width: 1500, //<-- this is the width of what we will see at one time
    height: gameHeight,
    physics: physicsConfig,
    scene: {
        preload: preload,
        create: create,
        update: update
    }   
}

/* This variable will be used to make sure the skater 
cannot ollie while he is already in the air */
let skaterTouchingGround;

//Start the game
var game = new Phaser.Game(config);

我需要能够传递一个函数，该函数将在给定动画完成时执行任何后续操作，而不是仅在任何动画完成时执行。

标签： javascriptanimationphaser-framework

解决方案

您可以使用该animationcomplete事件在动画完成后运行回调函数：

skater.on('animationcomplete', doSomething);

doSomething = () => {
   alert('Animation finished!');
}

编辑：

OP询问如何调用不同的函数作为回调，实现这一点的一种方法是这样的：

skater.on('animationcomplete', doSomething);

skater.on('animationcomplete', doSomethingAgain);

doSomething = () => {
   alert('Animation finished!');
}

doSomethingAgain = () => {
   alert('Animation finished again!')
}

推荐阅读