Graphismes 2D pour les programmeurs

Explosions

Chris Hildenbrand

Traducteur

Alexandre Laurent

On m'a demandé d'écrire un tutoriel sur les explosions, chose qui ne me semblait pas compliquée jusqu'à ce que je commence… De plus en plus, les jeux utilisent des effets de particules pour la plupart des explosions, donc réaliser une explosion à la main a été un petit défi.

Commentez

- Titre : Graphismes 2D pour les programmeurs

- Auteur : Chris Hildenbrand

- Traducteur : Alexandre Laurent

- Parution : 10 janvier 2015

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2015 Chris Hildenbrand. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. De retour en fanfare

- II. Remerciements

- III. Commenter

I - De retour en fanfare

On m'a demandé d'écrire un tutoriel sur les explosions, chose qui ne me semblait pas compliquée jusqu'à ce que je commence… De plus en plus, les jeux utilisent des effets de particules pour la plupart des explosions, donc réaliser une explosion à la main a été un petit défi.

J'ai trouvé une simple et très générique explosion et à partir de là, j'ai ajouté et ajouté encore plus de détails. Commençons par la première explosion.

Utilisez l'outil de ligne pour créer une forme pointue.

Déplacez le point de pivot au plus près du nœud en bas à droite,

dupliquez et tournez la forme.

Répétez le processus pour former une étoile.

Déplacez les nœuds extérieurs pour créer une forme moins régulière. Supprimer quelques morceaux peut vous aider.

Combinez les deux formes avec l'option Chemin/Union (Ctrl + +).

Supprimez les nœuds du centre étant trop proche du trou (si tant est qu'il y en ait un).

Dupliquez la forme et donnez-lui une couleur plus claire (dans ce cas allant du rouge à l'orange puis au jaune clair).

Ajustez les nœuds pour éviter d'avoir trop de recouvrement et « remplissez » les zones vides.

C'est une explosion cartoon très générique – rapide et facile à créer (et à animer – en redimensionnant les éléments et en les noircissant ou bien en les éclairant suivant la progression de l'explosion).

Habituellement l'explosion d'objets produit bien plus qu'un flash de lumière. La poussière, les nuages de fumée et les débris font partie d'une bonne explosion. Ajoutons-en.

Commençons la seconde explosion avec quelques cercles pour créer un nuage derrière le flash.

Dupliquez les formes puis variez leur rotation et dimension,

pour former un nuage. Remplissez le trou dans le centre (si tant est qu'il y en ait un) avec un autre cercle.

Ajoutez encore quelques cercles à la forme et groupez le tout.

Utilisez l'outil de ligne droite pour dessiner une étoile irrégulière.

Sélectionnez les nœuds intérieurs et rendez-les lisses. Cela va sûrement exagérer l'effet et nécessiter quelques retouches.

Ajustez les nœuds pour créer une forme pointue en manipulant les nœuds.

Dupliquez la forme et donnez-lui une autre couleur, plus claire. Comme la forme est inégale, vous devez manipuler les nœuds pour amener la forme plus claire,

en ligne avec la forme sombre. Placez le flash de lumière au-dessus du nuage et ajoutez quelques lignes de mouvement.

Cela conserve un aspect très cartoon. Essayons autre chose un peu moins « plat » et donnons du volume à notre explosion.

La troisième explosion est une variation de la précédente. Commencez avec un cercle,

un dégradé radial,

et quatre variations du remplissage. Le centre du dégradé radial ne devrait pas être au centre du cercle.

Ces quatre balles vont former la base du volume du nuage.

Dupliquez la forme puis
changez la dimension et la rotation.

En définissant le dégradé hors du centre, vous pouvez obtenir une lumière venant du centre du nuage.

En ajoutant plus de cercles, vous apportez plus de complexité et de réalisme à votre explosion. Les balles forment une sorte d'effet de particules.

Ajoutez au centre le flash de lumière venant de la partie précédente,

et ajoutez quelques débris.

Cette explosion est un peu plus compliquée à animer. Vous voudriez commencer par une lumière centrale plus petite qui grossira et qui aura de plus en plus de cercles tout en s'assombrissant sur les parties extérieures. Le flash dans le centre n'est qu'un flash, ne le gardez pas trop longtemps ou cela ressemblera plus à une source de lumière qu'une explosion. Au fur et à mesure que cette explosion disparaît, les cercles noirs deviendront gris et noirs, diminueront et se sépareront (soit en implosant, soit en retombant sur le sol).

Comme si cela ne suffisait pas, ajoutez-en un autre. Proche de celle d'avant, mais plus petite, détaillée et avec quelques ombrages.

Faisons-en un autre basé sur la même méthode et avec des couleurs similaires.

Cette fois, gardez le nuage plus concentré en utilisant des cercles plus larges pour la forme de base.

Ajoutez plus de cercles,

Pour construire le nuage.

Dupliquez la forme puis changez sa dimension et sa rotation.

Créez deux cercles et combinez-les avec la commande Chemin/Différence pour créer la lumière.

Remplissez la « lune » avec un rayon de lumière jaune transparent et placez-le sur une partie des cercles.

Ajoutez au centre le flash de lumière venant de la partie précédente,

et ajoutez des lignes de mouvement. Essayez différentes formes et couleurs pour créer une explosion vous convenant.

J'espère que vous avez aimé ce tutoriel autant que je me suis amusé à le faire… C'est simplement très amusant de balancer les choses avec style et j'ai dû m'arrêter moi-même et essayer de rattraper mon travail en retard (avant d'écrire le prochain tutoriel qui dévaste déjà mon imagination).

Amusez-vous bien.

II - Remerciements

Cet article est une traduction autorisée de l'article paru sur 2D Game Art for programmers. Je remercie chaleureusement Chris Hildenbrand de nous avoir permis de le traduire.

III - Commenter

Vous pouvez commenter cet article ou présenter vos réalisations sur le forum.