Создайте игру-переодевание с помощью React и Sass

В этом уроке мы создаем игру на переодевание (или генератор персонажей) с помощью React и Sass. Этот учебник и проект вдохновлены этой статьей, в которой объясняется, как создать игру-переодевание с использованием JavaScript, HTML и CSS.

Я бы определил генератор символов как пользовательский интерфейс (UI), который позволяет вам выбирать между прическами, цветом кожи, глазами, носом, ртом и другими характеристиками персонажа, чтобы создать уникального персонажа. Пример тому - Генератор аватаров Южного парка. Я бы определил игру-переодевание как пользовательский интерфейс, который позволяет вам выбирать между предметами одежды для статичного персонажа. Игры-одевалки и генераторы персонажей могут частично совпадать, поскольку генераторы персонажей могут дать вам варианты одежды, а игры-одевалки могут дать вам некоторый контроль над внешним видом персонажа, таким как цвет волос и прическа. В этом блоге я буду использовать термины переодевание и генератор персонажей как синонимы.

Конечный продукт (чтобы вы знали, во что вы ввязываетесь, читая это руководство) можно посмотреть здесь и здесь:

Код, обсуждаемый в этой статье, доступен в моей учетной записи GitHub в репозитории под названием React_Dressup_Game:

meramos / React_Dressup_Game
Этот проект был загружен с помощью приложения Create React. В каталоге проекта вы можете запустить: Запускает приложение на… github.com

Получите свои изображения

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

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

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

Элементы не перекрываются друг с другом, поэтому нам не нужно обрабатывать порядок перекрытия (z-index) в CSS.

Для работы программы важно соглашение об именах файлов. Это необходимо жестко запрограммировать.

Установить NPM

Установите NPM или другой менеджер пакетов, например Yarn, если он еще не установлен. Я установил последнюю версию Node и NPM.

Создать проект React

Я создал базовый проект React, используя Create React App, которое, согласно reactjs.org, является лучшим способом начать создание нового одностраничного приложения в React.

npm start запустит проект локально и откроет его в вашем браузере. Мы будем перезаписывать код, который в настоящее время находится в App.js, где находится основная логика.

Установить Sass

Sass расшифровывается как Syntactically Awesome Style Sheets. Это препроцессор CSS, что означает, что это язык сценариев, расширяющий CSS, позволяя разработчикам писать код на одном языке, а затем компилировать его в CSS. Он добавляет специальные функции, такие как переменные, вложенные правила и миксины, в обычный CSS, делая процесс кодирования более простым и эффективным. Sass уменьшает повторение CSS и, следовательно, экономит время.

Я решил использовать Sass вместо CSS, чтобы код оставался кратким, потому что существует много повторяющихся стилей для разных элементов наряда.

Чтобы использовать Sass в проекте React, вам необходимо установить пакет node-sass, что вы можете сделать с помощью диспетчера пакетов npm или yarn.

После выполнения команды вы должны увидеть node-sass в файле package.json.

ПРИМЕЧАНИЕ. При установке node-sass без указания версии (при установке последних версий Node и NPM) и запуске проекта я получил следующую ошибку:

Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.

Я читал в этом сообщении о переполнении стека, что для решения этой проблемы вам необходимо установить последнюю версию node-sass до 5.0 (это [email protected]). Я сделал это, и проект запустился без ошибок.

Отображение изображений на экране

Создайте папку ресурсов в папке /src. В папке с ресурсами создайте 2 папки, одну для изображений (которую я назвал «img»), а другую для файлов Sass (которые я назвал «scss»).

В папке /scss вы сохраните файл с названием style.scss (это может быть любое другое имя, но требуется расширение scss). В папке /img сохраните изображения для игры (базовое / статическое тело и заменяемые предметы). Создайте папку для каждого элемента (например, /eyes, /clothes, /nose и т. Д.).

