Introdução
Fala galera da Aldeia, aqui é o Lycanimus, e hoje vou estar ensinando a vocês o meu tutorial de
Iluminação via Parallax Mapping, 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 espero tirar muitas dúvidas e ajudar muitos mappers a refinarem os seus trabalhos, bom, então vamos lá!
Iluminação via Parallax Mapping, 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 espero tirar muitas dúvidas e ajudar muitos mappers a refinarem os seus trabalhos, bom, então vamos lá!
Requisitos
- Gimp ou Photoshop (Eu utilizei o Gimp no tutorial).
- Saber utilizar os editores acima para fazer seus mapas via Parallax.
- Gimp ou Photoshop (Eu utilizei o Gimp no tutorial).
- Saber utilizar os editores acima para fazer seus mapas via Parallax.
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.
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.
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!
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!
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.
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.
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:
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:
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!
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!
Última edição por Lycanimus em Sáb Jul 08, 2017 8:59 pm, editado 11 vez(es)