Cocos2d JS на примере браузерной игры

Cocos 2d – кросс-платформенный фреймворк с открытым кодом, для разработки игр и приложений, как браузерных, так и для мобильных платформ.  Приложения могут быть запущены на платформах: iOS, Android, Windows Phone, OS X, Windows, Linux.

Главные возможности:

  • OpenGL.
  • Управление сценами.
  • Эффекты смены сцен.
  • Спрайты.
  • Визуальные эффекты, большое количество качественных 3D эффектов.
  • Экшены (движение, масштабирование, повороты).
  • Компоненты, позволяющие конструировать UI (меню, кнопки, ползунки, списки, текстовые поля и т. д.).
  • Поддержка касаний и акселерометра на мобильных устройствах.
  • Поддержка звука, звуковой движок на основе OpenAl.
  • Поддержка физических движков Box2D и Chipmunk.
  • Тестирование и отладка без необходимости установки на мобильное устройство.

Одна из ветвей фреймворка – Cocos2d JS, позволяет писать игры в JavaScript. Рассмотрим логику и возможности фреймворка на примере создания браузерной игры.

Популярный жанр браузерных игр – головоломки. Целью нашей игры будет расставить в правильном порядке шестеренки, чтобы механизм заработал.

Устанавливаем Cocos 2D

Для установки нам потребуются собственно, сам фреймворк. Можно скачать облегченную html-версию, но если вы хотите воспользоваться всеми возможностями консоли Cocos: создать новый проект, выполнить отладку, скомпилировать релизную версию игры под нужную платформу (мы будем собирать игру под веб и Android) или другие платформы — потребуется полная версия cocos2d-x, и еще ряд инструментов (не забудьте уточнить, какие версии поддерживает Cocos):

  • Java JDK (комплект разработки приложений),
  • Android SDK (набор инструментов для разработки и отладки приложений),
  • Android NDK (это набор инструментов, которые позволяют реализовать часть приложения используя такие языки как С/С++),
  • Apache ANT (утилита для автоматизации процесса сборки программного продукта)
  • Python.

Сначала необходимо установить Java, затем Android SKD. Далее потребуется запустить Android SKD Manager и установить пакеты для версии Android, с которой предполагается работать. Затем следует Apache ANT и Python.

Установив все необходимые компоненты, распаковываем файлы Cocos, открываем консоль и запускаем инсталлятор setup.py. Он потребует по очереди указать каталоги Android NDK, Android SDK и Apache ANT, после чего станет доступной консоль Сocos. Официальная документация Cocos содержит подробную инструкцию по установке.

Создаем новый проект

Воспользуемся консолью Cocos:

Здесь мы указываем название будущей игры, используемый язык – JavaScript, и каталог – в который следует поместить проект.

Cocos создаст следующую структуру проекта:

structure

Каталог src – содержит файлы скриптов, res – ваши ассеты. Index.html служит контейнером для игры, рассмотрим его:

В первую очередь следует загрузить необходимые ресурсы:

Для отображения игры создается канвас:

Следующие строки загружают фреймворк и запускают игру:

Файл project.json содержит базовые настройки: запускать в режиме отладки, показывать данные FPS, установить частоту смены кадров, подключаемые модули и список файлов нашей игры, которые помещаются в каталог src.

Файл main.js содержит код, запускающий игру, здесь можно задать ряд дополнительных настроек:

Ориентацию экрана:

Его разрешение:

Изменение размеров экрана при изменении размеров окна браузера:

Ну и наконец:

Здесь мы загружаем ресурсы, нам потребуются изображения шестеренок и фона.

gears

 

Поместим их в каталог res, а затем перечислим список в файле resource.js:

Все готово и можно запускать игру:

Ядром фреймворка являются понятия Scene, Node, Layer, Sprite, Action.

Сцена (Scene) – средство группировки и отображения элементов (узлов) на экране. Она служит контейнером для узлов. Узел (Node) служит строительным материалом игры – слои, меню, надписи, спрайты, визуальные эффекты и т. д.

Если мы откроем файл app.js, то увидим следующее:

В качестве примера сюда добавлена сцена, в которую добавлен слой HelloWorldLayer.

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

 

Пишем игровой движок

Переименуем сцену в GameScene, и добавим слой для отображения фона:

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

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

Главным элементом нашей игры будет шестеренка, чтобы она вращалась, ее нужно поместить на ось так, чтобы она вошла в сцепление с другой вращающейся шестерней. Шестеренка может вращаться по часовой стрелке или в обратную сторону, может быть сцеплена с любым количеством шестерней. В игре должна быть одна шестерня, выступающая в качестве двигателя.

Создадим класс для шестерни:

Направление вращения зададим константой:

Добавим еще пару констант: зазор для сцепления

и скорость вращения шестерни

Шестерня должна реагировать на действия игрока, вращаться при сцеплении с подвижными шестеренками и останавливаться в противном случае. Для реализации этого прибегнем к механизму планирования событий Cocos.

Планирование – это инструмент, позволяющий конструировать независимый от frame rate геймплей. Для этого добавим в созданный класс функцию update, которая которая будет выполнятся каждый кадр, получая в качестве аргумента дельту времени:

Здесь мы проверяем, не изменился ли флаг, указывающий направление вращения шестерни. Если он сброшен, мы останавливаем вращение, для чего используем метод stopAllActions, который останавливает все запущенные экшены спрайта.

