Позиционирование объектов по сетке

Последняя, но очень важная функция при рисовании уровня – это позиционирование объектов по сетке. Зачастую тайлы объектов располагают впритык друг к другу и делать это вручную “на глаз” – очень сложно.

Отображение сетки я реализовал через CSS, а если конкретно – через градиенты. Одним градиентом рисуются горизонтальные полосы, другим вертикальные. Background-position свойство градиентного фона позволяет указать необходимое смещение в зависимости от координат камеры, поэтому при движении камеры, значение свойства обновляется и создается эффект движения грида вместе со всей сценой. Остальные характеристики грида вроде его цвета или размера задаются в специальном модальном окне.

Для того чтобы объект “прилипал” к сетке при позиционировании, я добавил в инструменты по работе с объектами галочку “Snap to Grid”. При активации этой опции, координаты курсора преобразуются с учетом размера объекта и размера сетки так, что объект выравнивается с гридом по левому верхнему краю.