Entrar
Últimos assuntos
» Colisões não funcionandopor RastaMaan Hoje à(s) 19:49
» Como ajustar velocidade de cada frame da animação no game maker
por pequetux Hoje à(s) 16:45
» Preciso de ajuda
por AftonDuGrau Dom 21 Abr 2024, 20:18
» Como faz o evento drawn GUI, não se repetir?
por aminaro Sex 19 Abr 2024, 20:30
» PROBLEMAS COM FÍSICAS DE ÁGUA
por aminaro Ter 16 Abr 2024, 10:07
» Retorno da GMBR!!!
por Ralphed Sex 12 Abr 2024, 22:45
» JOGADOR PARANDO NO AR QUANDO ATACA
por aminaro Qua 10 Abr 2024, 13:51
» Problemas com texto interativo
por Kaaru72 Dom 07 Abr 2024, 11:31
» Erro escondido e indecifrável
por dev_gabize.azv Qui 04 Abr 2024, 10:11
» Mudar cor de apenas uma palavra
por Ralphed Sáb 30 Mar 2024, 00:39
» Procuro Programador de game maker
por Wou Sex 15 Mar 2024, 10:27
» Mod APK
por gamerainha Qua 13 Mar 2024, 06:30
» Aceito pedidos de sprites (Com exemplos meus)
por Sevilha Qua 28 Fev 2024, 12:17
» Inventário simples
por Isquilo_Roedor Qui 22 Fev 2024, 15:18
» Problemas na programaçnao de inimigo [jogo DOOM LIKE]
por Black Mirror Dom 11 Fev 2024, 13:34
» ANDROID MULTI TOUCH
por DiegoBr Dom 04 Fev 2024, 12:13
» Servidor de Discord do fórum?
por Lighter Sáb 27 Jan 2024, 17:18
» Save e Load Json
por Klinton Rodrigues Qui 25 Jan 2024, 11:12
» Colisão com mais de um objeto
por aminaro Seg 22 Jan 2024, 15:02
» Oi sou novo aqui
por Thiago Silveira Alexandre Sáb 20 Jan 2024, 20:55
» Como acessar conteudo comprado no marketplace
por macmilam Sex 19 Jan 2024, 07:42
» Devlogs em vídeos do Block Room
por Joton Seg 15 Jan 2024, 16:56
» Alguém aqui já ganha dinheiro com seus games?
por Joton Seg 15 Jan 2024, 16:49
» ACERVO GMBR MAGAZINE
por Joton Qui 11 Jan 2024, 19:21
» como aumentar o obj sem aumentar a colisão??
por GabrielXavier Qua 10 Jan 2024, 07:21
[Aula - 02] Arte gráfica e efeitos especiais para Game Maker - Parte 1
+2
vinians
Kabeção
6 participantes
GMBR :: Ensine & Aprenda :: Tutoriais :: Game Maker
Página 1 de 1
[Aula - 02] Arte gráfica e efeitos especiais para Game Maker - Parte 1
Construção de cenários
Clique aqui para acessar a aula anterior.
Nesta aula vamos construir um cenário usando falso vetor no Photoshop.
Antes de mais nada:
Ele será uma tela de seleção de planetas como em um jogo de nave espacial.
Então, vamos começar.
Abra o Photoshop aperte Ctrl+N e crie uma nova imagem com as dimensões 640x480 e passa para o próximo capítulo.
Fazendo o primeiro planeta
Selecione a ferramenta "Ellipse Tool" e defina a cor com um azul claro como na imagem abaixo.
Segure Shit+Alt, clique e arraste para fazer um círculo.Antes de mais nada:
- Estou usando o Photoshop CS3 com a linguagem em inglês.
- Esteja com o Game Maker 8 PRO pois as versões anterior não tem suporte nativo a imagens únicas com diversos canais de transparência.
- Vamos usar backgrounds em resoluções bem grandes, mas um motivo para se ter o GM8 pois o famoso "Unspecified error" que ocorre quando se usa imagens muito
grandes parece ter sido revolvido ou otimizado. - O cenário será construído para uma resolução em jogo de 640x480.
- Esteja familiarizado com a ferramenta "Pen Tool", caso contrário veja esses tutoriais:
http://www.tutoriaisphotoshop.net/2007/09/como-usar-pen-tool-ou-ferramenta-caneta.html
https://www.youtube.com/watch?v=xR1jiYkAyfQ - Não se esqueça de salvar o projeto constantemente.
Ele será uma tela de seleção de planetas como em um jogo de nave espacial.
Então, vamos começar.
Abra o Photoshop aperte Ctrl+N e crie uma nova imagem com as dimensões 640x480 e passa para o próximo capítulo.
Fazendo o primeiro planeta
Selecione a ferramenta "Ellipse Tool" e defina a cor com um azul claro como na imagem abaixo.
Escolha a "Pen Tool", segure Ctrl e clique duas vezes nos arredores do circulo para pode poder ver as ancoras de demarcação.
Ainda com o Ctrl pressionado clique segure e arraste os pontos para deformar um pouco o circulo.
Use a "Pen Tool" e faça algumas forma sobre o planeta para simular terra.
Clique na camada de alguma das formas que acabou de fazer, aperte Ctrl+J para duplicá-la e Ctrl+T para redimensioná-la.
Segure Ctrl+Alt e use as marcações nos pontos diagonais para aumentar o tamanho sem perder a proporção original.
Mude a cor da camada para branco e mova ela para baixo.
Faça o mesmo com todas as outras.
Clique com o botão direito do mouse na primeira camada acima do circulo azul e escolha "Create Clipping Mask" para a forma ficar dentro do planeta.
Faça o mesmo sempre com a camada acima até obter esse resultado:
Use Ctrl+J para duplicá-la e Ctrl+T para redimensionar e espalhe as ondas pelo planeta.
Agora vamos texturiza-lo.
Selecione a camada do circulo azul, copie essa textura e cole no Photoshop:
Ela deve ficar dentro do planeta assim como as outras formas.
Com Ctrl+T redimensione a textura como quiser.
Ainda com a camada da textura selecionada, copie e cole mais esta:
Mude o "Blend Mode" para "Overlay" e diminua um pouco a opacidade da textura.
Temos então este resultado:
Selecione todas as camadas com a terra (menos as brancas) e pressione Ctrl+E para fundi-las.
Segure Ctrl e clique na imagem da mascara da camada do planeta para fazer uma seleção.
Tenha certeza de que a camada das terras que você acabou de fundir esta selecionada e pressione Shift+Ctrl+I para inverter a seleção e depois Delete.
Agora clique com o botão direito do mouse na camada e vá em "Release Clipping Mask".
Assim, podemos clicar uma textura a ela sem afetar as demais.
Copie e cole essa textura:
Clique com o botão direito nele e selecione "Create Clipping Mask", a redimensione e coloque o "Blend Mode" em "Hard Light".
Até agora nosso planeta esta assim:
Vamos apenas adicionar um efeito para simular a atmosfera dele.
Antes de prosseguir crie uma nova camada a araste para debaixo do planeta, com a cor em preto pressione Alt+Delete para preenche-la com a cor.
Agora podemos visualizar melhor o que vamos adicionar.
Selecione a "Ellipse Tool" e crie um círculo em cima do planeta, mude sua cor para branco.
Na caixa "Fill" que fica bem abaixo da opacidade da camada, mude para 0% para tornar a forma transparente.
Clique duas vezes na camada para abrir a janela "Layer Style", vá em "Inner Shadow", mude o cor para branco, o "Blend Mode" para "Screen", a opacidade pode ser 75%, "Size" em 54 e "Distance" em 5.
Em "Outer Glow" mude a cor para branco, opacidade para 21% e "Size" para 40.
Em "Gradient Overlay" use o gradiente padrão de preto a branco, mude o "Blend Mode" para "Screen", "Angle" para 0 e opacidade para 13%
Para maior organização selecione todas as camadas menos o fundo e pressione Ctrl+G para criar um grupo, nomeio como "Planeta 1"
E finalmente nosso planeta está pronto!
Vamos criar uma pequena lua também.
Faça um círculo em branco e depois outros pequenos círculos em cinza escuro que vão ser as crateras.
Marque todos com uma clipping mask e use essa textura com o "Blend Mode" em "Multiply" e também como clipping mask.
Repita o processo para fazer a atmosfera só que mudando os valores.
Crie um grupo para as camadas da lua e nomeie como "Lua 1" e a posicione perto do planeta.
A minha ficou assim:
Construindo o espaço
Salve o processo atual e agora vamos fazer os background.
Para as estrelas tem dois tipo que gostaria mostrar: o tipo normal e o customizado.
No tipo normal, crie uma nova camada limpa encima do fundo preto.
Selecione a "Pencil Tool" e a cor branca é clique algumas vezes de forma uniforme na imagem para fazer pontos brancos.
Baixe essa custom shape: http://www.mediafire.com/?rfwyivdq9fu10qc
Vá na pasta do Photoshop -> Presets -> Custom Shapes e cole lá para instalar.
Reinicie o Photoshop e escolha a "Custom Shape Tool".
Clique com o botão direito sobre a imagem para aparecer o menu de seleção de shape e na seta no canto superior, escolha o "GX02Stars1" e se aparecer uma
mensagem clique em "OK".
Escolha um tipo de estrela de preferência uma não muito exagerada.
E bom sempre estar baixando custom shapes para ter cada vez mais opções de customização.
Com a cor branca faça uma pequena estrela, crie uma nova camada e use a "Pen Tool" ou a "Brush Tool" com um tamanho também pequeno e desenhe um laço ou
qualquer outra coisa que ache legal para dar aquele toque criativo.
Clique duas vezes sobre a camada da estrela, marque "Outer Glow", "Blend Mode" em "Screen" opacidade em 46%, "Size" 8 e o cor pode ser um amarelo claro
(#edffa5).
Selecione a camada do desenho e da estrela, clique com o botão direito em uma e escolha "Convert to Smart Object" para fundi-las de modo otimizado.
Agora com Ctrl+J e Ctrl+T as espalhe pela tela.
Tente não aumentar seu tamanho em relação a original, só diminuir.
Não se esqueça que mesmo que não aparece agora a parte de traz do planeta também pode ter estrelas pois no jogo o fundo se movimentará.
Agora use a "Crop Tool", selecione toda a area da imagem.
Segure Alt e gire o botão do mouse para mudar o zoom e aumente a area da imagem com o "Crop Tool", quando terminar pressione enter para aplicar a
modificação.
O tamanho da minha imagem foi para 1310x748, esse será o tamanho máximo da room no Game Maker.
Selecione o fundo preto com o cor preta selecionada e pressione Alt+Delete para preenche-lo dinovo.
Com a "Pen Tool" faça algumas formas abstratas em cor branca sobre o fundo, eu fiz algumas ondas.
Com Ctrl+E funda todas formas que criou e com Ctrl pressionado clique no quadrado que representa a imagem das formas na lista de camada para fazer uma
seleção.
Selecione o fundo preto e pressione Delete para apagar e delete a camada das formas ou apenas marque-a como invisível.
Por enquanto temos isso:
Aplique um efeito de "Drop Shadow" clicando duas vezes no fundo e "Outer Glow".
Copie e cole essa textura abaixo do fundo preto:
Não se preocupe em ocupar todo o mapa.
Lembre-se que vamos usar isso no Game Maker então temos a opção de repetir o background.
E é isso, crie mais uns dois planetas com texturas, tamanhos e formas diferentes e mude algo que não gostou.
Deixe todo muito bem organizado nomeando e fazendo grupos.
O meu resultado com o arquivo do Photoshop pode ser baixado aqui:
- Código:
http://www.mediafire.com/?8xz362sg395v2rw
Na parte dois vamos exportar tudo isso para o GM, colocar um efeito de parallax, criar uma HUD entre outras coisas.
Última edição por Kabeção em Dom 03 Out 2010, 16:05, editado 7 vez(es) (Motivo da edição : Atualização)
Re: [Aula - 02] Arte gráfica e efeitos especiais para Game Maker - Parte 1
Excelente tutorial! Mesmo pra quem nao usa o Photoshop (como eu) a idéia de como criar os efeitos é válida pra maioria dos aplicativos gráficos, pois todos eles atualmente trabalham com camadas, blends, etc...
Eu por exemplo preciso aprender a desenhar e a trabalhar com esses programas, acho muito legal que sabe usar direitim o seu lado artistico!
Show!
Eu por exemplo preciso aprender a desenhar e a trabalhar com esses programas, acho muito legal que sabe usar direitim o seu lado artistico!
Show!
Re: [Aula - 02] Arte gráfica e efeitos especiais para Game Maker - Parte 1
Ótima aula! Depois de gerar os elementos finais é possível animá-los diretamente no photoshop abrindo o painel de frames e compondo os movimentos. Nesse caso poderia criar um efeito de giro no planeta (no sentido horizontal) variando a posição dos continentes.
†Ceifador- Data de inscrição : 28/08/2010
Reputação : 0
Número de Mensagens : 154
Prêmios :
x 0 x 1 x 0
x 0 x 0 x 0
x 0 x 0 x 0
Re: [Aula - 02] Arte gráfica e efeitos especiais para Game Maker - Parte 1
Exatamente, pois o conceito é bem simples: criar formas, mascara-las uma com as outras, aplicar texturas e depois alguns efeitos a mais.vinians escreveu:Excelente tutorial! Mesmo pra quem nao usa o Photoshop (como eu) a idéia de como criar os efeitos é válida pra maioria dos aplicativos gráficos, pois todos eles atualmente trabalham com camadas, blends, etc...
Prefiro começar com esse tipo de gráfico porque não é preciso ser um mestre em desenho para faze-lo.
É uma ótima ideia animar o giro do planeta.†Ceifador escreveu:Ótima aula! Depois de gerar os elementos finais é possível animá-los diretamente no photoshop abrindo o painel de frames e compondo os movimentos. Nesse caso poderia criar um efeito de giro no planeta (no sentido horizontal) variando a posição dos continentes.
Graças as mascaras isso seria bem simples de se fazer.
Obrigado pelos comentários.
Re: [Aula - 02] Arte gráfica e efeitos especiais para Game Maker - Parte 1
BELO TUTO ADOREI ISSO! ME AJUDOU MUITO EM AGULMAS DUVIDAS MINHAS! xD
correiajoao- Data de inscrição : 05/06/2010
Reputação : 0
Número de Mensagens : 353
Prêmios :
x 0 x 0 x 0
x 0 x 0 x 0
x 0 x 0 x 0
Re: [Aula - 02] Arte gráfica e efeitos especiais para Game Maker - Parte 1
Ei,tá mto bom o tutorial mas...como eu clico na camada?
gerudoking- Data de inscrição : 07/07/2009
Reputação : 0
Número de Mensagens : 467
Prêmios :
x 0 x 0 x 0
x 0 x 0 x 0
x 0 x 0 x 0
Re: [Aula - 02] Arte gráfica e efeitos especiais para Game Maker - Parte 1
Como assim?gerudoking escreveu:Ei,tá mto bom o tutorial mas...como eu clico na camada?
Não seria com o mouse?
Re: [Aula - 02] Arte gráfica e efeitos especiais para Game Maker - Parte 1
Eu digo usando que ferramenta?Eu so meio novato no photoshop,apesar de eu saber usar a pen tool,eu não consegui descobrir como selecionar as camadas.Pode me ajudar?
gerudoking- Data de inscrição : 07/07/2009
Reputação : 0
Número de Mensagens : 467
Prêmios :
x 0 x 0 x 0
x 0 x 0 x 0
x 0 x 0 x 0
Re: [Aula - 02] Arte gráfica e efeitos especiais para Game Maker - Parte 1
Para selecionar é só clicar com o mouse nela não importa a ferramenta.
Onde esta o problema nisso?
Onde esta o problema nisso?
Re: [Aula - 02] Arte gráfica e efeitos especiais para Game Maker - Parte 1
Kabeção não to entendendo O_o
eu clico com o mouse na imagem em cima dos continetes e não aparece nada!Como eu faço?
eu clico com o mouse na imagem em cima dos continetes e não aparece nada!Como eu faço?
gerudoking- Data de inscrição : 07/07/2009
Reputação : 0
Número de Mensagens : 467
Prêmios :
x 0 x 0 x 0
x 0 x 0 x 0
x 0 x 0 x 0
Re: [Aula - 02] Arte gráfica e efeitos especiais para Game Maker - Parte 1
Explique-se mais.
Em que parte do tutorial você esta?
Esta tentando fazer o que? Porque? Pra que?
Em que parte do tutorial você esta?
Esta tentando fazer o que? Porque? Pra que?
Re: [Aula - 02] Arte gráfica e efeitos especiais para Game Maker - Parte 1
Ou, eu sei q n pode crackear programas, mas vc conhce algum jeito de deixar o photoshop free?
Eu bem q queria, mas demora tanto só pra eu usar isso por 30 dias?
Não vale kra...
Eu bem q queria, mas demora tanto só pra eu usar isso por 30 dias?
Não vale kra...
Tópicos semelhantes
» [Aula - 02] Arte gráfica e efeitos especiais para Game Maker - Parte 2
» [Aula - 01] Arte gráfica e efeitos especiais para Game Maker
» [Aula - 03] Arte gráfica e efeitos especiais para Game Maker
» Game Maker - Aula 4 - Variáveis
» Game Maker - Aula 6 (parte 1) - Estrutura e Funcionamento da GML
» [Aula - 01] Arte gráfica e efeitos especiais para Game Maker
» [Aula - 03] Arte gráfica e efeitos especiais para Game Maker
» Game Maker - Aula 4 - Variáveis
» Game Maker - Aula 6 (parte 1) - Estrutura e Funcionamento da GML
GMBR :: Ensine & Aprenda :: Tutoriais :: Game Maker
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|