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

[Tutorial Mapa] Aula de mapeamento avançado com o tio Alisson.

Iniciado por Sotelie, 06/06/2014 às 16:22

                   


[box2 class=black title=Introcução]Olá caros makers.
A princípio eu queria fazer uma aula em vídeo, já que meu tempo é curto.
Porém acho que seria mais viável fazer uma aula em texto, mas bem explicada, já
que este é um assunto complicado.
Decidi fazer as aulas de pouco em pouco, daí quando estivesse pronta bastava postar.

E vamos lá para a aula![/box2]

[box2 class=black title=Índice]
1-Programas básicos
2-Conceitos básicos
3-Scripts necessários
4-Fazendo o mapa pelo maker
5-Começando a panomapear
6-Efeitos de iluminação básico
7-Efeitos de iluminação detalhado
8-Criando efeitos de textura
9-Fazendo modificações em tiles
10-Finalizando[/box2]

[box2 class=black title=1 - Programas básicos]
Muitos mappers usam diversos programas para criar os panomapas, alguns designers usam
programas diferentes dos que os mappers puros usam.
Mas os programas mais recomendados a se utilizar são Photoshop e Gimp.
O Photoshop é uma ferramenta ao estilo do Maker, compacta mas poderosa.
Mas ela é paga, pelo menos pelo que eu saiba, porém para quem não tem o photoshop não
percam as esperanças, o Gimp está aí para isso. Ele é uma ferramenta mais complexa do que o
Photoshop mas o poder dos dois é praticamente o mesmo. Tudo depende de quem o usa.

Então ficou aí as dicas.
Nesta aula eu vou usar o Photoshop, já que estou acostumado com ele há muito tempo.
Mas lembrem-se de que tudo o que se pode fazer no photoshop também é possível no Gimp.
(só não sei o efeito 3d, mas não vamos usar isso).
[/box2]

[box2 class=black title=2 - Conceitos básicos]

É recomendável que você já possua um bom sentido de espaço, simetria, assimetria e etc...ou seja, tenha aprendido as aulas anteriores.

Aqui a regra é diferente: Primeiro você tem que mapear com a grade do seu editor de imagens para 32x32.
Para fazer isso no photoshop basta ir em 'editar', 'preferências' e em seguida 'grid[...]'.
Caso use outro programa de edição basta buscar tutoriais no google, porém o processo sempre é similar.

Como devem saber, o panomapeamento é um mapeamento livre, mas aí é que está o perigo. Não é por ser livre que você vai
exagerar em fugir do padrão, as coisas não são bem assim.
No panomapeamento você começa a criar o mapa pelo maker, em seguida você adiciona os detalhes finais pelo editor de imagens.
Mas isso não é uma regra, é apenas recomendável, pois se você começar a panomapear sem começar pelo maker, o processo vai girar em torno de
1h,00mn.

Isso responde aquelas antigas queixas: "Panomapear demora demais[...]", "[...]É muito lento[...]".
Tudo depende da forma que você panomapeia.

O panomapeamento também tem seus níveis de dificuldade. Isso vai de fácil, médio e difícil, sendo:
Fácil: Você apenas coloca os objetos no mapa e não faz nada demais.
Médio: Você coloca os objetos no mapa, faz efeitos de iluminação, faz efeitos especiais no terreno, etc...
Difícil: Cria cenários complexos editando tiles comuns e aplicando texturas. Também usa efeitos de fog e iluminação avançada sem contar os elementos do fácil e médio.

Para finalizar, o panomapeamento é como se você voltasse do zero, mas em um nível totalmente novo.

Curiosidade: Dizem que o panomapeamento surgiu com Hanzo Kimura usando Overlay mapping, porém na época os mappers já desenvolveram métodos de panomapear
fixando o parallax. E atualmente é o método mais recomendado.
[/box2]

[box2 class=black title=3 - Scripts necessários]
Para panomapear você vai escolher o seu estilo.
1-Overlay Mapping
2-Parallax mapping

As diferenças: O Overlay Mapping consiste em usar camadas diferentes para cada mapa, porém é complexo e ás vezes desnecessário.
               O Parallax Mapping consiste em usar um panorama fixo contendo a imagem do mapa. Ele precisa de um script para fixar 'pictures' para que
o personagem passe abaixo de plantas e árvores, por exemplo. Os efeitos de iluminação também ficam na mesma camada da 'picture'.

O script de Overlay mapping pode ser encontrado em diversos sites, também há muitos scripts que fazem a mesma função, como o do nosso amigo Masked.
Porém, aqui está um link para o script de Overlay mapping que eu usava antigamente.

Também há o script para o Parallax mapping que pode ser encontrado aqui.
Lembrando de que o script de Parallax mapping necessita de mais um script, que pode ser encontrado aqui.

Atenção: Lembre-se de ler cuidadosamente as instruções nos tópicos de cada autor para evitas demais problemas.

Curiosidades: O panomapeamento era muito utilizado na época do Rmvx pela sua capacidade de suportar apenas um tileset para o jogo inteiro.
              Demais mappers usavam o método 'Tile swap' que mudava o tileset do jogo sem mudar seu efeito in-game. Este método consistia em um programa e
              um script. Porém era complicado, por isso os mappers mudavam para o panomapeamento.