Мы отображаем изображения с помощью свойства CSS background-image. Мы определяем теги div в коде с именем класса, соответствующим общему элементу (например, глазами), и идентификатором, соответствующим конкретному элементу (например, eyes1), который будет переключаться в зависимости от ввода пользователя. Таким образом мы изменим конкретные показанные элементы.

Если мы заменим код, присутствующий в App.js, следующим кодом:

И мы добавляем в style.scss следующее:

На экране мы видим следующее (соответствует моим файлам изображений, которые вы можете проверить в репо):

Нам нужно добавить остальные изображения в таблицу стилей, и у меня есть разное количество изображений для каждого элемента. Вы можете себе представить, сколько времени продлится style.scss файл, если я буду просто копировать и вставлять стили и изменять числа, чтобы они соответствовали правильным изображениям.

Было бы сложно, утомительно и подверженно ошибкам добавлять новые элементы и новые изображения для каждого элемента. Это было бы недостижимо и неприятно. Здесь на помощь приходит Sass!

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

Мы сократили код, но можем сделать лучше. Если мы создадим карту (карта в SASS имеет пары ключ / значение), где ключи - это имена папок с элементами, а значения - это общее количество изображений для каждого элемента, мы можем уменьшить приведенный выше код до того, что напоминает вложенный цикл for с использованием правила @each.

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

Добавить функциональность нарядов

В предыдущем разделе мы определили теги div в React с именем класса, соответствующим общему элементу (например, eyes), и идентификатором, соответствующим конкретному элементу (например, eyes1), с целью переключения этих элементов на основе ввода пользователя. Изменяемый идентификатор изменит изображение, отображаемое для определенного элемента. Вы можете проверить это, изменив идентификаторы div в коде React и перезагрузив сайт, или изменив идентификаторы с помощью Chrome DevTools в браузере Chrome.

Мы начнем с добавления кнопок «Далее» для каждого элемента, чтобы пользователь мог переключать каждый элемент.

Добавьте стиль к кнопкам «Далее», чтобы они были размещены справа от персонажа-наряда:

Когда нажимается кнопка для элемента, мы хотим, чтобы имя класса для соответствующего элемента div обновлялось до следующего элемента. Например, при нажатии кнопки с названием «следующие глаза» мы хотим, чтобы имя класса для блока div с идентификатором «eyes» изменилось с «eyes1» на «eyes2» или с «eyes2» на «eyes3», и так далее. Для этого нам нужно отслеживать текущее количество каждого отображаемого элемента и общее количество изображений, доступных для каждого элемента.

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

Внутри функции App() определите переменную состояния с именем dressupState, в которой мы будем отслеживать текущее изображение для каждого элемента и общее количество изображений для каждого элемента:

Определите функцию под названием next для обновления изображения элемента:

Добавьте функцию next() к кнопкам «Далее»:

Следующие кнопки можно написать в более коротком коде, перебирая ключи переменной dressupState:

Обновите блоки div, которые были добавлены ранее, чтобы значения их классов определялись на основе текущего изображения для каждого элемента:

Разделы div также можно записать в более коротком коде, перебирая ключи переменной dressupState:

Теперь пользователь может выбирать различные элементы с помощью кнопок «Далее».

[Бонус] Добавить кнопку случайного выбора

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

Я решил создать функцию под названием updateDressUp(), которая обновляет переменную состояния dressUpState, учитывая значения item и new_current. Я сделал это, чтобы не повторять длинный звонок setDressupState.

Я создал функцию с именем randomize, которая для каждого элемента получает случайное целое число от 0 до общего количества изображений для элемента и устанавливает новое (или такое же) число в качестве нового текущего для этого элемента.

Затем я добавил кнопку, которая при нажатии вызывает функцию randomize.

Наконец, я добавил стили к кнопке. Я разместил его под кнопками «Далее» и сделал текст кнопки полужирным.

Конечный результат

Полный App.js код:

Полная style.scss таблица стилей:

Геймплей одевалки:

Развернутая игра-одевалка: https://meramos.github.io/React_Dressup_Game/

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

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

Повеселись!

Если вам понравилась эта статья, порекомендуйте и поделитесь.