Во фреймверке Pixi.js из коробки есть только интерактивное взаимодействие со спрайтом по прямоугольнику самого спрайта AABB. Можно, конечно, определить зону взаимодействия фигурой из Shape, но иногда хочется, чтобы взаимодействие с контроллером (мышь, касание) зависело от альфа-канала самой текстуры.
Когда-то в забитой и забытой технологии Flash от Adobe такой механизм был встроен, поэтому его реализация может оказаться полезной. Наивное и быстрое решение сделал в пакете pixi-ppi.
И, казалось бы – пользуйся. Но меня ждал ещё один подвох. Дело в том, что модель событий в Pixi.js не предполагает трансляцию на следующий интерактивный спрайт, если событие уже обработано. И даже stopPropagation, как описано в некоторых решениях, не работает. По крайней мере, для версии Pixi.js 8. Поэтому либо ваши спрайты не должны находиться друг над другом и это простейший случай, либо следует использовать интерактивный контейнер Container для них. Подробный пример использования такого контейнера дан в файле example/main.js репозитория.
Работу пакета можно посмотреть здесь. В правом верхнем углу видно, какой спрайт взаимодействует при использвании контроллера (мышь, касание).
Комментариев нет:
Отправить комментарий