Aller au contenu principal
OpenGame

RESSOURCES DE CRÉATION / PIXEL ART

Générateur PixelFX : effets pixel art pour jeux

PixelFX, créé par Patch, dessine des animations par code : feu, sorts, objets et autres effets. Le catalogue de la révision vérifiée contient 244 effets. Le JavaScript modifiable permet à une IA de retoucher, rendre et améliorer un effet. PixelFX fournit le retour visuel ; votre jeu garde ses règles.

Générer la planche ↓Explorer tous les effets ↗Télécharger le ZIP officiel ↓

Source vérifiée le 5 novembre 2026 · révision a841596

JavaScriptCanvasPNG + JSONMIT
PIXELFX / LIVE CANVAS

Essayez trois véritables effets PixelFX

Le code original fonctionne localement dans votre navigateur. Ajustez couleurs et vitesse, puis lancez la lecture. Les effets ponctuels s’arrêtent à leur fin. Cet aperçu exclut les animations du personnage.

Export à 20 images/s en taille native, avec vos couleurs et votre vitesse. Téléchargez les deux fichiers : le JSON contient durées, pivot et mentions MIT. Aucune animation de personnage.

Générateur PixelFX : créez une planche de sprites réutilisable

Choisissez un des trois effets, une palette et une vitesse. Générez une planche transparente et ses métadonnées dans le navigateur, sans compte ni crédits. Cet outil rend du code existant. Pour un nouvel effet, modifiez les sources ; pour un jeu complet, passez à Studio.

Générer la planche ↑Préparer un jeu dans Studio →

Choisir un effet PixelFX selon son rôle

Commencez par l’événement à communiquer au joueur. Un effet spectaculaire peut masquer les ennemis ou une récompense. Comparez ces trois usages avec votre décor et la taille de vos personnages.

fire/campfire

Ambiance : feu de camp et boucles

Le feu peut marquer un campement, un point de contrôle ou une zone sûre. Gardez-le moins lumineux que les impacts importants et arrêtez ses mises à jour quand la scène est inactive. Le catalogue officiel propose d’autres ambiances et météos.

ice/frost-nova

Combat : nova de givre et capacités

Fixez activation, dégâts et récupération avant de régler la nova. L’anneau visible ne gère ni collisions, ni dégâts, ni temps de recharge : synchronisez ces mécanismes dans votre jeu.

pickups/collect-burst

Récompenses : éclat de collecte

Lancez collect burst à la position de l’objet après confirmation du ramassage. Accordez les points une fois et retirez l’effet terminé. Si plusieurs éclats masquent le joueur, limitez leur nombre ou adoucissez les couleurs.

Intégrer PixelFX à un jeu en quatre étapes

  1. Prévoyez une petite boucle : se déplacer dans une pièce, ramasser cinq cristaux et recommencer après la victoire. Définissez clavier ou commandes tactiles.

  2. Associez chaque effet à un événement : feu pour l’ambiance, éclat pour la collecte, nova pour une capacité. Distinguez ambiance, réussite et danger.

  3. Préparez le jeu dans Studio ou utilisez l’exemple dans votre projet. Fournissez sources ou exports ; un lien seul ne prouve pas que l’assistant a importé la bibliothèque.

  4. Testez une partie, les collectes répétées et le redémarrage. Vérifiez bords transparents sur fonds clairs et sombres, pivot et lisibilité mobile. Gardez la version fonctionnelle avant de la modifier.

01 / JAVASCRIPT

Utiliser PixelFX dans un jeu web

Installez-le dans un projet JavaScript avec un bundler ESM comme Vite. L’exemple crée un Canvas : cliquez ou touchez pour déclencher l’effet. Dans votre jeu, dessinez-le sur une couche transparente et déclenchez-le depuis un événement confirmé. Dégâts, collisions et score restent dans la logique du jeu.

npm
npm install github:patch-gg/pixelfx#a84159688af3ca37a4be05a0d422b94451b2e24e
JavaScript / Canvas
JavaScript
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);
02 / PNG + JSON

Exporter des planches de sprites PixelFX

Clonez le dépôt, installez les outils et rendez l’effet. L’export produit un atlas PNG transparent et du JSON au format Aseprite avec durées et pivot. Utilisez un importateur compatible : le PNG seul n’applique pas ces données. Consultez les prérequis des outils dans le guide officiel.

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

Personnaliser PixelFX avec l’IA

Le dépôt inclut un plugin Claude Code. Exécutez ces deux commandes dans Claude Code. Pour un autre assistant, fournissez les fichiers choisis et la consigne ci-dessous. Cette page n’installe pas le plugin dans Studio et ne garantit pas l’import automatique depuis GitHub.

Claude Code
/plugin marketplace add patch-gg/pixelfx
/plugin install pixelfx@pixelfx
Personnaliser PixelFX avec l’IA

Ajoute l’effet PixelFX collect-burst à mon jeu web. Préserve commandes, score et collisions. Déclenche-le une seule fois par objet ramassé, avec une graine fixe et une palette bleue. Utilise une couche transparente, supprime l’effet terminé et vide les effets au redémarrage. Conserve les mentions MIT. Montre les fichiers modifiés et les vérifications pour la relecture, les collectes simultanées et les performances mobiles. Sans le code source, demande-moi les fichiers au lieu d’inventer l’API.

Préparer un jeu dans Studio →

Vérifier l’effet dans le jeu

Adaptez palette et vitesse au décor et au moment de l’impact. Une graine fixe facilite la comparaison. Testez plusieurs effets, le nettoyage au redémarrage et les petits écrans. Tenez compte de la réduction des animations. Un bel aperçu ne prouve ni l’adéquation ni les performances dans votre jeu.

Questions sur le générateur PixelFX

Est-ce un générateur de pixel art par IA ?

Il rend trois effets procéduraux existants, sans modèle d’image ni création d’animation à partir de texte. PixelFX propose séparément une skill Claude Code pour écrire des effets ; Studio est le générateur de jeux par IA du site.

Comment utiliser le PNG et le JSON ?

Placez-les ensemble. Le PNG contient la grille ; le JSON décrit rectangles, durées et pivot. Utilisez un importateur compatible ou lisez les rectangles dans votre code. Désactivez le lissage des textures et vérifiez le point d’ancrage.

Pourquoi les halos ou bords sombres changent-ils ?

PixelFX combine couleur et lumière additive. Le PNG transparent fige le résultat en RGBA, ce qui peut différer du rendu additif dans votre scène. Comparez sur votre décor avant de choisir le mélange. Les poses du personnage ne sont pas exportées.

Puis-je créer un jeu complet ?

Cet outil exporte des ressources visuelles. Pour le gameplay, ouvrez Studio, décrivez objectifs et commandes puis confirmez le plan. La planification connectée est gratuite ; générations et révisions utilisent des Studio Credits. PixelFX n’est pas installé automatiquement et tous les moteurs n’ont pas été testés.

Licence et attribution de PixelFX

Code et effets sont sous licence MIT. Conservez les mentions de copyright et d’autorisation à la redistribution, y compris celles applicables à Hugo Duprez et Hollow Crown. La police Patch Pixel de gallery/fonts est exclue et n’est pas utilisée ici. Patch maintient PixelFX ; ce guide est indépendant.

Sources officielles

OpenGame / Source vérifiée le 5 novembre 2026 · révision a841596