Question

我正在尝试触摸时翻转卡片（在移动设备上工作）。到目前为止，我只能将一帧换为另一帧（从前到后），而没有任何过渡，因此感觉不自然。这个想法是，您触摸屏幕，显示卡，然后再次触摸它，然后卡缓慢翻转，这样您就可以在卡的背面看到一些东西。

我正在使用Phaser 3的最新版本。

我有一个有效的示例，但是它是在Phaser 2中制作的，因此，我很难将代码更新到Phaser 3。

var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
scene: {
    preload: preload,
    create: create
}
};

var game = new Phaser.Game(config);

function preload() {
this.load.image('fondo', 'img/backgroundhome.png');
this.load.spritesheet('carta', 'img/spritesheet.png', { frameWidth: 196, frameHeight: 339 });
this.load.image('reverso', 'img/reversecard.png');
}

function create() {
this.add.image(400, 300, 'fondo');
let cartaObj = this.add.image(75, 100, 'carta').setOrigin(0, 0).setInteractive();

this.anims.create({
    key: 'frente',
    frames: this.anims.generateFrameNumbers('carta', { start: 0, end: 0 }),
    frameRate: 1,
    repeat: -1
});

this.anims.create({
    key: 'atras',
    frames: this.anims.generateFrameNumbers('carta', { start: 1, end: 1 }),
    frameRate: 1,
    repeat: -1
});

var tween1 = this.scene.tweens.add({
    targets: cartaObj,
    scaleX: 10,
    scaleY: 10,
    ease: 'Linear',
    duration: 300,
    repeat: 0,
    yoyo: false
});

cartaObj.once('pointerup', cargaAnim, this);
}

function cargaAnim() {
tween.start();
}

点击屏幕，显示一张卡（在这种情况下，该卡具有一个前后两帧的Spritesheet），再次轻按该卡，然后缓慢翻转以显示卡的背面。

Answer 1

我对Phaser3不太熟悉，但是在Phaser2中我做了类似的事情，请参见关卡图标动画in this game。基本上，这个想法是：

添加补间以“折叠”卡片精灵（比例宽度为0.0）
在补间中添加onComplete函数
在onComplete函数中更改精灵帧以显示卡和。
..开始另一个补间以“展开”卡片（比例宽度为1.0）

类似这样：

// scale horizontally to disappear
var tween1 = this.scene.tweens.add({
    targets: cartaObj,
    scaleX: 0.01,
    ease: 'Linear',
    duration: 300,
    repeat: 0,
    yoyo: false
});

tween1.onComplete.add(function(){this.onTurnCard(cartaObj);}, this);

onTurnCard: function(card) {
    // set card face somehow
    card.frameName = 'HeartQueen'; // ?

    // scale horizontally to re-appear
    var twn = this.scene.tweens.add({
        targets: card,
        scaleX: 1.0,
        ease: 'Linear',
        duration: 300,
        repeat: 0,
        yoyo: false
    });

    // do something on complete
    twn.onComplete.add(function(){this.onTurnCardCompleted(card);}, this);
}

onTurnCardCompleted: function(card) {
    // do something, show text, add score etc.
    if (card.frameName == 'HeartQueen') {
        // ?
    };
}

如何在Phaser 3中制作卡片翻转动画

1 个答案: