sexta-feira, 21 de agosto de 2015

Mother 4 Update #2: Focando no Fundo

Fala pessoal!
Continuando as traduções dos posts no Blog de Mother 4

Update #2: Focando no fundo
Ei pessoal, Dave aqui. Nesta atualização eu vou lhes falar tudo sobre os fundos de batalha. Muitas pessoas estão curiosas sobre eles, então a equipe e eu decidimos por vocês a parte disso. É um pouco matemático, por isso, se você não é do tipo que acha fórmulas interessantes, você pode querer pular para o final. (Mas você poderia pelo menos dar ao resto do post uma olhada por cima!)

Teoria
Se você não está familiarizado, a série MOTHER caracteriza fundos que fluem e se movimentam não muito diferente de uma lâmpada de lava. Eles são fáceis de se imaginar, mas como você cria um? Primeiro, precisamos identificar o que estamos tentando fazer.

De uma forma mais simples, os cenários são apenas pontos embaralhados de uma maneira específica. Então precisamos definir como eles serão embaralhados. Para descrever isso, eu uso a seguinte fórmula:
Onde dx é a distância na direção x para mover o ponto, y é a coordenada y do ponto, e a, f, s, e t, são a amplitude, frequência, escala, e tempo, respectivamente. Amplitude, frequência e escala são geralmente constantes, enquanto o tempo aumenta conforme o tempo passa, como de costume.

Implementação

Dando um passo adiante, queremos aplicar esta fórmula a cada ponto da tela. Ou seja, cada pixel. Para cada linha de pixels, temos uma distância diferente para mover o ponto. Usando esse método, podemos criar os efeitos de ondulação que estamos procurando. A fórmula também pode ser usada para movimentar pontos na direção y, para efeito de compressão. Adicione um multiplicador e um pouco de matemática modular, e você terá um efeito entrelaçado.

Para criar esse efeito, na prática, você precisará escrever algum código. Na minha implementação, eu uso shaders de fragmento. Um shader de fragmento é o código que é executado no GPU e é muito útil para mover os pixels. (Um fragmento é um tipo de um pixel antes dele chegar na sua tela.) A fórmula acima acaba se parecendo com esse código, neste caso GLSL:
float distx = amp * sin(freq * y + scale * time);
Muito semelhante, não é? Usando a fórmula, eu calculei o deslocamento de cada pixel da imagem. Eu copiei um pixel da imagem, e o coloquei em um buffer, mas compensando a sua posição original. Fazendo isso para cada pixel, a imagem final distorcida é criada.

 

se transforma nisso... 

 

Dando um passo adiante, eu uso o buffer duplo para desenhar qualquer número de camadas de fundo uma em cima da outra. Usando os modos de mesclagem (somar, subtrair, tela, multiplicar, etc.) para combinar as camadas, você pode criar alguns efeitos interessantes e bonitos. Eu não quero aborrecê-lo com todos os detalhes, então eu vou mostrá-los em vez disso:
 
 
 
 
 

Uma ferramenta para a Equipe de Arte
 
Eu construí uma ferramenta para a equipe de arte para criar fundos de batalha sem realmente precisar entender como eles funcionam. Eles só precisam escolher algumas opções, clique em alguns botões, e depois passar o resto do dia movendo os sliders até que o fundo fique direito. Claro, essa ferramenta não é o que realmente renderiza os fundos de batalha para o jogo, ela apenas faz um arquivo que eu posso usar com o gerador para criar os planos de fundo do jogo. O arquivo contém os parâmetros para o fundo, como a amplitude, frequência e escala. A ferramenta em si não seria de muita utilidade para o público em geral.

Além disso, antes de terminar o post, um fato interessante: o efeito do oceano e a neve que você viu no vídeo "modo atrativo" são na verdade fundos de batalha reaproveitados. Fundos de batalha podem assumir papéis de pacifistas também, você sabe.

2 comentários:

Anônimo disse...

Sera que era assim que os desenvolvedores faziam os fundos de Earthbound e Mother 3?

Unknown disse...

Hmmm interessante.