¿Cómo puedo crear un efecto 'flameante' como en la pantalla de título de Ocarina of Time?


102

Me gustaría recrear un efecto llameante como el del logotipo en la pantalla de título del juego de N64 'The Legend of Zelda: Ocarina of Time', que se muestra a continuación:

ingrese la descripción de la imagen aquí

Una mirada rápida a las texturas utilizadas en la ROM proporciona una textura única de 32x32 que se parece al efecto, pero no sé cómo esa imagen (suponiendo que sea la correcta) se transforma en el efecto que se ve en el logotipo.

¿Cómo puedo implementar algo similar?


2
Ajusté su pregunta ligeramente para preguntar cómo lograr un efecto similar, ya que no consideramos preguntas sobre cómo otros juegos implementaron resultados específicos para estar en el tema.
Josh

¿Está pidiendo una técnica de procedimiento o también basta con efectos prefabricados simples?
Bálint

No tengo el tiempo y el conocimiento para escribir una respuesta completa, pero tal vez podría hacerse a través de ciclos de color .
Alexandre Vaillancourt

@JoshPetrie Gracias, eso es lo que realmente
buscaba

1
Por lo que recuerdo de la técnica, la parte difícil proviene de crear la imagen con los píxeles utilizando la paleta adecuada, no los colores en sí. El ciclo se realiza en código sobre un subconjunto de los colores.
Alexandre Vaillancourt

Respuestas:


248

Primero, haga una máscara blanca sobre negro de su logotipo / texto y desenfoque.

forma borrosa del logo

Luego, cree una textura de ruido sólido repetitiva (enlosable) (GIMP utilizado aquí)

textura de ruido

Use el filtro Mapa-> Mosaico ... para crear un patrón de mosaico de 3x3 (en este ejemplo, 128x128 x 3 = 384x384) para el siguiente paso para garantizar que nuestra textura aún sea repetible: mantendremos solo la parte central.

imagen anterior en mosaico 3 por 3

Use Desenfoque-> Desenfoque de movimiento ... para desenfocar la textura hacia arriba y mantener solo el centro 1/3 (de nuevo a 128x128)

ruido más desenfoque de movimiento

Multiplique ambas texturas juntas en la GPU y úsela para opacidad.

máscara combinada con ruido

Luego animarlo moviendo la textura del patrón hacia arriba sobre la textura de la máscara:

máscara combinada con ruido en movimiento

Hecho para la parte de animación.

Luego puede aplicar un mapa de degradado (negro -> rojo -> amarillo -> blanco) para darle colores de fuego:

forma de logotipo con colores fuego

Se pueden usar otros colores para crear un fuego azul horrible, un campo de aura amarillo claro, un efecto más ahumado, etc.

Ahora, si combina esto como aditivo sobre su logotipo y el render 3D, obtendrá el efecto deseado:

antecedentes+ logo+ fuego=logotipo llameante sobre fondo

El efecto puede oscurecerse ajustando la máscara y / o el brillo del patrón, y / o el color del vértice, y / o el mapa de color degradado al nivel diseñado.

Incluso puede usar dos patrones texturizados juntos (Máscara * Patrón de fuego * Patrón de fuego) a diferentes velocidades y direcciones para crear un efecto de fuego más complejo.


Técnicamente en el N64 pueden haber creado una aproximación de la máscara usando una malla triangular y un color de vértice en lugar de la textura de la máscara debido a la limitación de hardware del N64 con respecto a las texturas, pero el resultado final es el mismo ((color de vértice * textura de patrón) vs ( textura de máscara * textura de patrón)).

Maqueta de color de vértice

Todavía podemos usar el color del vértice, pero 20 años después podemos facilitarnos la vida y solo usar 2 texturas o más, incluso las GPU móviles de hoy en día pueden manejar una textura gris adicional de 256x128 sin problema.


3
Creo que tenemos un ganador - gracias @StephaneHockenhull, este es exactamente el tipo de técnica que estaba buscando
nathanburns

77
Santa vaca, esta es una buena respuesta!
John Gordon

1
"horrible" o "fantasmal"?
CJ Dennis

1
También tiene el significado "horrible en apariencia". "No uses esa corbata; es horrible". Interpreté tu oración como "Otros colores pueden dar un efecto realmente malo o de humo". "Fantasmal" no es ambiguo, incluso si no es tan fuerte como te gustaría.
CJ Dennis

1
Desearía poder darte un segundo voto por el muy serio sorteo de caballos.
reconocedor

2

Hay algunas maneras de hacerlo, pero fuera de mi cabeza,

1) Haga que las llamas + el logotipo estén en una sola imagen y esencialmente la hoja de sprites lo anime.

2) Renderice el logotipo en una capa de IU y coloque algunos efectos de partículas de capa de IU a su alrededor.

Por el aspecto de esa imagen, parece que hay 3 capas de escudo y espada, llamas, texto (ordenado de atrás hacia adelante).

Habrá muchas maneras de obtener un efecto similar, el que elija dependerá de qué motor está desarrollando y qué puede implementar.


0

Si las ROM incluyen una pequeña textura de llama, entonces supongo que esto se está haciendo con algún tipo de efecto de partículas.

Esto se haría colocando primero un sprite en la pantalla para el título y el logotipo. Luego, coloque varios emisores de partículas que creen un efecto de llama detrás del sprite del título. Es decir, su profundidad de pantalla Z / es tal que rinden detrás del título.

Aquí hay un ejemplo del uso de los efectos de partículas GameMaker para crear llamas que podrían darle algunas ideas sobre el potencial de este enfoque ...

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


Gracias por la sugerencia: suponiendo que la textura no fuera como las del tutorial al que se ha vinculado, sino que llenó el espacio de 32x32 sin transparencia, ¿hay una manera obvia de hacer esto con partículas?
nathanburns

Simplemente crearía mi propia textura de llama para la partícula si el original no tiene una transparencia. Mi suposición aquí es que, a menos que el título original se haga con un sprite animado completo (que incluye el efecto de llama), probablemente sea un efecto de partículas.
Tim Holt

@TimHolt Puede que esté sobreestimando las capacidades de hardware de la Nintendo 64. Generar un efecto de llama de aspecto "sólido" de esta manera probablemente habría requerido muchas más partículas de las que el hardware fue capaz de generar.
duskwuff

1
@duskwuff: cierto, pero no creo que el usuario esté implementando esto en hardware antiguo. La respuesta sigue siendo válida para cualquier sistema decente (moderno).
Tim Holt el

@duskwuff la pregunta es cómo implementarlo ahora. Las preguntas (y respuestas) sobre cómo otros juegos hicieron algo están fuera de tema aquí. Las capacidades de hardware del N64 son irrelevantes aquí. (Vea el comentario de Josh Petries a la pregunta)
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.