Obrigado por visitar a The Game Makers Brasil 😁 Use o fórum de Dúvidas para fazer perguntas. Se está em busca de aprender dê uma olhada nos tutoriais.

[TUTORIAL] GameMaker - Criando um Jogo de Corrida (Estilo Brick Game)

Tutoriais, videoaulas, guias e downloads para te ajudar nos estudos.
Avatar do usuário
didipimenta
Colaborador
Colaborador
Reações: 0
Mensagens: 106
Localização: São Paulo
Contato:

[TUTORIAL] GameMaker - Criando um Jogo de Corrida (Estilo Brick Game)

Mensagem por didipimenta » Qui Mar 16, 2017 5:29 pm

GameMaker - Criando um Jogo de Corrida (Estilo Brick Game)

Imagem

Olá pessoal!
Tudo bem com vocês? ^^
Hoje vou mostrar como criar um Jogo de Corrida estilo ao clássico Car Race do Brick Game, os saudosos e famosos minigames. =)

OBS.: Antes de mais nada, quero deixar claro que esse Tutorial é para aqueles que já possuem os conhecimentos básicos do GameMaker, como criar Sprites, Objects, Rooms, etc. Se você ainda não possui tais conhecimentos, recomendo assistir algumas aulas no Youtube: Aulas GameMaker ou ler algum post anterior.


Um pouco da História do Brick Game

Brick game é um pequeno dispositivo portátil que é usado 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 o quão pequenos como um relógio digital, enquanto 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 telas de cristal líquido e fluorescentes a vácuo com imagens detalhadas e, no caso de jogos com a tela fluorescente, coloridas. Estes jogos foram bastante populares emcamelô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 é oTetris, mas também pode conter ArkanoidSerpente e Space Invaders. nos anos 90 um clone deTamagochi chamado Rakuraku DinoKun fez muito sucesso nos camelôs.

Hoje Brick Games são conhecidos por ser um dos primeiros consoles portáteis da historia.

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 sendo criados novas versões com novos jogos, e daí surgiu o Brick Game. Esse console chegou ao Brasil no inicio 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 começar? ^^

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

ImagemImagemImagemImagemImagemImagemImagemImagemImagemImagem


Imagem


Imagem

Imagem


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

Imagem 

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

Imagem



Imagem 


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

Imagem


5. 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.

Imagem


6. 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).

Imagem


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

Imagem


8. 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.

Imagem

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


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

Imagem


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

Imagem


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

Imagem


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

Imagem


13. 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).

Imagem


14. 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 e clique em Ok.

Imagem

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

15. Repita os passos 13 e 14, mas agora para direita – Keyboard – Right. E defina as configurações abaixo. 

Imagem


16. 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).

Imagem


17. 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).

Imagem


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

Imagem


19. 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).

Imagem


20. 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).

Imagem 

21. 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 e depois clique em Ok. (Figura abaixo). 

Imagem

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

22. Agora repita os passos 18 ao 21, criando a colisão do carrinhos 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. 

Imagem


23. 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).

Imagem


24. 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 e clique no Visto para salvar as configurações. (Figura abaixo).

Imagem

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


25. 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).

Imagem

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

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

Imagem


27. 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 e clique em Ok. (Figura abaixo).

Imagem

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

EXPLICAÇÃO DO CÓDIGO:

Imagem


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;


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

Imagem


29. 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.

Imagem


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

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

Imagem


31. 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).

Imagem

Ou seja, quando não haver mais vidas no Jogo, aparecerá uma mensagem e quando clicarmos em Ok, vai para a próxima Room que mostrará os pontos.


32. 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).

Imagem


33. 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).

Imagem

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


34. 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 e Altura. Depois clique em Ok. (Figura abaixo).

Imagem


35. 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).

Imagem


36. 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).

Imagem


37. 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).

Imagem


38. 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).

Imagem

Ou seja, toda vez que o carrinho colidir ou passar pelo o chão, ganharemos 1 ponto.


39. 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).

Imagem


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

Imagem


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

Imagem

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


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

Imagem


43. 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).

Imagem


44. Vamos ciar 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 e clique em Ok para salvar. (Figura abaixo).

Imagem


45. 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).

Imagem


46. 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).

Imagem


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

Imagem


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

Imagem


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

Imagem


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

Imagem


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

Imagem


Bons estudos e divirta-se! ^^

Quem gostou desse tutorial e poder me ajudar e ao mesmo tempo aprender mais sobre o GameMaker, agradeço. Basta inscreve-se em meu canal no Youtube: Aulas GameMaker
E dar aquele Like =) Desde já agradeço pessoal!
Qualquer dúvida sobre o tutorial, só deixar um comentário abaixo.
Abraço e fiquem com Deus.
Aprenda passo a passo como criar jogos 2D para PC no GameMaker Studio.
Acessem meu canal no Youtube → https://www.youtube.com/playlist?list=P ... Vzgqqcd6-J

Responder

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado e 1 visitante