Tutorial: GameMaker – Criando um Jogo de Corrida

Olá, galera do Fábrica de Jogos! Tudo bem com vocês? Vamos aprender como criar um Jogo de Corrida no GameMaker Studio, estilo ao clássico Car Race do Brick Game, os saudosos e famosos mini games.

Nesse Tutorial, usamos as imagens de carros retrôs parecidos com o Jogo de Corrida do Brick Game. Mas você pode usar a internet, e buscar outras imagens de desenhos de carros, e até pesquisar planos de fundos para adicionar ao Game. Use a sua criatividade e divirta-se, atualizando esse projeto.

Antes de começar a praticar no GameMaker, assista o vídeo a seguir que mostra o resultado final de mais um jogo completo criado juntamente com os alunos da Turma de Criação de Games na Escola Evolutime. É apenas a apresentação do Game, mas mostra o passo-a-passo de como criar e configurar esse Jogo de Corrida no Tutorial abaixo e também em meu Canal no Youtube. Não deixe de conferir!

GameMaker – Criando um Jogo de Corrida (Apresentação)

Link para download do programa: GameMaker Studio

Aprenda o passo a passo de como criar jogos 2D para PC no GameMaker Studio: Aulas GameMaker

História do Brick Game

Brick Game é um pequeno dispositivo portátil utilizado para jogar jogos eletrônicos interativos, geralmente versões miniaturizadas de jogos para videogames. Os controles, a tela e os alto-falantes todos fazem parte de um único objeto. Ao invés de possuir uma tela feita de uma grade de pequenos pixels, eles geralmente possuem telas personalizadas designadas para rodar um único jogo. Esta simplicidade faz com que eles possam ser elaborados tão pequenos quanto um relógio digital, embora alguns o são. A potência visual destes jogos pode variar de algumas pequenas lâmpadas elétricas ou LEDs a telas alfanuméricas semelhantes as de uma calculadora; mais tarde estes foram substituídos por telas de cristal líquido e fluorescentes a vácuo com imagens detalhadas e, no caso de jogos com a tela fluorescente, coloridas.

Alguns Jogos do Brick Game

Estes jogos foram bastante populares em camelôs do Brasil na Década de 1990, sendo hoje comum em lojas de R$1,99. Podem possuir design parecido com o de um Game Boy ou até de um telefone celular. O seu principal jogo é o Tetris, mas também pode conter Arkanoid, Serpente e Space Invaders. Nos anos 90 um clone de Tamagochi chamado Rakuraku DinoKun fez muito sucesso nos camelôs. Hoje Brick Games são conhecidos por serem um dos primeiros consoles portáteis da história.

No final dos anos 80 uma empresa americana de importados começou a produzir um novo produto simples e intuitivo mas que se populariza-se, lançado no final do mesmo ano com o nome de Apollo, ele só continha um jogo: o Tetris, mas depois foram criados novas versões com novos jogos, e daí surgiu o Brick Game. Esse console chegou ao Brasil no início da década de 90 e fez grande sucesso. Hoje além do Brick Game, existem cópias pirata do mesmo, vendidas em lojas de importados e camelôs com o nome de: FunGame, Future Game, Stargame, Cucamaluca, SuperGame, Super TETRIS Game, Point Jogos Game, MISAKE Game, Super Brick, e até mesmo MiniGAME.

Fonte: Brick Game – Wikipédia

Chega de papo! Vamos praticar? ^^

Abra o GameMaker Studio e crie um novo Projeto. Em seguida, siga as etapas abaixo.

  1. Antes de mais nada, salve as imagens abaixo no seu Computador. Elas serão usadas como sprites do nosso Jogo.

  1. Agora vamos criar as Sprites. Clique com o Botão Direito em Sprite – Create Sprite. Figura abaixo.

  1. Clique em Load Sprite e selecione a imagem do Carrinho_0. Em seguida, clique em abrir. (Figuras abaixo).

 

  1. Renomeie o Sprite como “Carrinho” e clique em Ok.

  1. Repita os mesmos procedimentos anteriores para criar todas as Sprites do Jogo. Não esqueça de associar cada imagem a Sprite correspondente. (Figura abaixo).

  1. Agora vamos criar os objetos do jogo e associá-los aos seus respectivos Sprites. Clique com o Botão Direito em Objects – Create Object. (Figura abaixo).

  1. Renomeie o objeto para “obj_carrinho”. Selecione o Sprite do carrinho, depois marque as opções Visible e Solid. Em seguida, clique em Ok.

  1. Repita os mesmos procedimentos do Passo 6 e 7, e crie todos os objetos do Jogo. Não esqueça de associar cada Sprite ao seu Objeto correspondente. Figura abaixo.

OBS.: Foram criados 2 objetos sem sprites. O obj_controle_do_jogo e o obj_pontos. Falaremos deles mais adiante.

  1. Agora vamos criar a Janela do Jogo. Clique com o Botão Direito em Room – Create Room. (Figura abaixo).

  1. Vamos definir o tamanho da nossa Janela. Clique na Aba Settings e defina os seguintes valores para largura (500) e altura (800). (Figura abaixo).

  1. Agora clique na Aba Objects e coloque os seguintes objetos dentro da Room. (Figura abaixo).

  1. Depois que colocar todos os objetos dentro da Room, clique no Visto para salvar as configurações. (Figura abaixo).

  1. Agora vamos adicionar os eventos e ações nos objetos do Jogo. Abra o “obj_carrinho” e clique Add Event – Keyboard e selecione Left. (Figura abaixo).

  1. Depois clique na Aba Move – e arraste a opção “Jump to position” para a Janela de Ações (Actions). Faça as seguintes configurações: X -10 e marque a caixa Relative. Clique em Ok.

Ou seja, toda vez que pressionarmos a seta direcional para esquerda, o carrinho se movimentará para esquerda.

  1. Repita os passos 13 e 14, mas agora para direita – Keyboard – Right. E defina as configurações abaixo: X 10 e marque a caixa Relative. Depois clique em Ok.

  1. Agora vamos colocar os eventos de Colisão do carrinho com os objetos muro e os outros carrinhos. Clique em Add Event – Colision – e Selecione obj_muro. (Figura abaixo).

  1. Clique na Aba Move e arraste a opção “Move Fixed” para janela de Ações (Actions). Marque a opção parar e clique em Ok. (Figura abaixo).

  1. Clique em Add Event – Colision – e Selecione obj_carrinho2. (Figura abaixo).

  1. Depois, clique na Aba Main1 e arraste a opção “Destroy Instance” para a janela de Ações (Actions). Marque a opção “Other” e clique em Ok. (Figura abaixo).

  1. Agora clique na Aba Draw e arraste a opção “Create Effect” para a janela de Ações (Actions). Na janela que se abre, faça as seguintes configurações: Type – Explosion; Size – Medium; Color – Amarelo escuro. Depois clique em Ok. (Figura abaixo).

  1. Para finalizar as configurações da Colisão entre os dois carrinhos, clique na Aba Score e arraste a opção “Set Lives” para a janela de Ações (Actions). Faça a seguinte configuração: New lives -1 e depois clique em Ok. (Figura abaixo).

Ou seja, todas as vezes que um carrinho colidir com outro, o outro carrinho será destruído, criará um efeito de explosão e perderemos uma vida.

  1. Agora repita os passos 18 ao 21, criando a colisão do carrinho com todos os outros. Quando terminar, sua janela de Propriedades do obj_carrinho deverá ficar igual a figura abaixo. Clique em Ok para salvar as configurações.

  1. Agora vamos configurar os controles do Jogo. Abra o Obj_controle_do_Jogo e clique em Add Event e selecione a opção Create. (Figura abaixo).

  1. Depois clique na Aba Control e arraste a opção “Execute a piece of code” para Janela de Ações (Actions). Na Janela que se abre digite o seguinte código:
segundos = 0;

alarm [0] = 30;

Depois clique no Visto para salvar as configurações. (Figura abaixo).

Através desse código, estamos criando a variável “segundos” e setando um Alarme.

  1. Agora clique na Aba Score e arraste a opção “Set Lives” para a janela de Ações (Acions). Defina o valor para 3 e clique em Ok. (Figura abaixo).

Ou seja, todas as vezes que o jogo for iniciado, estaremos com 3 vidas.

  1. Vamos adicionar o Evento de Alarme. Clique em Add Event – Alarm – selecione o Alarm 0. (Figura abaixo).

  1. Clique na Aba Control e arraste a opção “Execute a piece of code” para a Janela de Ações (Actions). Em seguida, digite o código abaixo e clique em Ok.


segundos +=1;
 if(segundos ==2){
 instance_create((320),0,obj_carrinho2);
 obj_carrinho2.vspeed = 20;}
 if(segundos ==3){
 instance_create((100),0,obj_carrinho3);
 obj_carrinho3.vspeed = 20;}
 if(segundos ==4){
 instance_create((300),0,obj_carrinho4);
 obj_carrinho4.vspeed = 20;}
 if(segundos ==5){
 instance_create((90),0,obj_carrinho5);
 obj_carrinho5.vspeed = 20;}
 if(segundos ==6){
 instance_create((320),0,obj_carrinho6);
 obj_carrinho6.vspeed = 20;}
 if(segundos ==7){
 instance_create((120),0,obj_carrinho7);
 obj_carrinho7.vspeed = 20;}
 if(segundos ==8){
 instance_create((310),0,obj_carrinho8);
 obj_carrinho8.vspeed = 20;}
 if(segundos ==9){
 instance_create((320),0,obj_carrinho9);
 obj_carrinho9.vspeed = 20;}
 if(segundos ==10){
 instance_create((110),0,obj_carrinho10);
 obj_carrinho10.vspeed = 20;
 segundos =0;}
 alarm[0] = 30;

OBS.: Cuidado! Digite corretamente o código. Verifique linha a linha para que não ocorram erros na execução do Jogo. Esse código é muito importante.

EXPLICAÇÃO DO CÓDIGO

A variável “segundos +=1” criará o tempo do Jogo de segundo em segundo, ou seja, 0+1 = 1; 1+1 = 2; 2+1 = 3 etc.

A linha “if(segundos ==2) {“ é uma condição estabelecida na variável segundos. Se a variável segundos for igual a dois, alguma ação ou evento será executado.

A linha “instance_create((320),0,obj_carrinho2);” é a ação que será executada. Ou seja, quando a variável segundos for igual a dois, uma instancia do objeto carrinho2 será criada na janela do Jogo, na posição 320 da Tela.

A linha “obj_carrinho2.vspeed = 20;}” é onde configuramos a velocidade vertical do objeto carrinho2 que ocorrerá de cima para baixo a uma velocidade igual a 20.

Observe que a lógica do código se repete em relação aos outros objetos. A única diferença é na variável segundos. Colocamos um intervalo de 1 segundo para cada objeto ou para cada carrinho.

No final, repetimos as linhas de código do Evento Create:

segundos =0;}

alarm[0] = 30;

  1. Agora vamos colocar outro evento de controle no jogo. Clique em Add Event – Other – e selecione a opção “No More Lives”. (Figura abaixo).

  1. Em seguida, clique na Aba Main2 e arraste a opção “Display Message” para a janela de Ações (Actions). Digite a mensagem: “Você Perdeu! Clique em Ok para Sair do Jogo.” Depois, clique em Ok.

Ou seja, quando não houver mais vidas no Jogo, aparecerá uma mensagem.

  1. Crie mais uma Room e coloque o Obj_pontos dentro dela. Depois salve as configurações. (Figura abaixo).

  1. Agora, vamos voltar ao Obj_controle_do_jogo. Ainda no Evento “No More Lives” – clique na Aba Main1 e arraste a opção “Next Room” para a janela de Ações (Actions). (Figura abaixo).

Ou seja, quando não existir mais vida no Jogo, aparecerá uma mensagem para clicar, e quando clicarmos em Ok, vai para o próximo Room que mostrará os pontos.

  1. Vamos colocar o tempo, os pontos e as vidas na Janela do Jogo. Clique em Add Event – Draw – e selecione a opção Draw. (Figura abaixo).

  1. Depois clique na Aba Control e arraste a opção “Execute a piece of code” para janela de Ações (Actions). Digite o código e clique no Visto para salvar as configurações. (Figura abaixo).
draw_text(40,10,segundos);

draw_text(435,10,score);

Ou seja, a variável segundos aparecerá na parte superior esquerda da Tela, e os pontos na parte superior central.

  1. Ainda no Evento Draw – Clique na Aba Score e arraste a opção “Draw Lives” para a janela de Ações (Actions). Defina a posição das Vidas na Tela, inserindo os valores de Largura (270) e Altura (10). Depois clique em Ok. (Figura abaixo).

  1. Depois que configuramos todos os eventos e ações do Obj_Controle_do_Jogo, vamos clicar em Ok para salvar as configurações. (Figura abaixo).

  1. Agora, vamos criar a colisão dos Carrinhos com o Objeto chão. Abra o obj_chao_pontos – Clique em Add Event – Selecione a opção Colision – e clique no carrinho2. (Figura abaixo).

  1. Depois clique na Aba Score e arraste a opção “Set Score” para a janela de Ações (Actions). Defina o New Score para +1, marque a caixa Relative e clique em Ok. (Figura abaixo).

  1. Em seguida, clique na Aba Main1 e arraste a opção “Destroy Instance” para a janela de Ações (Actions). Selecione a opção “Other” e clique em Ok. (Figura abaixo).

Ou seja, toda vez que o carrinho colidir ou passar pelo o chão, ganharemos 1 ponto, e ele será destruído.

  1. Repita os passos 36, 37 e 38 e configure as colisões para todos os carrinhos. Depois clique em Ok para salvar as configurações do Obj_chao_pontos. (Figura abaixo).

  1. Vamos configurar o último objeto do Jogo. Abra o obj_pontos, clique em Add Event – Keyboard – e selecione Any Key. (Figura abaixo).

  1. Clique na Aba Main2 e arraste a opção “End the game” para a janela de Ações (Actions). (Figura abaixo).

Ou seja, quando pressionarmos qualquer tecla na Janela de Pontos, vamos sair do Jogo.

  1. Vamos adicionar mais um evento. Clique em Add Event – Draw – e selecione Draw. (Figura abaixo).

  1. Em seguida, clique na Aba Score e arraste a opção “Draw Score” para a janela de Ações (Actions). Defina o Título para “Pontos: ”, marque a caixa Relative e clique em Ok. (Figura abaixo).

  1. Vamos criar uma Fonte para usarmos como Estilo na palavra Pontos. Clique com o Botão Direito em Fonts – Create Font. Faça as seguintes configurações: Fonte: Arial Black; Tamanho: 36, e marque a opção Bold – Negrito. Depois clique em Ok para salvar. (Figura abaixo).

  1. Voltando nas Propriedades do obj_pontos, no Evento Draw – Clique na Aba Draw e arraste a opção “Set Font” para a janela de Ações (Actions). Escolha a font2 e clique em Ok. (Figura abaixo).

  1. Ainda no Evento Draw – Clique na Aba Draw e arraste a opção “Set Color” e escolha na caixa Color a cor “amarelo”. Depois clique em Ok para salvar. (Figura abaixo).

  1. Depois de configurar todos os Eventos e Ações no obj_pontos, clique em Ok para salvar. (Figura abaixo).

  1. E por fim, vamos clicar no Botão “Run the Game” ou pressionar F5 no teclado para rodar o Jogo. (Figura abaixo).

  1. Se estiver tudo certo, aparecerá a Janela do nosso Jogo de Corrida. (Figura abaixo).

  1. Se perdermos todas as vidas, aparecerá a Janela de Mensagem conforme configuramos. (Figura abaixo).

  1. E por fim, quando clicarmos em Ok para Sair do Jogo, aparecerá a Janela dos Pontos que conseguimos ganhar. (Figura abaixo).

Utilize as setas direcionais esquerda e direita, para controlar a movimentação do carrinho e desviar dos outros carros no Jogo.

Confiram o Tutorial anterior para aprender como criar o Menu de um Jogo no GameMaker Studio. Depois utilize o conhecimento adquirido e crie um Menu Personalizado para o nosso Jogo de Corrida 😉

É isso aí, pessoal! Espero ter ajudado!

Inscreva-se em meu canal para assistir e acompanhar as próximas vídeo aulas de GameMaker. Espero que gostem e compartilhem com os amigos.

Qualquer dúvida, só deixar um comentário abaixo. Sugestões de aulas ou Tutoriais são sempre bem-vindas. ^^

Bons estudos e divirta-se!

Um forte abraço.

Diogo Pimenta

Cursou Análise e Desenvolvimento de Sistemas na FATEC - São Paulo. Atualmente trabalha como Instrutor de Programação, Robótica e Games na Happy Code. Trabalha com o Desenvolvimento de Jogos 2D há alguns anos. Editor e criador do Blog Diogo Pimenta. Também curte músicas, violão e poesias. Seu jogo favorito é o Super Mario Bros.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *