Инструменты для просмотра сцены

Займемся канвасом. С тех пор, как была добавлена возможность просматривать уровень, ничего не изменилось. Можно менять масштаб, можно двигать камеру. Но посмотреть на уровень можно и в игре, а в редакторе нужны те самые интерактивные действия, ради которых я вообще захотел делать редактор. Речь идет о добавлении новых объектов прямо в канвасе и о возможности выбирать и двигать существующие. Начнем с выбора.

Чтобы выбрать объект по клику мыши, нужно, чтобы кто-то обработал этот клик и сказал, какие объекты под него попадают, после чего взять самый верхний. С этим проблем нет, three.js умеет вычислять пересечение луча с отображаемыми объектами (raycasting). Но есть проблема с тем, чтобы это пересечение запросить. Дело в том, что ни одна система в движке не умеет отвечать синхронно, просто потому что ее нельзя синхронно ни о чем спросить. Все системы изолированы друг от друга и взаимодействуют только при помощи шины сообщений, а также чтения/записи данных в компоненты объектов.

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

Как только мы узнали, какой объект выбран, нужно уведомить об этом все службы редактора и отразить выбор в проводнике и в инспекторе. Помимо этого, канвас тоже должен давать какой-то фидбек. Поэтому я рисую рамку вокруг выбранного объекта. Для рамки написал отдельный рендерер на чистом канвасе. Существующая система умеет рисовать только спрайты, и дорабатывать ее ради отрисовки одного прямоугольника показалось нецелесообразным.

Функция выбора объекта по клику открывает дополнительные возможности. Например, зная какой объект выбран, можно перемещая мышь с зажатой клавишей, считать разницу от начальной позиции и соответствующим образом двигать объект. Так появился инструмент “указатель”, который позволяет выбирать и перемещать объекты, составляющие уровень.