IdentifiantMot de passe
Mot de passe oublié ?Je m'inscris ! (gratuit)

Graphismes 2D pour les programmeurs

Explosions

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.

2 commentaires Donner une note à l´article (5)

Article lu   fois.

Les deux auteur et traducteur

Traducteur : Profil ProSite personnel

L'article

Publié le 

Version PDF Version hors-ligne

ePub, Azw et Mobi

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

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.

Image non disponible
Image non disponible


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


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


dupliquez et tournez la forme. Image non disponible
Image non disponible


Répétez le processus pour former une étoile.
Image non disponible


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


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


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


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


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

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.

Image non disponible
Image non disponible


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


Dupliquez les formes puis variez leur rotation et dimension,
Image non disponible


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


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


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


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


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


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,
Image non disponible


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

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

Image non disponible
Image non disponible


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


un dégradé radial, Image non disponible
Image non disponible


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


Ces quatre balles vont former la base du volume du nuage.
Image non disponible


Dupliquez la forme puis
changez la dimension et la rotation. Image non disponible
Image non disponible


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


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.
Image non disponible


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


et ajoutez quelques débris.
Image non disponible

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.

Image non disponible
Image non disponible


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


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


Ajoutez plus de cercles,
Image non disponible


Pour construire le nuage.
Image non disponible


Dupliquez la forme puis changez sa dimension et sa rotation. Image non disponible
Image non disponible


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


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


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


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

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.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

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 ni 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.