Phaser - полезные советы

Часть 23: Полезные свойства Tween анимации

Как оказалось, в Phaser довольно продуманный механизм реализации анимации. Но есть ряд недостатков, оригинальное решение которых я пока не нашел. Вот некоторые фишки которые мне понравились больше всего:

Два типа цепочки анимации
Используйте цепочка анимациq в случае если вы хотите последовательно анимировать разные свойства объекта. Но если анимировать нужно одно и тоже свойство но несколько раз, то лучше оформить такую анимацию как одну. Тогда вы сможете ее легко остановить. Для этого дописывайте после очередного to/from следующий через точку

game.add.tween(object).to(...).to(...).to(...);

Но если надо к примеру сначала изменить alpha значение а потом scale, то без chain() вам не обойтись. Добавление нового tween в цепочку делается через метод chain() (можно также передать более одной анимации за раз)

var first_tween = game.add.tween(object).to({alpha: 0.5}, ...);
first_tween.chain(game.add.tween(object.scale).to({x:1.3, y:1.3}, ...));
first_tween.start();

Остановить цепочку анимаций
Если вам пришлось использовать цепочку из tween анимаций, то возникает сложность ее остановки. Метод stop() распространяется только на одну tween анимацию. А вот как можно остановить все анимации в цепочке:

var chained_tween = first_tween.chainedTween;
while (chained_tween) {
  chained_tween.stop();
  chained_tween = chained_tween.chainedTween;
}

Запуск цепочки анимации с задержкой
Я пока не могу найти оригинальный способ запуска анимации с задержкой. Представьте такой вариант: есть видимый объект, который через 2сек должен начать анимацию с размера 50% и дойти до 130%, но изначально его размер 100%.

Если делать через цепочку tween, то можно задать задержку первому tween, но как указать, что анимация начинается с 50%? Объект должен оставаться размером 100% пока не пройдет задержка. Пробовал добавить фиктивную анимацию с продолжительностью в 1 миллисекунду, что бы уменьшить размер до 50%, но визуально анимация не гладкая.

Если использовать Phaser.Timer для запуска tween с задержкой, то нет простого способа остановки такой анимации. Придеться хранить две переменные что бы тормозить как таймер, так и анимацию.

Лучшим решением является пока цепочка из анимаций вместе с событием onStart(). В котором я перед ее запуском, устанавливаю исходный размер объекта.

Анимация кнопки эффект пульсации
В играх ключевое значение имеет дизайн и анимация. По этому кнопки надо оживлять! Я потратил немного времени анализируя эффекты кнопок в популярных играх и подобрал значения tween, что бы их повторить. Пока в арсенале у меня два типа пульсации:

1) Полная пульсация для нажатия на кнопки. Эффект как бы вжатия и потом резинового отжатия:

var tween = this.game.add.tween(object.scale)
  .to({x:0.7, y:0.7}, 250, Phaser.Easing.Sinusoidal.Out, false, delay)
  .to({x:1.2, y:1.2}, 250, Phaser.Easing.Sinusoidal.Out)
  .to({x:1, y:1}, 500, Phaser.Easing.Back.Out);
tween.onStart.add(function(){object.alpha = 1});
tween.start();

2) Пульсация на половину для привлечения внимания. Эффект начинается от момента отжатия, соответственно не такая сильная как полная пульсация:

object.scale.setTo(0.6);
var tween = this.game.add.tween(object.scale)
  .to({x:1.2, y:1.2}, 250, Phaser.Easing.Sinusoidal.Out, false, delay)
  .to({x:1, y:1}, 500, Phaser.Easing.Back.Out);
tween.onStart.add(function(){object.alpha = 1});
tween.start();

Тут я еще добавил включение невидимой кнопки перед началом анимации. Это подходит для случая, если вы хотите что бы невидимая кнопка как бы появилась на экране эффектом пульсации.

Любые вопросы, пожелания в комментариях приветствуются!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *