Кросс-платформенная разработка мобильных игр на Cocos Creator — Урок 1

Урок 1. Подготовка проекта

1.Цели

Приветствую вас в первом уроке обучающего курса по разработке мобильных игр на Cocos Creator. В ходе этого курса мы разработке бесконечный  2D раннер с видом сбоку. В этом уроке мы выполним всю подготовительную часть для старта работ: установим Cocos Creator, создадим проект и познакомимся с интерфейсом редактора. Перед стартом работ загрузите арт, который мы будем использовать в данном проекте: https://www.dropbox.com/s/ig1w3u51l5g7bl7/cocos-creator-course-runner.zip?dl=0

Приступаем!

2. Что такое Cocos Creator

Cocos Creator — это удобный инструмент для кросс-платформенной разработки мобильных игр. Вот те преимущества, которые я считаю наиболее важными и отмечу в первую очередь:

  • Удобный и мощный редактор в стиле Unity, который значительно облегчает верстку интерфейсов
  • Мощный движок cocos2d-x под капотом, обеспечивающий кросс-платформенную сборку
  • Возможность сборки в HTML5 для web, в нативные приложения для ios, android, а также в десктопные приложения для Windows и OSX
  • JavaScript и TypeScript для разработки игровой логики

3. Создание проекта

Загрузим программу с официального сайта по ссылке. Creator доступен и для Mac, и для Windows. На момент создания этого туториала была доступна версия 2.2.2. Загружаем и устанавливаем, следуя инструкциям установщика.

После установки открываем программу и создаем новый проект. На вкладке New project выбираем Empty Project, указывает путь к папке, в которой необходимо создать проект и нажимаем кнопку Create.

После инициализации откроется новое окно с созданным проектом.

4. Интерфейс редактора

Если вы знакомы с Unity, интерфейс покажется вам знакомым и вы сразу сможете начать работу. В любом случае, знакомство с Unity абсолютно не обязательно — мы освоим весь интерфейс редактора, будем свободно в нем ориентироваться и эффективно использовать. Познакомимся с элементами интерфейса постепенно и разберем каждый в свое время.

Рассмотрим левую верхнюю панель Node Tree — номер 1 на скрине интерфейса. В ней представлена структура проекта в виде нод. Сейчас мы видим родительскую ноду Canvas и дочернюю Main Camera.

Нода — это единица контента. Нодой можно представить разные сущности или даже наборы сущностей. Часто ноды — это объекты сцены.

Нода может обладать некоторыми характеристиками. Например, если у ноды среди параметров есть свойство изображения, то она представлена в виде спрайта на сцене. Нода также может быть пустой или содержать в себе другие ноды.

Canvas есть на каждой сцене и это основная нода. Все остальные ноды рекомендуется создавать внутри Canvas.

Мы можем изменить параметры ноды. Кликнем левой кнопкой мыши по Canvas и откроем правую панель Properties с параметрами ноды — номер 2 на скрине.

Здесь представлены различные свойства и характеристики. Нас в первую очередь интересует разрешение — Design Resolution. Так как мы делаем мобильную игру, выберем размер канваса соответствующий одному из стандартных соотношений мобильных экранов — 1024×576. Отметим опцию Fit Height, чтобы 576px высоты нашей игры всегда были полностью вписаны в реальную высоту экрана устройства.

Подробнее о размерах и адаптации экрана можно узнать тут — http://docs.cocos.com/creator/manual/en/ui/multi-resolution.html

5. Структура проекта и загрузка ресурсов

Переместим фокус на левую нижнюю панель Assets — номер 3 на скрине. Это структура нашего проекта.

Добавим в структуру проекта папку для хранения изображений и поместим в нее весь подготовленный для проекта арт. Все папки для собственных игровых ресурсов мы будем помещать в директорию assets. Таким образом, кликнув правой кнопкой мыши по папке assets, выберем в контекстном меню Create — Folder. Назовем новую папку sprites. Чтобы поместить арт в эту папку достаточно выделить в проводнике нужные изображения и перетащить их на папку sprites в интерфейсе Creator.

6. Создание сцены

Сценой можно назвать отдельный игровой экран с соответствующим этому экрану функционалом. Создадим игровую сцену — экран игрового уровня.

Редактор Cocos Creator предоставляет нам возможность создавать сцены из объектов и для этого предлагает нам использовать основную рабочую область — номер 4 на скрине интерфейса. То, что мы видим в основной рабочей области, то и будет представлено на данной сцене в игре. Таким образом, мы можем визуально размещать выбранные объекты в нужных местах экрана и ожидать, что в игре на данной сцене эти объекты будут расположены точно также, как мы их и расставили в рабочей области редактора.

Какие элементы мы ожидаем увидеть на уровне бесконечного раннера?

  • Бэкграунд
  • Герой
  • Платформы

Перенесем на игровую сцену спрайты для каждого из перечисленных объектов:

  1. В левом нижнем углу откроем папку sprites
  2. Выберем нужный спрайт
  3. Зажмем левую кнопку мыши на выбранном спрайте и перенесем его либо в левую верхнюю панель в нужную ноду, либо прямо на рабочую область в центре редактора

Создадим таким образом на сцене фон из спрайта background.

После перемещения спрайта в ноду Canvas автоматически создается нода с названием перемещенного спрайта.

Создадим на сцене героя и платформу из спрайтов hero и platform.

Для создания платформы у нас представлен 1 базовый квадратный тайл. На его основе мы будем генерировать платформы нужной нам длины, совмещая базовые тайлы друг с другом. Этим мы займемся в следующем уроке. А сейчас достаточно перенести несколько тайлов и составить их рядом друг с другом.

7. Редактирование нод

Редактор Cocos Creator предоставляет нам некоторые инструменты для редактирования нод на сцене. В левом верхнем углу находится панель инструментов. В данный момент нас интересуют следующие 4 кнопки.

  1. Первая кнопка выбрана по умолчанию и отвечает за перемещение объекта на экране, то есть изменение координат ноды. Если мы выберем какую-либо ноду в левой панели Node Tree или прямо на рабочей области, то сможем перемещать данную ноду методом drag-n-drop по экрану. При этом мы увидим, как динамически изменяются координаты объекта в правой панели характеристик выбранной ноды.
  2. Вторая кнопка отвечает вращение ноды и изменяет угол поворота выбранного объекта.
  3. Третья кнопка изменяет пропорции ноды и может выполнить скейл спрайта по осям x и y.
  4. Четвертая кнопка динамически изменяет размеры объекта.

Поэкспериментируйте с каждым из описанных инструментов, выбрав ноду hero.

8. Сохранение сцены

Кликнем по рабочей области, чтобы установить фокус и нажмем CTRL+S, чтобы сохранить текущую сцену. Дадим сцене имя Game и сохраним ее в папку assets.

Аналогично тому, как мы ранее создали папку sprites, внутри assets создадим папку scenes, в которой будем сохранять все сцены нашей игры. Затем при помощи drag-n-drop выделим файл сцены Game и перетащим его в папку scenes.

9. Запуск проекта

В завершении урока нам остается запустить проект и проверить, как выглядит наша сцена. Для этого нажимаем на кнопку run.

Cocos Creator создаст и запустит локальный сервер, соберет тестовую сборку и откроет собранный проект в браузере для демонстрации. В данный момент в окне браузера мы увидим все наши спрайты, расставленные также, как и в рабочей области в редакторе.

10. Итоги

В этом уроке мы установили Cocos Creator, создали проект и изучили базовые возможности редактора. А на следующем уроке мы займемся созданием платформы из базовых тайлов platform.png.

 

Спасибо за внимание и до встречи!

 

Leave a reply:

Your email address will not be published.

Site Footer