RECURSOS PARA CRIADORES / PIXEL ART
PixelFX, da Patch, desenha animações por código: fogo, magia, itens e muito mais. O catálogo da revisão verificada reúne 244 efeitos. O JavaScript editável permite que uma IA ajuste, renderize e refine os efeitos. PixelFX fornece o retorno visual; as regras continuam no seu jogo.
Fonte verificada: 5 de novembro de 2026 · revisão a841596
O código original roda localmente no navegador. Ajuste cores e velocidade e pressione Reproduzir. Efeitos únicos param ao terminar. Esta prévia não inclui a atuação do personagem.
Exporta a 20 FPS no tamanho nativo, com suas cores e velocidade. Baixe os dois arquivos: o JSON inclui tempos, pivô e avisos MIT. Não inclui animação do personagem.
Escolha um dos três efeitos, uma paleta e a velocidade. Gere a folha transparente e os metadados no navegador, sem conta nem créditos. A ferramenta renderiza código existente. Para efeitos novos, altere os fontes; para um jogo completo, continue no Studio.
Comece pelo evento que precisa comunicar. Um efeito chamativo pode esconder inimigos ou uma recompensa. Compare estes três usos com seu cenário e o tamanho dos personagens.
fire/campfireUma fogueira pode marcar acampamentos, pontos de controle e áreas seguras. Mantenha seu brilho abaixo dos impactos importantes e pare as atualizações quando a cena estiver inativa. O catálogo oficial oferece outros ambientes e climas.
ice/frost-novaDefina ativação, dano e recuperação antes de ajustar a nova. O anel visível não implementa colisão, dano nem tempo de recarga. Sincronize essas mecânicas na lógica do jogo.
pickups/collect-burstAcione collect burst no local do item após confirmar a coleta. Dê pontos uma vez e remova o efeito terminado. Se coletas simultâneas esconderem o jogador, limite a quantidade ou suavize a paleta.
Planeje um ciclo pequeno: andar por uma sala, coletar cinco cristais e reiniciar ao vencer. Defina teclado ou toque.
Associe efeitos a eventos: fogueira para ambiente, explosão para coleta e nova para habilidade. Separe ambiente, sucesso e perigo.
Planeje no Studio ou use o exemplo no projeto. Forneça fontes ou recursos exportados; só um link não comprova que o assistente importou a biblioteca.
Teste uma rodada, coletas repetidas e reinício. Confira transparência em fundos claros e escuros, pivô e legibilidade móvel. Preserve a versão funcional antes de alterar o visual.
Instale em um projeto JavaScript com um empacotador ESM como Vite. O exemplo cria um Canvas: clique ou toque para ativar o efeito. No jogo existente, desenhe em uma camada transparente e acione a partir de um evento confirmado. Dano, colisões e pontuação permanecem na lógica do jogo.
npm install github:patch-gg/pixelfx#a84159688af3ca37a4be05a0d422b94451b2e24eimport { 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);Clone o repositório, instale as ferramentas e renderize o efeito. A exportação gera um atlas PNG transparente e JSON no estilo Aseprite com duração dos quadros e pivô. Use um importador compatível: importar só o PNG não aplica esses dados. Consulte os requisitos das ferramentas no guia oficial.
git clone https://github.com/patch-gg/pixelfx.git
cd pixelfx
git checkout a84159688af3ca37a4be05a0d422b94451b2e24e
npm install
node tools/render.mjs ice/frost-nova --sheetO repositório inclui um plugin para Claude Code. Execute estes dois comandos dentro do Claude Code. Para outro assistente, forneça os arquivos escolhidos e o prompt abaixo. Esta página não instala o plugin no Studio nem garante importação automática do GitHub.
/plugin marketplace add patch-gg/pixelfx
/plugin install pixelfx@pixelfxAdicione o efeito collect-burst do PixelFX ao meu jogo de navegador. Preserve controles, pontuação e colisões. Acione uma única vez por item coletado, com semente fixa e paleta azul. Use uma camada transparente, remova o efeito ao terminar e limpe os efeitos ao reiniciar. Preserve os avisos MIT. Mostre os arquivos alterados e como verificar repetição, coletas simultâneas e desempenho móvel. Sem o código-fonte, peça os arquivos em vez de inventar a API.
Ajuste a paleta ao fundo e a velocidade ao impacto. Use uma semente fixa nas comparações. Teste vários efeitos simultâneos, limpeza ao reiniciar e telas pequenas. Considere movimento reduzido. Uma prévia bonita não comprova adequação nem desempenho no seu jogo.
Renderiza três efeitos procedurais existentes, sem modelo de imagem ou criação de animação a partir de texto. PixelFX tem uma skill separada para Claude Code escrever efeitos; o Studio é o gerador de jogos com IA do site.
Guarde-os juntos. PNG contém a grade; JSON define retângulos, duração e pivô. Use um importador compatível ou leia os retângulos no seu código. Desative a suavização de texturas e confira a ancoragem.
PixelFX combina cor e luz aditiva. O PNG transparente fixa o resultado em RGBA, que pode diferir da renderização aditiva na cena. Compare no fundo real antes de escolher a mistura. Poses do personagem não são exportadas.
Aqui você exporta recursos visuais. Para a jogabilidade, abra o Studio, descreva objetivo e controles e confirme o plano. Planejar após entrar é grátis; gerar e revisar usa Studio Credits. PixelFX não é instalado automaticamente, e os arquivos não foram testados em todos os motores.
Código e efeitos usam MIT. Preserve os avisos de direitos autorais e permissão ao redistribuir, incluindo os aplicáveis a Hugo Duprez e Hollow Crown. A fonte Patch Pixel em gallery/fonts está excluída e não é usada aqui. A Patch mantém o PixelFX; este guia é independente.
OpenGame / Fonte verificada: 5 de novembro de 2026 · revisão a841596