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

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

Подключить обработку физики для героя и платформы

Для достижения этой цели потребуется выполнить следующие задачи:

Добавить компоненты физического тела для героя и для платформы
Активировать физический движок cocos creator
Отладить взаимодействие между физическими телами героя и платформы
Приступаем!

1. Компонент RigidBody

Начнем с первой задачи. В прошлом уроке мы говорили о понятии ноды и уточнили, что нода — это единица контента. Мы создали несколько нод и научились изменять их параметры. Мы говорили, что если один из параметров ноды является изображением, тогда эта нода представлена в виде спрайта на сцене. Но это далеко не единственная возможная характеристика ноды. Такие характеристики в терминах Cocos Creator называются компонентами. И, например, свойство ноды Sprite — это один из возможных компонентов, которые могут принадлежать ноде.

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

Еще одним компонентом, который можно установить ноде, является компонент rigidbody. Этот компонент служит для обозначения того, что для данной конкретной ноды необходимо выполнять обработку физики. То есть, указывая, что нода обладает физическим телом, мы просим у движка учитывать для данной ноды физические взаимодействия. Какие именно физические взаимодействия нас интересуют в данной игре? Гравитация и столкновения.

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

В правой панели свойств ноды жмем кнопку Add Component, выбираем Physics Component — Rigid Body. Так мы указали, что выбранной ноде необходимо установить физическое тело, а значит движок будет рассчитывать физические взаимодействия для данной ноды.

Как видите, у компонента Rigid Body есть множество собственных свойств, которые мы можем отредактировать, чтобы настроить его поведение, как нам угодно. Мы поработаем с этими свойства позже, а сейчас проверим, что изменилось в нашем проекте. Но если мы запустим нашу игру прямо сейчас, то увидим, что на сцене ровным счетом ничего не изменилось. Мы ожидали, что после добавления физического тела, спрайт с героем упадет вниз под действием гравитации, но этого не произошло. Так в чем же дело?

И тут мы подходим к нашей второй задаче в списке задач на этот урок. А именно — активировать физический движок в Cocos Creator.

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

2. Скрипты

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

Раз скрипты — это компоненты, значит мы должны присвоить скрипт какой-то определенной ноде. В дальнейшем у нас будет свой скрипт для ноды героя, свой скрипт для ноды платформы и так далее. А в каком-же скрипте нам потребуется включить физический движок?

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

В левой нижней панели assets кликнем правой кнопкой мыши и создадим новую папку scripts. В эту папку мы будем помещать все создаваемые в дальнейшей скрипты.

Кликаем правой кнопкой на только что созданной папке и выбираем create — JavaScript.

Cocos Creator также поддерживает и TypeScript  и вы можете выбрать тот язык, с которым вам больше нравится работать. Назовем новый скрипт Game, также как и сцену, чтобы отметить, что текущий скрипт — главный скрипт сцены.

В этом курсе мы будем писать на JavaScript, чтобы ускорить разработку.

3. Настройка окружения

Прежде, чем приступить к редактированию файла со скриптом, нам необходимо настроить окружение разработки. Cocos Creator предлагает встроенную поддержку IDE VS code и рекомендует пользоваться этим редактором для работы. Мы будем придерживаться данных рекомендаций и, если у вас еще не установлен VS code, сделаем это прямо сейчас. Редактор можно скачать с официального сайта https://em.visualstudio.com/

Это мощный и удобный бесплатный редактор, который используется многими в профессиональной разработке. Лично я использую VS code во всех своих проектах на JS и TS, в том числе и тех проектах, которые не используют СС.

После установки редактора для того, чтобы VS code узнал о Cocos Creator API необходимо установить расширение. Сделать это можно прямо из редактора Cocos Creator. В верхнем меню необходимо выполнить:

Developer - VS Code Workflow - Install VS Code extension

Developer - VS Code Workflow - Update VS Code API Source

Теперь VS Code будет знать о Cocos Creator API, структуре классов в движке cocos2d, что значительно упростит нам работу по созданию скриптов, в частности за счет удобного автокомплита.

4. Создание собственных компонентов

Итак кликнем 2 раза по созданному файлу Game.js и он откроется в VS Code

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

Мы видим несколько предопределенных методов: onLoad, start и update, а также объект свойств данного компонента: properties.

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

Методы onLoad, start и update будут вызваны автоматически самим движком в определенный момент времени.

onLoad  вызывается один раз перед самой первой активацией ноды, например при создании сцены. onLoad всегда вызывается перед методом start
start вызывается один раз и только после вызова onLoad перед первой активацией данного компонента и предназначен для инициализации параметров компонента
update вызывается при отрисовка каждого фрейма. В update обычно помещают код, который должен проверять и управлять состоянием ноды с течением времени: например изменение позиции, размеров ноды и так далее.

