pixelfx — 244 пиксель-арт эффектов кодом и скилл для Claude Code

pixelfx — библиотека из 244 пиксель-арт эффектов и анимаций, где каждый эффект — небольшой кусок кода на JavaScript. Огонь, взрывы, магия, погода, интерфейсы, подбираемые предметы, мелкие существа. Эффекты можно смотреть в живой галерее, перекрашивать, зеркалить, встраивать в браузерную игру или экспортировать спрайт-листами для любого движка. В комплекте — скилл для Claude Code, который создаёт новые эффекты так, как это делал бы дотошный пиксель-арт художник: набросал, отрисовал, посмотрел, доработал.

Проект собрал 5 тысяч звёзд на GitHub и распространяется по лицензии MIT. Метод принадлежит художнику Hugo Duprez — он описал его в статье «How to make (good) pixel art effects with Claude»: код — как глина, доверяй своим глазам, корми модель референсами. Его открытые эффекты в Sprite Fusion задали планку, и часть кода библиотеки адаптирована из них. Авторы pixelfx развернули эту идею в масштабе целой библиотеки и добавили скилл, чтобы работу можно было продолжать в агенте.

Что внутри

Каждый эффект — отдельный файл в src/fx/<category>/<name>.js. Полный каталог — в docs/CATALOG.md.

Как использовать

В браузерной игре (canvas, Phaser, PixiJS, Kaplay, three.js) эффекты подключаются кодом, без единой зависимости:

import { createFrame, clearFrame, createFx, composite } from "pixelfx";
import * as frostNova from "pixelfx/fx/ice/frost-nova";

const frame = createFrame(320, 180);                   // your game's pixel resolution
const img = new ImageData(320, 180);
const fx = createFx(frostNova, { x: 160, y: 140 });   // also: flip, angle, seed, palette, light

function tick(dt) {
  fx.update(dt);
  clearFrame(frame);
  fx.draw(frame, "back");                              // behind characters
  drawCharacters();
  fx.draw(frame, "front");
  composite(frame, img.data, backgroundColor);         // color, then light added on top
  ctx.putImageData(img, 0, 0);                         // scale up with image-rendering: pixelated
}

Установка идёт прямо с GitHub: npm i github:patch-gg/pixelfx. Либо скопируйте в проект src/core и только нужные эффекты.

Для движков (Godot, Unity, GameMaker, Defold, LÖVE, Bevy) эффекты экспортируются спрайт-листами:

node tools/render.mjs ice/frost-nova --sheet

Команда пишет прозрачный PNG со всеми кадрами в сетке и JSON в формате Aseprite: прямоугольники кадров, длительности и блок meta.pixelfx с fps, loop, числом колонок и pivot-точкой. Его читают загрузчик атласов Phaser и Aseprite-импортёры для Godot и Unity. Команда node tools/sheets.mjs выгружает всю библиотеку разом в sheets/.

Любой эффект принимает palette — набор hex-цветов от тёмного к яркому. Огонь может гореть синим, а лечение — розовым, без правки кода:

node tools/render.mjs fire/torch --gif --opts '{"palette": ["#102","#215","#43a","#8cf","#cff","#fff"]}'

Эффекты с телом: замах, контакт, восстановление

Одиночный эффект выглядит как наклейка. Убедительным удар делают движения тела вокруг него: замах, который предупреждает, что сейчас что-то произойдёт, замирание в момент контакта, отлёт цели назад, возврат в стойку. Поэтому 61 эффект с персонажем и 12 полноценных приёмов описывают, что делает тело и когда:

export const act = {
  target: { x: 58 },
  poses: [
    [-0.55, GUARD],            // starts before the effect does (t = 0 is the first frame)
    [-0.3, WIND_UP],
    [0, CUT, "snap"],          // S1 holds the last pose and jumps on the key
    [0.06, FOLLOW_THROUGH, "snap"],
    [0.86, GUARD],
  ],
  hits: [{ t: 0.06, stop: 0.14, shake: 0.18, amp: 2, push: 2.8, straw: 18 }],   // freeze for 0.14 s on contact
};

