Случилось неприятное — встроенные анимации Phaser заглючили. Что я ни делал, они рандомно отправляли всплывающие пузыри в противоположную сторону. Я хотел, чтобы пузырьки всплывали на определенную дистанцию, а в Phaser-анимациях был только метод to — то есть можно было указать к какой координате плыть.
Поскольку точка клика постоянно меняется в широких пределах, указывание фиксированной координаты, куда надо плыть, приводило к странном и не очень красивому разнобою. А при попытке вычислять дистанцию и подставлять нужное значение — анимация периодически начинала работать в противоположную сторону.
Я уже хотел написать горящий велосипед — свой менеджер анимаций. И несколько раз его уже написал-вставил, но меня все мучало, что я меняю горящую карусель на горящий велосипед.
В итоге понял, что Tween.to в Phaser — добавляет новую анимацию в цепочку анимаций при каждом вызове.
|
1 2 3 4 5 6 |
this.tween.to( {alpha: 0, y: this.target.y}, this.DURATION, Phaser.Easing.Quadratic.In, true ); |
Это было при каждом клике, то есть при каждом клике в итоге у меня к одному пузырьку добавлялась и добавлялась анимация в цепочку — что приводило к странном поведению.
Стало
Поставил в клике только start
|
1 2 3 4 5 6 7 8 9 10 11 |
FloatingLootElement.prototype.float = function (x, y) { this.show(); this.text.alpha = 1; this.text.x = x; this.text.y = y; this.image.x = this.text.width - 10; this.target.x = this.text.x; this.target.y = this.text.y - this.DISTANCE; this.tween.start(); }; |
this.target — это специальный объект, к состоянию которого надо стремиться. Я задаю его в конструкторе — не при каждом клике я меняю Y (и могу менять остальные параметры), что позволяет задавать суть анимации в конструкторе объекта один раз, а менять ее параметры — уже при клике
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
function FloatingLootElement(game) { // Конструктор всплывающего пузырька this.DISTANCE = 100; this.DURATION = 250; this.target = {alpha:0, x: 0, y: 0}; // куда летим this.text = game.add.text(0, 0, "", R.style.floating); this.image = game.add.image(0, -20, PotionImageNames.getPage(0), PotionImageNames.getName(0)); this.text.addChild(this.image); this.tween = game.add.tween(this.text); this.tween.to( this.target, this.DURATION, Phaser.Easing.Quadratic.In ); // ... другие настройки } |
Всплывающие пузырьки, как и любые временные эффекты, я часто создаю отдельными сущностями, которые обычно живут в пулах (Pools), откуда они извлекаются при появлении и сбрасываются обратно при завершении анимаций.