[/box2]

[box2 class=black title=4 - Fazendo o mapa pelo maker]

Vamos começar o processo.
Crie um projeto e tenha a certeza de colocar os scripts necessários para o panomapeamento. Lembrando de que você precisa escolher o seu estilo de panomapear.
Eu vou usar o estilo de Parallax map pois é o mais viável para iniciantes e é o mais usado pelos mappers avançados pela sua simplicidade e praticidade.

Faça um pequeno mapa de interior com as dimensões 20x19 no maker. Aumente a largura caso houver necessidade.
Mas atenção: Faça apenas o piso e as paredes. Não adicione nenhuma decoração ou efeitos a mais.

[hs width=320 height=240]http://s14.postimg.org/49kv7q3sh/Img1.png[/hs]

[/box2]

[box2 class=black title=5 - Começando a panomapear]

Agora vamos passar ao panomapeamento.
Abra seu programa de edição de imagens. Apenas para lembrar, vou utilizar o Photoshop nessa aula.
No maker, aperte "Prt Sc"(Print Screen).
Abra o Paint e cole a imagem, corte as dimensões do maker deixando apenas o mapa. Tome cuidado para não cortar 1 pixel errado da imagem.
Feito isso basta abrir a imagem no seu programa de edição de imagens.

[hs width=320 height=240]http://s14.postimg.org/3y3euynch/img2.png[/hs]

Dê um duplo clique na Layer 'Background' para que ela se transforme em uma Layer comum.
Agora siga o seguinte passo para configurar sua grade para 32 pixels.

[hs width=320 height=240]http://s14.postimg.org/5wa2syfu9/img3.png[/hs]
[hs width=320 height=240]http://s14.postimg.org/j83a25iup/img4.png[/hs]

Subdivision é usado para quem faz pixel art. Mas se você quiser configurar, não há ninguém para lhe impedir.
Após configurada a grade pressione a sequência:

[hs width=320 height=240]http://s14.postimg.org/kpoqdpnld/img5.png[/hs]

Lembrando de que em notebooks o ' costuma ficar abaixo do 'esc'.

E sua grade deve ter ficado assim:
[hs width=320 height=240]http://s14.postimg.org/n8afee9bl/img6.png[/hs]
Agora você vai no seu projeto e exporte os tiles de interiores pois iremos dar utilidade á eles agora.
(para quem não entendeu, basta exportar o "Inside_B, Inside_C" para quem usa o ace)
Abra os dois no photoshop e vamos começar a decorar o lugar.
Lembrando de que você pode exportar os tiles que quiser para usar no photoshop, tanto normais quanto Autotiles.
Lembra daqueles Parallax tiles que você nunca entendia? É pra isso que serve. Você também pode usar tiles de outras engines, sendo que o que importa
é o gráfico.

Primeiramente vou ensinar vocês a mecherem com os Autotiles, visto que muitos tem dificuldades nesta parte.
Exportem o Inside_A2 e abram no Photoshop. Agora dêem um zoom bem de perto no tile de tapete de sua preferência.

[hs width=320 height=240]http://s14.postimg.org/94ek60241/img7.png[/hs]

Usando a ferramenta de seleção retangular, selecione o quadrado de qualquer canto do tapete.

[hs width=320 height=240]http://s14.postimg.org/vhmast31t/img8.png[/hs]

Agora vá nas suas setas e pressione 16 vezes para a direita(ou esquerda).

[hs width=320 height=240]http://s14.postimg.org/j5nzt24kx/img9.png[/hs]

Você vai reparar que a seleção vai estar bem no meio do autotile.
Agora você aprendeu como se converte autotiles do VX para XP.
Mas isso serve para que você aprenda a selecionar o "meio" do autotile para seus fins.
Aperte 'Ctrl + C' e vá na imagem do seu mapa no photoshop. Nem preciso dizer que é para colar, não?

[hs width=320 height=240]http://s14.postimg.org/zf9ki7pv5/img10.png[/hs]

Agora você usa a ferramenta de 'mover' do seu editor de imagens e coloca aquele tile onde quiser em seu mapa.

[hs width=320 height=240]http://s14.postimg.org/qa5t23bu9/img11.png[/hs]

Em seguida basta ir fazendo o mesmo processo até completar aquele tapete. Lembrando de que para selecionar o 'centro' do tapete basta fazer o mesmo processo
que fez para selecionar aquele meio, mas para baixo(ou para cima).

[hs width=320 height=240]http://s14.postimg.org/ucwu165yp/img12.png[/hs]

Reparem que ficou uma bagunça na aba de camadas, para mesclar todas elas faça o seguinte processo:

[hs width=320 height=240]http://s14.postimg.org/65c8wmi0h/img13.png[/hs]
[hs width=320 height=240]http://s14.postimg.org/dzcui0ptd/img14.png[/hs]

Clicando com o botão direito do mouse você seleciona para 'mesclar as visíveis, daí todas as camadas que estiverem visíveis vão se juntar em uma facilitando
sua vida na hora de organizar as camadas. Tendo em mente que um mapa avançado usa cerca de 70 camadas de vez em quando, é melhor deixar tudo organizado desde o começo.

