Soldes d’Halloween : −40 % Pixor est à 19.99 $ 11.99 $ jusqu’au 4 novembre, sur itch.io →

Une planche de sprites d’explosion en pixel art

Les explosions sont parmi les effets les plus difficiles à animer à la main : un flash, une boule de feu qui gonfle et refroidit, une fumée qui se déploie. Pixor les dessine à partir de particules 3D, avec le même style que vos sprites, pour qu’elles appartiennent au même jeu.

Une explosion animée en pixel art : un flash pâle gonfle en boule de feu orange et rouge qui refroidit en fumée grise
pxr effect explosion:12

Ce qui fait qu’une explosion se lit bien

Une explosion en pixel art qui se lit bien à la vitesse du jeu a quelques parties, dans l’ordre :

  1. Un flash. Une ou deux images dans les couleurs les plus claires de la palette, petit et brillant. Il indique au joueur où le coup a porté.
  2. Une boule de feu qui gonfle vite, du jaune au rouge en passant par l’orange à mesure qu’elle refroidit.
  3. De la fumée qui se déploie et s’assombrit, avec les dernières flammes qui transparaissent.
  4. Des étincelles ou des débris projetés au début, un pixel ou deux chacun.

Dessinée à la main, c’est une douzaine d’images de formes qui doivent grandir, se chevaucher et changer de couleur sans sauter. La plupart des explosions dessinées à la main trichent avec moins d’images et des formes plates, et la plupart de celles faites dans un outil de particules puis réduites donnent des taches molles avec des centaines de couleurs, ce qui est l’opposé de ce que veut un jeu en pixel art.

En faire une dans Pixor

Sans aucun modèle, une seule ligne produit la planche :

pxr effect explosion:12 --preset selout --size 64 --export gif,json -o explosion.png

La même explosion en planche de sprites de douze images de 64 pixels, du flash à la fumée

Cela écrit explosion.png, une planche de douze images de 64×64, son JSON avec la place et la durée de chaque image, et un GIF pour la vérifier. Dans l’application, l’écran du projet vide propose Créer un effet à côté de Importer… et Parcourir les modèles gratuits.

L’explosion est faite de particules 3D, rendues par le même pipeline qu’un modèle : bandes de lumière, une rampe à teinte décalée par couleur, la palette, les lignes. Elle prend donc le style que vous lui donnez : --preset selout dessine les contours colorés du style selout, --palette my-game.hex la place sur votre palette, et le Style propre à un projet la fait correspondre exactement à vos sprites.

La modifier

L’explosion a les réglages de n’importe quel effet Pixor :

  • Images : le nombre après les deux-points, explosion:8 pour un éclat rapide, explosion:16 pour un plus lent.
  • Taille : --size est l’image en pixels. L’explosion ci-dessus fait 64 ; 32 ou 48 conviennent à la plupart des ennemis.
  • Énergie (--effect-energy) pour sa puissance, la taille de l’effet lui-même dans la scène (--effect-size) et son emplacement (--effect-at X,Y,Z).
  • Graine (--effect-seed) : la même graine donne toujours les mêmes pixels. Rendez les graines 1, 2 et 3 pour trois explosions qui ne sont pas des copies l’une de l’autre.

Sur un ennemi

Une explosion arrive généralement à quelque chose. Ajoutez-la à un modèle comme une action à part :

pxr render spaceship.glb --view top-down --size 64 --clip none \
  --effect explosion:12 --effect-hit 2 --export json -o ship.png

Dans l’application, ajoutez-la dans l’étape Scène avec + dans l’Arborescence, sous Effets. Elle devient un nœud Effet du graphe de Scène et une action nommée fx-explosion, avec sa propre ligne dans la planche. Son losange peut être déplacé dans la vue 3D pour la placer.

Trois réglages l’adaptent au moment :

  • Suivre un os : un flash de bouche au bout d’une arme, un souffle sortant d’une main.
  • Jouer sur un clip (--effect-clip) : l’explosion se joue pendant que le modèle fait quelque chose, comme un vaisseau qui se disloque.
  • Effet uniquement (--effect-alone) : dessine l’explosion sans le modèle, comme un calque à part, aligné sur la planche du personnage. Le jeu la joue par-dessus le sprite en place.

Image d’impact (--effect-hit 2) marque l’image où le coup porte. Le JSON la liste sous meta.pixor.hits, pour que le jeu puisse secouer la caméra, infliger des dégâts ou jouer le son exactement sur cette image.

De la fumée issue d’une simulation

L’explosion propre à Pixor est rapide et ne demande rien d’autre. Pour un souffle plus lourd, ajoutez un volume de fumée porté par l’émetteur de l’explosion : --effect explosion --volume puff:1.5@effect:1. Une simulation .vdb de Blender, EmberGen ou Houdini fonctionne au même endroit et est dessinée dans les mêmes bandes ; voir feu, fumée et eau depuis des VDB.

Les autres effets

La même commande produit le reste des effets d’un jeu : hit-spark, slash, magic-burst, heal, portal, smoke-puff, dust, fire-loop, rain, snow, fireflies et falling-leaves. Un fire-loop boucle pour les torches et les épaves en feu ; hit-spark et slash sont courts, pour chaque coup d’un combat. Pour un ennemi qui doit se briser ou brûler plutôt qu’exploser, voir le tutoriel des effets de mort. Toutes les options sont dans le manuel.

Questions

Combien d’images doit avoir une explosion en pixel art ?

De huit à douze à 12 images par seconde pour un coup normal ; les petites, comme l’impact d’une balle, peuvent en avoir quatre à six, et la mort d’un boss peut durer plus longtemps. L’explosion de Pixor fait 10 images si vous n’indiquez pas de nombre, comme dans explosion:12.

L’explosion peut-elle utiliser la palette de mon jeu ?

Oui. Elle est rendue avec le même Style qu’un modèle, donc --palette avec un fichier .hex, .gpl ou .png, ou le style propre à un projet, place chaque pixel de l’explosion sur ces couleurs.

La même commande donnera-t-elle la même explosion à chaque fois ?

Oui. Les particules viennent d’une graine : la même graine et les mêmes réglages donnent toujours les mêmes pixels. Changez --effect-seed pour une variation, afin qu’un jeu puisse avoir trois explosions qui ne sont pas des copies l’une de l’autre.

À lire ensuite

Essayez-le sur votre propre modèle, gratuitement dans votre navigateur, ou procurez-vous la version complète.

Essayer dans le navigateur Obtenir Pixor