Создать многопользовательскую игру с помощью React Hooks сложно
Ранее я упоминал, что перенес большую часть внутренней логики во внешний интерфейс, и часть этого кода использовала recursivesetTimeout
для выполнения движений и атак юнитов. Я сказал, что переделаю setTimeout
в React.useEffect
хук. Ну, я сделал, и результат менее чем великолепен.
С точки зрения разработчика код намного чище и проще для понимания, чем предыдущий рекурсивный setTimeout
, но с точки зрения игрока это разочаровало. Производительность значительно упала до такой степени, что я мог видеть частоту кадров из-за задержки.
- до:
- после:
Я попробовал несколько улучшений производительности, которые обычно помогают во всех веб-приложениях, которые я создал ранее, включая многопользовательскую пошаговую игру. Это называется ZombearsAttack, если вы хотите играть с друзьями, но для каждого раунда требуется группа из 5 игроков+.
Например, я реализую React.useCallback
для тяжелых вычислений, а затем только передаю функциональную переменную в массив зависимостей React.useEffect
для вызова, что помогает с кэшированием, но все еще не играет в кости.
Обычно мы не слишком беспокоимся о повторных рендерах, поскольку это относительно дешево, но с этим слишком много повторных рендеров. Честно говоря, в этой игре гораздо больше движущихся частей, чем в типичном веб-приложении.
Несмотря на это, я полон решимости сделать эту работу, поэтому я купил курс, чтобы узнать больше о расширенной отладке производительности React, который стоит -600 долларов 😭 , но я также трачу больше на еду на вынос в месяц, так что я не особо жалуюсь.
Подводя итог, я очень предпочитаю этот способ использования побочных эффектов для перемещения юнитов, а не рекурсивный setTimeout
, но, к сожалению, мне придется пока отложить это, поскольку я узнаю больше из этого курса.
Конечно, я не развернул эту версию приложения, учитывая состояние, в котором оно находится, но на этой неделе я развернул другую версию приложения, в которой я исправил ошибку, из-за которой игрок время от времени не мог написать последнюю закрывающую цитату, чтобы создать новый блок. Это было чертовски сложно, поскольку сама ошибка, по-видимому, не имела ничего общего с вводом этой последней закрывающей цитаты. Подробнее об этом в следующей статье!
Идея приложения WaddleWaddle состоит в том, чтобы воплотить в себе комбинацию комплексных обучающих платформ, таких как Codecademy, и старых добрых видеоигр, которые развлекают вас и заставляют хотеть делать больше.
Мне всегда нравились стратегические игры, когда мне было четыре года, а совсем недавно я действительно весело провел время, играя в Clash Royale, поэтому я соединяю эти две очень разные системы вместе, чтобы максимально дополнить друг друга, чтобы дать вам совершенно новые знания. опыт.
Цель:
– Сделать изучение кода менее пугающим и более приятным, интересным и доступным.
– Повысить осведомленность о том, что каждый, кто хочет стать инженером-программистом, может им стать.
- Сделать уроки более доступными для большего количества людей.
Мы открываем наш прототип для публики для раннего альфа-доступа! Приглашайте друзей и изучайте JavaScript невиданным ранее способом!
waddlegame.com
Я занимаюсь репетиторством по JavaScript в первый понедельник каждого месяца на Meetup
Также мы будем вести прямые трансляции событий на YouTube и Twitch.
Присоединяйтесь к нашему сообществу Discord, я всегда рад поболтать о коде!
Я буду вести блог о технических проблемах, допущенных ошибках и уроках, извлеченных при создании приложения WaddleWaddle. Следуйте за мной здесь, если это путешествие, о котором вы хотели бы прочитать!
"