Для тех из вас, кто не знает, Phaser - это игровой фреймворк, разработанный Photon Storm для создания игр HTML5. Это невероятно, и вам нужно научиться легко, особенно если у вас есть опыт работы с Javascript. Учебники и документация для него действительно хорошо сделаны, и в Интернете есть активное сообщество, которое ответит на любые ваши вопросы.
Мой напарник Дэн и я создавали проект в реакции, и недавно открыв для себя Phaser и насколько легко было начать, у нас возникла идея создать что-то вроде аркады в реакции. В то время это казалось хорошей идеей: способность React к динамическому рендерингу компонентов в сочетании с удобной для пользователя игровой библиотекой на основе html могла быть идеальным выбором. За исключением того, что все это работает не так. Phaser и React абсолютно несовместимы. Игра с фазером выглядит так:
Таким образом, вы могли подумать, что было бы относительно просто перевести это на язык виртуальной модели DOM React. Вы были бы правы и неправы. Мне потребовались часы, чтобы что-нибудь отобразить в React. Некоторое время назад был создан пакет phaser-response, но он несколько устарел. Старый синтаксис, ахой:
Спасибо Тейлору Ноделлу, который создал шаблон фазера / реакция, который я нашел чрезвычайно полезным, но я все еще тратил часы на то, чтобы заставить игры работать. Наш проект больше не мог быть аркадой. Мы обратились к чему-то совершенно другому, но я не мог отказаться от этого. Я продолжал возиться, гуглить и играть со своим babelrc больше, чем я когда-либо думал. Я разобрался и наконец получил игру для рендеринга, но вскоре столкнулся с другой проблемой. Я смог условно отрендерить игровой компонент с помощью response, но когда я попытался его размонтировать, произошло что-то странное ...
Это три разные игры, расположенные друг над другом. Вы могли играть только по одному, но они продолжали накапливаться, даже когда компонент, к которому они принадлежали, был отключен. Я console.logg и все такое! Еще больше погуглил, и я понял, что Phaser создает игровой объект, привязанный к тегу Canvas, и который сам должен быть уничтожен, чтобы действительно «закончить» игру. Еще один пример того, что React и Phaser не ладят. Мне никогда не удавалось плавно уничтожить игровой объект извне (если бы у меня было больше часов, чтобы инвестировать в этот проект, мне было бы любопытно использовать перехватчики реакции), поэтому я создал ключевое событие, которое завершало бы игру вручную, и, конечно же, если вы проиграли, игровой объект самоуничтожился, и в этот момент вы могли повторно отрендерить новый новый игровой компонент, используя кнопки реакции или что-то еще. Но это не лучший UX: пользователь должен знать, что он должен выйти из игры как внутри игры, так и за ее пределами. Фу.
Если есть урок: не используйте фазер с реакцией. Учитесь на моих ошибках. На самом деле нет веской причины. Но если нужно, надеюсь, это поможет! И попробуйте Phaser, если у вас его нет, и все заинтересованы в создании игр. Это круто.
