Рубрика блога J2DRU.
Как загружать картинки, звук и данные уровня в браузерной 2D-игре: манифест с размерами файлов, прогресс по байтам вместо числа файлов, не больше 4 запросов одновременно, полоса без откатов назад, экран загрузки только для долгих загрузок и подгрузка следующего уровня заранее без повторных запросов. Код проверен в Node.js 24.
Что такое вызов отрисовки и почему 1000 спрайтов стоит рисовать одним пакетом, как атлас текстур и порядок слоёв влияют на число пакетов, сколько байт уходит в видеокарту за кадр, чем WebGPU отличается от WebGL2, где он работает по данным caniuse на ноябрь 2026 года и как игре перейти на WebGL2, если WebGPU недоступен.
Почему пиксель-арт размывается в браузерной игре и как это исправить: imageSmoothingEnabled в Canvas2D, CSS image-rendering pixelated и crisp-edges, формула целочисленного масштаба, учёт devicePixelRatio на экранах 125% и 150%, таблица масштабов для 320×180, 384×216, 480×270 и 640×360.
Как отделить логику браузерной 2D-игры от конкретных клавиш: карта действий, KeyboardEvent.code вместо символа, стандартная раскладка Gamepad API, радиальная мёртвая зона стика с перемасштабированием и переназначение клавиш. Код проверен в Node.js 24.
Как устроена покадровая 2D-анимация в браузерной игре: расчёт прямоугольника кадра в атласе с полями и зазорами, опорная точка при развороте, своя частота клипа 8–24 к/с при экране 60 или 144 Гц и события на кадрах. Код на JavaScript, проверенный в Node.js 24.
Как устроен игровой цикл 2D-игры: бюджет кадра 16,67 мс, deltaTime, фиксированный шаг физики с аккумулятором, проверка пересечения AABB, выталкивание по осям, различие коллайдера и триггера и проверенный код приземления на JavaScript.
Как устроены тайловые сетки в 2D-играх: расчёт экономии памяти, слои сцены, битовые маски автотайлинга на 16 и 47 клеток, отсечение невидимых клеток камеры и проверенный код поиска клетки и автотайлинга на JavaScript.