Vamos continuar com o processo.
Você pega um tile, copia, e cola. Não tem muito segredo nesta parte, mas tenha em mente que você tem uma decoração livre. Você pode colocar um livro
acima da cama, um prato acima da pia, um quadro em qualquer pixel da parede e etc...
Fazendo isso você decora sua casa da forma que lhe convier.

Outra coisa que esqueci de mencionar é o seguinte:

[hs width=320 height=240]http://s14.postimg.org/45vn57nox/img15.png[/hs]
[hs width=320 height=240]http://s14.postimg.org/embr7jmpd/img16.png[/hs]
[hs width=320 height=240]http://s14.postimg.org/wwsgv9tip/img17.png[/hs]

E é mais uma dica. Saber organizar os layers é essencial.
E para virar um tile, basta selecionar "Ctrl + T" e você vai poder alterar o tamanho, posição e rotação de uma imagem.
Outra coisa, separe as camadas que ficam acima do jogador pois você vai ter que dividir as camadas em 'ground' e 'above'.

E nosso mapa já deve estar pronto:

[hs width=320 height=240]http://s14.postimg.org/gztoyk14h/img18.png[/hs]

Faça as coisas com paciência. Não faça com pressa, caso contrário seu mapa pode estar mal-feito.
Tendo terminado o mapa, falta apenas a iluminação.[/box2]

[box2 class=black title=6 - Efeitos de iluminação básico]
Os primórdios da iluminação sempre são:
Preencher o mapa com a cor preta e depois ir apagando com a borracha para dar um efeito de iluminação. Mas as coisas não são bem assim.

Vamos fazer o seguinte:
1-Crie um novo layer e pegue a ferramenta 'Balde de tinta' e, com 30% de opacidade, jogue a cor preta no mapa.
  Ele deve estar assim:

[hs width=320 height=240]http://s14.postimg.org/vgljqvfzl/img19.png[/hs]
*Nota: Esse efeito é básico, o efeito de iluminação avançado não consiste em usar a cor preta para escurecer o mapa em certos pontos.

2-Com a ferramenta 'Laço poligonal', desenhe a parte em que vai haver iluminação. Lembrando de que a luz não pode ultrapassar as paredes, a iluminação
deve ser o mais real possível em quesitos de sombra.

[hs width=320 height=240]http://s14.postimg.org/62wynj3qp/img20.png[/hs]

3-Selecione a borracha em modo brush, escolha o Soft Round e deixe a opacidade em 30% com 50% de flow.

[hs width=320 height=240]http://s14.postimg.org/yr9wqr5wx/img21.png[/hs]

4-Vá clareando a área de iluminação com a borracha até estar satisfeito.

[hs width=320 height=240]http://s14.postimg.org/ol1b7rlip/img22.png[/hs]

Obs: A iluminação sempre, sempre, fica mais clara em sua fonte, portanto isso deve ser praticado com atenção.
     Sempre deixe mais escuro quando estiver ficando longe do ponto de origem.

5-Vá realizando outros efeitos de luzes pela casa. Você também pode fazer luzes nas paredes de lado, como se houvesse uma janela ali, porém a ordem
de posição de janelas sempre é a mesma, sendo visível ou não. Faça elas com moderação.

[hs width=320 height=240]http://s14.postimg.org/l930egtrl/img23.png[/hs]

Obs: Preste atenção na luz do sol. Se o sol está do lado esquerdo, a luz das janelas vai ser mais forte nesse lado. Ou se o sol estiver atrás da casa, daí a parte de
cima do mapa deve estar mais claro e mais forte em sua iluminação. Levar esses fatores em conta é essencial.
E é recomendável para todos os panomappers a prestarem atenção na iluminação. Como eu disse, a luz não, não deve atravessar as paredes, e sim colidir com
os objetos de acordo com a lei da física.
Acenda a luz do seu quarto, ou use um abajur caso necessite de ajuda quanto a sombra. Isso é recomendado para quem não está acostumado a fazer esse tipo de trabalho.
[/box2]

[box2 class=black title=7 - Efeitos de iluminação detalhado]

Aqui não é preciso muita coisa, mas algo será acrescentado ao nosso estilo de iluminação.
Lembra de que se você usar uma vela em sua casa, o ambiente vai estar da cor do fogo? Sim, vocês entenderam perfeitamente.
Aqui vamos usar as cores de forma adequada para que possamos criar uma iluminação melhor e deixar o nosso mapa mais variado.

Pegue o "Eyedropper tool" e vá naquela lâmpada no quarto. Pegue a cor que será de uso para a iluminação. Mas tome cuidado com a cor que for escolher.
Para simplificar, não escolha muito escuro nem muito claro. Escolha uma cor equilibrada.
[hs width=320 height=240]http://s14.postimg.org/y84thhei9/img24.png[/hs]
[hs width=320 height=240]http://s14.postimg.org/h3s3sjvzl/img25.png[/hs]

No meu caso vai ser essa.
Agora crie uma nova camada abaixo da camada de luz e acima de todos os outros componentes do mapa.
Usando o pincel, passe essa cor onde lhe convier para dar um efeito de luz melhor.

[hs width=320 height=240]http://s14.postimg.org/5wj9kfult/img26.png[/hs]

O meu ficou desse modo.
Ficou estranho, eu sei, porém a mágica vem aqui.
Vá nas propriedades de camada e mude de "Normal" para "Overlay", ou "Soft Light" se preferir mas eu gosto mais do overlay.

[hs width=320 height=240]http://s14.postimg.org/b5eaibd0x/img27.png[/hs]
[hs width=320 height=240]http://s14.postimg.org/5z3579y9d/img28.png[/hs]

E a mágica acontece.
É impossível tentar aprender a panomapear sem entender o básico de design, por isso eu acredito que todas as áreas estão conectadas de alguma forma.
Quanto mais você souber de design, melhor será para você panomapear. Porém isso vale para umas coisas apenas, tais como: Textura de grama, efeitos de fog,
edição de tiles, iluminação e etc...também vocês sabem que para panomapear você necessita de um talento puro no mapeamento.

Faça isso em todos os outros cantos do mapa, porém usando a "cor" adequada para cada fonte de luz tal como fiz na lâmpada.

[hs width=320 height=240]http://s14.postimg.org/5espibuep/img29.png[/hs]

Não ficou lá essas coisas pois eu queria fazer algo mais simples, porém usem esse método com sabedoria em seus mapas e trabalhem bem nisso, sem pressa.
Tenha a certeza de não deixar os cantos das iluminações muito duros, sempre vá configurando a opacidade e o flow de acordo com a necessidade.


Para aplicar o mapa em seu jogo, separe as camadas que ficam acima do jogador das que ficam abaixo dele.
Como no meu mapa eu não quero que tenha nada que o jogador passe por debaixo(tais como plantas e candelabros), apenas haverá as camadas de luz e fundo.
Deixe visível a camada de fundo sem os efeitos de luz e salve a imagem em png(você escolhe).
Salve ela na pasta de parallax em seu mapa.
Obs: Salve apenas a de luz normal, a camada de luz detalhada fica junto da camada do chão, porém existe um método de fazer com que ela fique com a camada de luz, mas
é algo que envolve mais design. Apesar de eu já saber, isso é algo que vai se aprendendo sozinho...
Mescle ela com a camada de ground e deixe em parallax. A camada de luz fica na pasta de pictures. Espero que estejam entendendo.
Caso não, vai uma sequência de imagens:

[hs width=320 height=240]http://s14.postimg.org/gjho3ls4x/img30.png[/hs]
Desta forma, você salva na pasta de parallax.
[hs width=320 height=240]http://s14.postimg.org/nrtasw4vl/img31.png[/hs]
Desta forma você salva na pasta pictures.

Sendo assim, terminamos na parte da edição e agora vamos de volta ao maker para a parte da configuração.

Se você usou um script de fix picture que eu citei no início do tópico, salve a imagem assim: "(FIX)Imagem.png" sem aspas.


[hs width=320 height=240]http://s14.postimg.org/4vnm92301/img32.png[/hs]

vá no seu projeto e mude o tileset para exterior. Há um tileset feito apenas para esse tipo de coisa mas caso você não tenha e não tem tempo para colocar
em seu projeto vou utilizar o método padrão.
No tileset exterior marque os seguintes tiles para O e X:
[hs width=320 height=240]http://s14.postimg.org/b48y2n0kx/img33.png[/hs]
Isso já deve estar configurado por padrão, então não há desculpa.
Agora vá no seu mapa e com o tile que está marcado com O, segure SHIFT e use a ferramenta de retângulo para preencher todo o mapa.
Caso não tenha configurado o panomapa no parallax, trate de fazer agora, lembrando de fazer ele ser visível no mapa.

[hs width=320 height=240]http://s14.postimg.org/631k19t4h/img34.png[/hs]

Agora veja o seu mapa.
Vai estar normal, certo?
Pois bem, crie um evento em processo paralelo para que ele mostre a imagem de iluminação que fica na pasta pictures.
Em seguida basta deixar o comando de apagar evento temporário e dar ok.
Agora teste seu mapa. Se estiver da forma que panomapeamos, felicidades. Caso não, você está fazendo algo errado.
Agora vamos configurar onde o player possa passar ou não. Para isso vamos pegar o tile de terra ou qualquer outro tile apenas para marcar.

[hs width=320 height=240]http://s14.postimg.org/ggxsgrohd/img35.png[/hs]

Sem demais segredos basta pegar o tile que estava marcado com um X e preencher aquele gramado com ele. Lembrando de que ele deve ser transparente.

[hs width=320 height=240]http://s14.postimg.org/4bd6k3z5d/img36.png[/hs]

Fazemos a mesma coisa com o tile passável, mas preenchemos ele com o SHIFT pressionado.

[hs width=320 height=240]http://s14.postimg.org/rgnl644a9/img37.png[/hs]

Teste seu jogo e preste atenção se não deixou alguma "passagem" errada.
E pronto. Você criou seu panomapa com efeito de iluminação criado á mão.
Agora basta ir treinando mais isso e com o passar do tempo você melhora.

Eu não posso dizer que vocês vão estar em um determinado nível de conhecimento, pois depois que você chega no avançado não existe mais "classificações" de seu conhecimento.
Você vai fazer arte de níveis aleatórios.
E quando estiver no limite, vai optar por fazer mapas mais simples, e até evitar um pouco o panomapeamento. (como acontece comigo)
Obs: Eu ia coloca uma porta ali, mas vou deixar assim mesmo pois vocês podem fazer nos seus.

