pixelfx: 244 efeitos de pixel art grátis para o seu jogo e a skill do Claude Code que cria os seus

O Claude já faz efeitos de pixel art para o seu jogo. E ele não precisa começar do zero: o pixelfx é um pack grátis de 244 efeitos (fogo, explosões, raios, magia, chuva… até moedas e baús) com uma skill do Claude Code que cria os que estiverem faltando.

O melhor: nenhum é uma imagem. Cada efeito é um pedacinho de código, então você muda a cor, espelha e coloca no seu jogo.

O que é o pixelfx

• Repo: patch-gg/pixelfx, da Patch.
• Licença MIT: grátis, inclusive para jogos comerciais.
• Quase 6.000 estrelas no GitHub (5.982 em 8 de novembro de 2026).
• 244 efeitos em 21 categorias: ataques completos, fogo, explosões, água, gelo, raios, ficção científica, corpo a corpo, impactos, projéteis, surgimento e morte, arcano, sagrado, sombra, estados, natureza, clima, interface, itens, transições e bichos.
• Método do Hugo Duprez: o código é argila, confie nos seus olhos e dê referências.

1 · Veja ao vivo

Abra a galeria e brinque com eles. O catálogo completo está em docs/CATALOG.md no repo.

2 · Num jogo web (canvas, Phaser, PixiJS, Kaplay, three.js)

Instale a partir do GitHub (não tem dependências):

npm i github:patch-gg/pixelfx

E use no seu game loop:

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

const frame = createFrame(320, 180);     // a resolução em pixels do seu jogo
const img = new ImageData(320, 180);
const fx = createFx(frostNova, { x: 160, y: 140 });

function tick(dt) {
  fx.update(dt);
  clearFrame(frame);
  fx.draw(frame, "back");    // atrás dos personagens
  drawCharacters();
  fx.draw(frame, "front");
  composite(frame, img.data, backgroundColor);
  ctx.putImageData(img, 0, 0); // escale com image-rendering: pixelated
}

3 · No Godot, Unity, GameMaker, Defold, LÖVE ou Bevy

Exporte sprite sheets:

git clone https://github.com/patch-gg/pixelfx && cd pixelfx && npm install
node tools/render.mjs ice/frost-nova --sheet   # PNG transparente + JSON no estilo Aseprite
node tools/sheets.mjs                          # exporta a biblioteca inteira para sheets/

O JSON traz os retângulos de cada frame, as durações, os fps, se é em loop e o pivô. Ele é lido pelo carregador de atlas do Phaser e pelos importadores de Aseprite do Godot e do Unity.

4 · Mude a cor ou espelhe

Qualquer efeito aceita uma palette, uma rampa de cores do escuro ao claro. Um fogo azul:

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

No código, passe as opções ao criá-lo: palette para a cor e flip: true para espelhar.

5 · Ataques encenados

Um efeito sozinho parece um adesivo. O que vende um golpe é o corpo: a preparação, o congelamento no impacto (hit-stop), o alvo que recua e a recuperação. Os 61 efeitos com personagem e os 12 ataques completos já trazem essa encenação.

• Para reproduzir inteiro, com personagem e alvo, troque createFx por createAct.
• Se você tem seu próprio personagem, os tempos estão como dados em efeito.act (ou em meta.pixelfx.act no JSON da sheet): comece sua animação de preparação antes e congele tudo durante o impacto.

6 · A skill do Claude Code

Instale como plugin dentro do Claude Code:

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

(Ou copie a pasta skills/pixelfx para ~/.claude/skills/.) Depois peça o que quiser:

Adicione um frost nova à habilidade suprema do meu mago.

Faça cinco versões de um brilho ao pegar uma moeda e me mostre as duas melhores.

Exporte as categorias de fogo e explosões como sprite sheets para o Godot.

Este golpe está fraco: deixe-o mais pesado.

Dê uma preparação a este feitiço e faça o inimigo reagir.

7 · Crie seus próprios efeitos

node tools/new.mjs arcane/meu-feitico       # ponto de partida que já funciona (--loop para um loop)
node tools/render.mjs arcane/meu-feitico    # veja records/arcane/meu-feitico/contact.png
node tools/check.mjs arcane/meu-feitico     # vazamentos, cortes, aleatoriedade sem seed, frames lentos

Itere: olhe a folha de contato, corrija o pior e renderize de novo. Com --gif ou --mp4 você vê o movimento. node tools/serve.mjs abre a galeria localmente com os seus efeitos dentro.

Licença

MIT, código e efeitos: use em qualquer projeto, inclusive comercial. Algumas partes adaptam efeitos MIT do Hugo Duprez e do Hollow Crown. A fonte «Patch Pixel» da galeria é da Patch e não entra na MIT (veja NOTICE.md).

Checklist

• Galeria vista e efeitos escolhidos.
• Jogo web: npm i github:patch-gg/pixelfx. Outra engine: sprite sheets com --sheet.
• Paleta ajustada às cores do seu jogo.
• Skill instalada no Claude Code para os efeitos que faltarem.
• Aviso de licença MIT incluído no seu jogo.