В настоящее время видеоигры являются одной из важнейших составляющих цифровой экономики: каждый год миллиарды долларов инвестируются в дизайн, разработку и техническое обслуживание видеоигр, и в то же время люди, которые потребляют, получают большую сумму. Это тип контента.
Очень просто думать, что видеоигры предназначены только для детей или для людей, которые находятся в этом мире, но реальность отличается, не все игры являются детскими, и не все люди должны быть фанатами, чтобы наслаждаться хорошей игрой, есть тысячи случаев, но двумя примерами могут быть Candy Crush и The Sims, первый - революция в области игр в социальных и мобильных сетях, приносящая много денег ежедневно, а второй, намного старше, - революция в играх. ПК, так как в нем было много людей, которые никогда не думали о том, чтобы интересоваться видеоиграми.
Все это введение приводит нас к инструменту, который облегчает создание видеоигр, таким как Cocos2d-JS, который является не чем иным, как фреймворком или фреймворком, который позволяет нам создавать простые игры в 2-х измерениях для любого типа устройства, поддерживающего JavaScript и HTML5 .
Общие требования
Поскольку этот каркас полностью выполнен на JavaScript, требования к его использованию не так сложны, давайте посмотрим, что нам нужно для этого урока для разработки проектов с Cocos2d-JS :
Текстовый редактор
Нам нужен инструмент, который позволяет нам писать код наших приложений, в настоящее время существует официальная IDE, то есть IDE Cocos Code, однако она доступна только для Windows и MAC . Конечно, мы можем использовать редактор наших предпочтений, поэтому предыдущая IDE является первым предложением, в случае с этим учебником в качестве редактора используется Sublime Text в его версии 2, но это не обязательно.
Веб-сервер
Из-за различных частей фреймворка нам нужен веб-сервер для разработки наших приложений, обычно среда Apache будет нам полезна, поскольку это может быть XAMPP, LAMP или WAMP, даже если мы обладаем обширными знаниями в области конфигурации сервера, мы можем использовать сервер, такой как Nginx, для обслуживания наших содержание, но не обязательно.
HTML5-совместимый браузер
В нашем случае мы будем использовать Firefox Developer Edition для его преимуществ для веб-разработок, но если у нас есть предпочтительный браузер, мы можем продолжать использовать его без проблем.
Получить рамки
Первое, что мы должны сделать, это загрузить необходимые файлы, чтобы иметь возможность использовать доступные ресурсы, для этого мы можем получить доступ к официальному веб-сайту и сделать соответствующую загрузку, изначально мы должны выбрать самую последнюю версию, в нашем случае, в частности, это 3.5, Тем не менее, может появиться больше изменений. Давайте посмотрим, как выглядит область загрузки:
Мы видим, что у нас есть другие продукты компании, отвечающие за инфраструктуру, такие как IDE и набор инструментов разработки, однако нас интересует только Cocos2d-JS, который мы видим вторым в списке продуктов. Важно отметить, что загрузка составляет более 350 МБ, поэтому мы должны подготовить место для этого файла, но нам не следует пугаться, так как эта загрузка включает в себя большое количество материала, поэтому реальный движок не такой тяжелый.
Базовая структура приложения с Cocos2d-JS
Как только у нас будет фреймворк в нашей команде, мы должны разархивировать файл, и в папке frameworks мы найдем папку cocos2d-html5 и скопируем ее в каталог, где мы запустим наш проект, который в этом случае будет называться first_game, Первоначально он должен выглядеть следующим образом:
Затем в нашем проекте мы должны создать папку с именем src и три дополнительных файла; index.html, который является основным контейнером нашего приложения и является файлом, который будет вызываться в браузере с веб-сервера. Файл main.js, который будет содержать весь наш код JavaScript, соответствующий логике нашей игры, и, наконец, файл project.json, который будет содержать параметры конфигурации, чтобы наша игра могла нормально функционировать. Посмотрим, как должна выглядеть наша окончательная структура: $config[ads_text5] not found
Создание игры
После того, как у нас есть начальная настройка, настало время создать нашу игру, конечно, игра сложная, и то, что мы создадим, будет иметь очень базовую функциональность, просто показывая нам сообщение на экране, это не то, что конкурирует с играми на рынке. но это начало, чтобы увидеть, как все работает в рамках.
В нашем файле index.html мы должны включить библиотеку Cocos2d-JS CCBoot, мы также должны включить наш файл main.js, и, наконец, в наше тело мы должны включить тег canvas, который отвечает за получение информации о примере, который мы создаем, давайте посмотрим, как выглядит исходный код нашего примера:
Наша первая играПоскольку мы сделали первый шаг, теперь мы перейдем к файлу main.js, этот файл обычно не имеет жесткой логики игры, его функциональность чаще всего заключается в том, чтобы служить файлом конфигурации для указания некоторых параметров движку и иметь возможность включать истинные Логика внутри проекта, в нем мы разместим следующий код:
cc.game.onStart = function () {cc.view.setDesignResolutionSize (320, 480, cc.ResolutionPolicy.SHOW_ALL); cc.director.runScene (новая играScene ()); }; cc.game.run (); Здесь мы просто определили, что произойдет, когда игра начнется, две строки в основной функции должны указывать разрешение и сцену для запуска и, наконец, в последней строке мы указываем, что вы должны начать игру. Код кажется немного сложным в начале, но понемногу мы будем понимать, и с этим сложность будет снижаться. Теперь мы сделаем конфигурацию нашего проекта, для этого мы изменим файл project.json, в котором мы определим движок, количество кадров в секунду игры, которая является контейнером игры, и список Файлы, которые содержат логику нашей игры, мы увидим последний на следующем шаге. А пока давайте посмотрим, что мы изначально поместим в файл:
{"debugMode": 0, "showFPS": false, "frameRate": 60, "id": "gameCanvas", "renderMode": 0, "engineDir": "cocos2d-html5 /", "modules": [" cocos2d "], " jsList ": [" src / gamescript.js "]} Очень важно, чтобы содержимое этого файла было действительным JSON, иначе наше приложение не запустится. Как только это будет сделано, пришло время включить логику для нашего первого примера, для этого мы перейдем в папку src нашего проекта, где мы собираемся создать файл gamescript.js, если мы будем наблюдателями, мы поймем, что это файл, который мы определили в Project.json, и мы начинаем видеть, как куски начинают соответствовать.
В этом новом файле мы создадим сцену нашей игры, с которой мы ее запустим, конечно, у нас нет ничего графического для отображения, поэтому мы просто напечатаем что-то в консоли JavaScript, давайте посмотрим код, который мы должны включить :
var gameScene = cc.Scene.extend ({onEnter: function () {this._super (); console.log ("Наша игра не веселая, но она работает =)"); }}); Теперь, когда все готово, мы должны вызвать папку нашего проекта из браузера и открыть консоль разработчика или дополнение, которое позволяет нам видеть консоль JavaScript, чтобы мы могли видеть результат всей нашей работы: $config[ads_text5] not found
Как мы видим, наша первая попытка была успешной, у нас уже есть определенная основа для работы, и мы предприняли наши первые шаги с этой структурой.
Зачем делать 2D-игры?
Отдельно отметим, что многие могут спросить, в чем заключается преимущество создания игры в 2-х измерениях сегодня, и ответ очень прост: потому что они веселые и позволяют нам использовать возможность создания игр в средах с пониженной производительностью, что может приблизить нас к большой массе потенциальных игроков, которые не имеют консоли, но с правильными словами и действиями могут купить нашу игру или если это бесплатная модель для участия в нашем сообществе.
На этом мы завершили этот урок и можем сказать, что создание игривого контента является одной из областей наибольшего роста и конкуренции в настоящее время, которая, как ожидается, будет продолжать расти, особенно в мобильных устройствах, и это такое ожидание, что большой видеоигр, таких как Nintendo, выйдет на эти платформы, так что, если мы заинтересованы в куске таких инструментов, как Cocos2d-JS, мы сможем легче выйти на рынок.
СТАТЬИ