【问题标题】:Callback for when a specific animation is complete in Phaser 3?在 Phaser 3 中完成特定动画时的回调?
【发布时间】:2020-02-23 20:15:48
【问题描述】:

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

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

但是对于游戏的其余部分,我需要在相应动画完成后执行特定操作。有没有和上面类似的功能,可以把动画的key或者name作为参数传入?

我目前是在 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);

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

【问题讨论】:

    标签: javascript animation phaser-framework


    【解决方案1】:

    您可以使用 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!')
    }
    

    【讨论】:

    • 如何区分不同动画的回调函数?我会在调用动画的任何地方创建一个新的回调函数并在代码的第一行传递该函数吗?
    • 有很多方法可以做到这一点。在我看来,更简单的是创建不同的动画函数并在animationcomplete 事件中单独调用它们作为回调。我已经更新了我的答案。这适用于您的用例吗?
    • 哈哈不用担心。我给了你一个更通用的回应,所以你可以决定在你的用例中做什么!
    • 据我所知,@ManuelAbascal 您只是添加了另一个功能来收听animationcomplete,但skater 可以做的不同动画之间没有区别......所以例如skater.play('roll') 将同时调用 doSomethingdoSomethingAgain 完成。如果我希望“滚动”结束只触发doSomething 和另一个动画的结束,例如ollie 触发doSomethingAgain?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-03-11
    • 1970-01-01
    • 2020-11-09
    • 1970-01-01
    • 1970-01-01
    • 2012-11-06
    • 2021-11-12
    相关资源
    最近更新 更多