Não levanta daí, a aula ainda não acabou[/box2]

[box2 class=black title=8 - Criando efeitos de textura]

Aqui vai ser algo simples e curto.
Você pode modificar a textura de qualquer coisa de modo que convenha a seu interesse.
Seja em caminhos de terra, grama e caminhos de pedras.
Isso é algo único do seu editor de imagens.
Agora abra o seu RpgMaker e crie um mapa bem pequeno, nos limites padrões do maker.
Feito isso, preencha o chão com o tile de grama(exterior) e tire uma print, cole no paint e depois salve.
Feito isso abra a imagem no seu editor de imagens e vamos á elas.

[hs width=320 height=240]http://s14.postimg.org/t9lwgp035/img38.png[/hs]

Tenha a garantia de que exportou os autotiles do tileset exterior pois vamos usar os caminhos de terra e grama nessa aula.
Para ser mais preciso, é o "Outside_A2" do Ace e "TileA2" do VX.
Abra ambos no editor de imagens.

-Selecione o tile de areia.
[hs width=320 height=240]http://s14.postimg.org/picbudmep/img39.png[/hs]
-Vá em Edit > Define pattern > OK.
[hs width=320 height=240]http://s14.postimg.org/d8xwhgrld/img40.png[/hs]
-No mapa, crie uma nova camada chamada "Sand Layer" ou outro nome que preferir.
-Crie outra camada chamada "Tall Grass Layer" ou outro nome de sua preferência.
[hs width=320 height=240]http://s14.postimg.org/7r0pfx701/img41.png[/hs]
Obs: O efeito usado aqui pode ser feito tanto com brushes quanto por layers, porém para quem não conhece muito o programa é recomendável usar
por layers.

-Vá na outra imagem e selecione o tile de grama. Mova os direcionais do teclado 16 vezes para a direita e 16 vezes para baixo para poder selecionar o centro.
[hs width=320 height=240]http://s14.postimg.org/ksqzjiks1/img42.png[/hs]
Após isso faça o mesmo processo anterior, Edit > Define pattern > Ok.

-Agora vá no mapa e clique duas vezes no "Sand Layer".
Uma janela vai aparecer:
[hs width=320 height=240]http://s14.postimg.org/3kkgebws1/img43.png[/hs]
-Vá em "Pattern Overlay" e selecione o padrão de areia que você salvou pela primeira vez.
[hs width=320 height=240]http://s14.postimg.org/6tyvkskvl/img44.png[/hs]
-Dê ok e repita o mesmo processo na layer "Tall Grass Layer" porém escolha o tile de grama que você salvou pela última vez.

Feito isso, na camada de terra, pegue o pincel e passe em qualquer área como se estivesse mapeando pelo maker, porém faça as coisas com cautela, sempre
prestando atenção nas linhas de grade caso deseje adicionar árvores.
Como não pretendo fazer um mapa agora, e sim lhes ensinar as coisas eu vou fazer apenas exemplos.
[hs width=320 height=240]http://s14.postimg.org/b9haq1x9t/img45.png[/hs]
É essencial que você use o Soft Round no pincel. Caso não tenha em seu editor, tente usar um brush mais macio.
Também quanto mais diferenciado for o brush melhor.
[hs width=320 height=240]http://s14.postimg.org/5wx1pnyr5/img46.png[/hs]
Tente diferenciar na opacidade dos caminhos e o mais importante, não deixar eles tão retos.
Por isso, eu recomendo você sempre começar a fazer com opacidade em 50% e 100% de flow(isso depende de você).
[hs width=320 height=240]http://s14.postimg.org/i06yqyz75/img47.png[/hs]
-Você também pode praticar isso com o "Tall Grass Layer".
-O mesmo efeito pode ser usado em águas. Caso deseje dar a impressão de que ela está animada, varie nas opacidades e utilize fog em seu mapa.
-Caso deseje fazer uma verdadeira animação eu recomendo que use um script de Animated Parallax.(o mais famoso é o do Modern Algebra)

[/box2]

