[Aula - 02] Arte gráfica e efeitos especiais para Game Maker - Parte 2

Para facilitar a explicação para os novatos em Photoshop baixe o arquivo do meu resultado aqui:

Código:

http://www.mediafire.com/?8xz362sg395v2rw

Exportando e programando

Antes de começar, eu mudei o background para preto e branco e o fundo de ondas deixei um pouco transparente, acho que assim fica melhor.
Selecione a texture que servirá como background, aperte Alt+Shift+Ctrl+B e de "OK", depois Ctrl+M e deixe as curvas dessa forma:

Diminua a opacidade das ondas para 52%.
O preto e branco deixa que o maior destaque seja o planeta e a transparência do outro deixa o visual mais harmônico.


Clique nos icones de olhos no painel de camadas e deixe apenas o fundo visível.


Clique em "File -> Save for Web & Devices...", em "Preset" no canto superior direito escolha "PNG-24" para o formatado de arquivo e save.
Save sempre desse jeito para o GM8, pois, pelo que notei se você salvar como png diretamente em "Salve As..." quando for carregar algumas tonalidades de branco ficam sólidas sem transparência.

Agora deixe só o fundo com as ondas visíveis e salve.
Marque o grupo "Estrelas" e salve, faça o mesmo que os outros grupos.

Abra o Game Maker, crie um nova sprite com o nome de sprPlaneta1 e carregue o planeta.
Vá no editor de sprite e aperte Ctrl+Alt+P, coloque "Border size" como 0 para tirar os excessos e marque a origem do sprite no centro.
Depois, sprLua e carregue os dois fundos e as estrelas como background, backFundo0 (aquele com a textura), backFundo1 e backEstrelas sempre tirando os excessos.
Fiz outro planeta bem simples para testar o sistema de escolha que vamos fazer.


Crie um objeto para o planeta e para a lua, objPlaneta1, objPlaneta2 e objLua.
Faça uma room, deixe o nome como room0, tamanho de 1310x748, velocidade da room em 60 frames e na aba de background coloque o backFundo0 no 0, backFundo1 no 1 e o backEstrelas no 3.
Coloque a lua e os planetas um pouco distantes um do outro perto do centro da room.

Crie um objeto para controlar os efeitos e o jogo em geral, objControle.
No "Creation code" da room0:

Código:

instance_create(x,y,objControle);

Ele deve ser criado sempre antes dos outros.
No evento Create do objControle vamos definir a primeira variável.

Código:

sp = 8;    // velocidade de movimento da tela

O comentário se explica tudo.
Vamos usar essa variável para definir a velocidade que o jogador movimenta a view.
No evento Step:

Código:

// Mover tela
if keyboard_check(ord('A')) view_xview -= sp;
if keyboard_check(ord('D')) view_xview += sp;
if keyboard_check(ord('W')) view_yview -= sp;
if keyboard_check(ord('S')) view_yview += sp;

// Limitar para não dos limites da room
if view_xview < 0 view_xview = 0;
if view_yview < 0 view_yview = 0;
if view_xview+view_wview > room_width view_xview = room_width-view_wview;
if view_yview+view_hview > room_height view_yview = room_height-view_hview;

// Parallax
background_x[0] = view_xview*0.9;
background_y[0] = view_yview*0.9;

background_x[1] = view_xview*0.75;
background_y[1] = view_yview*0.75;

background_x[2] = view_xview*0.6;
background_y[2] = view_yview*0.6;

Então usaremos as teclas W,A,S,D para mover.
A segunda linha não vai deixar que a view saia dos limites da room.
O parallax funciona da seguinte forma: quando mais longe da visão do jogador mais lento ele deve ser para de movimentar.
O background[0] é o mais longe então a posição da view vezes a escala (0.9) resultara na sua velocidade de movimento.
Quando mais perto, maior é a escala.

Execute o jogo, apenas com isso já temos um resultado um pouco satisfatório.

Agora vamos faze-los pulsar quando o mouse estiver sob ele.
Crie um objParentPlaneta, e defina ele como parente dos dois planetas e da lua também.
Preste atenção nos comentários dos scripts, eles explicam como tudo isso funciona.
No Create do objPlatena1:

Código:

// Proporções da animação de pulsação
p = 0.9;        // escala inicial
p_min = p;      // escala minima
p_max = 1.1;    // escala máximo

// Para controle da animação
a = true;      // variavel auxiliar
pulsar = false; // ativar/desativar pulsão

nome = 'Terra III'  // nome do planeta
room_p = room0;    // room referente ao planeta

No Create do objPlaneta2:

Código:

// Proporções da animação de pulsação
p = 0.9;        // escala inicial
p_min = p;      // escala minima
p_max = 1.1;    // escala máximo

// Para controle da animação
a = true;      // variavel auxiliar
pulsar = false; // ativar/desativar pulsão

nome = 'Ares'  // nome do planeta
room_p = room0;    // room referente ao planeta

No Create do objLua:

Código:

// Proporções da animação de pulsação
p = 0.9;        // escala inicial
p_min = p;      // escala minima
p_max = 1.1;    // escala máximo

// Para controle da animação
a = true;      // variavel auxiliar
pulsar = false; // ativar/desativar pulsão

nome = 'Satélite I'  // nome do planeta
room_p = room0;    // room referente ao planeta

Estamos trabalhando com proporções, ou escalas se preferir.
Mesmo que você troque os sprite, as escalas trabalharam perfeitamente se que se precise ficar redefinindo variáveis.
Observe a variável "room_p" com ela você defini para qual room o jogo mudará se ele for clicado.

Agora para que isso tenha efeito, vamos colocar no evento Step do objParentPlaneta o seguinte script:

Código:

// Checar se o mouse está sob o planeta
if collision_point(mouse_x,mouse_y,id,1,0)!= noone
{
    pulsar = true;  // ativar pulsação
    planeta = id;  // definir o planeta para que seu nome apareça na HUD
   
    if mouse_check_button_pressed(mb_left) && room_exists(room_p)
    {
        room_goto(room_p);  // mudar de room
    }
}
else
{
    // evita que o planeta fica em um tamanho
    // diferente do seu original quando desativado
    if p > 1 pulsar = false;
}

if pulsar
{
    if a
    {
        p *= 1.01;  // aumentar tamanho
    }
    else
    {
        p /= 1.01;  // diminuir tamanho
    }

    // Se o tamanho for maior que o máximo permitido
    if p > p_max
    {
        p = p_max;
        a = false;  // fazer diminuir
    }
    if p < p_min
    {
        p = p_min;
        a = true;  // fazer aumentar
    }
}
else
{
    // também evita que o planeta fica em um tamanho
    // diferente do seu original quando desativado
    p /= 1.01;
    if p < 1 p = 1;
}

// Aplicar proporções
image_xscale = p;
image_yscale = p;

Assim o efeito funcionará para todos seus parentes.
Execute o jogo e confira o resultado de tudo que feito até aqui.


HUD nada mais é que a interface de informações para o jogador.
Coisas como: número de vidas, itens pegos, menus ou textos.

Aqui faremos apenas alguns texto avisando o nome do planeta e o que o jogador deve fazer.

Crie uma fonte para a HUD com o nome fontINFO em Arial, tamanho 20 e negrito e clique em "All" para poder usar caracteres com acentos.
No evento Draw no objControle:

Código:

// ==> Desenhar HUD <== //

// Desenha o fundo do texto de cima
draw_set_color(c_black);
draw_set_alpha(0.75);  // mudar transparência
draw_rectangle(view_xview,view_yview,view_xview+view_wview,view_yview+64,0);  // desenhar um retangulo
draw_set_alpha(1);      // voltar transparência ao normal

// Desenha o fundo do texto de baixo
draw_set_color(c_black);
draw_set_alpha(0.75);  // mudar transparência
draw_rectangle(view_xview,view_yview+view_hview-64,view_xview+view_wview,view_yview+view_hview,0);  // desenhar um retangulo
draw_set_alpha(1);      // voltar transparência ao normal

// Desenha o texto de cima
draw_set_font(fontINFO);
draw_set_color(c_white);
draw_set_halign(fa_center); // definir o ponto de origem do texto no centro para x
draw_set_valign(fa_center)  // definir o ponto de origem do texto no centro para y
draw_text(view_xview+view_wview/2,view_yview+32,'Selecione um planeta');

// Desenha o texto de baixo com o nome do planeta ativado
if planeta != -1    // checa se algum planeta esta ativado
{
    draw_set_color(c_white);
    draw_text(view_xview+view_wview/2,view_yview+view_hview-32,planeta.nome);
}
// Defini planeta como -1 se o mouse não estiver colidindo com nem um deles
if collision_point(mouse_x,mouse_y,all,1,1) != objParentPlaneta
{
    planeta = -1;
}

Execute o jogo e veja os resultados.
Com isso a proposta dessa aula está completa.
O meu resultado pode ser baixado aqui:

Código:

http://www.4shared.com/file/pV5EeGV7/aula2_cenario.html

Hum... na próxima aula o que será?
Partículas ou efeitos para um ataque especial?
Talvez será os efeitos.
Será algo bem interessante, um ataque especial que vai atingir tanto o inimigo quanto o cenário.
É algo que melhora o impacto do jogo sobre o jogador e o deixa mais divertido.

O resultado em preto e branco ficou bem melhor realmente.
Esse tipo de aula é muito importante e útil.
Vlw!

Bastante interessante, eu arranho o PhotoShop algumas vezes, pura curiosidade, desenvolver gráficos somente se for telas de acesso ou HUD, raramente eu faço as sprites, se eu não achar já feitas ou alguém para fazê-las, eu não termino o jogo. Enfim, vai estimular o pessoal a arriscar algumas coisas no PS.

Agora o link esta funcionando.

Otimo tutorial!
Seria interessante tambem um tutorial sobre criação de sprites simples com movimentação. Geralmente quando fazemos um jogo de plataforma por exemplo, sempre precisamos de sprites movimentanto pra esquerda, direita, subindo escadas, etc... Seria muito interessante um tutorial sobre isso!

nossa cara que tuto!!!!eu prefiro como proxima a de ataque que vc falou!!!
flws!!!

po muito legal valeu mesmo kabeçao