Когда начинаешь работать с 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)); }
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("Коснулись объекта!"); // Здесь можно вызвать действия для взаимодействия с объектом
}Итоговый код
Теперь соберем всё воедино. Вот как выглядит полный обработчик касания:
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, которые дают больше контроля над игровыми механиками и взаимодействиями.
Что проверить до кода (чеклист проекта)
Перед тем как углубляться в TypeScript, проверь базовые условия. Часто проблема не в коде, а в настройках проекта.
- В проект добавлен Touch plugin.
- Для Touch включён режим Use mouse input (полезно для отладки на ПК).
- Имя слоя и объекта совпадает с тем, что используется в коде.
- Ты работаешь на версии Construct 3, где эти API доступны.
- Сцена инициализируется до попытки получить слой и инстанс.
Полный обработчик касания с защитами
Ниже практичный шаблон с проверками, чтобы скрипт не падал на пустом слое или отсутствующем объекте.
async function OnBeforeProjectStart(runtime: IRuntime) {
runtime.addEventListener("pointerdown", (event: PointerEvent) => {
handleTouch(runtime, event);
});
}
function handleTouch(runtime: IRuntime, event: PointerEvent) {
const layer = runtime.layout.getLayer("game");
if (!layer) return;
const [x, y] = layer.cssPxToLayer(event.clientX, event.clientY);
const objectInstance = runtime.objects.MyObject?.getFirstInstance();
if (!objectInstance) return;
if (objectInstance.containsPoint(x, y)) {
console.log("Коснулись объекта", { x, y, pointerType: event.pointerType });
// Здесь вызывай игровую логику
}
}
Координаты касания и почему промахивается hit-test
Самая частая причина «не попадает по объекту» — неправильное преобразование координат.
event.clientX/clientY— это координаты экрана/браузера.cssPxToLayer()переводит их в координаты конкретного слоя.- Если выбран не тот слой, проверка
containsPoint()будет мимо. - На мобильных ошибка масштаба заметнее из-за DPI и viewport.
Мобильные нюансы (iOS/Android)
На телефонах браузер может перехватывать жесты, и тогда события касания приходят нестабильно.
- Проверь, что canvas не конфликтует с системными жестами прокрутки.
- Учитывай
pointercancel— особенно в iOS/PWA. - Если касания «съедаются», проверь CSS
touch-actionи viewport. - Тестируй не только в desktop-эмуляторе, но и на реальном устройстве.
Отладка: почему событие не срабатывает
Когда касание не работает, действуй по шагам, а не наугад:
- Проверь, вызывается ли обработчик через
console.log. - Выведи
pointerType,clientX/clientYи координаты слоя. - Проверь, что инстанс объекта реально существует в момент касания.
- Проверь, где физически находится объект на слое.
- Временно упрости проверку до одного объекта без доп. логики.
Частые ошибки новичков
- Вешают обработчик не в жизненном цикле старта проекта.
- Путают имена слоёв и объектов в runtime API.
- Забывают null-check и получают падение на пустом инстансе.
- Тестируют только мышкой и думают, что на мобильных будет так же.
- Сразу усложняют логику, не проверив базовый touch-hit.
FAQ
Что лучше использовать: pointerdown или touchstart?
Для Construct 3 в TypeScript обычно удобнее pointerdown, потому что он покрывает мышь, перо и тач единым механизмом.
Почему мышь работает, а касание на телефоне нет?
Чаще всего не подключён Touch plugin, не настроен viewport/touch-action или мобильный браузер перехватывает жесты.
Можно ли сделать multitouch?
Да, но нужно учитывать несколько активных указателей и хранить их состояния отдельно, а не обрабатывать как один клик.
Практический вывод
Обработка касания в Construct 3 через TypeScript становится стабильной, когда есть три вещи: правильный жизненный цикл, корректное преобразование координат и нормальная мобильная отладка. Сначала добейся чистого базового касания по одному объекту, и только потом усложняй механику.
Книга по JavaScript для начинающих
«JavaScript с нуля: учимся программировать, создавая игры»Пошаговый формат с маленькими практическими задачами: от базового синтаксиса до первых игровых механик без перегруза теорией.
Читать книгу на ЛитРес →