[box2 class=black title=9 - Fazendo modificações em tiles]
Esta parte é bem fácil. Nas modificações de tiles geralmente fazemos o uso de mesclagem, também colocamos um tile acima do outro e por vezes mudamos as camadas
para overlay e outros afins para que combine com o tile que queremos editar.
Vou começar com um bem básico apenas para lhes mostrar como geralmente fazemos.
-Vou exportar o autotile "Outside_A4".
-Vou abrir ele no photoshop e pronto.
Obs: Como o photoshop é um programa que custa abrir, é recomendado que você deixe ele aberto caso necessite usar denovo.
[hs width=320 height=240]http://s14.postimg.org/juamh87g1/img48.png[/hs]
E vou utilizar esse primeiro tile aqui para que possamos fazer uma edição.
Sendo assim o que eu quero fazer nele? Bem, que tal colocarmos uma rachadura de leve e alguns suportes de madeira? Talvez seja bom para minas.
Então vamos lá.
Eu vou exportar o tile de "Dungeon_B" pois nele há muitas coisas que podemos usar em minas.
E claro, vou abrir no photoshop.
[hs width=320 height=240]http://s14.postimg.org/4bhrxuoj5/img49.png[/hs]
Eu vou usar essa rachadura aqui, talvez sirva para algo.
Bom, antes de tudo como eu quero apenas modificar aquele tile eu vou deletar os outros que estão perto dele, pois aquilo pode atrapalhar futuramente.
[hs width=320 height=240]http://s14.postimg.org/macfv2pip/img50.png[/hs]
Agora ficou um clima bom para trabalhar.
Bem, sem mais demora vou aplicar aquela rachadura no autotile de alguma forma razoável. Também não quero encher ele de rachaduras pois pode ser ruim, então vou
fazer algo moderado.
[hs width=320 height=240]http://s14.postimg.org/eka93ockx/img51.png[/hs]
Agora ficou bom.
Então vou colocar mais uma, mas espera, isso vai ficar simétrico.
Então vamos fazer o seguinte: Colamos a rachadura no tile.
[hs width=320 height=240]http://s14.postimg.org/92hnfvhdd/img52.png[/hs]
Apertamos 'Ctrl+T" e, com o botão direito do mouse nós escolhemos "Flip Vertical" para virar de cabeça para baixo.
[hs width=320 height=240]http://s14.postimg.org/l1t5n6my9/img53.png[/hs]
Agora damos um flip horizontal para que ela fique mais diversificada.
[hs width=320 height=240]http://s14.postimg.org/ecmm761m9/img54.png[/hs]
E já deu uma diferenciada:
[hs width=320 height=240]http://s14.postimg.org/z0l9lwmup/img55.png[/hs]
Mas ainda continua igual, então que tal a gente esconder um pouco mais para a esquerda e apagar um pouco com a ferramenta de seleção?
[hs width=320 height=240]http://s14.postimg.org/p4k6m9h2p/img56.png[/hs]
Ficou melhor, não?
Então vamos adicionar o suporte da mina, ou seja, a madeira que fica nos cantos sustentando a parede.
Vamos pegar ela no tile de "Dungeon_B" que já abrimos.
[hs width=320 height=240]http://s14.postimg.org/5155nyegh/img57.png[/hs]
Agora colocamos no autotile que estamos editando.
[hs width=320 height=240]http://s14.postimg.org/t65v5nyr5/img58.png[/hs]
Mas espera, a rachadura ficou apagada!
Sem problemas, basta arrastá-la para onde fica visível.
[hs width=320 height=240]http://s14.postimg.org/box5wt8kx/img59.png[/hs]
Ficou bem melhor, mas se você quiser diferenciar um pouco a rachadura, você pode mudar o modo de mesclagem para "Overlay", tal como fez na parte de iluminação da aula
anterior.
[hs width=320 height=240]http://s14.postimg.org/6vi05p1gx/img60.png[/hs]
Como podem ver, o overlay fez uma boa diferença nas coisas.
Você pode usar o modo de mesclagem tanto para com a rachadura quanto para aquela madeira que está ali.
[hs width=320 height=240]http://s14.postimg.org/u5w61ddwx/img61.png[/hs]
Repare que se você mudar para luminosidade ele vai ficar da cor da pedra, mas não é isso que queremos, então vamos testar com o overlay.
[hs width=320 height=240]http://s14.postimg.org/v0ipnelrl/img62.png[/hs]
Ficou até bom, mas as rachaduras estão aparecendo na madeira.
Para retirar o efeito, basta ir na camada das rachaduras e apagar naquela parte com a ferramenta de seleção.
[hs width=320 height=240]http://s14.postimg.org/kt06azzjl/img63.png[/hs]
[hs width=320 height=240]http://s14.postimg.org/ych0gpdip/img64.png[/hs]
Para fazer uma seleção dentro da outra, apenas pressione SHIFT enquanto seleciona. Isso é bem útil, mas de nada adianta se você não usar com precisão.
[hs width=320 height=240]http://s14.postimg.org/j98mhtvap/img65.png[/hs]
E ficou corrigido.
Mas espera, tem mais uma coisa. A madeira está com a textura da pedra pois ela está em Overlay. Então devemos corrigir isso.
Pegue uma parte "Lisa" da pedra ou qualquer outro tile "Liso" seja madeira ou pedra e coloque atrás da camada das madeiras.
Depois veja o efeito:
[hs width=320 height=240]http://s14.postimg.org/m9pgyd6lt/img66.png[/hs]
[hs width=320 height=240]http://s14.postimg.org/iem2vsng1/img67.png[/hs]
E ficou bem melhor, até.
Porém vamos fazer do outro lado e ver como fica.
[hs width=320 height=240]http://s14.postimg.org/y5br35w35/img68.png[/hs]
Eu acho que ficou bom até demais. Qualquer adição pode ser um desastre.
[hs width=320 height=240]http://s14.postimg.org/sjkqld60h/img69.png[/hs]
E ficou um edit bonito ao meu ver.
Mas ele está incompleto, para sabermos se está bom devemos testar no maker e ver no que erramos e o que devemos fazer para corrigir.
[hs width=320 height=240]http://s14.postimg.org/siasry46p/img70.png[/hs]
Finalmente o edit está completo e sem erros, e bom, eu acho que está completo ao meu ver, porém aquelas rachaduras no meio tem seus poréns.
Para resolver isso basta selecionar um tile e mover os direcionais 16 vezes para os lados até ficar no centro, daí você vê como fazer para retirar.
No mais, isso aí foi o nosso guia de edição de tiles.
Obs: Se ficou escuro demais, basta ir clareando um pouco com o pincel branco e ir vendo os modos de mesclagem até ficar com uma iluminação melhor.
[hs width=320 height=240]http://s14.postimg.org/vexts8a0h/img71.png[/hs]
Ficou um pouco mais claro, mas cuidado para não ficar claro demais pois pode ficar desproporcional com o tile de parede.
Para fazer isso basta ir selecionando apenas a madeira com a ferramenta de seleção e ir selecionando segurando SHIFT.
Depois basta pegar o pincel, mudar o modo para overlay e selecionar a cor branca. É mais fácil deste modo mas existe outro método para se fazer,
mas levando em conta de que isto está mais para a parte de design eu decidi fazer da forma mais simples.

