232 піксельні ефекти кодом і скіл для Claude Code

Як вставити ефект у браузерну гру

Для браузерної гри (canvas, Phaser, PixiJS, Kaplay, three.js) README радить брати сам код ефекту, без залежностей. Базові функції імпортуються з pixelfx, конкретний ефект із шляху за категорією, наприклад pixelfx/fx/ice/frost-nova. Повний список назв є в docs/CATALOG.md. Перед вибором ефекти можна переглянути наживо в галереї на GitHub Pages.

• Створіть кадр під піксельну роздільність гри: createFrame(320, 180) і new ImageData(320, 180). У прикладі ці розміри підписані як «your game's pixel resolution», тож задавайте свою, а не 320×180 за замовчуванням.
• Ініціалізуйте ефект із позицією: createFx(frostNova, { x: 160, y: 140 }). У тому ж об'єкті передаються flip, angle, seed, palette, light.
• У кожному tick(dt) викликайте fx.update(dt), потім clearFrame(frame), потім fx.draw(frame, "back").

Типова помилка: пропустити clearFrame у циклі. Тоді попередні кадри залишаються в буфері. Також серед імпортів є composite, тож перед інтеграцією прочитайте повний приклад у README, щоб побачити, як кадр потрапляє в ImageData.

Код чи спрайт-шит

Код підходить, коли гра працює в браузері і ефект треба налаштовувати під час виконання: перефарбувати через palette, віддзеркалити через flip, повернути через angle, поставити в потрібну точку. Для інших рушіїв репозиторій пропонує експорт спрайт-шитів «for any engine».

У спрайт-шита своє обмеження: це запечений результат. Колір, напрямок і варіацію ви фіксуєте в момент експорту. Якщо в грі потрібні, наприклад, синій і червоний варіанти того самого вибуху, експортуйте кожен окремо.

Нові ефекти через скіл для Claude Code

Скіл працює циклом «чернетка, рендер, перегляд, доопрацювання», як вибагливий піксель-артист. В основі метод Hugo Duprez зі статті Sprite Fusion про піксельні ефекти з Claude: код — це глина, довіряй очам, давай референси. На практиці перший рендер майже ніколи не фінальний, і правки варто описувати візуально, а не в термінах коду.

• Почніть із референсу й обмежень: Зроби ефект отруйної хмари в категорії nature: 32×32, 4 кольори зеленої палітри, цикл без шва. Ось референс: …
• Після рендеру формулюйте правку через те, що бачите: Хмара занадто симетрична і розсіюється рівномірно — додай рваний край і повільніший підйом зверху.
• Беріть за зразок сусідній ефект із бібліотеки: Зроби в стилі src/fx/fire/campfire.js, але для крижаного вогню.

Що перевірити, перш ніж брати в проєкт

• Шапку файлу ефекту. Ефекти, що адаптують код Hugo Duprez, позначені зверху, так само як src/core/sim.js. Якщо для вашого проєкту важливе авторство, враховуйте це.
• Вигляд у вашій роздільності та на вашому фоні, а не лише в галереї.
• Детермінованість. Якщо ефект має виглядати однаково при кожному запуску, задайте seed.
• Результат скіла дивіться очима кадр за кадром. Сам метод побудований на тому, що оцінку дає перегляд, а не код.

Умов ліцензії репозиторію та адаптованого коду в наданому фрагменті README немає. Перевірте їх у репозиторії перед комерційним використанням.