Como posso criar um efeito 'flamejante' como na tela de título de Ocarina of Time?

102

Gostaria de recriar um efeito flamejante como o do logotipo na tela de título do jogo N64 'The Legend of Zelda: Ocarina of Time', mostrado abaixo:

insira a descrição da imagem aqui

Uma rápida olhada nas texturas usadas na ROM fornece uma única textura 32x32 que se parece com o efeito, mas não sei como essa imagem (supondo que essa seja a correta) se transforma no efeito visto no logotipo.

Como posso implementar algo semelhante?

nathanburns
fonte
2
Ajustei sua pergunta levemente para perguntar como obter um efeito semelhante, pois não consideramos perguntas como outros jogos implementaram resultados específicos para serem abordados no tópico.
Josh
Você está pedindo uma técnica processual ou efeitos pré-fabricados simples também são suficientes?
Bálint
Não tenho tempo e conhecimento para escrever uma resposta completa, mas talvez isso possa ser feito por meio de ciclismo de cores .
Alexandre Vaillancourt
@JoshPetrie Obrigado, isso é o que eu estava realmente depois
nathanburns
1
Pelo que me lembro da técnica, a parte difícil vem da criação da imagem com os pixels usando a paleta apropriada, não as cores em si. O ciclo é feito em código sobre um subconjunto das cores.
Alexandre Vaillancourt

Respostas:

248

Primeiro, faça uma máscara branca sobre preto do seu logotipo / texto e desfoque-a.

forma borrada do logotipo

Em seguida, crie uma textura de ruído sólido repetível (inclinável) (GIMP usado aqui)

textura de ruído

Use o filtro Map-> Tile ... para criar um padrão lado a lado 3x3 (neste exemplo, 128x128 x 3 = 384x384) para a próxima etapa para garantir que nossa textura ainda seja repetível - manteremos apenas a parte central.

imagem anterior lado a lado 3 por 3

Use Desfoque-> Desfoque de movimento ... para desfocar a textura para cima e manter apenas o centro 1/3 (de volta a 128x128)

ruído mais desfoque de movimento

Multiplique as duas texturas juntas na GPU e use isso para obter opacidade.

máscara combinada com ruído

Em seguida, anime-o movendo a textura do padrão para cima sobre a textura da máscara:

máscara combinada com ruído em movimento

Feito para a parte da animação.

Em seguida, você pode aplicar um mapa de gradiente (preto -> vermelho -> amarelo -> branco) para obter cores de fogo:

forma do logotipo com cores de fogo

Outras cores podem ser usadas para criar um fogo azul medonho, um campo de aura amarelo claro, um efeito mais esfumaçado etc.

Agora, se você combinar isso como aditivo sobre o logotipo e a renderização em 3D, obterá o efeito desejado:

fundo+ logotipo+ fogo=logotipo flamejante sobre fundo

O efeito pode escurecer ajustando a máscara e / ou o brilho do padrão e / ou a cor do vértice e / ou o mapa de cores degradê ao nível projetado.

Você pode até usar dois padrões de textura juntos (Máscara * Padrão de Fogo * Padrão de Fogo) em diferentes velocidades e direções para criar um efeito de fogo mais complexo.


Tecnicamente, no N64, eles podem ter criado uma aproximação da máscara usando uma malha triangular e uma cor de vértice em vez da textura da máscara devido à limitação de hardware do N64 em relação às texturas, mas o resultado final é o mesmo ((cor do vértice * textura do padrão) vs ( textura da máscara * textura padrão)).

Maquete de cores de vértice

Ainda podemos usar cores de vértice, mas 20 anos depois podemos facilitar nossa vida e usar apenas 2 texturas ou mais, até as GPUs móveis atuais podem lidar com uma textura cinza extra de 256x128 sem problemas.

Stephane Hockenhull
fonte
3
Acho que temos um vencedor - graças @StephaneHockenhull, este é exatamente o tipo de técnica que eu estava procurando
nathanburns
7
Vaca sagrada, esta é uma boa resposta!
John Gordon
1
"medonho" ou "fantasmagórico"?
CJ Dennis
1
Também tem o significado "aparência horrível". "Não use essa gravata; é horrível". Eu interpretei sua frase como "Outras cores podem causar um efeito muito ruim ou de fumaça". "Fantasmagórico" é inequívoco, mesmo que não seja tão forte quanto você gostaria.
CJ Dennis
1
Eu gostaria de poder lhe dar um segundo voto positivo pelo desenho muito sério do cavalo.
reconhecedor
2

Existem algumas maneiras de fazer isso, mas em cima da minha cabeça,

1) Tenha as chamas + o logotipo em uma única imagem e, essencialmente, a folha de sprite a anima.

2) Renderize o logotipo em uma camada da interface do usuário e coloque alguns efeitos de partículas da camada da interface ao redor.

Pela aparência dessa imagem, parece que existem três camadas de escudo e espada, chamas, texto (ordenados de trás para frente).

Haverá muitas maneiras de obter um efeito semelhante, que você escolherá no mecanismo em que está desenvolvendo e no que é capaz de implementar.

unknownSPY
fonte
0

Se as ROMs incluírem uma pequena textura de chama, acho que isso está sendo feito com algum tipo de efeito de partícula.

Isso seria feito primeiro colocando um sprite na tela para o título e o logotipo. Em seguida, coloque vários emissores de partículas que criam um efeito de chama atrás do sprite do título. Ou seja, a profundidade da tela Z / é tal que eles renderizam atrás do título.

Aqui está um exemplo do uso de efeitos de partículas do GameMaker para criar chamas que podem lhe dar algumas idéias sobre o potencial dessa abordagem ...

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

Tim Holt
fonte
Obrigado pela sugestão - supondo que a textura não fosse como as do tutorial ao qual você vinculou, mas preenchendo o espaço 32x32 sem transparência, existe uma maneira óbvia de fazer isso com partículas?
Nathanburns 25/10
Eu apenas criaria minha própria textura de chama para a partícula se o original não tiver transparência. Minha suposição aqui é que, a menos que o título original seja feito com um sprite animado completo (que inclui o efeito chama), provavelmente é um efeito de partícula.
Tim Holt
@TimHolt Você pode estar superestimando os recursos de hardware do Nintendo 64. A geração de um efeito de chama com aparência "sólida" dessa maneira provavelmente exigiria muito mais partículas do que o hardware foi capaz de renderizar.
duskwuff
1
@duskwuff - verdade, mas não acho que o usuário esteja implementando isso no hardware antigo. A resposta ainda é válida para qualquer sistema decente (moderno).
Tim Holt
@duskwuff a questão é como implementá-lo agora. Perguntas (e respostas) sobre como outros jogos fizeram algo estão fora de tópico aqui. Os recursos de hardware do N64 são irrelevantes aqui. (Veja o comentário de Josh Petries à pergunta)