Não sei se repararam, mas cada vez que eu disse: "Que tal[...], Será que[...], então a gente vai fazer assim[...]", eu estava lhes mostrando um pouco
das ferramentas de edição para que vocês aprendessem a usar e fazer os seus edits de uma forma mais original, ou seja, única.
Mas agora vamos ao último passo da aula.
[/box2]

[box2 class=black title=10 - Finalizando]

  Esta parte ia conter mais uma lição, mas eu acho que não será mais necessário já que vocês podem realizar ela com o que aprendemos nessa aula.
Eu ia ensinar a como modificar a textura dos tiles mas para fazer isso basta pegar um tile qualquer como de madeira e colocar acima de um de pedra para ver o efeito.
Não era nada demais, por isso eu decidi retirar esta parte já que a aula estava ficando muito grande e eu usei no máximo umas 72 imagens.
E terminei meus ensinamentos sobre a arte do mapeamento, agora eu dei o empurrão, o resto é com vocês.
É claro que eu não ensinei tudo o que eu sei, portanto não é possível ensinar tudo o que você sabe sobre mapeamento já que algumas coisas não podem
ser ensinadas, tem que ter 'manha' na coisa para poder fazer. E isso você com certeza vai adquirir com o tempo.
Esta aula eu não ensinei a fazer precisamente um panomapa com o sentido: Faça isso, depois isso, depois aquilo e etc...
Eu ensinei algumas técnicas apenas.
E é isso, não tenho mais o que dizer, caso queiram um pouco mais de informação, abaixo eu vou colocar links para outras aulas e tópicos que podem lhes ajudar.
Até mais!


Extra:
Procura edits para o VX e Ace? Pode passar na casa do nosso tio [user]Makers[/user] e encontrar os mais variados edits para seus jogos no
Makers Edits.
Lá tem edits de tudo o que você imagina sobre o RTP. Caso queira um edit específico, basta pedir para o nosso forjador.

Quer aprender a mapear interiores com o Parallax Mapping?
O nosso tio [user]Mistyrol[/user] nos trouxe uma excelente aula que é de grande ajuda para muitos.
Basta ver aqui.
Tenho certeza de que vão aprender bastante.

Está com dúvidas sobre como fazer para deixar de mapear casas exteriores quadradas? Temos uma aula do velho [user]Nandik[/user].
Aqui você vai aprender a fazer casas variadas para suas cidades.

Quer aprender a mapear com o tio [user]Simonmuran[/user]? Ele tem uma excelente aula em seu arsenal capaz de fazer uma completa mudança
em seu cérebro. Basta vir aqui e não se esqueça de trazer um suco de guaraná.

Está querendo aumentar suas habilidades de iluminação? Basta ver essa aula do tio [user]K.A.O.S[/user]
e treinar um pouco. Lembrando de que dependendo do local a iluminação deve ser mais escura ou mais clara.

Bem, espero que gostem da aula e até mais!²
[/box2]

Santa maria mãe de Deus! kkkkkkkkkkkkk isso tá grande, mas é assim que é bom ( ͡° ͜ʖ ͡°) (não seja mente suja)
kkkkk enfim, a aula ta muito boa, alguns recursos dela como as luzes e tals, serão importantes para mim
pois ainda não manjo totalmente, enfim ótima aula tio!  :XD:


Boa aula Alisson, explicou direitinho as funções, pra quem ainda não conhecia ou queria se aprofundar mais, é uma ótima aula para ser vista, eu particularmente prefiro fazer os parallax do zero mesmo, sem usar o editor, e vou dizer que quem quer se aprofundar nessa técnica tem que ter paciência também, como o Alisson disse, mapas assim levam em torno de 1 hora ou mais, já tive mapas que levei em torno de 17 horas para completar, é um trabalho árduo eu diria, mas a recompensa e satisfação é muito grande, e já digo quem iniciar nessa técnica não vai conseguir parar, eu quem o diga...kkkkk, mas no mais sua aula foi ótima Alisson, espero que ajuda muitos a adotarem essa técnica e quem sabe mais pra frente não vemos mapas maravilhosos por ai, em breve eu vou fazer um tutorial também explicando algumas coisas que eu utilizo, e complementando a sua aula também vou mostrar como utilizar o modern algebra para fazer as suas próprias animações na água.  Boa aula Tio!  :ok:
Fazer mapas é uma arte, faça como se fosse o seu último.




