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

Iluminação/Sombreamento avançado do Lyca!

Iniciado por Lycanimus, 20/01/2016 às 03:51

20/01/2016 às 03:51 Última edição: 08/07/2017 às 21:18 por Lycanimus
[box2 class=black title=Introdução]                       
Ultimamente eu percebi que muitas pessoas tem dificuldades em fazer uma boa iluminação e também definir qual o nível de sombreamento adequado para o seu mapa, com esse tutorial eu vou estar ensinando a vocês o meu modo de fazer e espero que tire essas dúvidas que muitos me perguntam, bom, então vamos la!
[/box2]

[box2 class=black title=Requisitos]   
- Gimp ou Photoshop (Eu utilizei o Gimp no tutorial).
- Saber utilizar os editores acima para fazer seus mapas via Parallax.
[/box2] 

[box2 class=black title=Iniciando]
Para esse tutorial eu vou utilizar uma parte de um dos meus mapas já prontos, apenas sem o efeito de luz e sombra, que é o que nós vamos fazer passo a passo aqui.
A parte do mapa que eu estarei utilizando então é esse:


Note que nessa parte do mapa há 3 pontos de luz das tochas, portanto são em cima desses pontos que nós vamos trabalhar.

[/box2] 

[box2 class=black title=Ajustando o nível de Sombreamento - Primeiro Passo]
Já com o Gimp aberto e após ter finalizado o seu mapa com todas as camadas, crie uma camada acima de todas as outras e nomeie ela para Sombra, como na imagem a seguir:



Após criar a camada Sombra, vá no seu Pincel e selecione o Hardness 050 que é um dos pinceis padrão do Gimp, como na imagem a seguir:



Agora aumente o tamanho do pincel para 100000 só para pegar a tela inteira e lembre-se de estar na camada Sombra, como na imagem:



Agora com o pincel selecionado coloque ele bem no centro da tela e dê 1 clique apenas, isso vai fazer com que ele pinte a tela toda de preto, ual heim! "Mas Lyca não era mais fácil pintar com o balde de tinta?" Sim era, mas isso é para você já ir se acostumando a usar os pinceis e saber localizar eles pelo nome, pois ainda vamos trabalhar bastante com eles.

Ok, se você fez tudo certo até agora a sua tela deve estar toda preta, como na imagem:



Agora com a sua tela assim, vá na camada Sombra e diminua a opacidade para algo em torno de 25 a 40, nessa parte é que você vai definir o nível de sombreamento do seu mapa, o ideal é você deixar entre 25 a 40 no máximo, evite ultrapassar disso, pois se não você vai ter problemas com o seu mapa, tanto para enxerga-lo, como para quando formos criar a iluminação, no meu mapa eu deixei em 30, e ficou assim:



Pronto, você definiu o quão escuro o seu mapa vai ser, agora você precisa ver de onde vem a luz do seu mapa, no meu por exemplo, a luz vem das 3 tochas, portanto eu preciso tirar a sombra ao redor das tochas, pois é ai que vamos criar a iluminação mais para frente e não queremos que seja escuro não é mesmo?
Para isso eu vou selecionar a Borracha e o pincel Hardeness 050 e vou diminuir a opacidade dele para 50 e o tamanho deixe em torno de 110 +-, como na imagem:



Agora com o pincel vá nos pontos de luz do seu mapa e na camada Sombra e comece a apagar a sombra em volta dos pontos de luz do seu mapa, no meu caso nas tochas, ficando como nas imagens a seguir:

Antes  de passar a Borracha

Depois de passar a Borracha


Assim finalizamos a parte de sombreamento do mapa e podemos dar finalmente inicio a iluminação!
[/box2] 


[box2 class=black title=Criando a Iluminação - Segundo Passo]   
Vamos dar início a iluminação agora, para isso, crie uma nova camada, acima da camada Sombra e nomeie ela para Luz 1, como na imagem a seguir:



Vá agora no seus pinceis e selecione o pincel Hardeness 075, como na imagem:



Com o pincel, mude a cor dele para uma cor amarela ou alaranjada, ou se quiser coloque a mesma cor que eu utilizei como na imagem:



Mude agora o tamanho do seu pincel de forma que cubra grande parte em volta do seu ponto de luz do seu mapa, no meu caso eu deixei o pincel no tamanho 150, como na imagem:



Agora com o pincel, pinte por cima e em volta de todo o seu ponto de luz, ou seja, todo o lugar que você quer que a luz chegue, mas não exagere no tamanho do raio que você quer que a luz alcance, tente deixar como no exemplo da imagem a seguir:



E pronto, está feito a sua iluminação, é só jogar no projeto agora!  "Lyca, você está louco?"...haha  Calma, muita calma, você deve estar se perguntando mas que P@&% é essa não é mesmo?  Mas vamos continuar então, vá na camada de Luz 1 e la em cima onde tem modo, mude de normal para Sobrepor, como na imagem a seguir:



Com isso acho que vai dar uma "pequena diferença" na sua iluminação:



Após achar que o Lyca não está mais louco, vamos continuar, pois ainda não acabou..hehe  Agora você deve pegar a borracha novamente e o pincel Hardeness 050, mude a opacidade para 30 e o tamanho deixei o padrão que é 51 mesmo, como na imagem:



Com a borracha você vai remover o "excesso" de iluminação e os pontos onde a luz não consegue chegar, como trabalhamos no 2D, você deve ter uma noção básica de perspectiva, e saber "enxergar" o mapa de outros ângulos, isso vai ajudar nessa parte, mas não é nada complicado, veja a imagem e repare nos pontos que eu removi a luz, onde provavelmente ela não chegaria.



Após corrigir esses pontos, lembrando novamente que para o seu mapa vai ser diferente, e você deve "enxergar" isso, vamos criar agora um foco de luz maior bem no centro de onde a luz está sendo emitida, ou seja, no meu caso bem no centro das tochas, para isso eu vou criar uma nova camada e nomeá-la de Luz 2, como na imagem a seguir:



Nessa nova camada você vai repetir o mesmo processo que fizemos para a Luz 1, para isso selecione o pincel Hardeness 075, diminua seu tamanho do mesmo tamanho ou menor que o seu objeto de luz, no meu caso são as tochas, para isso eu vou diminuir o pincel um pouco menor que ela, no caso deixei o tamanho em 35, como na imagem:



E agora vou pintar em cima das tochas do mapa, bem no centro delas, não abrangendo muito espaço, pois lembre-se o que queremos criar agora é o foco mais forte da luz, de onde ela está saindo, então pintando ficaria igual na imagem a seguir:



Ok, agora nós vamos selecionar a camada Luz 2 e abrir o modo dela, e mudar para mesclar grãos e deixar a opacidade da camada em torno de 35, se você fizer isso a imagem vai ficar assim:



Com isso estamos quase acabando a nossa iluminação, falta apenas ajustar a matiz de cores de acordo com o ambiente do seu mapa, para isso selecione a camada Luz 1 e vá em Cores>Matiz-Saturação, como na imagem a seguir:



E ajuste a Matiz, a Saturação e Luminosidade da sua luz, no meu caso eu quero uma luz um pouco mais alaranjada, pois são tochas, então vou ajustar a matiz para essa cor e aumentar a saturação e a luminosidade dela, lembrando que estamos trabalhando com a Luz 1, para a Luz 2, faça a mesma coisa, porém aumente um pouco mais a saturação e a luminosidade do que a Luz 1, para deixar o centro com uma luz mais forte, segue a imagem de exemplo:



E com isso a nossa iluminação está pronta finalmente, sei que parece bem trabalhoso, mas se seguir esses passos e treinarem não tem segredo, para jogarem no projeto, vocês devem apenas combinar as camadas das luzes com a dos tiles em baixo, e na camada acima do herói apenas deixe uma luz com opacidade bem baixa só para ficar por cima quando ele passar, o que vai dar a impressão de ser a mesma luz.
[/box2] 


[box2 class=black title=Bônus] 
Caso queiram fazer uma luz Branca, é só seguirem esse mesmo passo, porém na hora de mudar a Matiz, vocês devem apenas aumentar no máximo a luminosidade e diminuir toda a saturação, faça isso para as duas camadas de Luz que aprendemos, fazendo isso, você vai deixar igual essa imagem que é a continuação do mesmo mapa:


[/box2] 

[box2 class=black title=Resultado Final em Jogo] 
Agora é só "enfeitar" o seu mapa com efeitos que queira adicionar, mudar a cor pelo próprio maker, adicionar efeitos de chuvas ou fogs e seu mapa vai ficar perfeito!

Espero que tenham gostado do tutorial galera e que tenham aprendido bastante também, lembrando que isso é só o modo que eu utilizo no meu mapeamento, mas há muitos outros, eu apenas consigo bons resultados com esse, qualquer dúvida que tiverem é só me falar!

Segue agora o mesmo mapa Finalizado:



Abraços do Lyca!
[/box2] 
Fazer mapas é uma arte, faça como se fosse o seu último.




Gostei da aula. Excellent workl.  Tópico bem feito tbm. :clap:  :*-*:

Muito bom em encinar alguns novatos com esse tuto. Continue postando aulas/tutos.

Até Breve~

Tenho que terminar de ver as outras aulas mais recentes. Acho que do Alisson '-'
O livro traz a vantagem de a gente poder estar só e ao mesmo tempo acompanhado.

------------


Isso é muito importante pras pessoas pararen com a dependência química de consumir o script do Khas, com todo tespeito, o script dele faz um excelente trabalho, mas as pessoas abusam do quão fraca fica uma luz ambiente por exemplo e resolve meter escuridão que não te deixa enxergar pra todo lado.

