HTML5 Phaser ECMAScript 6, Phaser - полезные советы

Часть 29: Неверное событие onInputUp при scale=0

Начну с очень хорошей новости: прототип программы по изучению слов готов! Конечно надо еще создать два других навыка, добавить сцены с сдачей/провалом экзамена, но главное мы можем играть. А играть надо, потому, что можно заметить ошибки проектирования: в окошке результата урока нет кнопки «на главную». При проектировании, я подумал о кнопке повторения урока, о запуске следующего урока и даже шаринге, а вот про «на главную» забыл.

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

Поначалу мне казалось, что все беды от того, что я не использую Phaser.Button. Проведя несколько пробных тестов, я обнаружил, что у кнопки нет события onTap, а использовать onInputDown или onInputUp не совсем правильно. Помните сцену с прокруткой уроков? Теперь представьте, когда пользователь нажимает на экране и прокручивает список? Все хорошо, если нажатие для прокрутки было вне кнопки урока, а если на нем? Сработает событие onInputUp кнопки после окончания swipe жеста и запуститься урок.

отладка bounds спраита через встроенный debug Phaser-а

Но до того, как я начал реализацию onTap в Phaser, мне пришлось найти баг в Phaser: при нажатии на любом месте игровой сцены со списком уроков, срабатывало событие спраита onInputDown/Up. Я включил отладку (debug) краев спраита (bounds) кнопки урока, что бы убедится, что он физически не занимает всю сцену и все оказалось в норме.

render() {
  this.game.debug.spriteBounds(sprite_object, 'pink', false);
}

Пошаговый дебагинг, десятки экспериментов помогли найти виновника, им оказался scale. Если спраит имеет нулевой scale, то его bounds автоматом будут infinity (бесконечность) размера, хотя физически он не виден на сцене. По этому при проверке, находится ли указатель в пределах спраита, мы получим положительный результат.

В моем частном случае, на кнопке было три звезды. Я скрывал необходимое количество звезд задав им scale=0. Обратите внимание, что если анимировать спраит (звезду) от 0 до 100% размера, этого бага не будет! Так как даже при scale спраита равным 0.00001%, bounds не будет бесконечным, а значит проверка указателя на его нахождении в спраите будет ложным.

Если не считать несколько часов потрачены в пустую, все довольно просто. Я обновил код и заменил scale=0 на visible=false. Что дает тот же результат. Теперь надо было реализовать tap событие… и как всегда, с виду простая задача, переросла в решение проблемы =) Об этом в следующем посте.

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

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