06/06/2014 às 17:14 #3 Última edição: 06/06/2014 às 17:17 por Alisson
 'ha ha ha, eu juro que pra postar foi complicado, demorou dias pra terminar essa aula, Makers que o diga.
Bem, ela foi mais pra ensinar técnicas básicas, e como eu disse, ela foi um empurrão, o resto é com o povo ;)

Edit: Ly me atropelou mas tudo bem xD
Fico muito grato de ter sua presença aqui, minhas aulas tem como intuito ensinar quem nunca teve experiência com o assunto e acredito que muitos mapas bons podem vir por aí já que a área de mapeamento está sendo mais valorizada com o tempo.
Até mais e obrigado ;)

boa aula tio alisson, é sempre bom aprender mais com proficionais como você
tua aula tá muito bem explicada vai me ajudar muito daki pra frente +0uro :ok:
:linha3:
01110111 01101001 01100011 01100011 01100001
:linha3:

Opa, profissional? Que nada xD
No mais, fico feliz que estejam gostando da aula. Eu estava preocupado com isso, por essa causa eu demorei mais para trazer.
Sendo assim espero ver mais trabalhos do pessoal daqui pra frente.
Até!

Tio leu tudo :clap:

Isso sim é que é tutorial, está muito bom. Você explicou e deixou cada detalhe muito
bem definido, não deixando passar nada em branco.

O que eu até me orgulhei foi o fato de que na parte 9 o tio sabia fazer mais do que
bem :XD:... ah obrigado por ter citado meu tópico, isso pra mim é muito gratificante.

Tarefa de Casa

Bom eu tentei fazer o que mais apanho...

6-Efeitos de iluminação básico
7-Efeitos de iluminação detalhado

Então fiz esse mapinha ae... o que achou Tio Alisson?


Tarefa de Casa
[close]
Prazer, Terror dos Modinha

CitarO que eu até me orgulhei foi o fato de que na parte 9 o tio sabia fazer mais do que[...]
e.e. Meh, você também deu uma dica muito boa ali XD.

Vamos ver, a iluminação ficou boa, não atravessa as paredes e nem parece aqueles "Pes" de ps2 que são mentirosos.
Mas uma coisa chamou minha atenção e vou dar uma dica quanto a isso: "Faça as luzes meio que....retas..
Tipo, aquela curva indo para o quarto foi a única coisa que achei estranha.
Mas continue treinando man, agora não tem mais desculpa para você não panomapear XD

Edit: É que nem você fez naquele quarto, ali está certinho ;)

Citação de: Alisson online 06/06/2014 às 20:31
CitarO que eu até me orgulhei foi o fato de que na parte 9 o tio sabia fazer mais do que[...]
e.e. Meh, você também deu uma dica muito boa ali XD.

Vamos ver, a iluminação ficou boa, não atravessa as paredes e nem parece aqueles "Pes" de ps2 que são mentirosos.
Mas uma coisa chamou minha atenção e vou dar uma dica quanto a isso: "Faça as luzes meio que....retas..
Tipo, aquela curva indo para o quarto foi a única coisa que achei estranha.
Mas continue treinando man, agora não tem mais desculpa para você não panomapear XD

Edit: É que nem você fez naquele quarto, ali está certinho ;)

Achei que se ficasse muito reto ficava muito feito... enfim
muito obrigado pelas dicas e claro, pela ótima aula. Estarei treinando sempre!

Valeu Tio :ok:
Prazer, Terror dos Modinha

Brother, valeu, acabei de aprender a como importar os mapas do PS/AI para o maker :3

Fico feliz de ter ajudado.
Qualquer dúvida basta me mandar por mp ou por aqui mesmo se quiser.

Gostei muito do seu tutorial Alisson, vou ler ele completamente depois, não faço as luzes de uma maneira diferente, para quem quiser vou deixar minha dica, tipo invés de eu focar na iluminação eu foco nas sombras escuras, e consequentemente a tonalidade amarelada da minha luz irá gerar sim um efeito de sombras/luz, eu utilizo também o filtro Gaussian Blur do Photoshop, é uma boa opção para deixar a luz um pouco opaca dando uma impressão mais realista, vejam um exemplo:

Spoiler
[close]

Obs: Não sei se consegui explicar direito, porque essa parte é com o tio do tópico ai, kkk. Neridian é o meu projeto, em breve vocês conheceram...

Opa, quero ver esse projeto aí ;)
No mais, é uma boa dica para quem não consegue criar uma iluminação com os brushes. Sem falar que é sempre bom dar uma trabalhada com a galeria de filtros, tanto para ajustar esses efeitos quanto para criar cenários diferentes.

Fico feliz que tenha gostado da aula, mesmo.
Qualquer coisa basta chamar, e isso serve para todos.

Gente, eu seguro shift na parte do X daí vai aparecendo as partes da parallax mas quando eu vou na tile O e seguro shift pra prencher com retângulo e tals, não aparece nada. Alguém sabe me ajudar?

Você deve preencher todo o mapa com o X. O tile em O utilizado na aula é transparente, então ele vai ficar por cima dos outros.
Utilize o O após ter preenchido tudo com o tile X.