E vale lembrar também que pintar a tela com os eventos do próprio RPG Maker também pode te ajudar a criar efeitos legais pra ambientes claros ou escuros.
Our work is never over

Um ótimo tuto Lyca, provavelmente sanou a dúvida de muitos que viam esses efeitos nos panomaps e sempre se questionavam como era feito

Até  :XD:

Muito bom cara. E não só para panomapas, esse tutorial também pode ser aplicado a mapas comuns do maker. Aliás, é muito bom ver que está passando seu grande conhecimento para o pessoal. Tutorial bem explicativo, ta de parabéns.



É muito bom ensinar, você acaba tendo uma nova experiência no processo.
Ótima aula, Lyca. Muito bem feita. Tenho certeza que vai sanar diversas dúvidas aí, principalmente pra galera que usa o Gimp.

Rayner - Obrigado cara, fico contente que tenha gostado da aula, quando eu tiver um tempinho, eu vou tentar fazer uma de parallax do zero, eu fiz mais essa, pois muitos me perguntavam como eu fazia essa iluminação, espero ter sando essas dúvidas, abraços!

DarkHyudrA - Obrigado pelo comentário cara, realmente eu vejo muitas pessoas utilizando o script do Khas, eu particularmente acho ele muito bom, mas prefiro fazer via parallax mesmo, pois pra mim, o resultado final me agrada mais, além de que em um mapa muito grande o script dele pode acabar gerando um certo lag se exagerar nas luzes, fora que realmente as pessoas exageram no tom de sombra do mapa, e por esse meu modo, você consegue regular certinho a tonalidade, novamente obrigado pelo comentário, abraços!

Zalgo - Obrigado Jão!rsrs  Realmente muitos me perguntavam sobre esse tipo de iluminação e tinham dúvidas de como era feito, espero ter esclarecido bem no tutorial os passos que devem seguir, abraços!

Skyloftian - Muito obrigado cara, e realmente da para usar em mapas comuns do maker, é tudo questão de saber trabalhar com as camadas e imagens, não tem segredo mesmo, e é sempre bom compartilhar o conhecimento, pois assim muitos podem acabar criando novos meios a partir desse, e sempre estar melhorando a qualidade dos projetos que vemos por ai, portanto todos nós só temos a ganhar com isso, abraços!

Ven - Muito obrigado cara, espero tirar as dúvidas que muitos tinham sobre esse tipo de iluminação, abraços!

Seus chars já estão em andamento!

Alisson - Muito obrigado cara, realmente espero que tire as dúvidas do pessoal, e você mais do que ninguém sabe que é ótimo ensinar não é mesmo, querendo ou não, sempre aprendemos alguma coisa, em questão do Gimp, eu preferi utiliza-lo, pois ele é mais acessível a muitos e é fácil para baixar e configurar, mas em ambos programas você sabe que o resultado é bem semelhante, novamente agradeço pelo comentário, abraços!
Fazer mapas é uma arte, faça como se fosse o seu último.




Cara, que show! :clap:
Muito boa a aula!
Isso com certeza vai ajudar muitos mappers a refinarem seu trabalho!
Está de parabéns!
Abraço!
Até!


20/01/2016 às 21:32 #10 Última edição: 20/01/2016 às 21:37 por Lycanimus
Arck! - Muito obrigado cara, agradeço o comentário e fico contente que tenha gostado da aula, espero que ajude a muitos mappers que tinham dúvidas quanto a esse tipo de iluminação, abraços!

Pimenta - Para jogar no jogo, é um processo mais trabalhoso, você precisa entender um pouco sobre parallax mapping, deixarei um vídeo aqui com um tutorial básico explicando um pouco sobre parallax, você também pode procurar no Fórum pelos tutoriais de mapeamento do nosso querido Alisson, tem muitas aulas dele do básico até o nível avançado, espero que lhe ajude, abraços!

Vídeo Tutorial:
Fazer mapas é uma arte, faça como se fosse o seu último.





SoyeR - Fico contente em ver que vai aplicar a técnica, depois posta pra gente ver os trabalhos, qualquer dúvida que tenha é só falar!

Abraços do Lyca!  :ok:
Fazer mapas é uma arte, faça como se fosse o seu último.




gostei do efeito de chuva ficou bem bacana
: Intel Xeon E3-1225 v3 3.20GHz | Nvidia K2000 2GB GDDR5 | RAM 8GB DDR3 1600GHz | SeaGate Blue 2TB
O Mega Drive Nunca Morrerá em Nossos Corações.

Projeto Leyria RPG para SEGA Mega Drive/Pc

Esse tal de ILUMINAÇÃO, dá um bocado de trabalho ein...
uhahuahuauhauuha
To imitando o tutorial direitinho, mas não dá os efeitos iguais.
Mas me ajudou bastante de qualquer maneira!
Obrigado!