Все, что нам нужно сделать на данном этапе — это активировать физический движок.

Реализуем собственный новый метод.

enablePhysics() {

let physicsManager = cc.director.getPhysicsManager();

physicsManager.enabled = true;

},

и поместим вызов этого метода в метод onLoad:

onLoad () {

this.enablePhysics();

},

Чтобы он выполнялся перед активаций ноды Canvas при загрузке сцены.

После создания скрипта необходимо вручную его прикрепить к той ноде, для которой мы и разработали скрипт. В панели Properties ноды Canvas выберем Add Component — Custom Component — Game.

Снова запустим игру и убедимся, что на этот раз спрайт падает под действием силы гравитации! Кажется, что спрайт падает довольно медленно. Мы можем это исправить, изменив соответствующий параметр компонента физического тела. Изменим свойство gravity scale с 1 до 5 и проверим результат! Теперь скорость падения больше подходит для нашей игры.

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

5. Приоритет нод

Итак, герой падает с подходящей скоростью, но он пролетает сквозь платформу, не останавливаясь на ней. Кроме того, мы видим, что при падении герой оказывается за платформой. Почему так происходит?

Посмотрите на панель Node Tree. На этой панели, чем ниже находятся нода, тем ближе к нам она на экране. Если нода 1 ниже ноды 2 в этой панели, значит нода 1 будет отрисована поверх ноды 2. Вы можете экспериментировать с расположением нод и если мы поменяем очередность в Node Tree, например сделаем ноду героя ниже платформ, то герой будет падать уже поверх платформ.

6. Компонент Collider

Вернемся к вопросу о столкновении с платформой. Гравитация — это хорошо, но мы хотим, что при падении на платформу герой остался на ней стоять.

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

В данный момент в панели Node Tree у нас 3 ноды платформы. Каждая нода является базовым тайлом для создания платформы. Мы можем задать физическое тело каждому тайлу. Но это может быть довольно неудобно и возможно более ресурсозатратно. Лучше мы создадим новую пустую ноду platform.

Нажимаю правой кнопкой мыши на Canvas и выбираю create — empty node. Назовем новую ноду platform. Выделим все три текущие ноды со спрайтами платформы и поместим их в только что созданную ноду.

Теперь мы можем создать физическое тело именно для родительской ноды platform.

Добавляем компонент: Add component — physics — rigid body.

Проверим, что получилось.

Теперь вся платформа, состоящая из трех тайлов падает вместе героем.

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

Чтобы отключить гравитацию для платформы выберем в параметрах rigid body type static. Запустим проект и проверим результат.

Платформа перестала падать, но герой на ней до сих пор не останавливается. Чтобы это исправить нам потребуется добавить еще 1 компонент и герою и платформе.

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

И для героя, и для ноды платформы добавим компонент BoxCollider:

Add component — physics — collider — box:

Сохраним проект, запустим игру и вот теперь герой падает и остается стоять на платформе!

7. Скрипт героя

И в заключении создадим скрипт героя, который нам потребуется в следующем уроке.

Нажимаю правой кнопкой мыши на папке scripts и выбираю create JavaScript

Назову скрипт Hero. И сразу же добавлю созданный скрипт компонентом для ноды hero.

Момент столкновения героя и платформы мы можем отследить благодаря программному API, которое нам предоставляет движок Cocos Creator.

Так, если мы включаем для ноды компонент коллайдера и указываем в опциях rigidbody enable contact, то движок нам предоставит предопределенные методы

onBeginContact(contact, selfCollider, otherCollider) {

cc.log('onBeginContact', contact, selfCollider, otherCollider);

},

onEndContact() {

cc.log('onEndContact');

},

Эти методы будут вызваны автоматически Cocos Creator в момент столкновения тел (коллайдеров). В данный момент просто выведем в консоль сообщение для отладки. Так как в нашем случае после столкновения тело героя остается на платформе, то коллбек onEndContact вызван не будет.

В следующем уроке мы займемся разработкой прыжка и будем использовать класс Hero и в том числе эти 2 метода.

Ну а теперь подведем итоги.

8. Итоги

В этом уроке мы научились создавать собственные скрипты.

Разобрались, как активировать физический движок в Cocos Creator.

Мы узнали, что такое компоненты физического тела и коллайдера, и добавили их для нод героя и платформы.

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

На следующем уроке мы приступим к программированию прыжка героя. До встречи!

Leave a reply:

Your email address will not be published.

Site Footer