O TEMA DO FÓRUM ESTÁ EM MANUTENÇÃO. FEEDBACKS AQUI: ACESSAR

Efeito de água animada por Lycanimus!

Iniciado por Lycanimus, 15/06/2014 às 19:38

15/06/2014 às 19:38 Última edição: 18/07/2014 às 15:09 por Lycanimus

Resolvi fazer essa aula pra ensinar a galera a criar seus próprios efeitos de animações de água!
Bom, então vamos lá!

[box2 class=titlebg title=O que você vai precisar:]
Adobe Photoshop e Gimp(Opcional)
Modern Algebra's Animated Parallax script
Woratana's Multiple fogs script (Script opcional)
Celianna's Farm and nature Tileset (Resources opcional)

Tempo e um pouco de paciência!
[/box2]

[box2 class=titlebg title=Notas:]
Provavelmente há milhares de jeitos de se fazer animações em água, mas eu espero que esse jeito que vou ensinar seja de grande ajuda, principalmente a quem não tinha nenhuma noção por onde começar!
Vou postar pequenos vídeos e comentar cada um deles, para ver os vídeos aconselho ver no youtube para uma maior resolução!

Esse tutorial eu retirei grande parte do tutorial do AK47lol - Link original - http://www.rpgmakervx.net/index.php?showtopic=48327  porém lá ele explica tudo pelo Photoshop, no meu tutorial estarei explicando a maioria das coisas a fazer pelo GIMP, para vocês terem novos métodos de aprendizado, e utilizar qual preferirem!
[/box2]

[box2 class=titlebg title=Primeiro Passo - Começando]



Abra o Photoshop ou o Gimp e crie um mapa com as medidas que deseja! (Eu vou começar usando o Gimp, pois acho mais fácil trabalhar com os layers nele, mas fica a seu critério, e no meu exemplo vou fazer um mapa de 544x480, mas fica a seu critério também o tamanho que deseja)



Após definir o tamanho do seu mapa, crie um layer com o chão que deseja! (Eu vou deixar essa parte com vocês)
E abra os recursos que deseja utilizar, eu recomendo usar os da Celianna de Farm e Nature.
[/box2]


[box2 class=titlebg title=Segundo Passo - Criando um Lago]



Vá no tile da Celianna ou em algum outro que você escolheu e selecione a água, copie e salve como textura!
Após salvar sua textura de água, crie um novo layer acima do layer de chão que você criou, em seguida selecione a textura de água que você copiou e pinte todo esse novo layer com a textura de água!



Após ter feito o novo layer com a textura de água, selecione a borracha com o efeito de soft brush e passe nas bordas, criando assim o formato do seu lago, como no vídeo!
Se preferir você pode recolorir a água a seu gosto e também mover o lago para a posição desejada!
[/box2]


[box2 class=titlebg title=Terceiro Passo - Criando a Borda]



Volte ao tile da Celianna ou o que você escolheu e procure pela borda, igual no vídeo ou outra de sua preferência, copie e cole como pincel!
Após copiar a borda, selecione e cole ela em volta de todo o lago, igual no vídeo!
Ok, você deve estar pensando agora, mas que $%#@ é essa? Mas calma eu garanto que vai ficar bom no final! :ok: 



Novamente selecione a Borracha com o Soft Brush e passe na borda da parte interna do lago, após passar, mude o formato da borracha para Splatter brush, como mostra no vídeo e passe na borda, na parte externa do lago, dê vários cliques em vez de segurar!
Após terminar você vai ter uma borda decente, mas claro, aqui é só um exemplo, você pode deixar muito melhor se tiver mais paciência!
[/box2]

[box2 class=titlebg title=Quarto Passo - Criando as Animações de Água]



Bom, nessa parte, exporte cada camada para o photoshop, no meu caso eu vou exportar pois fiz tudo pelo Gimp, mas se você iniciou pelo Photoshop não há problemas.
Salve cada camada em específico como PNG e depois abra no photoshop cada uma, copie as camadas e deixe todas elas na mesma imagem como mostra no vídeo, organize as camadas e ajuste elas, ficando igual estava no Gimp, só que agora no photoshop.
Após organizar tudo, duplique duas vezes a camada de água e nomeie elas como água , água 2 e água 3.
Eu utilizei 3 frames, mas se preferir você pode fazer mais, porém eu não recomendo ter muitos!
Selecione cada layer de água individualmente e vá em galeria de filtro> Distorção> Marola.
Para o layer água mude para tamanho da ondulação 2 e altura da ondulação 1.
Para o layer água 2 mude para tamanho da ondulação 4 e altura da ondulação 1.
Para o layer água 3 mude para tamanho da ondulação 6 e altura da ondulação 1.
Você pode mudar os valores como preferir, esses são só exemplos.
[box2 class=titlebg title=Salvando os Parallaxes]
Após ter feito todos os efeitos nos layers de água, selecione o layer água junto com o layer de chão e da borda e desmarque os outros layers de água 2 e água 3, e salve como PNG com o nome de água_1.
Faça o mesmo para o layer de água 2, desmarque o layer de água e o layer de água 3 e salve como PNG com o nome de água_2.
Repita esse processo para o Layer de água 3 e salve como PNG com o nome de água_3.

[/box2]
[/box2]
[box2 class=titlebg title=Quinto Passo - Inserindo no Jogo]


Abra o seu projeto e tenha certeza que possui o script Modern Algebra's Animated Parallax dentro.
A velocidade padrão de frames é 10, mas se você preferir, pode mudar para cada mapa individualmente, eu vou deixar como 10 mesmo.
Abra o Resource Manager e importe para Parallaxes as 3 imagens que você salvou como PNG, que são a água_1, água_2 e água_3.
Selecione as propriedades do mapa e ajuste como no vídeo, tenha certeza que o seu mapa está no tamanho correto.
Uma vez feito, nós podemos testar!  :ok:



Agora vamos comparar a animação com o padrão do RTP!
Levando em comparação, nada mal eu acho!  :ok:
[/box2]

[box2 class=titlebg title=Adicionando Recursos de Água]



Abra os seus Resources no Photoshop, aconselho da Celianna, é ótimo para isso!
Procure por uma pedra e copie e cole 2 vezes na sua imagem do seu lago, criando assim 2 layers, nomeie eles como Pedra Cima e Pedra Baixo.
No layer de Pedra Cima, selecione a Borracha com o soft brush, sim, novamente  :¬¬: e passe na parte de baixo da pedra.
Agora vá no Layer Pedra Baixo e mude a opacidade, fazendo assim com que parece que esteja debaixo da água.
Ainda no Layer Baixo, selecione a borracha com o soft brush e passe para dar a impressão que está mais profundo ainda.
Você pode fazer isso com vários recurso dando a impressão que está em baixo da água.

[/box2]

Ufa, bom é isso galera, espero ter explicado bem como criar suas animações, pratiquem e qualquer dúvida que tiverem me perguntem!  :ok:

[box2 class=titlebg title=Créditos]
Lycanimus, Ak47lol, Celianna, Modern Algebra, Photoshop CS6 e Gimp.
Fazer mapas é uma arte, faça como se fosse o seu último.




16/06/2014 às 02:41 #1 Última edição: 16/06/2014 às 03:10 por Azraven
Acho que o título do tópico deveria ser "Efeito de água animada por Ak47", já que você apenas fez novas imagens e gravou até videos! O texto é o mesmo que o original pelo que li por cima.  :facepalm:

Pra quem duvida:

http://www.rpgmakervx.net/index.php?showtopic=48327


Bem, seja como for pelo menos alguns mappers novos podem sanar suas dúvidas quanto ao efeito.
No mais, o vídeo de resultado final do ak me deu vontade de colocar a mão na massa de verdade, como nos velhos tempos, mas falando em tempo isso é o que me atrapalha.

Olha só! esse script do animated parallax por aqui script no qual todos acharam ruim, iria até postar esse tutorial
(que já existe, acho que seria mais conveniente mudar o nome afinal ne..) mas como todos criticaram achei
melhor não, o script e o tutorial são bem legais, servem muito, boa up.  :blink:

Então, eu vi que o Ak47 já havia postado esse tutorial, mas la ele explica tudo pelo Photoshop, aqui eu modifiquei  algumas coisas, e expliquei a maioria pelo Gimp, apenas quis demostrar novos meios de se fazer, e são métodos que eu uso no meu mapeamento também, bom a intenção foi querer ajudar de qualquer forma, mas se quiserem que eu altere o nome do tópico, sem problemas!
Fazer mapas é uma arte, faça como se fosse o seu último.




Eu já fiz um mapa bem antigo com essa técnica, e eu gostei, o único mal desse efeito é que com um mapa apenas, precisamos fazer mais de 3 imagens, deixando assim o jogo cada vez mais pesado, um mapa deste pode variar de no minimo 500 Kbs á 3 MB. Estou procurando também algo mais realista do que o filtro de desfoque ripple, já venho há um tempo estudando isso, porque o resultado é realmente agradável:



Citação de: -Slayer! online 16/06/2014 às 17:16
Eu já fiz um mapa bem antigo com essa técnica, e eu gostei, o único mal desse efeito é que com um mapa apenas, precisamos fazer mais de 3 imagens, deixando assim o jogo cada vez mais pesado, um mapa deste pode variar de no minimo 500 Kbs á 3 MB. Estou procurando também algo mais realista do que o filtro de desfoque ripple, já venho há um tempo estudando isso, porque o resultado é realmente agradável:



Exatamente -Slayer!, é uma técnica muito boa e o resultado é incrível mesmo, também já uso há um bom tempo no meu mapeamento, mas no projeto acaba ficando bem pesado, também estou procurando algum modo de tentar reduzir isso, mas acho bem difícil, já que temos que trabalhar com vários frames para as animações.
Se eu achar algo melhor para trabalharmos eu posto aqui pro pessoal, abraços
Fazer mapas é uma arte, faça como se fosse o seu último.




Um anti-lag para imagens pode vir a calhar.
O problema é que raramente vemos um por aí.

Na minha época de ouro eu usava um quando fazia parallax animado por eventos e por incrível que pareça ele funcionava.