[Aula - 01] Arte gráfica e efeitos especiais para Game Maker

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Qualidade [Aula - 01] Arte gráfica e efeitos especiais para Game Maker

Mensagem por Kabeção em Ter 31 Ago 2010, 11:00



Introdução

A partir da versão 6.0 o Game Maker se firmou como uma ferramenta excepcional se tratando da produção de efeitos especiais aliada a programação relativamente fácil e rápido. Desde então é comum ver um jogo feito no GM em um “top mais” de games independentes.
Nestas aulas pretendo ensinar não apenas tudo que aprendi até hoje mas também buscar exemplos de terceiros, estudá-los e repassar para nossa comunidade.

Encontre seu estilo

Existem diversos estilos e técnicas para se trabalhar com imagens 2D não só no que diz respeito ao desenho em si mas também aos efeitos especiais.
Uma olhada na galeria de jogos do site da YoYo Games mostra os diversos estilo gráficos que podemos seguir ou nos basear para desenvolver o nosso.

  • Jogo onde o movimento das imagens passam uma impressão frenética:
    http://www.yoyogames.com/games/123578-perpetual-run-2
  • Um pixel art bem trabalhado:
    http://www.yoyogames.com/games/127865-not-so-massive-action-game
  • Vetor rasterizado e texturizado:
    http://www.yoyogames.com/games/121764-ninjammin-beat-jitsu
  • Simples quadrados e círculos:
    http://www.yoyogames.com/games/2358-clean-asia
  • Abstrato e repleto de efeitos:
    http://www.yoyogames.com/games/33006-ad-nauseam-2

Você tem uma infinidade de opções para escolher e aliado a uma boa criatividade seu jogo será fantástico.

Pixel art


Pintura digital


Vector art


Gráficos e programação são dois lados da mesma moeda

Conhecimento básico sobre o Game Maker não será o suficiente para seguir estas aulas. Apenas aqueles já habilidosos com GML e o modo como ele executa os jogos poderão desfrutar das informações aqui discutidas.
Bons efeitos especiais exigem ótimos programadores e o foco dessas aulas não é ensinar GML, mas sim como aplicar o que você já sabe.
Então, estando ciente disso, vamos começar.


Nem pense em pular esse capítulo antes de aprender como usar trigonometria básica em seus jogos, principalmente o modo de se trabalhar com ângulos.
Procure por mais informaçãoes sobre trigonometria em outros lugares pois aqui irei direto ao ponto.

Trabalhando com ângulos
Cosseno e seno são o foco deste capítulo. Entre suas diversas funcionalidades para nós programadores esta a possibilidade de movimentar objetos a partir de determinado ângulo e distancia.
Abra o GM e crie um objeto chamado “objPlayer”, no evento Create:

Código:
ang = 45;    // angulo
d  = 50;  // distancia

// Centralizar
x = room_width/2;
y = room_height/2;

Nesse exercício vamos entender como cosseno e seno funcionam.
Primeiro vamos desenhar um ponto:

Código:
// Ponto 1
draw_circle(x,y,15,1);

Este ponto está exatamente na posição xy do objPlayer, agora vamos desenhar um ponto 2 a 45° (variável ang) a uma distancia de 50 pixeis (variável d) do ponto 1:
Código:
// Ponto 2
draw_circle(x+cos(degtorad(ang))*d,y-sin(degtorad(ang))*d,10,1);
Primeiro degtorad converte ângulos em radianos para poder se trabalhar com cos e sin.
cos retorna o número correspondente a x de acordo com o ângulo em uma distancia de 1 pixel e por ultimo multiplicamos esse valor pela distância para achar o x do ponto 2.
sin retorna o número correspondente a y de acordo com o ângulo em uma distancia de 1 pixel e por ultimo multiplicamos esse valor pela distância para achar o y do ponto 2.
Ou seja, para 45° cos vai retornar 0.7 e 0.7 * 50 = 35, 35 é a distancia x para o ponto 2. sin também vai retornar 0.7 e 0.7 * 50 = 35, 35 é a distancia y para o ponto 2. Assim, somando a distancia x com a posição x do ponto 1 e a distancia y com a posição y do ponto 1 temos a posição do ponto 2.


Se o ângulo fosse 0 cos retornaria 1, 1 * 50 = 50 e sin retornaria 0, 0 * 50 = 0; como 0 é o ângulo padrão, isso apenas faria o objeto ficar em linha horizontalmente. Se o ângulo fosse 90 cos seria 0 e sin 1, o que faria o objeto apenas ficar em linha reta verticalmente
Pode ser difícil de entender mas preste atenção nos exemplos, não é difícil de perceber a lógica nisso.

Criando o primeiro efeito

Agora vamos criar um simples efeito usando o conceito acima.
Crie um novo jogo, coloque a velocidade da room em 60 e adicione essa sprite no GM, nomeie como “sprPonta” e coloque a origem no centro:


Crie um “objPlayer” e no evento Create:
Código:
// Primeiro circulo de pontas
ang1 = 0;  // angulo
d1 = 50;  // distancia
n1 = 6;    // número de pontas no circulo
sp1 = 2;    // velocidade de rotação

// Segundo circulo de pontas
ang2 = 0    // angulo
d2 = 100;  // distancia
n2 = 8;    // número de pontos no circulo
sp2 = 1    // velocidade de ratação
Vamos usar um único sprite para criar dois círculos de pontas em torno do objPlayer.
Observe as variáveis. ang é o ângulo do circulo como um todo, d é a distancia que as pontas vão ficar em relação ao objPlayer, n é o número de pontas que o circulo terá e sp é a velocidade em que eles vão girar.
No evento Draw vamos fazer o objPlayer seguir o mouse e desenhar um circulo para representá-lo:
Código:
x = mouse_x;
y = mouse_y;

draw_circle(x,y,15,1);
Ainda no evento Draw vamos criar o primeiro circulo de pontas:
Código:
var a;
ang1 += sp1;

for (i = 0; i < n1; i += 1)
{
    a = ang1+(360/n1*i);
    draw_sprite_ext(sprPonta,-1,x+cos(degtorad(a))*d1,y-sin(degtorad(a))*d1,-0.8,0.8,a,c_white,0.75);
}

Observe essa linha: “a = ang1+(360/n1*i);”.
O que isso faz e porque funciona?

Kabeção escreveu:Divido o valor máximo para o angulo que quero (360) pelo número total de objetos que quero criar e no final multiplico pelo número do objeto atual (i).

Por exemplo:
Quero que 8 objetos sejam criados.
360/8 = 45
45 é o angulo exato entre cada um deles.

No loop for o i representa o numero do objeto atual, então:
obj0: 45*0 = 0;
obj1: 45*1 = 45;
obj2: 45*2 = 80;
obj3: 45*3 = 135;
obj4: 45*4 = 180;
obj5: 45*5 = 225;
obj6: 45*6 = 270;
obj7: 45*7 = 315;

Assim, as direções são definidas uniformemente 45° entre cada objeto.
Adicionando o resultado de (360/n1*i) a ang1 eu consigo fazer o circulo rodar com um todo.
Depois faça o mesmo para o segundo círculo só que mudando as variáveis:
Código:
ang2 -= sp2;
for (i = 0; i < n2; i += 1)
{
    a = ang2+(360/n2*i)
    draw_sprite_ext(sprPonta,-1,x+cos(degtorad(a))*d2,y-sin(degtorad(a))*d2,-1,1,a,c_white,0.9);
}
Note também nos scripts anteriores que mexo um pouco com o xscale, yscale e alpha para dar uma incrementada no resultado final que será este:



Primeira fase concluída!
Na próxima vou mostrar como montar cenários com gráficos clean que é um estilo cada vez mais popular graças ao crescimento da arte vetorial na internet.
São formas simples com gradientes, transparências, texturas e outros efetos.
Os resultados são satisfatórios e não precisa ser um mestre em desenho para faze-los, acredito que todos vão gostar.

Clique aqui para acessar a próxima aula


Última edição por Kabeção em Sex 03 Set 2010, 18:59, editado 4 vez(es)

Kabeção

Ranking : Sem avaliações
Número de Mensagens : 2314
Data de inscrição : 08/06/2008
Reputação : 100
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 3
   : 0
   : 1

http://blackcapapps.blogspot.com.br/

Voltar ao Topo Ir em baixo

Qualidade Re: [Aula - 01] Arte gráfica e efeitos especiais para Game Maker

Mensagem por CRP-Max em Ter 31 Ago 2010, 11:50

Grande "Kabeção".
Ótimo tutorial, achei só dois probleminhas ai...
x = mouse_x;
Y = mouse_y;

draw_circle(x,y,15,1);

O "y" esta em maiusculo, mude para minusculo.

var a;

for (i = 0; i < n1; i += 1)
{
a = ang1+(360/n1*i);
draw_sprite_ext(sprPonta,-1,x+cos(degtorad(a))*d1,y-sin(degtorad(a))*d1,-0.8,0.8,a,c_white,0.75);
}

Não sei, mas tive a impressão que você queria um movimento no primeiro circulo de pontas certo?
se sim, faltou uma variavel para movimenta-lo que seria esta
ang1 += sp1;
Assim ele rodara no sentido contrario ao circulo de fora.

Estou aguardando mais tutoriais.
Nota:10
Very Happy

CRP-Max

Ranking : Nota C
Número de Mensagens : 819
Idade : 41
Data de inscrição : 28/10/2008
Notas recebidas : C
Reputação : 29
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

Qualidade Re: [Aula - 01] Arte gráfica e efeitos especiais para Game Maker

Mensagem por Kyuubi em Ter 31 Ago 2010, 12:19

Nossa cara eu to esperando o outro tuto,pois esse é 10!!!!eu gosto de jogar seus games que eles são cheios de efeitos,como o coletor de estrelas,eu tbm vi aquele seu game do concurso[003],nuss o promeiro lugar deve ser seu!!!
vc é profissional!!!
flws!!!!

Kyuubi

Número de Mensagens : 443
Idade : 23
Data de inscrição : 28/11/2009
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   :
   :
   :

http://animeworldmugen.forumeiros.com/forum

Voltar ao Topo Ir em baixo

Qualidade Re: [Aula - 01] Arte gráfica e efeitos especiais para Game Maker

Mensagem por Kabeção em Ter 31 Ago 2010, 12:34

CRP-Max escreveu:Grande "Kabeção".
Ótimo tutorial, achei só dois probleminhas ai...
x = mouse_x;
Y = mouse_y;

draw_circle(x,y,15,1);

O "y" esta em maiusculo, mude para minusculo.

var a;

for (i = 0; i < n1; i += 1)
{
a = ang1+(360/n1*i);
draw_sprite_ext(sprPonta,-1,x+cos(degtorad(a))*d1,y-sin(degtorad(a))*d1,-0.8,0.8,a,c_white,0.75);
}

Não sei, mas tive a impressão que você queria um movimento no primeiro circulo de pontas certo?
se sim, faltou uma variavel para movimenta-lo que seria esta
ang1 += sp1;
Assim ele rodara no sentido contrario ao circulo de fora.

Estou aguardando mais tutoriais.
Nota:10
Very Happy
Obrigado por avisar, foi de grande ajuda.
Erros concertados.

Kyuubi escreveu:Nossa cara eu to esperando o outro tuto,pois esse é 10!!!!eu gosto de jogar seus games que eles são cheios de efeitos,como o coletor de estrelas,eu tbm vi aquele seu game do concurso[003],nuss o promeiro lugar deve ser seu!!!
vc é profissional!!!
flws!!!!
Obrigado, espero que goste dos próximos também. Happy

Para a aula 2 vamos montar um cenário mais um menos assim:
Vai ser uma tela de seleção de planetas como o do Coletor de estrelas II.
Vou usar o Photoshop CS3 e explicar passo a passo então será um tutorial longo.

Kabeção

Ranking : Sem avaliações
Número de Mensagens : 2314
Data de inscrição : 08/06/2008
Reputação : 100
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 3
   : 0
   : 1

http://blackcapapps.blogspot.com.br/

Voltar ao Topo Ir em baixo

Qualidade Re: [Aula - 01] Arte gráfica e efeitos especiais para Game Maker

Mensagem por mutte em Ter 31 Ago 2010, 13:08

tá ai uma coisa q sempre quis saber vlw mesmo cara
estou ansioso pela segunda parte do tutorial

muito bom cara eu sou seu maior fã ;]

mutte

Número de Mensagens : 48
Data de inscrição : 08/08/2010
Reputação : 1
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 1

http://gamemaisarte.blogspot.com/

Voltar ao Topo Ir em baixo

Qualidade Re: [Aula - 01] Arte gráfica e efeitos especiais para Game Maker

Mensagem por DS Santos em Ter 31 Ago 2010, 13:10

Kabeção escreveu:Para a aula 2 vamos montar um cenário mais um menos assim:
Vai ser uma tela de seleção de planetas como o do Coletor de estrelas II.
Vou usar o Photoshop CS3 e explicar passo a passo então será um tutorial longo.
Hum, criativo como sempre. Very Happy
Gosto muito desse seu estilo, é bonito e bem feito.

Esse tipo de tutorial é muito útil. Além de ensinar a fazer efeitos ainda mostra um pouco de programação para não-iniciantes.
Se o estilo visual que você pretende usar for mesmo o dessa imagem essas aulas vão ser algo raro pois nunca vi nada igual especificamente voltado para jogos e em português.

DS Santos

Número de Mensagens : 98
Data de inscrição : 19/05/2010
Reputação : 2
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Voltar ao Topo Ir em baixo

Qualidade Re: [Aula - 01] Arte gráfica e efeitos especiais para Game Maker

Mensagem por Lucca em Qua 13 Out 2010, 11:31

Estou trabalhando

Lucca

Número de Mensagens : 1
Data de inscrição : 13/10/2010
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Voltar ao Topo Ir em baixo

Qualidade Re: [Aula - 01] Arte gráfica e efeitos especiais para Game Maker

Mensagem por Isaque Onix em Qua 04 Set 2013, 02:42

Olá Kabeção, será que tem como "renovar" os links? estou interessado em aprender a desenhar de modo diferente de pixel art! se possivel, claro! obrigado!

Isaque Onix

Número de Mensagens : 1597
Idade : 23
Data de inscrição : 15/08/2010
Reputação : 147
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

http://spyreserver.16mb.com

Voltar ao Topo Ir em baixo

Qualidade Re: [Aula - 01] Arte gráfica e efeitos especiais para Game Maker

Mensagem por Conteúdo patrocinado Hoje à(s) 14:20


Conteúdo patrocinado


Voltar ao Topo Ir em baixo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum