Как заползти в PlayCanvas

PlayCanvas - игровой движок для webGL, использующий javascript. Разбираться в его среде разработки начал со сборки мини-демо с машинками, а теперь добавил туда скрипты лап для "паукомобиля".

Как заползти в PlayCanvas

Обитает движок по адресу:

В целом это похоже на такой Unity/Godot, но с разработкой онлайн - редактор открывается в браузере. Помимо документации есть различные примеры, которые можно форкнуть, начать их изучать и делать что-то на их основе.

Без вложений разработчику доступен 1Gb пространства, где можно размещать свои билды. Для того чтобы пользователь мог запустить ваш билд - достаточно дать ссылку, которую можно открыть на любом устройстве, через браузер. Телефоны тоже подойдут для запуска, правда тогда проекту нужно добавить элементы тач-управления.

Пустышка, обозначенная как центр "паучьего авто" содержит в себе саму модельку и точки-пустышки, куда будут ставится лапки.<br />
Пустышка, обозначенная как центр "паучьего авто" содержит в себе саму модельку и точки-пустышки, куда будут ставится лапки.

Редактор более менее похож на прочие игровые движки. В сцене есть некое дерево элементов, местные префабы называются шаблонами, фокус на объекте происходит по кнопке F, скрипты добавляются в поле "компонент" (правда здесь для вывода полей скрипта в редактор дополнительно нужно жать кнопку парсинга), работа с UI напоминает Unity, используемые материалы желательно предпоказывать на камеру, как это практикуется в Godot, есть частицы, настройка материалов, ну и так далее.

В отдельной пустышке собраны шаблоны "паучьих" лапок, у каждой своя копия управляющего скрипта, который будет переставлять их во время игры.<br />
В отдельной пустышке собраны шаблоны "паучьих" лапок, у каждой своя копия управляющего скрипта, который будет переставлять их во время игры.

Что касается скриптов, то писать предлагается на джаваскрипте. В принципе это всё не слишком сильно отличается от C# или GDScript, просто некоторые вещи выглядят иначе (синтаксически, конечно, ближе к C#). Редактор кода просто открывается в дополнительной вкладке барузера, когда вы начинаете редактировать скрипт.

Фрагмент кода отдельной лапки<br />
Фрагмент кода отдельной лапки

Так получилось, что мне захотелось собрать "паучков" в различных своих проектах. Начал с Godot, потом повторил это в Unigine и, так как параллельно начал пробовать webgl, то дошла очередь до реализации этих скриптов и в playcanvas, заодно плотнее разобраться в его использовании.

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

Потестить получившегося на текущий момент кадавра можно здесь (сама ссылка выглядит так playcanv.as/p/rOebDLem/ ):

Я лично пробовал запускать на не слишком мощном смартфоне через Chrome и Dolphin, графика становится похожей на PsOne и вычисления для некоторых лап не работают, пока на экране виден уровень, у края карты лапы проявляются. На слабом ноутбуке наблюдались очень сильные тормоза в Chrome, но в Firefox всё катается нормально. На ноутбуке с дискретной видеокартой и на стационарнике летает в обоих этих браузерах.

На ПК, в отличие от смартфонов в этой демке работает прыжок (по кнопке пробел), заготовка стрейфа (Q и E) и перезагрузка уровня (на R).

20
21 комментарий