В первой части мы обсудили настройку проекта и углубились в управление состоянием приложения с помощью Effector. В этой части мы сосредоточимся на PixiJS.

Первое, что нужно, это приложение Pixi, где все будет отображаться, следующий блок кода показывает, как это делается.

Это создаст наше приложение Pixi, для нашей игры это не так уж много, мы устанавливаем antialias, чтобы избежать артефактов рендеринга, которые могут появляться в некоторых браузерах. width и height устанавливаются в свойства объекта окна, чтобы они соответствовали экрану мобильного браузера, а свойство разрешения соответствовало соотношению пикселей устройства. Мы также устанавливаем autoDensity, чтобы Pixi автоматически изменяла размер в соответствии с нашим мобильным окном просмотра. Наконец, мы добавляем представление приложения в тело документа.

Это создаст для нас элемент холста, на котором будет отображаться все, что есть в игре.

Загрузка

В нашем приложении мы используем текстуру спрайта, которую необходимо загрузить, прежде чем мы сможем использовать ее в игре.

В Pixi есть удобный общий загрузчик, готовый для добавления элементов, в нашем случае мы предоставляем обратный вызов setup, когда элементы загружаются.

Что мы здесь загрузили? Есть particle.png, используемый для эффекта частиц (вы увидите больше об этом позже в keyboard.js), и data.json, который выводится из инструмента упаковки текстур, тот, который я использовал, называется TexturePacker.

Вы можете скачать это здесь".

Инструмент упаковщика текстур позволяет вам объединить серию изображений в одно изображение, нельзя ли просто сделать это в Photoshop? Ну, он также выводит файл data.json, в котором есть метаданные об исходных изображениях, их идентификатор, ширина, высота и другие полезные данные, которые Pixi использует для определения кадров анимации, мы рассмотрим это позже.

Первоначально я создал 8 png с помощью 3D-приложения Blender, а затем эти изображения были импортированы в TexturePacker, который создал data.json, а также результирующее изображение таблицы спрайтов data.png ниже:

Настраивать

Теперь эта пара ассетов загрузилась, вызывается функция настройки.

Помните data.json, о котором мы говорили ранее? Мы возьмем таблицу спрайтов из ресурсов загрузчика, а затем возьмем кадры анимации, чтобы передать их в PIXI.AnimatedSprite, которые мы затем сможем анимировать позже.

Мы устанавливаем некоторый текст состояния, который использует PIXI.Text для уведомления пользователя о названии игры, а также использует его для обновления их, если они выиграют или проиграют. Это принимает желаемый текст и объект стиля в качестве аргументов, см. стили ниже.

Примечание. Шрифт Bungee — это локальный ресурс, загруженный с помощью загрузчика веб-шрифтов Google. Это реализовано в нашем index.html

Мы также создаем еще один PIXI.Text для текста слова, который будет маскироваться символами подчеркивания и открываться при каждом правильном угадывании буквы.

Анимация палача содержит 8 кадров, как вы видели в таблице спрайтов выше. Таким образом, каждый раз, когда пользователь неправильно угадывает букву, мы должны менять кадр, отображаемый анимацией. Вы помните из части 1, что мы следим за изменениями в wordService.

Здесь мы просто передаем неудавшееся свойство, которое является целым числом, в функцию updateAnimation(failed).

Так как это PIXI.AnimatedSprite, у него есть методы для работы с этим, нам просто нужна функция gotoAndStop(frame) для нацеливания на нужный кадр.

Давайте обсудим клавиатуру дальше.

Клавиатура

Клавиатура достаточно большая, чтобы гарантировать наличие собственного класса, который расширяет PIXI.Container, мы просто вытащим интересные части.

Конструктор принимает загрузчик в качестве аргумента, так как нам нужно передать его дочернему объекту позже, так как ему нужно получить доступ к текстуре, содержащейся в загрузчике.

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

Как вы помните из первой части, мы также следим за обновлениями wordService.

Затем мы передаем два параметра в функцию setSelectedKey, мы используем их, чтобы решить, как покрасить каждую клавишу, зеленый, если это правильное предположение, и красный, если это была неудачная попытка.

Есть анимация, если выбрана правильная буква, она использует pixi-particles и создается следующим образом.

Particles — это пользовательский класс, который я создал, он в значительной степени взят из примеров в pixi-particles docs, поэтому я не буду здесь вдаваться в подробности, вы можете увидеть, как это работает в моем репозитории, или вы можете посмотреть их официальные документы. .

Следует отметить, что частицы необходимо обновлять в каждом кадре, мы делаем это с помощью следующей функции обновления.

Мы создаем экземпляр Keyboard и добавляем его на сцену следующим образом.

Таким образом, игрок продолжает делать предположения и либо выиграет, либо проиграет, как мы показали ранее, мы обрабатываем все эти входы в систему в двух созданных нами сервисах. В какой-то момент игра закончится.

Как только игра закончится, наш gameService позвонит gameOver и сообщит нам, выиграл пользователь или нет. Здесь нам просто нужно обновить текст состояния в любом случае, мы также остановим любое взаимодействие с клавиатурой и снова покажем кнопку запуска.

Пользователь может перезапустить игру, нажав кнопку «Пуск», мы обновляем текст состояния, сбрасываем gameService и клавиатуру (очищая все выбранные цвета клавиш), затем мы вызываем start на клавиатуре, чтобы принять взаимодействие с пользователем, и запускаем gameService, вызывая его начать действие.

Вывод

Надеюсь, вам понравилась эта короткая серия из двух частей, в которой показано, как я создал популярную игру «Виселица», используя PixiJS и Effector для управления состоянием.