Как сделать анимацию переворачивания карты в Phaser 3 - PullRequest
1 голос
/ 03 апреля 2019

Я пытаюсь заставить карту перевернуться при касании (работает на мобильном телефоне).До сих пор мне удавалось менять только один кадр на другой (спереди назад) без какого-либо перехода, поэтому это кажется неестественным.Идея состоит в том, что вы касаетесь экрана, появляется карта, затем вы снова касаетесь ее, и карта медленно переворачивается, так что вы можете увидеть что-то на обратной стороне карты.

Я использую последнюю итерациюof 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();
}

Коснитесь экрана, покажите карточку (в этом случае у вас есть спрайт-лист с 2 кадрами, спереди и сзади), снова коснитесь карточку, и она медленно перевернется, чтобы показать ее заднюю часть.

1 Ответ

1 голос
/ 04 апреля 2019

Я пока не очень знаком с Phaser3, но в Phaser2 я сделал что-то вроде этого, см. Анимацию значков уровней в этой игре .По сути, идея состоит в том, чтобы:

  1. добавить анимацию движения, чтобы «сложить» спрайт карты (ширина шкалы до 0,0)
  2. добавить функцию onComplete для анимации движения
  3. в onCompleteфункция изменения спрайтового фрейма для отображения карты и ..
  4. .. запускает другую анимацию движения, чтобы «развернуть» карту (ширина шкалы до 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') {
        // ?
    };
}
...