Глоссарий — термины Phaser глазами веб-разработчика

Сводный список терминов Phaser 4, которые встречаются в энциклопедии. Phaser живёт прямо в браузере на JavaScript/TypeScript, поэтому веб-аналогии здесь особенно близки.

Игра и сцены

Game — корневой объект (new Phaser.Game(config)): создаёт canvas, заводит игровой цикл, менеджеры рендера, ввода, звука и сцен. Аналог: корень приложения (ReactDOM.createRoot), который монтируется в DOM один раз.

Scene — самостоятельный «экран» или режим: владеет своим списком отображения, камерой, обработчиком ввода и (опционально) миром физики. Аналог: маршрут (route) в SPA. Сцены не взаимоисключающие — несколько могут идти параллельно (геймплей + HUD + пауза).

Lifecycle — методы сцены, которые движок вызывает по порядку: init(data) → preload() → create(data) → update(t, dt) … → shutdown(). Аналог: хуки жизненного цикла компонента (constructor → монтирование → render каждый кадр → размонтирование).

preload / create / update — preload ставит ассеты в очередь загрузки; create строит сцену, когда загрузка завершена; update вызывается каждый кадр. Аналог: загрузка данных → первый рендер → анимационный кадр (requestAnimationFrame).

Объекты на экране

Game Object — всё, что можно поместить в сцену: Sprite, Image, Text, Container, Graphics и т.д. Аналог: DOM-элемент. Создаются фабрикой this.add.* (например this.add.sprite(...)).

Sprite — игровой объект с текстурой, который умеет проигрывать анимации. Аналог: <img>, который ещё и анимируется покадрово.

Image — как Sprite, но без анимаций; легче по накладным расходам. Берите, когда кадр статичен.

Container — игровой объект-группировщик с собственным трансформом: двигаешь контейнер — двигаются дети. Аналог: <div>-обёртка, задающая систему координат для вложенных элементов.

Group — пул/коллекция игровых объектов для массовых операций и переиспользования (например пули). В отличие от Container, не задаёт общий трансформ — это про управление множеством, а не про вложенность.

Display List — упорядоченный список игровых объектов сцены; порядок задаёт порядок отрисовки (z-order). Аналог: дерево DOM, где порядок элементов влияет на наложение. Это retained-mode: вы описываете объекты один раз, а движок перерисовывает их каждый кадр сам.

Графика и ассеты

Texture — растровые данные изображения в видеопамяти, на которые ссылаются спрайты по ключу. Аналог: уже декодированная картинка в кэше браузера, готовая к отрисовке.

Sprite Sheet — одна картинка с сеткой кадров одинакового размера. Phaser нарезает её на кадры по индексам. Основа покадровой анимации.

Texture Atlas — одна картинка + JSON с произвольными прямоугольниками кадров (имена, координаты). Гибче спрайт-листа; экономит вызовы отрисовки. Аналог: CSS-спрайты с картой координат.

Loader — система загрузки ассетов (this.load.image(...), this.load.audio(...)), которая работает в preload. Аналог: пакетный fetch с прогрессом и событиями завершения.

Cache — типизированное хранилище загруженных ассетов (текстуры, аудио, JSON). После загрузки ассет доступен по ключу из любой сцены. Аналог: in-memory store загруженных ресурсов.

Цикл и время

Game Loop — главный цикл: каждый кадр движок обновляет логику (update) и перерисовывает кадр. Аналог: бесконечный requestAnimationFrame, но с менеджментом сцен, ввода и физики поверх.

delta (dt) — сколько миллисекунд прошло с прошлого кадра. Умножайте перемещения на dt, чтобы скорость не зависела от частоты кадров. Аналог: разница timestamp между двумя rAF.

Time / Clock — таймеры и отложенные события сцены (this.time.addEvent, delayedCall). Аналог: setTimeout / setInterval, но привязанные к игровому циклу и паузе сцены.

Камера и ввод

Camera — определяет, какую часть мира и куда рисовать: скролл, зум, поворот, следование за целью, эффекты (тряска, затухание). У каждой сцены есть this.cameras.main. Аналог: вьюпорт + CSS-трансформ для всего содержимого.

Viewport — прямоугольная область экрана, в которую рисует камера. Можно иметь несколько камер (сплит-скрин, миникарта).

Input / Pointer — единый слой ввода: клавиатура, указатель (мышь + тач), геймпад. Pointer абстрагирует мышь и палец в один объект. Аналог: pointer events в DOM.

Физика

Arcade Physics — быстрая физика на основе AABB (прямоугольники, выровненные по осям) и окружностей: без вращения и стопок тел. Для платформеров, шутеров, большинства аркад. Аналог по «дешевизне»: простые проверки пересечения прямоугольников.

Body — физическое представление игрового объекта (позиция, скорость, ускорение, границы). Меняете body, а движок двигает спрайт. Бывает динамическим или статическим.

collision / overlap — collider заставляет тела отталкиваться; overlap лишь сообщает о пересечении, ничего не двигая (триггеры, подбор предметов). Аналог: hit-test без физического отклика.

Matter — интеграция Matter.js: полноценная физика твёрдых тел с вращением, стопками, соединениями и произвольными формами. Тяжелее Arcade — берите, когда нужна «настоящая» физика.

Анимация и эффекты

Animation — именованная последовательность кадров текстуры, проигрываемая на спрайте (this.anims.create, sprite.play('run')). Аналог: покадровый CSS @keyframes для спрайт-листа.

Tween — плавная интерполяция свойств объекта во времени (позиция, угол, прозрачность, масштаб): this.tweens.add({ targets, x: 100, duration: 300 }). Аналог: CSS-transition / Web Animations API.

Easing — функция плавности твина (Linear, Sine.easeInOut, Bounce …), задающая «характер» движения. Аналог: cubic-bezier() / ease-in-out.

Tween Chain — последовательность твинов, выполняемых друг за другом. Аналог: цепочка .then() или последовательность keyframes.

Particle Emitter — источник частиц (this.add.particles) для эффектов: искры, дым, взрывы. Настраивается скоростью, временем жизни, гравитацией; режим explode даёт одиночный залп.

Тайлмапы

Tilemap — сетка из тайлов, описывающая уровень; обычно импортируется из редактора Tiled (this.make.tilemap). Аналог: CSS-grid из переиспользуемых клеток, но для игрового уровня.

Tileset — изображение-источник тайлов, на которое ссылается тайлмап.

Tile / Layer — Tile — одна клетка сетки; Layer — слой тайлов (земля, декор, коллизии). Слои рисуются и проверяются на столкновения независимо.

Рендеринг и масштаб

WebGL / Canvas — два бэкенда отрисовки. Phaser.AUTO выбирает WebGL, где он поддерживается, иначе откатывается на Canvas 2D. Аналог: выбор между ускоренным GPU-рендером и программным.

Shader / Filter — программа на GPU для пост-эффектов (свечение, размытие, искажение). В Phaser 4 встроенные эффекты доступны через фильтры (filters.external.addGlow(...)); для своего кода пишут Shader game object на GLSL.

Pipeline / RenderNode — низкоуровневый слой конвейера рендеринга WebGL. Трогают редко — когда нужен полный контроль над тем, как объекты попадают на экран.

Scale Manager — управляет тем, как canvas вписывается в окно (режимы FIT, RESIZE, ENVELOP, …). Аналог: адаптивная вёрстка/object-fit для игрового холста.

Расширение

Plugin — переиспользуемый модуль, добавляющий возможности в Game или сцену (глобальный или сценовый). Аналог: npm-пакет / middleware, расширяющий приложение без правки ядра.