Cosmic JS – это отличный инструмент управления контентами, который дает вам возможность загружать, доступ и легко редактировать ваши данные и медиа-файлы. Эти свойства делают его главным кандидатом для использования при создании веб-видеоигр, поскольку они в значительной степени включают в себя большую комбинацию медиа-изображений, файлов и объектов данных. В этом уроке мы перейдем к тому, как сделать простой ролевой приключенческую игру, построенную в Vue.js, используя Cosmic JS для управления нашим контентом.
TL; DR:
RPG игры RPG игра Demo RPG Game 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, чтобы добавить наше ведро и добавить наши клавиши чтения и записи для авторизации:
Config.js.
Загрузка и разделение наших игровых активов, используя Cosmic JS, чтобы заполнить нашу игру с его историей, окружающей средой и персонажами, мы распределили данные в три ведра.
Первое ведро будет «историей», и будет содержать все, что связано с фактической историей и окружающей средой игры. Мы можем легко ввести и редактировать текст истории и добавить активы, такие как образы об окружающей среде. Обратите внимание, как легко мы можем использовать Cosmic JS CMS для редактирования наших данных!
Следующее ведро будет под названием «Герой». Здесь, так как его имя подразумевает, мы можем добавить все активы и метаданные, относящиеся к главному герою. Это ведро может содержать все спрайты героя (например, анимацию для движения, действия и холостого хода), а также метаданные, такие как статистика характера героя.
Следующее и окончательное ведро будет «врагами», и, поскольку его название предполагает, что будут все активы врагов и характера.
Возможность разделить нашу игру RPG в эти три ведра дает нам пару уникальных преимуществ. Во-первых, все активы аккуратно подаются и легко доступны. Во-вторых, Cosmic JS CMS позволяет нам легко добавлять и редактировать сюжетные линии, так же как можно редактировать сообщение в блоге.
Доступ к данным в нашей игре от Cosmic JS
Мы можем легко получить доступ к нашему контенту из Cosmic JS, используя Cosmic JS API и заполнить их на три компонента Vue.js, которые отражают три ведра, которые мы сделали для истории, героя и врагов.
Мы можем ссылаться на следующую функцию в каждой из наших установленных наших компонентов вызовов, чтобы, когда компонент загружает наши данные из наших ведер, готов к использованию:
Getobject.
Прежде чем наша игра начинается, мы можем дать нашим игрокам экспозицию, потянув в историю из нашей «истории» ведра. Мы также можем использовать ведро истории, чтобы дополнительно установить сцену, настроив среду:
Setupenvironment.
Как вы можете видеть в приведенном выше фрагменте, мы легко преобразуйте данные, размещенные на Cosmic JS через API-API, и могут хранить их для использования в объекте данных Vuejs.
Используя тот же подход, создайте компоненты Hero.vue и Engeage.vue и загружать в их метаданные из их соответствующих ведер.
Чтобы сделать компонент до компонента диалог проще (например, метод атаки в героя. Вот пример файла того, насколько Vuex может использовать данные, полученные из Cosmic JS для управления нашим магазином:
Магазин
Теперь, когда у нас есть все наши необходимые игровые данные загружены, мы можем заполнить нашу игру! Мы можем загрузить изображения в области среды в качестве фоновых изображений в наших компонентах, добавьте героя и вражеские спрайты в соответствующие компоненты и используйте наш недавно созданный магазин, чтобы справиться с нашей битвой, выравниванием, а также в другой логике изменения состояния.
Вот какой-то пример кода для вашего главного экрана меню, где вы можете видеть, как мы заполняем и обновляем данные, полученные от Cosmic JS:
Популяны
Заключение
Создание видеоигры, будь то в браузере или в другом месте, требует многое другое управление данными. В этом уроке мы не только исследовали, насколько легко управлять данными, отделяя его на три разных ведра – мы также видели, насколько быстро и легко доступны одинаковые данные и модифицированы. Кроме того, интеграция была исключительно проста: все нужно было сделать, был запущен командой Bash и убедитесь, что клавиши среды правильно настроены.
Cosmic JS – это легкая, но мощная платформа – и я надеюсь, что этот учебник смог правильно отображать его много сильных сторон.
Если у вас есть какие-либо комментарии или вопросы о создании приложений с космическими js, Обратитесь к нам в Twitter и присоединиться к Разговор о слабым Отказ