В этой статье я покажу как создать простейшую физику в WADE JS.
На это раз мы будим работать через редактор на официальном сайте создателей WADE JS.
Сразу хочу предупредить, что вам понадобится браузер Chrome, так как редактор на данный момент работает только в нём.
Итак начнем ...
Перейдите на сайт и нажмите на вкладку Editor.
Перед вами откроется окно редактора где будет предложено
- Create a blank WADE project - создание нового проекта
- Open an existing local project - открыть существующий локальный проект.
- Open an example project - открыть пример проекта.
- Import a project from a remote URL - импорт проекта с удаленного источника в интернете.
- Import a project from a ZIP file - импорт проекта из zip файла.
Выберите первый пункт создание нового проекта. Вам предложат ввести имя вашего нового проекта, после чего нажмите кнопку Create Project.
После небольшой загрузки перед вам появится редактор.
В нём будут 5 основных окон:
- Окно вашей папки проекта. В нём будут все ваши файлы и папки, которые вы будете добавлять в проект.
- Окно с объектами, которые находятся на сцене(карте). Также внизу этого окна есть кнопки добавления различных вещей.
- Окно просмотра. Главный экран на котором отображается ваша игра.
- Окно в котором есть несколько вкладок, которые можно переключать при нажатие на кнопку в верхнем правом углу окна: 1 - Редактор кода. 2 - Проводник. Обзор содержимого папок. 3 - Браузер префабов вашего проекта. 4 - Браузер префбов которые можно загрузить в ваш проект.
- Окно свойств либо выбранного объекта, либо свойств всей сцены.
Итак приступим ...
Чтобы создать новый объект сцены нажмите эту кнопку:
Перед вами появится объект со стандартным спрайтом белого квадрата.
Вы можете проверить работу вашей игры нажав на кнопку play на верхней панели.
В запущенной игре вы увидите ваш квадрат.
Теперь давайте сделаем наш квадрат физическим объектом. Для этого нам надо в редакторе выделить наш квадрат и зайти в его свойства, которые отображаются в окне(5) справа.
Вам нужно переключится на третью вкладку сверху под названием Behaviors (поведение).
Там есть единственная строка - Add Behaviors (добавить поведение). Нажмите на выпадающий список справа и выберете PhysicsObject и нажмите плюсик справа, чтобы добавить нашему объекту соответствующее поведение.
Далее если вы до этого не подгружали файл wade.physics.js, то вам будет предложено загрузить его, нажмите кнопку ОК.
Теперь если перейти в свойства объекта, во вкладке behaviors будет значится, что это physicsObject (физический объект).
Но на данный момент как вы можете видеть он является статическим. Давайте сделаем из него платформу.
Размеры объекта можно менять с помощью маленьких белых квадратиков, которые находятся на всех 4-х сторонах этого квадрата по середине. Также есть синий круг, нажав и удерживая который вы можете двигая мышкой повернуть объект.
Поэкспериментируйте немного.
Чтобы клонировать объект со всеми его свойствами, которые мы установили, нужно нажать на кнопку справа от красного крестика в верхнем правом углу окна свойств объекта.
Новый объект появится прямо над старым, поэтому просто зажмите мышку и передвиньте объект. Сделайте два объекта платформу и квадрат
Теперь зайдите в свойства квадрата и измените поле с названием bodyType(тип тела) со static(статический) на dynamic(динамический). Можете запустить игру и увидеть результат.
Перед вами будет прыгающий квадрат, который падает под действием гравитации, которая определяется в опции:
- gravityScale = 1 - шкала гравитации
и возвращается ровно на то же место, откуда начинал падение, благодаря опции:
- restitution = 1 - восстановление
Опция gravityScale понятна без слов - это сила гравитации, с которой объект будет падать вниз экрана.
Опция restitution, это сила восстановления. Или угасания. Т.е с какой силой объект будет отскакивать. Если значение 1 - то не будет никакой потери, если значение 0 - то теряется вся энергия, и он вообще не отскочит.
Давайте протестируем эту опцию. Изменим restitution нашего объекта, поставив значение 0.5. И запустим игру. Как вы заметите, ничего не произошло и объект поднимается ровно на ту же высоту. Но почему? Это потому что нужно поставить значение 0.5 у обоих объектов которые будут взаимодействовать. В нашем же случае мы изменили restitution лишь у квадрата, но не у платформы.
При взаимодействии двух объектов берется самое большое значение restitution из этих 2-х взаимодействующих объектов и применяется к обоим. У квадрата restitution = 0.5, а у платформы restitution = 1.0
Давайте же выставим значение restitution = 0.5 у обоих объектов, и посмотрим что будет. Сила отскока квадрата начнет медленно угасать и он прекратит движение.
А если поставить значение restitution = 0 у обоих объектов, то при соприкосновении они перестанут двигаться сразу же. Точнее сила гравитации все еще будет воздействовать, и если убрать платформу или повернуть её под достаточно большим углом, то наш квадрат под воздействием гравитации будет сползать по платформе.
Давайте поставим свойство restitution обратно в значение 0.5(можете выбрать какое хотите сами) у обоих объектов, чтобы они все таки не прилипали к друг другу а немного отскакивали.
Теперь давайте сделаем еще одну копию нашего квадрата . Отодвиньте эту копии чуть в сторону и перейдите к окну его свойств. Перейдите во вкладку Sprites и внизу найдите поле Images в значении которого указано procedural_square.
Поменяйте запись procedural_square на следующую запись:
- procedural_circle
Квадрат превратится в круг.
Перейдите обратно в свойства Behaviors нашего круга и найдите строку shapeType со значением box.
Выберите в раскрывающемся меню значение circle. Это свойство определяет как движок должен обрабатывать этот объект. Как квадрат или как круг.
Для того чтобы увидеть разницу, наклоните нашу платформу на пару градусов, чтобы круг мог покатится. Если сейчас запустить игру вы должны увидеть, как квадрат падает на платформу и лежит, а круг благодаря тому что платформа наклонена, после падения будет катиться.
Если поставить в свойствах круга shapeType = box, то он будет обрабатываться движком как квадрат и в этот раз он не покатиться. Можете проверить :)
Есть еще много параметров с которыми вы сами можете поиграться и посмотреть, что происходит.
Идём далее.
Это все интересно но хотелось бы какое то взаимодействие пользователя с объектами. Давайте сделаем это.
Выберите квадрат и зайдите в окне свойств во вкладку - functions. В выпадающем меню выберите onMouseDown. Далее в окне снизу будем писать код:
Далее в левом нижнем окне нажмите два раза на App.js и вы откроете редактор кода. Далее будем писать там наш код.
Для начала нам нужно дать нашему квадрату имя. Нажмите на карандашик чтобы изменить имя объекта.
Назовем его например - square .
После закрытия скобки функции loadScene(), нажимаем enter и пишем следующий код:
Теперь запустите игру и попробуйте нажать на наш квадрат и удерживая кнопку мыши передвинуть его. Теперь вы можете бросать квадрат куда захотите.
Далее вы можете понаставить другие объекты на сцену. Сделать их статическими или динамическим. Изменить их свойства.
Например, чтобы предметы не улетали за пределы камеры вы можете со всех сторон окружить их статическими платормами, просто скопировав уже имеющуюся.
jВсё зависит от вашей фантазии. А всё что нужно в техническом плане и какой код писать мы изучим в других уроках.
А я подытожу наш урок:
Кнопкой Create a new scene object - мы создаем новый объект сцены.
Кнопкой Duplicate Object - мы создаем копию нашего объекта.
Во вкладке Behaviors, есть свойства объекта, с которыми можно поиграть. Это:
bodyType - это выбор статического либо динамического объекта.
gravityScale - это значение гравитации. Можно поставить в 0 - для игр с видом сверху вниз.
linearDamping - это линейное затухание. Определяет насколько быстро объект будет замедлять линейное движение.
angularDamping - это угловое затухание. Определяет насколько быстро объект будет замедлять круговое движение.
restitution - восстановление. Определяет с какой силой объект будет отскакивать от другого объекта.
shapeType - тип формы. Определяет как движок будет обрабатывать данный объект. Как квадрат, как круг и т.д.
