Tutorial: GameMaker Studio – Parte 03: Movimentos

Anteriormente aprendemos a criar um Sprite simples e como instanciá-los dentro de uma Room, colocando as raquetes do nosso jogo.

Neste tutorial, vamos criar os movimentos nas raquetes, de forma que sejam controlados pelo mouse. Também colocaremos a bola de tênis em jogo, fazendo com que ela percorra a tela.

Para fazer tudo isto, precisamos aprender como usar um Evento.

Eventos

Eventos são funcionalidades que respondem quando o usuário ou outros programas interagem com o jogo. Por exemplo, quando aperto uma tecla ou movo o mouse, um evento é disparado para que eu possa aplicar, no jogo, uma resposta a tal estímulo.

Vamos ver isto na prática. No projeto, abra o objeto “obj_raquete” que criamos na aula passada. Note que existe uma área apenas dedicada aos eventos:

É nessa parte que definimos todos os eventos que um objeto vai reagir. Vamos fazer as nossas raquetes serem controladas pelo mouse. Conforme ele se move, as raquetes vão se movendo junto. Para isto, clique em “Add Event” e vão aparecer as diversas opções de eventos.

A escolha que parece óbvia é a opção “Mouse” (ponto final) Entretanto se clicarmos nela, veremos que só temos opções para tratar os cliques. Então, como faremos? Ao invés de focar no clique do mouse, vamos escolher o evento “Step”. Para entendê-lo, vamos lembrar do conceito mais básico que todo desenvolvedor de jogos deve saber: que os jogos (mas não somente os jogos, mas qualquer aplicação gráfica) possuem um processo cíclico conhecido como “Main Loop”, que se baseia em atualizar os dados do jogo e renderizar uma imagem refletindo essas alterações.

No GameMaker, cada iteração que este loop dá é chamada ciclo do jogo. Então, vamos clicar na opção “Step” e um pop-up aparecerá com três opções: Step, Begin Step e End Step. Para a maioria dos casos, o “Step” normal é suficiente. Entretanto, quando você quer processar um dado antes ou depois do processamento geral, você usa, respectivamente, o “Begin Step” e o “End Step”.  No nosso caso atual, vamos usar o “Step” normal e, quando clicar, o GameMaker vai adicionar o evento na lista de eventos:

Agora, ao lado direito da lista de eventos, temos as listas de ações vazias e, ao lado esquerdo, vários ícones que representam tipos de ações. É com esses recursos que programaremos os eventos.

O GameMaker disponibiliza duas maneiras de programar: uma é usando o sistema Drag and Drop, onde você clica num comando e o arrasta para dentro da lista e configura. A outra é programando no código. O interessante é que é possível misturar as formas de programar, pois algumas coisas são mais práticas usando as funcionalidades prontas, outras são mais fáceis programando.

Antes de entrar na programação, vamos entender o que vamos fazer: a cada “Step”, nós vamos atualizar a posição das raquetes de acordo com a posição do mouse. As raquetes horizontais vão acompanhar horizontalmente o mouse, ou seja, vão acompanhar o eixo X da tela. As raquetes verticais acompanharão o mouse no eixo Y.

Agora, vamos a programação: primeiro clique na guia “Control” e procure pelo ícone Code (). Então clique e arraste para a nossa lista de ação. Este elemento permite inserir código diretamente nos eventos, e vai abrir o editor de códigos do GameMaker:

No editor, vamos inserir o seguinte código:

01. if (image_angle==0) {
02.     x = mouse_x;
03. }else{
04.     y = mouse_y;
05. }

Aqui podemos usar as propriedades image_angle, x e y sem especificar o objeto, porque na parte superior do editor, onde diz “applies to” está marcando como self, então o GameMaker vai interpretar que se o próprio objeto tem tais propriedades, será tratado como tal. Caso não seja uma propriedade, será tratado como uma variável local. Portanto, cuidado, pois o GameMaker não acusará erro se você digitar uma variável errada, a não ser em casos de refêrencia de objetos.

Agora vamos testar o nosso projeto e verá que as raquetes estão se movendo junto com o mouse.

 

Ponto de Referência

Durante o teste, repare que existem peculiaridades nele. Primeiro, é o alinhamento do mouse com as raquetes. Observe que o ponteiro do mouse sempre está alinhado em uma das pontas das raquetes. Outra peculiariedade é que as raquetes não estão simétricas, sendo que a da direita e a de baixo estão mais próximas da borda do que as outras.

Isso se deve porque nós não configuramos o ponto de referência do sprite. O ideal para este sprite é que o ponto de refêrencia fosse centralizado. Isso ajustaria para que o mouse controlasse o centro das raquetes e, ao mesmo tempo, as raquetes ficariam alinhadas corretamente nas grades. Vamos corrigir isto: abra o sprite “spr_raquete1” e focalize na área que diz “Origin”. É aqui que mudaremos o ponto de referência. Para nossa conveniência, tem o botão “Center”, que ajustará o ponto no centro. Clique nele e pode dar um “OK”.

Criando a bola

Para criar a bola vai ser bem simples agora: primeiro baixe esta imagem da bola ou faça a sua própria:

Agora, crie um sprite, tanto faz se puxando ou usando o “Create Sprite”. Nomeie para “spr_bola” e também deixe o ponto de referência centralizado. A configuração vai ficar desta maneira:

Agora crie um objeto usando o sprite da bola como referência. Nomeie como “obj_bola”. A configuração vai ficar assim:

 

Agora vamos programar o comportamento da bola. Adicione um evento “Create”. Eventos do tipo “Create” são usados quando queremos definir algo quando o objeto for instanciado, ou seja, vai ser a primeira coisa que o objeto fará. Uma vez criado, procure na guia “Move” o ícone “Move Free” () e arraste para a lista. A configuração vai ser a seguinte:

No campo “Direction”, nós definimos a direção dando o ângulo em que a bola está fazendo em relação ao eixo x. Neste caso, nós estamos dizendo que o ângulo está entre 45º e 135º usando a função random_range(). Em Speed definimos a velocidade, que vai ser 4 pixels por Step. Se quiser fazer em código, os comandos seriam:

01. direction = random_range(45,135);
02. speed = 4;
Clique em OK em tudo e agora falta somente instanciar a bola no cenário.
Para fazer a inserção, abra a Room “rm_level1” e na aba “Objects” insira a bola bem no centro do cenário.

Agora teste e verá que a bola irá se mover para alguma direção, assim como as raquetes acompanharão o movimento do mouse. Entretanto, eles vão atravessar entre si, que será o assunto do nosso próximo tutorial.

 

Conclusão

Hoje aprendemos a criar eventos e vimos dois tipos deles: “Step”, que é ativado a cada ciclo de processamento e o “Create”, que é ativado apenas uma vez, quando um objeto é instanciado em uma Room.

Vimos também como programar um evento e que existem duas formas de programar: usando o Drag and Drop e através do código. Cada uma delas tem vantagens e desvantagens, uma vez que lógicas complexas são mais fáceis de programar no código, enquanto algumas funções básicas para jogos já estão disponíveis nos diversos ícones. Então, no próximo tutorial, vamos ver como realizar a colisão entre os dois objetos. Até a próxima semana.

Thalisson Christiano de Almeida

Thalisson Christiano de Almeida

Formado em Ciência da Computação (UDESC). Foi Programador da Céu Games e professor do Técnico em Informática do SENAI-SC. Atualmente, trabalha na empresa By Seven. Já foi jogador de xadrez e praticou kung-fu, ambos por 4 anos. Hoje é praticante do Jiu-jitsu, esperando que não fique nos 4 anos. Não tem preferência de tipos de jogos em especifico, variando desde jogos casuais de Facebook até jogos mais hardcore.

Send this to a friend