13 янв в 20:44

Обработка касания в Construct 3 с использованием TypeScript: шаг за шагом

Простой

Ожидает приглашения

Когда начинаешь работать с Construct 3 и TypeScript, даже простые задачи могут потребовать гораздо больше усилий, чем это кажется на первый взгляд. Например, обработка касания по объекту — задача не такая уж и тривиальная.

Давайте разберемся, как обрабатывать касания по объектам на слое в Construct 3 с использованием TypeScript, шаг за шагом.

актуально для версии Construct 3 r416.2 в других методы API могут отличаться

1. Отслеживаем касание

Для того чтобы отслеживать касания, нам нужно добавить обработчик на событие "pointerdown". Это событие срабатывает при касании экрана.

Однако, чтобы повесить обработчик на событие, его необходимо разместить внутри асинхронной функции, которая выполняется до начала проекта. Мы делаем это в функции OnBeforeProjectStart, которая инициализирует все необходимые действия.

async function OnBeforeProjectStart(runtime: IRuntime) {
  runtime.addEventListener("pointerdown", (event: PointerEvent) => handleTouch(runtime, event));
}

2. Получаем слой

После того как мы начали отслеживать касание, следующим шагом будет получение слоя, с которым нам нужно работать. В Construct 3 каждый слой представляет собой отдельный объект, который может содержать различные элементы. Например, если у нас есть слой с названием "game", то его можно получить так:

const layer = runtime.layout.getLayer("game");

3. Конвертируем координаты

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

let [x, y] = layer.cssPxToLayer(event.clientX, event.clientY);

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

4. Проверяем попадание в объект

Теперь, когда у нас есть координаты касания на слое, нужно проверить, попадает ли это касание в какой-либо объект. Для этого нам нужно получить инстанс объекта на слое, с которым мы взаимодействуем. Например, если объект называется MyObject, то получаем его таким образом:

let objectInstance = runtime.objects.MyObject.getFirstInstance();

После этого можно использовать метод containsPoint(x, y), чтобы проверить, находится ли точка касания внутри объекта.

if (objectInstance.containsPoint(x, y)) {
  console.log("Коснулись объекта!");
  // Здесь можно вызвать действия для взаимодействия с объектом
}

Итоговый код

Теперь соберем всё воедино. Вот как выглядит полный обработчик касания:

async function OnBeforeProjectStart(runtime: IRuntime) {
  runtime.addEventListener("pointerdown", (event: PointerEvent) => handleTouch(runtime, event));
}

function handleTouch(runtime: IRuntime, event: PointerEvent) {
  // Получаем слой (например, "game")
  const layer = runtime.layout.getLayer("game")!;
  // Конвертируем координаты касания в координаты на слое
  let [x, y] = layer.cssPxToLayer(event.clientX, event.clientY);
  // Получаем первый инстанс объекта
  let objectInstance = runtime.objects.MyObject.getFirstInstance();
  // Проверяем, попадает ли касание внутрь объекта
  if (objectInstance.containsPoint(x, y)) {
    console.log("Коснулись объекта!");
    // Добавьте здесь нужные действия
  }
}

Заключение

Вот так, даже для такой простой задачи, как обработка касания, мы используем несколько шагов: отслеживание события, конвертирование координат, получение инстанса объекта и проверка попадания в него. Все эти действия — не просто стандартные операции, а важная часть работы с Construct 3 и TypeScript, которые дают больше контроля над игровыми механиками и взаимодействиями.

Хабы: