Гра на Pixi.js, в яку можна зіграти

Я вже писала, коли брала б Pixi.js замість Three.js, і чому canvas на бізнес-URL — це рахунок, не декор. Потім здала 3D-об’єкт, який можна облетіти. Ця сторінка — інша поверхня: 2D-сцена, яка має тримати 60 fps, поки ви граєте. Гра над цим абзацом — патерн, який я б здала на дроп запуску, стенд або петлю лояльності: острів, лінивий, знищуваний. Речення, яке ви читаєте, лишається в документі.

Рухайте кошик. Ловіть яблука, груші, часточки. Ухиляйтеся від гнилих. Спокій, аркада, шторм. Це комерційна робота: кілька десятків спрайтів, ticker, частинки, які вмирають, коли треба. Без атласу. Без стека сцен Phaser. Процедурна графіка, HUD у HTML, цикл, який поступається, щойно ви йдете з в’юпорта.

1. На що ви насправді дивитеся

Pixi.js — 2D-рендерер. Список відображення, примітиви Graphics, ticker. Яблука, груші й часточки — не PNG. Це полігони на GPU, в пачці, з обертом у циклі. Сад за ними — один об’єкт Graphics: небо, пагорби, дерева — плюс кілька хмар, які пливуть. Спіймали фрукт — жменя іскор народжується і вмирає. Це робота, в якій Pixi сильний: багато дешевих 2D-об’єктів щокадру, без DOM-вузла на спрайт.

Фізичного рушія немає. Гравітація — число, яке я додаю до vy. Колізія — бокс навколо колектора. Комбо — таймер у тому самому тіку. Phaser дав би сцени, arcade-фізику, звук. Цьому продуктові той рахунок не потрібен. Потрібна гаряча сцена всередині статті на Next.js. Обмежую devicePixelRatio. Ріжу кількість зірок, коли hardwareConcurrency низький. Шторм — це більше спрайтів, не важчий шейдер. Це різниця між мінігрою, яка виживе на ноутбуці рекрутера, і тією, яка смажить середній Android у метро.

2. Острів, не головна

На сервері немає WebGL. Ця сторінка — static export. HTML статті в першому пейнті. Сцена — клієнтський острів: IntersectionObserver з root margin, потім dynamic import pixi.js, потім Application.init. Якщо сюди не долистати, рендерер не скачається. Якщо піти — ticker пропускає кадр. На unmount я знищую application, canvas і GPU-контекст. Підете з цієї статті в застосунку — наступна не успадкує живий WebGL.

Я не поставила це на головну. Нетерплячий canvas-hero б’ється з LCP, потім краде INP. Рекрутер може зачекати один скрол. Клієнт на URL запуску може зачекати гру, по яку прийшов. Не може чекати сцену, яка заблокувала заголовок. Рахунок, життя, «ще раз» сидять у HTML поруч із canvas — не намальовані в текстуру. Reduced motion сповільнює ticker і ріже іскри; сцена все одно грається, бо це вибір, не анімація.

• Текст, рахунок і заголовок у серверному HTML. Canvas — не поверхня для crawler.
• Старт на intersection, не на завантаженні роута.
• Destroy на unmount. Пропуск тіків поза екраном. Шанувати prefers-reduced-motion.

3. Тут сирий Pixi.js. У продукті — @pixi/react

На цій сторінці я підключила рендерер сама, щоб острів лишився одним чанком, а цикл був очевидний: init, tick, destroy. У Next.js-застосунку, де сцена має говорити з кошиком, прапорцем кампанії чи гаманцем, я б взяла @pixi/react. Той самий GPU, список відображення в дереві React, менше мін на unmount. Помилка — тягнути обгортку, щоб покрутити коло, або уникати її, коли двадцять спрайтів мають синхронізуватися з Redux. Обгортку беріть, коли продукт уже мислить компонентами.

4. Коли я б здала це клієнту

Брендована мінігра на дропі продукту. Стенд, який має їхати на дешевому ноутбуці. Дитяча дошка, петля лояльності, барабан монет, який CSS не втримає. Telegram mini app, яка вже webview і не повинна ростити другий рушій. Не маркетингова головна, якій треба було «відчуватися преміально» — той бриф і досі CSS і GSAP. Не ювелірний SKU, який облітаєте: це Three.js. Не платформер із рівнями й фізичним світом: почніть з Phaser або справжнього ігрового рушія. Якщо WebGL не стартував — на сторінці лишаються правила в HTML. Canvas — найкращий шлях до гри, ніколи єдиний.

Висновок: грайте на GPU, збережіть документ

Команди наймають Pixi.js, коли клієнт лишається, бо сцена плавна, не бо заголовок дотепний. Документ усе одно треба найняти: заголовок, правила, рахунок, запасне речення. Я здаю цей розкол як senior web engineer — острови Next.js, обмежений GPU-бюджет, GSAP там, де сторінка ще сторінка. Якщо бриф — 2D-сцена, яка має тримати 60 fps на бізнес-URL, напишіть через форму кількість спрайтів, чи це справжня гра чи брендова петля, і чи той самий URL має ранжуватися. Ми не почнемо з canvas на головній, «щоб портфоліо грало».