Как создать приключенческую ролевую игру с использованием Vue.JS и Cosmic JS
Cosmic JS — отличный инструмент управления контентом, который дает вам возможность легко загружать, получать доступ и редактировать ваши данные и медиафайлы. Эти свойства делают его лучшим кандидатом для использования при создании веб-видеоигр, поскольку они в значительной степени включают большое количество мультимедийных изображений, файлов и объектов данных. В этом уроке мы рассмотрим, как создать простую приключенческую ролевую игру на Vue.JS, используя Cosmic JS для управления нашим контентом.
TL;DR:
Ролевая игра
Демонстрация ролевой игры
Ролевая игра Github
вступление
Поскольку на этом сайте есть много статей, которые помогут вам начать работу с Cosmic JS, в этом руководстве предполагается, что вы имеете общее представление о том, как работает Cosmic JS. См. Руководство по началу работы.
Интеграция со сторонними приложениями обычно является одной из самых неприятных задач при создании нового проекта. Однако, сделав несколько простых вызовов API Cosmic JS, мы можем очень легко получить наши данные.
Настройка вашего проекта
В этом уроке мы будем использовать vue-cli, чтобы быстро запустить наш проект. Мы также можем легко установить Cosmic JS с помощью npm:
$ npm install -g vue-cli
$ vue init webpack cosmic-game
$ cd cosmic-game
$ npm install --save vuex cosmicjs
$ npm install
$ npm run dev
Затем мы отредактируем /config/config.js, чтобы добавить нашу корзину и добавить наши ключи чтения и записи для авторизации:
Загрузка и разделение наших игровых ресурсов с помощью Cosmic JS
Чтобы наполнить нашу игру ее историей, окружением и персонажами, мы разобьем данные на три сегмента.
Первая корзина будет «История» и будет содержать все, что связано с реальным сюжетом и игровым окружением. Мы можем легко вводить и редактировать текст истории, а также добавлять сюда активы, такие как фоновые изображения окружающей среды. Обратите внимание, как легко мы можем использовать Cosmic JS CMS для редактирования наших данных!
Следующий ковш будет называться «Герой». Здесь, как следует из названия, мы можем добавить все активы и метаданные, относящиеся к главному герою. Этот ковш может содержать все спрайты героя (например, анимацию движения, действий и бездействия), а также метаданные, такие как характеристики персонажа героя.
Следующее и последнее ведро будет «Враги», и, как следует из его названия, в нем будут все активы врагов и характеристики персонажей.
Возможность разделить нашу ролевую игру на эти три блока дает нам несколько уникальных преимуществ. Во-первых, все активы аккуратно сложены и легко доступны. Во-вторых, Cosmic JS CMS позволяет нам легко добавлять и редактировать сюжетные линии так же легко, как редактировать сообщение в блоге.
Доступ к данным в нашей игре из Cosmic JS
Мы можем легко получить доступ к нашему контенту из Cosmic JS с помощью Cosmic JS API и заполнить их тремя компонентами Vue.JS, которые отражают три блока, которые мы создали для истории, героя и врагов.
Мы можем ссылаться на следующую функцию в каждом из смонтированных вызовов наших компонентов, чтобы, когда компонент загружает наши данные из наших ведер, он был готов к использованию:
Прежде чем наша игра начнется, мы можем дать нашим игрокам экспозицию, вытащив историю из нашего ведра «История». Мы также можем использовать ведро истории для дальнейшей настройки сцены, настроив среду:
Как видно из приведенного выше фрагмента, мы легко преобразуем данные, размещенные в Cosmic JS, через REST API, и можем хранить их для использования в объекте данных VueJS.
Используя тот же подход, создайте компоненты hero.vue и вражеский.vue и загрузите их метаданные из соответствующих корзин.
Чтобы упростить диалог между компонентами (например, метод атаки в hero.vue, влияющий на здоровье врагов), вы можете использовать управление состоянием через хранилище, предоставляемое Vuex, которое мы уже установили ранее с помощью NPM. Вот пример файла того, как Vuex может использовать данные, полученные от Cosmic JS, для управления нашим магазином:
Теперь, когда у нас загружены все необходимые игровые данные, мы можем заполнить нашу игру! Мы можем загружать изображения окружения в качестве фоновых изображений в наши компоненты, добавлять спрайты героев и врагов в соответствующие компоненты и использовать наше недавно созданное хранилище для обработки нашей битвы, повышения уровня и другой логики изменения состояния.
Вот пример кода для меню вашего домашнего экрана, где вы можете увидеть, как мы заполняем и обновляем данные, полученные от Cosmic JS:
Заключение
Создание видеоигры, будь то в браузере или где-либо еще, требует большого количества управления данными. В этом руководстве мы не только рассмотрели, насколько легко управлять данными, разделив их на три разных сегмента, но также увидели, насколько быстро и легко можно получить доступ к одним и тем же данным и изменить их. Кроме того, интеграция была исключительно простой: все, что нужно было сделать, это запустить команду bash и убедиться, что ключи среды правильно настроены.
Cosmic JS — легкая, но мощная платформа, и я надеюсь, что в этом руководстве удалось должным образом отобразить ее сильные стороны.
Если у вас есть какие-либо комментарии или вопросы о создании приложений с помощью Cosmic JS, свяжитесь с нами в Twitter и присоединиться к разговор в Slack.
