Comment créer un effet «enflammé» comme sur l'écran de titre d'Ocarina of Time?


102

J'aimerais recréer un effet enflammé tel que celui du logo sur l'écran de titre du jeu N64 'The Legend of Zelda: Ocarina of Time', présenté ci-dessous:

entrez la description de l'image ici

Un rapide coup d'œil sur les textures utilisées dans la ROM fournit une seule texture 32x32 qui ressemble à l'effet, mais je ne sais pas comment cette image (en supposant que c'est la bonne) est transformée en effet visible sur le logo.

Comment puis-je mettre en œuvre quelque chose de similaire?


2
J'ai légèrement ajusté votre question pour savoir comment obtenir un effet similaire, car nous n'envisageons pas les questions demandant de quelle manière d'autres jeux ont mis en œuvre des résultats spécifiques.
Josh

Demandez-vous une technique procédurale ou de simples effets préconçus suffisent-ils également?
Bálint

Je n'ai pas le temps et les connaissances nécessaires pour écrire une réponse complète, mais peut - être il pourrait être fait par le biais du vélo de couleur .
Alexandre Vaillancourt

@JoshPetrie Merci, c'est ce que je voulais vraiment
nathanburns

1
De ce que je me souviens de la technique, la partie difficile provient de la création de l'image avec les pixels en utilisant la palette appropriée, pas les couleurs en soi. Le cycle est effectué en code sur un sous-ensemble de couleurs.
Alexandre Vaillancourt

Réponses:


248

Créez d’abord un masque blanc sur noir de votre logo / texte et brouillez-le.

forme floue du logo

Créez ensuite une texture de bruit solide répétable (mosaïque) (GIMP utilisé ici)

texture de bruit

Utilisez le filtre Carte-> Mosaïque ... pour créer un motif en mosaïque 3x3 (dans cet exemple, 128x128 x 3 = 384x384) pour la prochaine étape afin de vous assurer que notre texture est toujours reproductible - nous ne conserverons que la partie centrale.

image précédente mosaïque 3 par 3

Utilisez l'option Flou -> Flou directionnel ... pour rendre la texture floue vers le haut et ne conserver que le tiers central (retour à 128x128).

bruit plus flou de mouvement

Multipliez les deux textures ensemble sur le GPU et utilisez-les pour plus d'opacité.

masque combiné au bruit

Puis animez-le en déplaçant la texture du motif vers le haut sur la texture du masque:

masque combiné à un bruit en mouvement

Fait pour la partie animation.

Ensuite, vous pouvez appliquer une carte en dégradé (noir -> rouge -> jaune -> blanc) pour lui donner des couleurs de feu:

forme de logo avec des couleurs de feu

D'autres couleurs peuvent être utilisées pour créer un feu bleu épouvantable, un champ d'aura jaune clair, un effet plus enfumé, etc.

Maintenant, si vous combinez cela comme additif sur votre logo et le rendu 3D, vous obtenez l'effet souhaité:

Contexte+ logo+ Feu=logo flamboyant sur fond

L'effet peut être assombri en ajustant la luminosité du masque et / ou du motif, et / ou la couleur du sommet et / ou la palette de couleurs en dégradé au niveau souhaité.

Vous pouvez même utiliser deux motifs texturés ensemble (Masque * Motif de feu * Motif de feu) à différentes vitesses et directions pour créer un effet de feu plus complexe.


Techniquement, sur le N64, ils peuvent avoir créé une approximation du masque en utilisant un maillage en triangle et une couleur de vertex au lieu de la texture du masque, en raison de la limitation matérielle du N64 en ce qui concerne les textures, mais le résultat final est identique ((couleur du sommet * texture du motif) vs ( texture du masque * texture du motif)).

Maquette couleur vertex

Nous pouvons toujours utiliser la couleur des sommets, mais 20 ans plus tard, nous pouvons nous simplifier la vie et n'utiliser que 2 textures ou plus. Même les GPU mobiles actuels peuvent gérer une texture grise 256x128 supplémentaire sans problème.


3
Je pense que nous avons un gagnant - merci @ Stephane Hockenhull, c'est exactement le genre de technique que je cherchais
nathanburns

7
Sainte vache c'est une bonne réponse!
John Gordon

1
"horrible" ou "fantomatique"?
CJ Dennis

1
Il a également le sens "d'apparence terrible". "Ne porte pas cette cravate, c'est affreux". J'ai interprété votre phrase comme suit: "D'autres couleurs peuvent donner un effet vraiment mauvais ou fumé". "Fantomatique" est sans ambiguïté, même si ce n'est pas aussi fort que vous le souhaitez.
CJ Dennis

1
J'aimerais pouvoir vous donner un deuxième vote positif pour le tirage au sort le plus sérieux.
Reconnaissance

2

Il y a plusieurs façons de le faire, mais par coeur,

1) Faites en sorte que les flammes + le logo soient tous dans une image et qu’une feuille de sprite l’anime.

2) Rendez le logo dans un calque d'interface utilisateur et placez-y des effets de particules de calque d'interface utilisateur.

D'après l'apparence de cette image, il semble y avoir 3 couches de bouclier et d'épée, flammes et texte (classés de l'arrière vers l'avant).

Il y aura de nombreuses façons d'obtenir un effet similaire, votre choix dépendra du moteur que vous développez et de ce que vous êtes capable de mettre en œuvre.


0

Si les ROM comportent une petite texture de flamme, je suppose que cela se fait avec un effet de particule quelconque.

Cela se ferait en plaçant d'abord un sprite à l'écran pour le titre et le logo. Ensuite, placez un certain nombre d'émetteurs de particules créant un effet de flamme derrière le sprite du titre. C'est-à-dire que leur profondeur d'écran / Z est telle qu'ils apparaissent derrière le titre.

Voici un exemple d'utilisation des effets de particules GameMaker pour créer des flammes qui pourraient vous donner une idée du potentiel de cette approche ...

http://martincrownover.com/gamemaker-examples-tutorials/particles-fire/


Merci pour la suggestion - en supposant que la texture ne ressemble pas à celle du tutoriel auquel vous êtes lié mais remplisse l'espace 32x32 sans transparence, existe-t-il un moyen évident de le faire avec des particules?
nathanburns

Je créerais simplement ma propre texture de flamme pour la particule si l'original n'avait pas de transparence. Mon hypothèse est que, sauf si le titre original est créé avec une image-objet animée complète (qui inclut l'effet de flamme), il s'agit probablement d'un effet de particules.
Tim Holt

@TimHolt Vous surestimez peut-être les capacités matérielles de la Nintendo 64. Générer un effet de flamme ressemblant à un "solide" de cette manière aurait probablement nécessité beaucoup plus de particules que le matériel ne pouvait en restituer.
Crépuscule

1
@duskwuff - vrai, mais je ne pense pas que l'utilisateur l'implémente sur du vieux matériel. La réponse est toujours valable pour tout système décent (moderne).
Tim Holt

@Duskwuff la question est de savoir comment l'implémenter maintenant. Les questions (et les réponses) sur la façon dont les autres jeux ont fait quelque chose sont hors sujet ici. Les capacités matérielles du N64 ne sont pas pertinentes ici. (Voir le commentaire de Josh Petries à la question)
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.