Как заползти в 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).

2020
23 комментария

О, я даже им коммитил немножко фиксы и активно на форуме помогал.

У движка есть ряд серьезных проблем с оптимизацией, которые давно пора решить с помощью wasm и просчетом физики в отдельном потоке.

Помню, даже экспериментировал с этим и получил жирнейший буст производительности.

А вообще, очень клевая штука, советую.

2
Ответить

Ну да. Штука, действительно, весьма занятная. Особенно если проект небольшой, за счёт чего может быстро загрузится. Понравилось, что всё работает довольно шустро, даже не на самых мощных устройствах.
Плюс можно перейти на другие js фреймфорки, в том числе babylon.js, где можно использовать typescript. То есть технология не то, чтобы сильно привязана именно к среде playcanvas.

Ответить

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

Ответить

ЛЕГО!

1
Ответить

цифровое :)

Ответить

Тоже как то делал видос про него

1
Ответить

нормальное интро по среде разработки :)

Ответить