pixelfx: 244 efeitos pixel art prontos, e golpes que finalmente pesam

O que é e porque importa

Estás a fazer um jogo em píxeis com o Claude. A personagem mexe-se, o inimigo perde vida, mas o golpe é um clarão plano: sem faíscas, sem fumo, sem peso. Animá-los à mão é lento, e se os pedes ao Claude numa única mensagem costumam sair medíocres.

O pixelfx é uma biblioteca de 244 efeitos pixel art, cada um um pequeno ficheiro de código: fogo, explosões, magia, moedas, meteorologia e muito mais. Nada de imagens: cada efeito desenha-se sozinho, por isso mudas-lhe a cor, espelha-lo e exporta-lo como sprite sheet, a imagem com todos os fotogramas em grelha que qualquer motor de jogo sabe animar. Além disso há uma skill, um pacote de instruções para o Claude Code, que usa a biblioteca e cria efeitos novos.

É gratuito, com licença MIT. Nasceu no GitHub a 30 de outubro de 2026 e em dois dias passou as 1.600 estrelas. É para quem faz jogos sozinho, no navegador ou no Godot, no Unity e afins.

1. Primeiro vê-os na galeria

Antes de instalar seja o que for, abre a galeria, https://patch-gg.github.io/pixelfx/: os 244 em movimento, com uma pesquisa. Clica num efeito:

• palette muda as cores com uma paleta pronta: o fogo fica azul num clique.
• new seed faz outra versão; mirror espelha-o; character esconde o manequim cinzento.
• sprite sheet dá-te a imagem com todos os fotogramas para guardar, com tamanhos e velocidade.
• Em baixo está o código para copiar.

Se o efeito de que precisas já existe, guardas o sprite sheet e vais ao passo 4.

2. Instala a skill no Claude Code

Precisas do Claude Code e do Node.js; o ffmpeg só para as pré-visualizações GIF e MP4. No Claude Code, manda estas duas linhas, uma de cada vez:

/plugin marketplace add patch-gg/pixelfx

/plugin install pixelfx@pixelfx

A primeira adiciona o marketplace, o catálogo de onde vem o plugin. A segunda abre a sua ficha: escolhe «Install for you» e fica em todos os teus projetos. Se te pedir, corre /reload-plugins.

Sem plugin: copia a pasta skills/pixelfx do repositório para ~/.claude/skills/. É a mesma skill.

Os comandos node tools/... não estão no plugin: correm numa cópia do repositório. Se não a encontrar, o Claude clona-a com o git ao lado do teu projeto; sozinho: git clone https://github.com/patch-gg/pixelfx.

3. Pedidos para copiar para o teu jogo

Abre o Claude Code na pasta do jogo e muda as partes entre [ ].

Adiciona [uma onda de gelo à volta dos pés] ao [ataque final do meu mago]. Primeiro procura na biblioteca do pixelfx o efeito mais adequado. Põe-no no jogo com a sua representação: preparação antes do golpe, paragem no impacto, inimigo que reage.

Faz cinco versões de [um brilho quando apanho uma moeda] e mostra-me as duas melhores, com uma pré-visualização animada. A que eu escolher pões no jogo.

Exporta as categorias fogo e explosões do pixelfx como sprite sheets para o [Godot] e depois explica-me como as importar: ancoragem, o filtro que mantém os píxeis nítidos, fotogramas por segundo.

Quando um efeito não existe, o Claude cria-o, vê como ficou e corrige-o:

Cria com o pixelfx um efeito novo: [uma bolha de veneno que incha, rebenta e deixa uma poça verde]. Primeiro vê os efeitos mais parecidos da biblioteca. Faz três rascunhos, renderiza-os, vê-os e corrige de cada vez o pior defeito. No fim corre a verificação e mostra-me o melhor.

A skill pede pelo menos três voltas de render e correção. Quando o jogo já existe, experimenta também:

• «Este efeito de golpe parece leve, sem peso. Torna-o mais seco.»
• «Dá a este feitiço uma preparação e faz o inimigo reagir.»

4. Põe-nos no teu jogo

Um jogo no navegador: o código

Para um jogo em JavaScript (canvas, Phaser, PixiJS, Kaplay, three.js) usas o código, que não tem dependências. Instalas a partir do GitHub, ou copias src/core e os efeitos de que precisas:

npm i github:patch-gg/pixelfx

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

const frame = createFrame(320, 180);
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");
  drawCharacters();
  fx.draw(frame, "front");
  composite(frame, img.data, backgroundColor);
  ctx.putImageData(img, 0, 0);
}

O efeito desenha-se atrás e à frente das personagens; depois amplias o canvas com image-rendering: pixelated.

Godot, Unity e os outros motores: os sprite sheets

Para Godot, Unity, GameMaker, Defold, LÖVE e Bevy, na tua cópia do repositório corres:

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

Saem um PNG transparente com os fotogramas em grelha e um JSON ao estilo Aseprite, que o Phaser e os importadores de Aseprite para Godot e Unity leem. Para algumas categorias, ou para a biblioteca toda em sheets/:

node tools/sheets.mjs fire explosions

1. Põe a ancoragem onde diz meta.pixelfx.pivot no JSON.
2. Importa com filtro nearest e sem compressão: nada de píxeis desfocados.
3. Corre a animação a meta.pixelfx.fps.

A luz vem integrada na imagem e resulta em fundos escuros: numa cena clara, muda a cor do efeito.

5. Muda a cor sem mexer no código

Cada efeito aceita uma palette: cores hexadecimais da mais escura à mais clara. Na galeria escolhes no menu; no terminal passas com --opts. A tocha, azul:

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

O anel de cura, cor-de-rosa, já como sprite sheet (as cores são um exemplo):

node tools/render.mjs holy/heal-aoe --sheet --opts '{"palette": ["#301","#614","#a26","#e5a","#fad","#fff"]}'

As paletas prontas têm nome (ice, poison, holy, arcane, gold, neon e outras), e ao Claude basta dizer «faz o fogo azul».

6. A representação: porque é que os teus golpes parecem falsos

Um efeito sozinho parece um autocolante: o que vende um golpe é o corpo à volta. Os 61 efeitos com personagem e os 12 movimentos completos do pixelfx escrevem-no no código, em quatro tempos:

1. A preparação, na direção oposta ao golpe.
2. O golpe: uma mudança clara de silhueta.
3. A paragem: no impacto para tudo, de 0,03 a 0,2 segundos, mais nos golpes pesados.
4. A recuperação: o alvo recua, a personagem volta à guarda.

Com o manequim cinzento da biblioteca usas createAct em vez de createFx, que para sozinho durante a paragem. Para um motor, node tools/act.mjs com o nome do efeito e --sheet põe tudo num sprite sheet, personagem incluída.

Com a tua própria personagem, o sprite sheet continua a ser só o efeito: a representação chega como dados e a animação fazes tu. Em meta.pixelfx.act, no JSON, estão windup (a preparação), recovery (a recuperação) e hits, com o momento do golpe (t) e quanto dura a paragem (freeze). Arranca o teu ataque windup segundos antes do efeito e, em cada golpe, para tudo, efeito e personagens, durante freeze segundos. A paragem funciona com qualquer efeito.

Os erros mais comuns

• Pedir um efeito novo numa única mensagem e ficar com a primeira versão: põe o Claude a trabalhar por voltas.
• Importar o sprite sheet com filtro linear ou compressão: os píxeis ficam desfocados.
• Pôr o efeito sem preparação e sem paragem: fica um autocolante.
• Usar sem os verificar os efeitos desenhados no corpo, como gelo e veneno: pintam o manequim cinzento, não a tua personagem.

Checklist

• Encontrei na galeria os efeitos de que preciso
• Instalei a skill no Claude Code
• Experimentei um dos pedidos no meu jogo
• Mudei a cor de um efeito com uma paleta
• Pus a preparação antes do ataque e a paragem no golpe

Perguntas frequentes