Вся сцена целиком — с персонажем и мишенью — проигрывается заменой createFx на createAct. Тайминги — обычные данные: их можно прочитать из slash.act или из meta.pixelfx.act в JSON спрайт-листа, а затем завести собственную анимацию замаха за нужное число секунд до эффекта и остановить обновление сцены на время замирания в каждом попадании.

Эффекты, нарисованные на теле (мороз, яд, скан-линия), привязаны к стоящему персонажу и следуют за ним в любой позе: каждый пиксель позы знает, от какого пикселя стоячего тела он произошёл. Команда node tools/act.mjs <id> --sheet запекает целый приём вместе с персонажем в спрайт-лист.

Скелет тоже открыт для использования: skeleton(pose) отдаёт все суставы позы в 3D, posedParts(pose) — каждую часть тела по отдельности.

Скилл для Claude Code

Скилл pixelfx учит Claude Code находить, применять, экспортировать и создавать эффекты. Установка как плагина:

/plugin marketplace add patch-gg/pixelfx
/plugin install pixelfx@pixelfx

Либо скопируйте skills/pixelfx в ~/.claude/skills/. Дальше — обычные просьбы на человеческом языке:

• «Добавь frost nova в ультимейт моего мага».
• «Сделай пять вариантов искры для подбора монеты и покажи два лучших».
• «Экспортируй категории fire и explosions в спрайт-листы для Godot».
• «Этот эффект попадания выглядит вялым — сделай его резче».
• «Дай заклинанию замах и заставь врага на него реагировать».

Как сделать свой эффект

Рабочий цикл — три команды:

node tools/new.mjs arcane/my-spell       # a working starting point (add --loop for a loop)
node tools/render.mjs arcane/my-spell    # records/arcane/my-spell/contact.png: look at it
node tools/check.mjs arcane/my-spell     # spills, seams, unseeded randomness, slow frames

Дальше — по кругу: посмотрите контактный лист, исправьте самую заметную проблему, отрендерите снова. Флаги --gif и --mp4 показывают движение, --all — каждый кадр. Команда node tools/act.mjs arcane/my-spell показывает приём последовательными шагами по 12 fps: баги движения не видны в отдельных кадрах. Контракт эффекта, drawing API и планку качества описывает docs/AUTHORING.md. Команда node tools/serve.mjs поднимает галерею локально, уже с вашими эффектами.

Как это устроено

• Два типа эффектов, ни одной картинки. Чистые эффекты экспортируют draw(p, t, o): кадр вычисляется только из времени t, поэтому зацикленные анимации стыкуются без шва. Симулируемые экспортируют create(o) и честно шагают частицами, обломками и источниками света на частоте 120 Гц — искры отскакивают и дым клубится одинаково при любом fps.
• Два буфера. color принимает пиксели — непрозрачные, с дизерингом или полупрозрачные. light принимает аддитивное свечение, которое кладётся поверх. Горячее выглядит горячим именно из-за буфера света.
• Всё детерминировано. Каждое случайное число выводится из сида эффекта, поэтому кадр 40 всегда одинаковый.
• Локальное пространство. Эффекты рисуются вокруг собственной точки отсчёта, а «художник» размещает, зеркалит и вращает их. Направленные эффекты смотрят вправо. Штатный персонаж 24×38 стоит в эффектах статусов, аур и попаданий.
• Настоящий скелет, отрисованный в пиксели. Серый манекен намеренно нейтрален: взгляд должен читать движение, а цвета любого эффекта — выделяться на нём. Под капотом — 3D-скелет с костями фиксированной длины, от таза через позвоночник к плечам, отрисованный плоскими тонами с одной чистой контурной линией — так же, как в Dead Cells сделаны спрайты. Скелет может скручиваться, гнуться и по-настоящему поворачиваться, а глубина решает, что впереди. Позы держатся шагами по 12 fps, как в рисованной анимации, частицы при этом идут на полной частоте.
• Тот же формат кадра, что у VFX из Sprite Fusion ({ w, h, ox, oy, color, light }), поэтому обе библиотеки могут рисовать в один кадр.

Лицензия

MIT — и код, и эффекты, коммерческое использование разрешено. Части кода адаптированы из MIT-эффектов Hugo Duprez и MIT-исходников Hollow Crown. Шрифт Patch Pixel в gallery/fonts принадлежит Patch и лицензией не покрывается — детали в NOTICE.md.