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

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.

Código:

ang = 45;    // angulo
d  = 50;  // distancia

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

Código:

// Ponto 1
draw_circle(x,y,15,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.

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

Código:

x = mouse_x;
y = mouse_y;

draw_circle(x,y,15,1);

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);
}

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.

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);
}

x = mouse_x;
Y = mouse_y;

draw_circle(x,y,15,1);

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);
}

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

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!!!!

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.