Iluminação - Teoria e Prática (Versão 2013 - Compatível com VX/XP) +PSD incluso

[K.A.O.S]

Iluminação - Teoria e prática (Versão 2013)
Compatível com RPG Maker VX e XP

A pedidos de alguns poucos interessados no meu trabalho, decidi recriar um de meus antigos tutoriais chamado Iluminação - Teoria e pratica, criado ainda na epoca onde usava meu nick anterior, Arokh.

Naquela época o tutorial foi um sucesso e esclareceu diversas dúvidas em relação a iluminação no RPG Maker 2003 e acredito ter sido de grande ajuda em alguns projetos.
Infelizmente o tutorial era antigo, sendo então necessário que o desenvolvedor se virasse pra implementar os efeitos nas demais versões do programa que foram surgindo com o tempo.

Hoje trago a vocês a nova versão deste meu guia que tentarei aplicar o máximo de detalhes possíveis. Qualquer dúvida, sugestão e critica são altamente bem vindas! Não tenha vergonha de ir atrás de mais conhecimento!

Download do PSD da aula:
É necessário o programa Photoshop CS3 ou superior pra abrir o arquivo.

Download: Iluminação - Teoria e Prática PSD - Mega.co.nz

PSD fornecido unica e exclusivamente pra fins de aprendizado.

Aos usuários de RPG Maker 2000/2003

Dentro do arquivo PSD existe uma camada chamada "Camada ambientação" que esta com sua opacidade alterada pra 50%. Mudem a opacidade desta camada pra 100% e notem como a imagem fica.

É desta forma que vocês poderão utilizar meu tutorial em seus projetos pertencentes a essa engine! A imagem formada ao alterar a opacidade desta camada será a sua picture de iluminação. Você deverá alterar a opacidade dela dentro do jogo até achar o resultado ideal.

Caso necessário, crie mais camadas utilizando o mesmo esquema pra reforçar sombras ou iluminação.

Não permito a repostagem deste tópico ou do conteúdo que ele traz consigo em qualquer outra comunidade/blog/site sem minha devida autorização. Portanto, envie uma PM e aguarde minha resposta antes de postar este guia em outro local.



O guia criado neste tópico foi feito com base no RPG Maker VX Ace e terá suas imagens desenvolvidas de acordo com as funções que o programa proporciona.
Apesar disso, é possível utilizar o aprendizado nas demais plataformas como RM2k/2k3 e XP, porem tenha em mente que certos recursos são diferentes entre as versões e cabe a você descobrir formas de concertar os problemas que podem surgir ao utilizar o material deste post em outra engine alem do VX.

Isso não quer dizer que eu não vá conseguir lhes auxiliar, porem a ajuda não será tão precisa.

Vamos então começar o guia! Desenvolvi um pequeno mapa pra usarmos nesta aula, o mapa contem tudo que iremos precisar pra entendermos e treinarmos iluminação e sombreamento.

Atenção!

Na medida em que o pessoal tomar interesse, estarei colocando links externos para matérias que visam enriquecer o conteúdo e auxiliar no aprendizado, recomendo que seja feita a leitura de todos.

Neste mapa nós temos três pontos de iluminação chave(luzes) e dois pontos pra criação do ambiente(janela em tonalidade azul). Notem também que existem muitos objetos na cena, isso significa que teremos de trabalhar em muitas sombras, minha dica é ter paciência. Não corra apenas pra ter algo pra mostrar, tente caprichar no máximo de detalhes possíveis.

A primeira coisa que temos que fazer é decidir qual cor iremos utilizar pra gerar a ambientação, essa tonalidade pode ser alterada dentro do próprio RPG Maker, porem recomendo que ela seja feita por pictures, pois desta forma você acaba tendo um maior controle do que deve ou não receber este tom, alem da intensidade.

Neste caso queremos um mapa de tonalidade azul. O motivo? Lembram que mencionei que temos dois pontos de ambiente? As janelas deixam passar pra dentro do estabelecimento o tom da noite, precisamos trabalhar neste tom antes de iniciar a iluminação.

Uma pequena dica, selecionem duas cores, uma pra ambientação e outra que iremos usar depois pra dar a sensação de ambiente escuro. Muito bem, selecionem uma cor que não se destaque muito mas que também não permita que seu mapa fique na total escuridão, a imagem abaixo conseguira ilustrar o que quero dizer e dar uma noção sobre as diferenças que essa escolha pode gerar.

Nesta imagem, eu coloquei 7 tons diferentes com 50% de opacidade cada um. Consegue me dizer qual fica melhor? Na verdade aqui nós precisamos é dar a cara a tapa e ver qual realmente ficará melhor ao decorrer do trabalho. Estarei escolhendo o tom #0c416a pois a blendagem acabou me agradando mais.

Com a tonalidade escolhida, você deve preencher uma picture por inteiro utilizando esta cor e comece a brincar com a opacidade da imagem. Os valores ideais são 25%~50%~70%.

Atenção!
A partir deste ponto o uso de uma ferramenta de edição de imagens como o Photoshop é necessária, certifique-se que tenha o programa antes de prosseguir!

Agora que temos nossa ambientação básica, chegou a hora de notarmos alguns pontos antes de realmente iniciar a iluminação:

• Quando uma luz externa encontra seu caminho dentro de uma casa, sua iluminação será limitada. Apesar disso, o ambiente com essa iluminação acaba recebendo a tonalidade mesmo nos cantos onde a luz não chega, porem com intensidade reduzida.
• A iluminação é baseada na intensidade, portanto quanto mais próximo mais forte será o efeito. Isso se aplica tanto pra iluminação interna como externa.

Nesta imagem desejo apenas que prestem a atenção como a luz externa age dentro do local e os efeitos que ela causa na ambientação.

Estaremos fazendo algo próximo a isso em nosso mapa, a diferença é que estarei usando outro tom ainda mais claro pra criar um efeito de 'rajada' partindo de fora pro interior do cômodo e começarei a aplicar algumas sombras nos cantos onde a luz exterior teoricamente não deveria atingir por completo.

Vamos organizar as idéias antes de continuar

Minha forma de aplicar iluminação nos locais é baseada em camadas, isso é: Existirá a camada de sombras, a camada de luz, a camada de efeitos extras* e por fim a camada de ambientação.
Cada camada deve ser tratada como uma picture diferente, portanto estaremos usando quatro pictures pra criar o efeito final.

* A camada de efeitos extras se deve a pequenos efeitos como por exemplo poeira. Não é necessário usar todas as camadas, porem esta é outra forma de embelezar ainda mais o clima de seu projeto!

Vamos começar a trabalhar com a luz natural vinda da janela. Observe atentamente o formato por onde os feixes de luz passam, nosso objetivo agora é criar algumas rajadas que adentrem o cômodo de forma harmônica. Observe as imagens abaixo pra entender o que eu fiz no caso do meu mapa:

Atenção!
A forma que você deixará os feixes de luz em seu mapa vão do seu gosto pessoal, não existe formula certa alem do posicionamento. Portanto o que eu farei agora é algo que EU gosto. Isso é gosto pessoal e não forma correta, tenha isso em mente.

Este passo serve unicamente pra dar idéias do que pode ser feito com os efeitos !


Estarei usando 3 novos elementos a partir de agora:

• Soft Brush
• Motion Blur
• Gaussian Blur

A aplicação destes efeitos não tem formula correta, é testar e ver se fica bom! Apesar de ter dito isso, aqui vai umas dicas sobre o que eu faço:

• O Soft Brush deve ficar abaixo da imagem que simboliza os feixes de luz, pois ele dará a impressão que a luz esta se espalhando pelo cômodo. Sua opacidade pode variar de 25%~50%
• O Motion Blur deve ser usado como forma de espalhar o efeito em duas direções opostas. A dica é copiar a camada dos feixes de luz e aplicar o efeito nela, abaixando ou aumentando a opacidade conforme o necessário. A melhor forma de se utilizar esse efeito é apenas utilizando as direções horizontais.
• O Gaussian Blur será responsável por suavilizar as bordas dos feixes, permitindo que o efeito fique mais harmônico dependendo do mapa. Os valores ideais podem variar entre 1,0 e 3,5.

Veja na imagem abaixo como que ficou em meu mapa:

