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

$ cd cosmic-game

$ npm install - сохранить vuex cosmicjs

$ npm install

$ npm run dev

Затем мы отредактируем /config/config.js, чтобы добавить нашу корзину и добавить наши ключи чтения и записи для авторизации:

Загрузка и разделение наших игровых активов с помощью Cosmic JS

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

Первое ведро будет «Сюжетом» и будет содержать все, что связано с реальной историей и окружающей средой игры. Мы можем легко вводить и редактировать текст истории, а также добавлять сюда ресурсы, такие как фоновые изображения окружающей среды. Обратите внимание, как легко мы можем использовать Cosmic JS CMS для редактирования наших данных!

Следующее ведро будет называться «Герой». Здесь, как следует из названия, мы можем добавить все активы и метаданные, относящиеся к главному герою. Это ведро может содержать все спрайты героя (например: анимацию движения, действий и холостого хода), а также метаданные, такие как характеристики персонажа.

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

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

Доступ к данным в нашей игре из Cosmic JS

Мы можем легко получить доступ к нашему контенту из Cosmic JS с помощью Cosmic JS API и заполнить их тремя компонентами Vue.JS, которые отражают три Bucket, которые мы создали для истории, героя и врагов.

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

Перед тем, как наша игра начнется, мы можем дать нашим игрокам представление, извлекая историю из нашего "Сюжетного" ведра. Мы также можем использовать ведро истории для дальнейшей настройки сцены, настроив среду:

Как вы можете видеть в приведенном выше фрагменте, мы легко конвертируем данные, размещенные на Cosmic JS, через REST API, и можем хранить их для использования в объекте данных VueJS.

Используя тот же подход, создайте компоненты hero.vue и противник.vue и загрузите их метаданные из соответствующих сегментов.

Чтобы упростить диалог между компонентами (например, метод атаки в hero.vue, влияющий на здоровье врагов), вы можете использовать управление состоянием через хранилище, предоставляемое Vuex, которое мы уже установили ранее с помощью NPM. Вот пример файла того, как Vuex может использовать данные, полученные из Cosmic JS, для управления нашим магазином:

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

Вот пример кода для меню вашего домашнего экрана, где вы можете увидеть, как мы заполняем и обновляем данные, полученные от Cosmic JS:

Заключение

Создание видеоигры, будь то в браузере или где-либо еще, требует большого объема управления данными. В этом руководстве мы не только изучили, насколько легко управлять данными, разделив их на три разных сегмента, но и увидели, насколько быстро и легко можно получить доступ к одним и тем же данным и изменить их. Кроме того, интеграция была исключительно простой: все, что нужно было сделать, это запустить команду bash и убедиться, что ключи среды правильно настроены.

Cosmic JS - это легкая, но мощная платформа - и я надеюсь, что это руководство смогло должным образом показать ее многочисленные сильные стороны.

Если у вас есть какие-либо комментарии или вопросы о создании приложений с помощью Cosmic JS, напишите нам в Twitter и присоединитесь к разговору в Slack.