Tutorial: GameMaker Studio - Parte 05: Incrementando Gameplay

Posted by : Unknown sábado, 5 de julho de 2014

No último tutorial mostrei como fazer o tratamento de colisão, como usar o sistema de pontuação da própria ferramenta e fazer aparecer na tela como um GUI.
Neste tutorial, vou refinar os comandos das raquetes, para que elas não saiam da tela quando o mouse se aproxima das bordas da tela de jogo e também vamos adicionar as flores no nosso cenário. O nosso objetivo é destruí-las totalmente.
Restringindo o Movimento do Jogador
Para restringir o movimento do jogador, vamos ter que modificar o código do movimento que criamos na parte 3 deste tutorial. Então, abra o “obj_raquete” e dentro do evento “Step”, dê dois cliques no ícone que representa o nosso código. Ele deve estar assim:
01. if image_angle==0 {
02.    x = mouse_x;
03. }else{
04.    y = mouse_y
05. }
Vamos modificar a partir da linha 2 desta forma:
01. if image_angle==0 {
02. if (mouse_x > sprite_width / 2) &&
03.     (mouse_x < room_width - (sprite_width / 2)){
04.        x = mouse_x;
05. }
06.}else{
07.   y = mouse_y
08.}
Aqui nós temos o seguinte: Na linha 2, a expressão (mouse_x >sprite_width/2) significa que estamos limitando o movimento do lado esquerdo do cenário, onde o centro da raquete (lembre-se que o centro da raquete está sempre alinhado com o mouse_x na horizontal e mouse_y na vertical) não pode passar o ponto calculado que é a metade da largura do sprite. Isso faz com que a raquete não saia pelo lado esquerdo.
Na linha 3 temos a limitação do lado direito, onde dizemos que o centro da raquete tem que ser menor que a largura da room (room_width) subtraída pela metade da largura do sprite. A imagem abaixo explica melhor isso:

Para as raquetes verticais, a ideia é a mesma, mas o que mudará será que, ao invés de pegarmos a largura da room (width), pegaremos a altura (height). No código, alteraremos a partir da linha 7 desta forma:
01. if image_angle==0 {
02. if (mouse_x > sprite_width / 2) &&
03.     (mouse_x < room_width - (sprite_width / 2)){
04.        x = mouse_x;
05. }
06.}else{
07. if (mouse_y > sprite_width / 2) &&
08.     (mouse_y < room_height - (sprite_width / 2)){
09.        y = mouse_y;
10. }
11.}

As Flores do Jardins - Como esmagá-las com a bola de tênis
Neste ponto, vamos adicionar as flores no nosso jogo e, para isso, vamos usar nossos conhecimentos adquiridos no tutorial 2 sobre sprites e objetos. Então, pode baixar a seguinte imagem que usaremos como sprite:

E agora importe a imagem como sprite e nomeie como “spr_flor”. Também tenha certeza que o ponto de referência da Sprite esteja no centro. Na tela de configuração de sprite, observe a área “Collision Check” e clique no botão “Modifique Mask”:

Dentro da nova caixa de diálogo, na área “Shape”, certifique-se que a opção “Ellipse” esteja selecionada. O motivo é que a flor é redonda e estamos usando uma máscara de detecção de colisão quadrada e, com isso, podem ocorrer muitos falsos positivos.

Alguém lembra se fizemos isto quando inserimos a bola de tênis? Não, né? Então, faça a mesma coisa com a sprite da bola (spr_bola).
Agora criaremos um objeto para a nossa flor. Aqui não tem nada de diferente, clique com o botão direito, escolha o “Create Object”, renomeie para “obj_flor”, selecione o sprite “spr_flor” e pronto por hora. Abra a room “rm_level1” e vamos adicionar as flores. Vou mostrar como ficou no meu:

Ok, vendo agora acho que está faltando contraste, mas como eu não sou designer e o prazo é curto, então vamos deixar assim. Agora vamos codificar a nossa flor para ser destruída quando a bola atingí-la. Abra o objeto “obj_flor”, clique em “Add Event”, então em “Collision” e finalmente “obj_bola”. Na lista de ações, arraste o comando para executar códigos e insira o seguinte código:

01. instance_destroy();
02. score += 100;
Agora, quando a bola passar por cima da flor, ela desaparecerá do jogo.

Melhorando o Código da Bolinha
Agora, vamos melhorar o código da bolinha já existente, fazendo que, de acordo com a parte da raquete que bate, a direção para qual a bolinha seguirá será correspondente. Abra o objeto “obj_bola” e selecione o evento “Collision obj_raquete”. Vamos alterar o código, que é assim:
01. move_bounce_all(false);
02. score+=5;
Para:
01. move_bounce_all(false);
02. score+=5;
03. var dir;
04. dir = point_direction(other.x, other.y, x, y);
05. motion_add(dir,4);
06. speed=4;
07. direction+=2-random(4);
Vamos discutir aos poucos. Na linha 03 e 04 eu criei e defini um vetor que indica a direção da bolinha e da raquete. Em seguida, na linha 05, eu utilizo desta direção para modificá-la, fazendo com que a direção padrão calculada na linha 01 sofra influência do vetor diretor calculado na linha 04. Na linha 06 eu especifico que quero a velocidade constante ao 4 pixels por step. Sem esta linha, a velocidade da bolinha irá aumentar a cada colisão. Sabendo aproveitar a configuração, você pode deixar o jogo mais interessante. A linha 07 é um corretor para um possivel bug em que a bola possa ficar presa na raquete, principalmente onde as horizontais e verticais se juntam. Modificamos a direção levemente a cada colisão, e no caso da bola ficar presa, essas mudanças ajudarão a bola a encontrar uma saída.
E para finalizar o tutorial, vamos por o código de rebater as flores. Então criamos um novo evento “Collision” e selecionamos “obj_flor”. Aqui, vamos fazer bem simples a resposta: procure o ícone “Bounce” (