Com isso nós daremos entrada na parte de escurecer o cenário. Esta parte provavelmente é a mais demorada pois dependendo da quantidade de objetos no mapa, você acabará utilizando de 30 minutos até 2 horas apenas nos detalhes. Claro que isso se aplica apenas caso você realmente queira fazer todas as sombras possíveis!

A forma que utilizo pra fazer as sombras é com Hard Brush e Soft Brush com a opção Air Brush desativada e regulando a opacidade conforme for necessário. O tamanho do brush tambem varia de acordo com o que esta trabalhando, sendo pequeno para objetos e grande para o cenário.

A grande sacada aqui é primeiro aplicar as sombras no cenário e depois partir pros objetos, veja a imagem abaixo:

Mesmo sem detalhar muito o cenário o resultado ficou muito apresentável! Tudo que eu fiz aqui foi aplicar Soft Brush da cor preta nas bordas das paredes e criar um sombreamento básico no balcão, mesa , cadeiras e nas caixas ao fundo.

Agora vem a parte complicada... Os objetos! Como mencionei não tem segredo... Basta usar Brush pequeno nas configurações que citei anteriormente e ter muita paciência pra ir preenchendo os locais minuciosamente conforme meu exemplo abaixo:

Nossas sombras começaram a ficar mais presentes! Vamos começar a trabalhar na base das luzes agora! Lembra o que fizemos nas janelas? O processo é semelhante pras luzes do mapa!

As modificações serão as seguintes:

• Escolha uma cor que se destaque, essa cor deve estar presente na fonte que luz que você irá trabalhar.
• Você irá utilizar a opção Outer Glow do Photoshop para criar um efeito fantasma/brilho ao redor da luz.
• Utilize Soft Brush com a mesma cor em cima da fonte de luz como forma de realçar seu efeito, note que pode ser necessário abaixar ou aumentar a opacidade. Os valores recomendados são 25%~45%.
• O Motion Blur deve ser usado verticalmente, com força entre 25~50.

Ta ficando bonito, certo? Agora chegou outra parte importante da iluminação... Assim como as sombras, a iluminação deve ser projetada no cenário e objetos também! O processo é exatamente o mesmo que as sombras, porem tendo em mente que agora devemos clarear a imagem de acordo com o foco da luz.

Outro detalhe que deve ser lembrado é que a luz possui uma tonalidade, portanto o cenário deve possuir essa tonalidade também! Observe meu exemplo para melhor entendimento:

Por fim, adicione alguns detalhes ao seu gosto. Dê aquele toque onde quem olhar vai saber que o desenvolvedor daquele mapa é você!

Este é nosso resultado! Eu particularmente estou super satisfeito com a cena que criamos e espero que você tenha obtido um resultado tão bom quanto este.

Lembrem-se que o segredo pra conseguir fazer bons mapas e boas ambientações é ter paciência e gostar do que esta fazendo!

[GDL]

Não sei o que dizer sobre esse tutorial. Ele realmente é muito bom, muito bom MESMO, mas por outro lado, ele trás a tona uma das coisas que mais matam projetos hoje em dia que são exatamente esses mapas motherfuckianos que levam cerca de duas horas para ficarem prontos. Em suma: se você não for uma pessoas extremamente determinada e de tempo livre, fuja desse tipo de iluminação (o mesmo vale para Panomaps e Overlaymaps) ou a unica coisa que vai ter é um belo projeto cancelado em mãos.

Enfim, isso não é culpa sua K.A.O.S haha, muito menos de seu ótimo tutorial que se usado pelas pessoas certas fara milagres!. \o

[K.A.O.S]

Não sei o que dizer sobre esse tutorial. Ele realmente é muito bom, muito bom MESMO, mas por outro lado, ele trás a tona uma das coisas que mais matam projetos hoje em dia que são exatamente esse mapas motherfuckianos que levam cerca de duas horas para ficarem prontos. Em suma: se você não for uma pessoas extremamente determinada e de tempo livre, fuja desse tipo de iluminação (o mesmo vale para Panomaps e Overlaymaps) ou a unica coisa que vai ter é um belo projeto cancelado em mãos.

Enfim, isso não é culpa sua K.A.O.S haha, muito menos de seu ótimo tutorial que se usado pelas pessoas certas fara milagres!. \o

De fato, a criação de um mapa com muitos detalhes é trabalho em dobro, tanto no RPG Maker como também na ferramenta de edição.
O que mais achei engraçado é que eu desenvolvi este mapa em pouco menos de 40 minutos, sendo que o que mais me tomou tempo mesmo foi bolar as explicações e as imagens esquematizadas.

É algo que exige disposição, porem com a prática é possível chegar a ótimos resultados em pouquíssimo tempo.

Agradeço o comentário. 

[LeonM²]

Simplesmente genial, ficou ótimo o resultado ^^

[VincentVII]

Com licença que eu vou ali no canto chorar pelas minhas habilidades ridículas de mapeamento. 

Tutorial incrível, não tem outra palavra melhor para descrevê-lo. Você não só explicou como fazer uma iluminação decente, mas também a lógica dela. Meus parabéns mesmo!

[K.A.O.S]

 Agradeço o comentário, me esforcei ao máximo pra tentar passar ao leitor a maneira correta de se sombrear e iluminar um mapa, sem abusar muito dos recursos e deixando uma leve brecha pra criatividade se desenvolver.

E se por um lado tenho facilidade pra criação de mapas, minha falha esta relacionada a roteiros! Sou uma verdadeira negação no ramo apesar de entender o suficiente sobre a criação de um. 

[Victor Sena]

 Ótimo tutorial, explicou direitinho como usar as sombras e luzes, parabéns e quem sabe aprendo como mexer com pictures para o Coliseu. Senti até inveja, meus tutoriais nem chegam perto disso. xD

Lembro que você tinha postado um tutorial sobre a continuação de mapas e noções de mapear (acho), foi aqui no fórum?

[Naxus]

Eis um tópico que merece atenção.
Um tutorial belíssimo e que torna o jogo muito mais belo em quesitos gráficos. Tentarei absolver o conteúdo ao máximo.
Está de parabéns meu camarada!

[EverLink]

tópico bem feito e bem organizado! Excelente trabalho

[Randolph]

Muito bom mesmo!
Eu que sou iniciante no RPG MAKER aprendi muito com o tutorial e já vou começar a criar um mapa a partir dessa explicação. Mais um vez agradeço pelo tutorial.

Um abraço! 

[K.A.O.S]

Ótimo tutorial, explicou direitinho como usar as sombras e luzes, parabéns e quem sabe aprendo como mexer com pictures para o Coliseu. Senti até inveja, meus tutoriais nem chegam perto disso. xD

Lembro que você tinha postado um tutorial sobre a continuação de mapas e noções de mapear (acho), foi aqui no fórum?

Bom, eu coloquei em outras comunidades primeiro pois foi algo que fiz antes de dar uma sumida da internet, dai logo depois de minha volta eu decidi trazer o tutorial pra cá também.

Eis um tópico que merece atenção.
Um tutorial belíssimo e que torna o jogo muito mais belo em quesitos gráficos. Tentarei absolver o conteúdo ao máximo.
Está de parabéns meu camarada!

tópico bem feito e bem organizado! Excelente trabalho

Muito bom mesmo!
Eu que sou iniciante no RPG MAKER aprendi muito com o tutorial e já vou começar a criar um mapa a partir dessa explicação. Mais um vez agradeço pelo tutorial.

Um abraço! 

Muito obrigado pelos comentários, espero que o guia lhes tragam bons resultados!

[Kowts]

Wow... eu consigo fazer coisas do tipo no Photoshop mas sinceramente comparado com esse o meu é quase nada.
Muito bom... esta de parabéns pelo ótimo tutorial... você tem toda meu respeito e admiração.
+ouro

[Nathanx]

Meu Deus incrível, muito bacana o resultado final.

[Strato]

Quando vejo esses tutoriais me bate uma ganância no peito...Felizmente não tenho tanto tempo para tal hahah
Sinceramente acho que deviam inventar uma nova categoria Maker,que além do mapper poderia ter também o effecter,sei lá.

Sua aula é ótima,parabéns.Se me vir ao caso de precisar,vou procurá-la.

[Magic D]

Muito boa a aula, eu acho muito bonito mas no momento vou procurar utilizar os recursos básicos para montar uma estrutura pro meu game, mas já salvei nos favoritos, pra dá uma olhadinha mais a fundo quando precisar.

Boa contribuição