Экшены (action) – инструменты, позволяющие манипулировать спрайтами, создавать различные визуальные эффекты.

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

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

angle

После чего создаем action, который будет поворачивать шестерню на заданный угол за секунду:

Чтобы анимация не останавливалась, используем следующий прием:

Запускаем анимацию:

Не забываем передать вращение дальше по цепочке:

Чтобы функция update выполнялась, в конструктор класса необходимо добавить инструкцию:

Все работу с шестернями будем производить в отдельном слое:

Сначала разместим оси, на которых будут вращаться шестерни:

Затем добавим шестерни:

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

Мы не добавляем их в коллекцию movingGears, чтобы игрок не мог их перемещать.

Реакцию на действия пользователя обеспечивает диспетчер событий Cocos. Он поддерживает события экрана мобильного устройства: касания (в том числе мультитатч) и события акселератора. Так же доступны события мыши и клавиатуры.

Игрок должен иметь возможность перетаскивать шестерни с места на место, для этого создадим следующие слушатели:

Здесь мы указываем, что одновременно может обрабатываться только одно касание, все другие игнорируются.  Добавим обработчики событий:

Получаем координаты касания:

И если оно приходится на одну из шестеренок, останавливаем ее вращение, снимаем с оси и выводим на передний план задав свойство zOrder равным 0.

Здесь мы с помощью метода getBoundingBox получаем занимаемую шестерней область в виде прямоугольной рамки. Метод возвращает объект, содержащий координаты начала этой области и ее размеры. Однако, из-за вращения шестерни, область будет рассчитываться неверно. Поэтому переопределим для шестерни метод getBoundingBox  следующим образом:

Вернемся к обработчику onTouchBegan. Используем метод rectContainsPoint, который получает область, занимаемую спрайтом,  и точку на экране, возвращая true, в случае если точка находится в границах области.

Далее, передвигаем шестерню, задавая ей координаты касания:

И в тот момент, когда игрок отпускает ее, проверяем, находится ли центр шестерни над осью.

В этом случае сажаем шестерню на ось и проверяем, вступила ли она в сцепление с другими шестернями:

Мы проверяем все шестерни по очереди их сцепления, начиная с первой:

Сначала получаем дистанцию между центрами двух шестеренок. Определяем разницу координат по обеим осям:

и применяем теорему Пифагора:

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

 

Добавляем интерфейс пользователя

Cocos2d так же предоставляет коллекцию компонентов для создания пользовательского интерфейса: кнопки, переключатели, ползунки, текстовые поля, надписи. Они содержатся в модуле ccui, который должен быть подключен в файле project.json. Добавим на экран пару кнопок, с помощью которых игрок сможет начать игру заново или завершить ее.

Создадим класс кнопки:

Кнопка использует два изображения для анимации нажатия:

Надписи могут создаваться на основе текстурного атласа, файла BMFONT или с использованием стандартного шрифта (TTF файл). Добавим надпись для кнопки, используя компонент LabelTTF.  Потребуется указать текст надписи, используемый шрифт и его размер. Надпись поместим по центру кнопки.

Так же добавим обработчик события кнопки:

Интерфейс пользователя поместим в отдельный слой:

В итоге сцена игры выглядит следующим образом:

gamescene

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

Так же как и с кнопкой, нам требуется два изображения для анимации выбора

Мы можем увеличить размер изображения с помощью свойства Scale:

Добавим надпись:

И обработчик события:

Здесь мы добавили визуальный эффект, который будет увеличивать размер элемента меню при касании. Для создания более плавных и сложных эффектов можно прибегнуть к Actions Easing. Они анимируют спрайт с помощью специальных функций, дающих эффект ускорения, замедления, колебания и т. д. За основу берется один из простых actions, в нашем случае ScaleBy, который увеличивает размер элемента относительно текущего.

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

Добавим для меню отдельную сцену с двумя слоями, один для фонового изображения, и один для элементов интерфейса:

Director позволяет выполнить запуск сцены с эффектом перехода, мы воспользовались одним из них для запуска сцены с игрой:

menu

Публикуем HTML5 игру и создаем apk для Android

Игра готова, осталось только построить ее релизную версию, для этого воспользуемся консолью cocos:

Мы указываем платформу Web и каталог проекта. Компилятор выполнит сжатие проекта и поместит весь JavaScript-код в файл game.min.js. Скомпилированные файлы будут помещены в подкаталог publish/html5.

Cocos 2d – позволяет скомпилировать игру и на другие поддерживаемые платформы. Для запуска игры на устройстве с ОС Android выполним компиляцию проекта следующим образом:

Отсутствие параметра -m release будет означать, что создается debug-версия. Скомпилированный apk файл игры будет помещен в подкаталог simulator.

 

Заключение

В данной статье продемонстрирован пример разработки игры с использованием Cocos 2d-JS, который дает общее представление о логике работы с этим движком.  Большое количество примеров в сети, простой и удобный API, а также большее сообщество помогут начинающим быстро освоить фреймворк и приступить к созданию своих игр. Ресурсы, исходный код и релизные версии для платформ Web, Android и Windows можно скачать с репозитория GitHub. Web версия игры доступна по этой ссылке.

Добавить комментарий