javascript

Нанопланета | Вёб-движок PlayCanvas

  • воскресенье, 23 февраля 2025 г. в 00:00:07
https://habr.com/ru/articles/884832/

Хотя я немного разочаровался в web-движке PlayCanvas, после того как его апгрейды поломали мне первый диаблоид - для каких-то очень маленьких легковесных игр он остаётся достаточно хорош. Поэтому для разнообразия реанимировал аккаунт и немного погрузился в программирование на js, написав аркаду (с механикой что-то вроде специфического урезанного BattleCity, но на сфере), где инопланетный космический кораблик летает над некоей планеткой.

Nanoplanet
Nanoplanet

PlayCanvas — это игровой движок под webGL, использующий java script. Напоминает нечто среднее между Unity и Godot, но с разработкой онлайн — редактор открывается в браузере. Разработка, с одной стороны, быстрая, но здесь намного меньше готовых инструментов по сравнению с Godot, то есть разработка всякой вспомогательной элементарщины вручную может сильно затянуться. Опять же код на java script, конечно, писать немного тяжелее чем на gdscript или c# из за местного "this.", слежения за большим количеством нюансов и более сложного процесса отлова ошибок. Тем не менее, для определённых проектов платформа получается весьма неплохая, а также тут некоторые вещи, которые в Godot не реализованы, наоборот, присутствуют - вроде батчинга геометрии, uid и всякого прочего. Плюс написано множество маленьких примеров разного функционала и их очень легко открывать и смотреть, в том числе можно копировать себе для разбора и модификаций целые проекты прочих авторов, да и платформа сама предоставляет хостинг - не нужно обязательно заводить где-то отдельную страничку в сети, чтобы выложить свой проект в онлайн. Без вложений разработчику доступен 1Gb пространства, где можно размещать свои проекты/билды.

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

Редактор вёб-фреймворка PlayCanvas
Редактор вёб-фреймворка PlayCanvas

Кроме всего прочего, PlayCanvas оказывается хорош и для мобильных игр в браузере. Потому что в том же Godot (даже лёгком) получается небольшой перегруз по требованиям к железу, да и поддержку "мобильности" в браузере для его билдов делать посложнее. На Godot, конечно, можно собрать apk файл, но это андроид студия, мобильные настройки и пользователю ещё со скачиванием и установкой apk играться (отключая гулгплей) если apk, собственно, не залит в сам гуглплей. А вот в проект на PlayCanvas'е можно зайти по ссылке из любого браузера, остаётся только предусмотреть какое-то тач-управление для смартфонов и всё (если хочется управлять и с телефона тоже).

Код открывается в отдельной вкладке браузера - нечто среднее между внутренним редактором Godot и запуском внешней среды в иных движках, например, Unity/Unigine/UE
Код открывается в отдельной вкладке браузера - нечто среднее между внутренним редактором Godot и запуском внешней среды в иных движках, например, Unity/Unigine/UE

Что касается используемого языка JavaScript - понадобится понимать некоторую его специфику. Например то, что обращаться к переменным/ссылкам нужно именно строго официально, полным названием "по имени отчеству", через тот самый "this.". Да, локально можно объявлять и использовать переменные с коротким удобным названием, но за ".this" всё равно придётся следить и привыкнуть к этой некоторой избыточности. Кстати, кто касается объявления переменных внутри функции - например, через var: "под капотом" все var "всплывают" в начало функции, поэтому разработчику очень желательно самому явно вынести эти var сразу в начало функции, чтобы не запутаться и понимать как что происходит.

Нанопланета, вид проекта ивнутри редактора
Нанопланета, вид проекта ивнутри редактора

Но вернёмся к получившейся мини-аркаде Nanoplanet, она весит пару мегабайт и запускается в мобильном или стационарном брузере по этой ссылке:

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

В нижеприведённом видеообзоре я более подробно описываю геймплейные особенности проекта, а также устройство редактора PlayCanvas:

Некоторые прочие проекты

Тест машинок:

Диаблоид:

Аркадный паззл с переключением измерений:

Кораблики: