Phaser 4 Encyclopedia

Что такое Phaser 4?

Konstantin Ryzhov — Sat, 30 May 2026 00:00:00 GMT

Phaser 4 — это фреймворк для создания 2D-игр в вебе. Он отрисовывает графику через WebGL (с откатом на Canvas), работает во всех современных браузерах и поставляется как библиотека, изначально ориентированная на TypeScript.

Архитектуру на основе сцен для организации состояния игры и отрисовки. Список отображения игровых объектов с сохранением состояния (спрайты, текст, фигуры, контейнеры). Загрузчик ресурсов с типизированным кэшем. Подключаемую физику (Arcade для быстрой обработки AABB, Matter для полноценной физики твёрдых тел). Ввод с клавиатуры, указателя (мышь + сенсор) и геймпада. Систем…

Установка

Konstantin Ryzhov — Sat, 30 May 2026 00:00:00 GMT

Phaser 4 поставляется с собственными типами TypeScript — пакет не нужен.

Для быстрых экспериментов или однофайловых демо:

отслеживает последний релиз ветки 4.x. В продакшене закрепляйте точную версию (например, ), чтобы новый релиз не изменил поведение вашего кода. Текущие релизы смотрите в списке изменений.

Минимально возможная программа на Phaser 4 — чёрный холст, готовый принимать игровые объекты:

Если вы видите текст на чёрном фоне — всё настроено. Переходите к разделу Ваша первая сцена.

Ваша первая сцена

Konstantin Ryzhov — Sat, 30 May 2026 00:00:00 GMT

Программа на Phaser 4 — это как минимум , настроенный хотя бы с одной . У сцены есть три хука жизненного цикла, которые вы будете использовать постоянно:

— загрузка ресурсов в кэш. — построение начального графа сцены. — выполнение покадровой логики.

Вот самая маленькая интересная программа: спрайт, отскакивающий в пределах своих границ. Отредактируйте исходный код в собственном проекте — и тот же код будет работать точно так же.

Что только что произошло

**** просит Phaser выбрать наилучший рендерер (WebGL там, где он доступен, иначе Canvas). Конфигурация включает физику Arcade без гравитац…

Настройка проекта

Konstantin Ryzhov — Sat, 30 May 2026 00:00:00 GMT

Для наброска или однофайлового демо достаточно фрагмента из раздела установка. Для настоящего проекта несколько решений сэкономят вам недели.

Vite — рекомендуемая отправная точка: Phaser 4 поставляется в формате ESM, а Vite обрабатывает URL ресурсов и HMR без настройки.

Структура, которая масштабируется от джем-игры до выпущенного проекта:

По возможности держите свободным от импортов Phaser — чистую логику проще тестировать.

Phaser 4 поставляется со строгими типами. Используйте их:

Нюансы горячей перезагрузки

Основные концепции

Konstantin Ryzhov — Sat, 30 May 2026 00:00:00 GMT

Страницы этого раздела объясняют, почему Phaser устроен именно так. Это не рецепты — за рецептами обращайтесь к разделу Руководства, — но используемая здесь терминология встречается на протяжении всей остальной энциклопедии.

Игровой цикл — как планируются и и что на самом деле означает . Сцены — единица «экрана» или «режима» в Phaser и то, как несколько сцен сосуществуют. Игровые объекты — сохраняемый (retained) список отображения, трансформации и разница между и . Камеры — вьюпорты, прокрутка, масштабирование и эффекты. Ввод — клавиатура, указатель и геймпад, а также то, как Phaser направляе…

Игровой цикл

Konstantin Ryzhov — Sat, 30 May 2026 00:00:00 GMT

Каждый кадр Phaser выполняет примерно следующее:

Опустошает очередь ввода (события указателя, клавиатуры, геймпада, полученные с прошлого кадра). Вызывает каждой активной сцены. Выполняет шаг физического мира. Отрисовывает список отображения на канвас.

— это монотонная отметка времени в миллисекундах; — число миллисекунд, прошедших с предыдущего кадра.

Независимость от частоты кадров

Самое важное правило:

> Умножайте перемещение и скорости на , а не на константу.

Это касается физических скоростей, которые вы задаёте вручную, таймеров анимации, темпов эмиссии частиц и всего остального, чт…

Сцены

Konstantin Ryzhov — Sat, 30 May 2026 00:00:00 GMT

Сцена — это самодостаточный мир: ей принадлежат список отображения, камера, обработчик ввода и (опционально) физический мир. запускает одну или несколько сцен; у каждой свой цикл обновления.

Сцена, которая была остановлена и затем запущена снова, увидит повторный вызов / / — соотносите каждый с тем , после которого он наводит порядок.

Несколько сцен одновременно

Сцены не являются взаимоисключающими. Распространённые шаблоны:

Постоянная сцена HUD работает параллельно с игровой сценой. Сцена меню паузы располагается поверх; игровая сцена приостановлена, но не остановлена. Долгоживущая сцена…

Игровые объекты

Konstantin Ryzhov — Sat, 30 May 2026 00:00:00 GMT

Игровой объект — это всё, что живёт в графе сцены и может быть отрисовано, трансформировано или проверено на попадание. Phaser использует рендеринг в retained-mode (сохраняемом режиме): вы создаёте объекты один раз, изменяете их свойства, а рендерер отрисовывает то, что существует в текущий момент. Никакого покадрового вызова «нарисовать спрайт в (x, y)» нет.

Эмпирическое правило: сначала тянитесь к ; переходите к только тогда, когда нужны анимации.

Иерархия трансформаций

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

Камеры

Konstantin Ryzhov — Sat, 30 May 2026 00:00:00 GMT

Камера — это вьюпорт в мировое пространство сцены. У каждой сцены есть как минимум одна (); вы можете добавить ещё для разделённого экрана, миникарт и «картинки в картинке».

Мировые против экранных координат

Мировые координаты — это место, где живут игровые объекты. Они не меняются при движении камеры. Экранные координаты — это место, куда пиксели попадают на канвас.

Камера отображает одни в другие через , и . Когда нужен оверлей в экранном пространстве (HUD), поместите его в отдельную сцену, камера которой не прокручивается.

Ввод

Konstantin Ryzhov — Sat, 30 May 2026 00:00:00 GMT

Phaser объединяет клавиатуру, указатель (мышь + касания) и геймпад за единым менеджером ввода, доступным как .

Два допустимых стиля:

Опрос подходит для непрерывных действий (движение); события подходят для дискретных действий (прыжок, выстрел, выбор в меню).

Указатель всегда сообщает экранные координаты. Используйте для преобразования.

Интерактивность отдельных объектов

Для семантики «кликнуть по этому спрайту» включите объект в обработку:

Phaser проверяет границы объекта (по умолчанию прямоугольник; попиксельно, если запрошено) и генерирует события только тогда, когда указатель действит…

Загрузчик и ресурсы

Konstantin Ryzhov — Sat, 30 May 2026 00:00:00 GMT

У каждой сцены есть загрузчик (), который ставит запросы на ресурсы в очередь во время . Когда возвращает управление, загрузчик отрабатывает до конца, прежде чем будет вызван .

Каждая запись регистрируется под строковым ключом. Соответствующий кеш предоставляет типизированные методы доступа — , и т. д.

Чтобы показать индикатор прогресса, подпишитесь на события загрузчика во время :

Распространённый шаблон — крошечная сцена Boot, которая загружает ресурсы самого индикатора загрузки, а затем переходит к сцене Preload, загружающей всё остальное.

Гайды

Konstantin Ryzhov — Sat, 30 May 2026 00:00:00 GMT

Гайды — это документы в формате how-to. Каждый из них от начала до конца разбирает одну задачу с рабочим кодом. Если нужно понять почему, см. Основные концепции; если нужно узнать что, см. Справочник API.

Физика - Arcade-физика — быстрые AABB-столкновения для платформеров, шмапов и большинства аркадных игр. - Matter-физика — полноценная симуляция твёрдых тел с сочленениями и стопками объектов. Тайлмапы — загрузка карт Tiled, слои и столкновения. Анимация — покадровые анимации и менеджер анимаций. Твины — интерполяция любого числового свойства во времени. Аудио — интеграция с Web Audio, музы…

Физика Arcade

Konstantin Ryzhov — Sat, 30 May 2026 00:00:00 GMT

Arcade — это быстрая система физики Phaser 4. Она моделирует всё как ограничивающие прямоугольники, выровненные по осям (AABB) или окружности — без вращения, без стопок твёрдых тел, без соединений. Взамен вы получаете систему, достаточно быструю, чтобы обсчитывать сотни тел за кадр на телефоне.

Когда использовать Arcade

Используйте Arcade, когда выполняются все условия:

Вам не нужна вращательная физика («наклонённый ящик лежит на склоне»). Вам не нужна укладка стопкой («ящики правильно складываются в кучу»). Вам не нужны соединения, ограничения или составные тела.

Физика Matter

Konstantin Ryzhov — Sat, 30 May 2026 00:00:00 GMT

Matter — это тяжеловесный вариант физики. Он моделирует настоящие твёрдые тела — с вращением, трением, упругостью, соединениями, ограничениями и произвольными полигональными формами — ценой большей нагрузки на процессор на одно тело и более сложного API.

Когда использовать Matter

Выбирайте Matter, как только вам понадобится что-либо из перечисленного:

Вращение. Наклонённый ящик, который приходит в состояние покоя на склоне под правильным углом. Укладка стопкой. Куча ящиков, которая реалистично оседает. Соединения / ограничения. Верёвки, цепи, шарниры, пружины, моторизованные колёса. Составн…

Тайлмапы

Konstantin Ryzhov — Sat, 30 May 2026 00:00:00 GMT

Система тайлмапов Phaser 4 читает JSON-экспорты из Tiled. Вы создаёте карту во внешнем редакторе, а Phaser берёт на себя отрисовку, столкновения и изменение во время выполнения.

Задействованы два файла: JSON карты и изображение тайлсета, на которое она ссылается.

Затем собираем карту и её слои:

Третий и четвёртый аргументы — мировые координаты левого верхнего угла слоя, обычно .

Три идиоматичных способа отметить, какие тайлы участвуют в столкновениях:

Затем добавляем коллайдер:

Для односторонних платформ, склонов и других столкновений с учётом угла см. справочник API — методы и специфичн…

Анимация

Konstantin Ryzhov — Sat, 30 May 2026 00:00:00 GMT

Система анимации Phaser 4 воспроизводит последовательности кадров текстуры на объекте . Анимации определяются один раз на уровне сцены (или глобально), а затем воспроизводятся на любом количестве спрайтов — определение и воспроизведение разделены.

Где хранятся анимации

* — менеджер анимаций уровня сцены. Анимации хранятся здесь по умолчанию. (редко) — глобальный менеджер, который можно использовать для совместного использования определений между сценами.

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

Твины

Konstantin Ryzhov — Sat, 30 May 2026 00:00:00 GMT

Твин интерполирует значение во времени. Вы направляете твин на один или несколько объектов и указываете, какие свойства менять, как и за какую длительность — Phaser берёт на себя покадровые вычисления.

Твины — самая часто используемая утилита в коде на Phaser: затухания, плавные перемещения камеры, отскок UI, появление диалогов, анимации значений, управляющие пользовательской логикой.

Читается так: «перемести к 400 за 1000 мс, используя функцию плавности по умолчанию». Phaser захватывает текущее значение в момент старта твина и интерполирует от него.

Аудио

Konstantin Ryzhov — Sat, 30 May 2026 00:00:00 GMT

Phaser 4 оборачивает браузерный Web Audio API за . Аудио загружается через стандартный загрузчик и воспроизводится через типизированный менеджер звука.

Всегда поставляйте как минимум два формата. OGG покрывает Firefox и Chrome; для Safari нужен MP3 или M4A.

возвращает звук, но не сохраняет ссылку на него — используйте + , когда нужно управлять звуком после запуска (пауза, затухание, изменение громкости).

Разблокировка по жесту пользователя

Браузеры не запускают аудио до тех пор, пока страница не получит жест пользователя (клик, нажатие клавиши, касание). Phaser обнаруживает это и разблокир…

Частицы

Konstantin Ryzhov — Sat, 30 May 2026 00:00:00 GMT

Эмиттер частиц порождает множество короткоживущих спрайтов со случайными свойствами и (опционально) интерполированным временем жизни. В Phaser 4 поставляется единый класс эмиттера, который покрывает всё — от дымового шлейфа до сотрясающего экран взрыва.

Случайность для каждой частицы через объекты-диапазоны. рандомизирует начальное значение; интерполирует от начального к конечному значению на протяжении времени жизни частицы. Темп для всего эмиттера через + . Вместе они задают «частиц в секунду». переключает в режим взрыва — испустить частиц одновременно при вызове .

Шейдеры

Konstantin Ryzhov — Sat, 30 May 2026 00:00:00 GMT

Система из Phaser 3 в Phaser 4 отсутствует. Три замены покрывают почти все сценарии:

Пайплайны, , и больше не существуют. Если вы портируете проект с v3, см. Миграция с Phaser 3 для механических замен.

Фильтры: встроенный каталог

Каждый игровой объект и каждая камера предоставляют свойство со списками фильтров и . Внутренние (internal) фильтры воздействуют на сам объект; внешние (external) фильтры воздействуют на контекст отрисовки (как правило, на весь экран).

Полный набор поставляется с v4: , , , , , , , , , , , , , , , , , , , , , , , . Каждый вызов возвращает контроллер, который можно…

Плагины

Konstantin Ryzhov — Sat, 30 May 2026 00:00:00 GMT

Плагин — это самодостаточный модуль, встраивающийся в жизненный цикл Phaser. Phaser 4 поддерживает три формы, каждая со своей областью видимости и жизненным циклом:

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

Класс, расширяющий . Он создаётся один раз при запуске игры и доступен отовсюду через .

Зарегистрируйте его в конфигурации игры:

создаёт экземпляр немедленно; делает его доступным как в каждой сцене. Без к нему обращаются через .

Переходы между сценами

Konstantin Ryzhov — Sat, 30 May 2026 00:00:00 GMT

переключает сцены жёстко — уходящей сцены срабатывает раньше, чем входящей. даёт окно наложения, в котором обе сцены работают вместе — идеально для перекрёстных затуханий (crossfade), въездов (slide-in) и эффектов «сдвинуть одну сцену за пределы экрана, пока следующая въезжает».

Читается так: «запусти параллельно со мной; в течение следующих 600 мс вызывай со значением прогресса; когда переход завершится, сделай со мной X (sleep / shutdown / remove)».

и целевой сцены срабатывают немедленно. Её выполняется каждый кадр начиная с нулевого кадра перехода. Уходящая сцена тоже продолжает обновлять…

Примеры

Konstantin Ryzhov — Sat, 30 May 2026 00:00:00 GMT

Каждый пример здесь выполняется в изолированном iframe с зафиксированной сборкой Phaser 4. Исходный код на странице — это в точности тот код, который выполняется; никакой скрытой настройки нет.

Базовый спрайт — загрузить текстуру и отрисовать её. Движение клавиатурой — перемещение спрайта на WASD / стрелках, в стиле опроса ввода со скоростью на основе delta-time. Переход между сценами — затухание между двумя сценами через API затухания камеры. Цепочка твинов — выстроить последовательность эффектов-твинов на одном объекте. Реакция на столкновение — клик создаёт физические шарики, которые сталк…

Базовый спрайт

Konstantin Ryzhov — Sat, 30 May 2026 00:00:00 GMT

выбирает WebGL там, где он поддерживается, иначе Canvas. монтирует игру в , предоставляемый iframe песочницы. Изображение загружается по сети — пока оно подгружается, песочница ненадолго покажет пустой canvas.

Движение клавиатурой

Konstantin Ryzhov — Sat, 30 May 2026 00:00:00 GMT

Сначала кликните по песочнице, чтобы iframe получил фокус клавиатуры. даёт готовые к опросу . позволяет добавить поддержку WASD одной строкой. Движение задаётся как — пиксели в секунду, независимо от частоты кадров. См. Игровой цикл. Стиль опроса подходит для непрерывного движения; события — для дискретных действий (прыжок, выстрел). См. Ввод.

Переход между сценами

Konstantin Ryzhov — Sat, 30 May 2026 00:00:00 GMT

Массив регистрирует несколько сцен; по умолчанию запускается первая. затемняет камеру; делает обратное. О завершении сигнализирует событие — идеальное место для смены сцен. заменяет текущую сцену (в отличие от , который запускает её параллельно — полезно для HUD и меню паузы). Остальную часть жизненного цикла см. в Сцены.

Цепочка твинов

Konstantin Ryzhov — Sat, 30 May 2026 00:00:00 GMT

Каждый элемент в — это полноценная конфигурация твина: собственные , , , колбэки. Цепочка выполняет их последовательно, фиксируя текущее значение каждого свойства в момент старта. Внешний перезапускает цепочку — паттерн «вечного цикла». (Для более простых циклов можно также использовать на обычном твине.) См. руководство по твинам для цепочек, value-твинов и остальной части API.

Реакция на столкновение

Konstantin Ryzhov — Sat, 30 May 2026 00:00:00 GMT

Физическая группа с удерживает каждого участника внутри canvas. заставляет участников группы сталкиваться друг с другом — именно второй проход по группе даёт отскок шариков друг от друга. переключает тело с прямоугольного AABB по умолчанию на круг. Arcade в Phaser по умолчанию использует прямоугольники даже для круглых спрайтов. События указателя срабатывают на iframe — / уже в координатах canvas. См. Arcade Physics для групп, коллайдеров, пересечений и прочего.

Залп частиц

Konstantin Ryzhov — Sat, 30 May 2026 00:00:00 GMT

* не даёт эмиттеру непрерывно порождать частицы, оставляя возможность запускать залпы по требованию. немедленно порождает частиц в заданной мировой позиции. * даёт яркий эффект «свечения» — переключитесь на , если хотите более чёткие, менее «раскалённые» частицы. Сам эмиттер находится в — позиции частиц абсолютны, поскольку мы переопределяем их через . Для следа за игроком разместите эмиттер и используйте поведение по умолчанию (испускание из центра). См. руководство по частицам для зон эмиттера, типовых рецептов (дым / взрыв / след) и производительности.

Пересечение в физике (подбираемые предметы)

Konstantin Ryzhov — Sat, 30 May 2026 00:00:00 GMT

Сначала кликните по песочнице, чтобы передать ей фокус клавиатуры. против : overlap вызывает колбэк при пересечении ограничивающих рамок без их разделения — идеально для подбираемых предметов, триггеров, хитбоксов. разделяет тела и не даёт им проникать друг в друга — для стен, полов, врагов. Удобство групп: один вызов охватывает каждую монету в группе. Не нужно настраивать каждую монету по отдельности. **** удаляет монету из сцены и из группы; последующие проверки пересечения автоматически её пропускают. См. Arcade Physics для групп, динамических и статических тел, подводных камней с туннели…

Шейдерный фильтр (Glow)

Konstantin Ryzhov — Sat, 30 May 2026 00:00:00 GMT

* — один из встроенных фильтров Phaser 4. Полный набор: , , , , , , , , , , , , , , , , , , , , , , , . Списки против : внутренние (internal) фильтры влияют только на сам объект; внешние (external) влияют на объект в его контексте отрисовки (обычно на весь экран). Для Glow обычно нужен , поскольку свечение выходит за пределы исходных пикселей. Возвращаемый Controller — обычный объект: такие свойства, как , и , дружелюбны к твинам, что делает анимацию эффекта тривиальной. Примечание: Bloom — это не один фильтр.* В v3 был FX-эффект ; в v4 он собирается через , который внутри настраивает нескол…

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

Konstantin Ryzhov — Sat, 30 May 2026 00:00:00 GMT

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

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

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