Генератор PixelFX: пиксельные эффекты для игр

Генератор PixelFX: создайте спрайт-лист для игры

Выберите один из трёх эффектов, палитру и скорость. Прозрачный спрайт-лист и метаданные создаются в браузере без аккаунта и кредитов. Инструмент рисует существующий код. Для нового эффекта редактируйте исходники, для целой игры переходите в Studio.

Выбирайте PixelFX по роли в игре

Начните с события, которое нужно сообщить игроку. Яркий эффект может скрыть противника или награду. Сравните эти три варианта с вашим фоном и размером персонажей.

Четыре шага к игре с PixelFX

1. 01

   Спланируйте небольшой цикл: ходить по комнате, собрать пять кристаллов и начать заново после победы. Определите клавиатуру или сенсорное управление.

2. 02

   Свяжите эффекты с событиями: костёр для атмосферы, вспышку для подбора, нову для способности. Разделяйте атмосферу, успех и опасность.

3. 03

   Составьте план в Studio или используйте пример в своём проекте. Передайте исходники или экспорт; ссылка сама по себе не доказывает импорт библиотеки помощником.

4. 04

   Пройдите раунд, проверьте повторный подбор и перезапуск. Сравните края на светлом и тёмном фоне, опорную точку и читаемость на телефоне. Сохраните рабочую версию до правок.

Использование PixelFX в браузерной игре

Установите библиотеку в JavaScript-проект со сборщиком ESM, например Vite. Пример создаёт Canvas: нажатие или касание запускает эффект. В существующей игре рисуйте на прозрачном слое и запускайте эффект по подтверждённому игровому событию. Урон, столкновения и очки оставьте в игровой логике.

npm install github:patch-gg/pixelfx#a84159688af3ca37a4be05a0d422b94451b2e24e

import { createFrame, clearFrame, createFx, composite } from 'pixelfx';
import * as burst from 'pixelfx/fx/pickups/collect-burst';

const canvas = document.createElement('canvas');
canvas.width = 320;
canvas.height = 180;
canvas.style.cssText = 'width:640px;max-width:100%;image-rendering:pixelated;background:#111';
document.body.append(canvas);
const ctx = canvas.getContext('2d');
const frame = createFrame(320, 180);
const pixels = ctx.createImageData(320, 180);
let fx;
canvas.addEventListener('pointerdown', () => {
  fx = createFx(burst, { x: 160, y: 120, seed: 3 });
});
let previous;
function tick(now) {
  const dt = previous === undefined ? 0 : Math.min((now - previous) / 1000, 0.05);
  previous = now;
  clearFrame(frame);
  if (fx) {
    fx.update(dt);
    fx.draw(frame);
    if (fx.done()) fx = undefined;
  }
  composite(frame, pixels.data);
  ctx.putImageData(pixels, 0, 0);
  requestAnimationFrame(tick);
}
requestAnimationFrame(tick);

Экспорт спрайт-листов PixelFX

Клонируйте репозиторий, установите инструменты и отрисуйте эффект. Получатся прозрачный PNG-атлас и JSON в стиле Aseprite с длительностями кадров и опорной точкой. Используйте совместимый импортёр: импорт одного PNG не применяет эти данные. Требования инструментов описаны в официальном руководстве.

git clone https://github.com/patch-gg/pixelfx.git
cd pixelfx
git checkout a84159688af3ca37a4be05a0d422b94451b2e24e
npm install
node tools/render.mjs ice/frost-nova --sheet

Настройка PixelFX с помощью ИИ

В репозитории есть плагин Claude Code. Выполните эти две команды внутри Claude Code. Другому помощнику передайте выбранные исходники и запрос ниже. Эта страница не устанавливает плагин в Studio и не гарантирует автоматический импорт из GitHub.

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

Вопросы о генераторе PixelFX

Лицензия и авторство PixelFX

Код и эффекты доступны по MIT. При распространении сохраняйте уведомления об авторстве и разрешении, включая применимые уведомления Hugo Duprez и Hollow Crown. Шрифт Patch Pixel в gallery/fonts исключён и здесь не используется. PixelFX поддерживает Patch; это независимое руководство.

Официальные источники

• Patch / PixelFX — GitHub ↗
• CATALOG.md ↗
• AUTHORING.md ↗
• MIT LICENSE ↗
• NOTICE.md ↗
• PixelFX / MIT + NOTICE

OpenGame / Источники проверены: 5 ноября 2026 · ревизия a841596