Crie seu primeiro jogo


Crie seu primeiro jogo
This tutorial is currently only available in Portuguese. An English version is coming soon.

Bem-vindo ao nosso primeiro tutorial em português. Neste vídeo, você vai aprender a criar o seu primeiro jogo com a ajuda do Guselect. É um jogo super simples, rápido e é uma ótima introdução ao GameMaker.

Ola eu sou o Guselect uso o GameMaker desde criança. Eu desenvolvi jogos como Donut Be Seen, Starboy Adventures e, mais recentemente Moonleap, que ganhou a #NoticeMe Game Jam.

Arquivos para o tutorial disponíveis aqui.

Para quem prefere a versão texto:

Introdução ao Projeto

Abra o GameMaker e crie um projeto “Em branco” usando GML Code, em seguida, escolha um nome para seu projeto.

undefined

O que se segue depois é a tela inicial do GameMaker.

undefined

Ao lado direito da tela, perceba o “Navegador de Recursos”, onde ficam os recursos do jogo: sprites, sons, objetos e etc…

Neste projeto você só irá utilizar três tipos de recursos: Sprites, Objetos e Cenas.

undefined

Caso queira, você pode apagar as pastas dos recursos que não irá utilizar, que é o que nós faremos aqui.

Sprites

De maneira simplificada, os Sprites são as imagens do seu jogo: a parte visual do seu personagem, os frames dos inimigos, o visual dos itens, cenários e até o fundo.

undefined

Objects

Diferente dos sprites, os objetos não são um recurso visual, embora geralmente possuam um sprite associado a eles. Aqui você irá encontrar boa parte dos códigos do nosso jogo, é onde nós definimos o que acontece com o personagem quando ele encosta no inimigo, num item ou em um espinho, por exemplo.

undefined

Cenas

As cenas são espaços onde podemos colocar objetos e quaisquer outros recursos gráficos do nosso jogo, ou seja, é onde você irá criar suas fases.

undefined

Criar os Sprites

Começaremos com os recursos gráficos do seu jogo.

Embora existam várias maneiras de criar um recurso, clique no espaço vazio que representa a maioria da tela com o botão direito do mouse, vá para “Recursos” e “Criar Sprite”.

undefined

O Sprite que vai aparecer tem 64 por 64 pixels e está vazio, esse é o sprite padrão do GameMaker.

undefined

Para esse jogo específico vamos importar o Sprite do jogador, caso prefira, você pode desenhar seu próprio personagem.

Caso queira desenhar seu personagem, lembre-se de levar o tamanho do sprite em consideração! Nós recomendamos algo em torno de 24 por 24 píxeis para esse projeto.

O GameMaker conta com um “Editor de Sprites” que funciona para a criação de desenhos simples e edição de imagens. Aqui você pode desenhar um Sprite do zero e até fazer animações! Caso faça uma animação para seu personagem parado, lembre-se de escolher o frame rate dela no espaço de trabalho.

undefined

undefined

Para esse tutorial, já fizemos os sprites com antecedência, então vamos importá-lo.

undefined

undefined

Renomeie o Sprite para “sPlayer”. Isso não é obrigatório, mas renomear os assets utilizando um padrão semelhante a esse mantém seu projeto organizado e facilita seu trabalho a longo prazo.

undefined

Crie seu segundo sprite, que será o principal item do jogo: nesse caso, a “florzinha do Moonleap”. Renomeie esse Sprite para “sFlor”.

undefined

undefinedundefined

Seguidamente, criaremos a serra.

Você pode criar qualquer sprite que represente perigo ao jogador.

undefinedundefinedundefined

Para acessar o recurso que deseja, basta encontrá-lo no “Navegador de recursos” e clicar duas vezes "em seu nome com o botão esquerdo do mouse.

Perceba que ao clicar em um sprite, nota-se no canto superior direito “Origem : 0 x 0”.

undefined

Essas são as coordenadas do ponto de origem do nosso Sprite, coordenadas essas que indicam o canto superior esquerdo, o “0 x 0”.

Isso quer dizer que quando o Sprite for rotacionado ou invertido, ele vai usar esse ponto de referência, e não é o que queremos (logo mais entenderemos melhor o porquê).

Então, mude de “parte esquerda superior” para “parte do meio central” em todos os sprites do jogo.

undefined

Criar Objetos

Agora iremos criar um Objeto para cada Sprite do jogo.

Clique em “Criar Objeto”

undefined

Aqui você tem alguns parâmetros que pode alterar em relação ao objeto e “Eventos”, que representam literalmente, algum evento do jogo: o que vai acontecer com a personagem quando ele for criado, destruído, quando ele colidir com outro objeto e etc…

undefined

Renomeie o objeto para “oPlayer” e coloque o Sprite do player.

undefined

Faça o mesmo para a “oFlor” e a “oSerra”, nunca esquecendo de colocar nos objetos, seus respectivos Sprites.

undefined

Criar e Editar o nível

Volte para o “Navegador de Recursos”, vá em “Cenas” e clique no “Ambiente 1” (que já veio com o projeto), você verá essa “malha preta”, que é a nossa primeira fase.

undefinedundefined

Agora clique no “oPlayer” com o botão esquerdo do mouse e o arraste para a fase segurando “ALT”. Com isto você poderá colocar o objeto na tela.

undefined

O “oPlayer” está bem pequeno. Isso é porque a nossa fase está muito grande. Você pode alterar isso no canto inferior esquerdo da tela, nas propriedades dessa cena.

Na “largura” coloque 320 e na “altura” 180.

undefined

No canto superior direito da cena, você pode alterar o zoom, clique em “Ajuste central” para ajustar a zoom da tela automaticamente.

undefined

Perceba que ao arrastar o objeto com o mouse , ele trava em pontos específicos da grade, para uma maior liberdade na hora de criar as fases, altere o tamanho da grade para 16 por 16 pixels.

undefined

Agora pode colocar outros objetos na cena. Segurando ALT e clicando com o botão esquerdo do mouse, coloque algumas serras e flores pela fase.

undefined

Mas ao apertar F5 para testar nosso jogo, ele está super pequeno e nosso personagem não consegue se mover…

undefined

Então vamos consertar isso escrevendo os códigos!

Criar eventos

Para fazer a programação desse jogo, usaremos a linguagem escrita do GameMaker (GML Code).

Saia do “Ambiente”, vá para o “Espaço de Trabalho” que é esse espaço que navegamos usando o botão do meio do mouse.

undefined

Vá para a janela do “oPlayer”, clique em “Adicionar Evento” e "Criar”.

undefined

Os códigos que ficam dentro do “Criar”, são códigos que acontecem assim que o nosso objeto for criado, no nosso caso, quando o jogo é aberto.

Alterar o tamanho da Janela de jogo

Vamos escrever uma função que vai aumentar o tamanho da janela do jogo.

Esta é uma função pronta do GameMaker, caso tenha dúvida de como ela funciona, é só clicar nela usando o botão do meio do mouse para abrir o Manual do GameMaker e ler a explicação dessa função.

undefined

Queremos que a janela do jogo seja 1280 por 720 pixels, então vou colocar esses valores aqui nessa função.

window_set_size(1280,720) 

Fazer o Player mover

Agora faremos a movimentação do Player. Queremos que ao apertar a tecla de cima, ele ande 1 píxel para cima, ao apertar a de baixo, ele vai ande 1 píxel para baixo. Para a esquerda, 1 píxel para a esquerda, para a direita, 1 píxel para a direita.

Para isso clique em “Adicionar Evento” e "Etapa”.

undefined

Dentro de “Etapa”, escreva:

if keyboard_check(vk_up)
{
}

Este código significa: se (tradução de “if”) apertarmos a tecla de cima, a área que tá dentro do “{ }” acontece. Essa função vai checar se alguma tecla foi apertada, no caso “vk_up”.

Faça a mesma coisa para as teclas de baixo, esquerda e direita.

if keyboard_check(vk_down)
{
}

if keyboard_check(vk_left)
{
}

if keyboard_check(vk_right)
{
}

Mas nós temos que escrever algo dentro do “{}”, porque até agora essas funções não fazem nada.

Então adicione os códigos de movimentação dentro dos “{}”, devemos estar com um código assim:

if keyboard_check(vk_down)
{
    y-=1
}

if keyboard_check(vk_down)
{
    y+=1
}


if keyboard_check(vk_left)
{
    x-=1
}

if keyboard_check(vk_right)
{
    x+=1
}

”Meu Deus, o que aconteceu? De onde tiramos esses valores? Por que é que temos que escrever isso?”

Estamos utilizando as variáveis X e Y.

Indo no “Ambiente” e clicando 2 vezes no personagem, percebemos que ele já tem essa variável X e Y nele, essas são as coordenadas dele nessa fase.

undefined

Entenda a fase como um plano cartesiano, nosso personagem sempre se encontra em algum ponto desse plano e para fazer ele se movimentar, vamos alterar suas coordenadas durante o jogo.

undefined

Assim, ao apertar a tecla de cima, o jogador diminui 1 da variável Y. Ao apertar baixo, o jogador soma 1 a essa variável Y.

Apertando “F5” podemos perceber que a janela já está maior e conseguimos movimentar o nosso personagem, mas ele não está interagindo com nada…

Ele não pega nenhuma flor, ele não morre na serra, nada acontece.

undefined

Então vamos programar essas interações.

Criar colisões

Nos eventos, além de definir o que vai acontecer quando o personagem for criado ou o que vai ocorrer em cada frame (etapa) do jogo, podemos também definir o que vai acontecer quando ele tem colidir com um Objeto .

Colisão com a flor e passar para o próximo nível

Adicione um novo evento ao “oPlayer” clique em “Colisão” e selecione o objeto “oFlor”. O código que estará aqui será reproduzido assim que o jogador encostar na flor.

undefined

Concorda comigo que quando o Mario pega uma Moeda, a Moeda que está na fase é destruída? Então para demonstrar que o “oPlayer” pegou a flor, faremos a flor ser destruída nessa colisão.

Vamos escrever

instance_destroy(other)

Essa função destrói algum objeto. Escrevendo dentro “other”, ela vai destruir outro objeto que, neste caso, vai ser “oFlor”, por ser quem está participando da colisão.

Queremos que ele consiga contar quantas flores ele tem e para isso criaremos uma variável.

Vamos clicar no “Criar” do “oPlayer” e criar a variável flor.

undefined

flor=0

Uma vez que foi criada, essa variável pode ser manipulada, podemos aumentar, diminuir e checar qual o estado dela.

Clique em “Etapa”, adicione o código

if flor= 3
{
    room_goto_next()
}

undefined

Esse é um código que permite que o jogador passe de fase, ele leva a gente do ambiente atual para o próximo ambiente da lista assim que o jogador coletar 3 flores.

Em inglês os ambientes são chamados Rooms e a função para passar para a próxima Room é “room_goto_next()”

E para fazer o jogador lembrar de cada flor que é colecionada, volte para a “Colisão” com “oFlor” adicione ao código:

flor+=1

undefined

Com isto, toda vez que o personagem encostar numa flor, ele vai aumentar 1 na variável “oFlor” dele, e vai destruir a flor que encostou.

Vamos testar apertando “F5”, e olha que bacana! Nosso personagem consegue coletar as flores.

undefined

Mas nosso personagem além de não estar andando direito, não morre quando encosta na serra.

Então vamos resolver esses problemas!

Morrer na serra e reiniciar o jogo

Faremos a interação do personagem com a serra!

No “oPlayer” adicione um evento de “Colisão” com aoSerra”.

undefined

Aqui vamos fazer a cena reiniciar assim que o personagem toca na serra, dando a impressão de que ele morreu.

Escreva a função:

room_restart() 

Que é uma função pronta do GameMaker, que reinicia o ambiente atual.

Movimento do Player - Parte 1

Para movimentar nosso personagem corretamente temos que criar um Sprite, que vai ser o Sprite do nosso player correndo.

undefined

Renomeie o Sprite para “sPlayerCorre”.

Nós importamos um Sprite que fizemos com antecedência do player correndo, mas caso esteja desenhando seus próprios sprites, desenhe um sprite do seu personagem correndo com as mesmas dimensões dele parado.

undefined

Certifique-se de que esse Sprite novo estará com sua origem alinhada ao “meio central” assim como os outros.

undefined

Máscara de Colisão

undefined

Sonic the Hedgehog, desenvolvido pela Sonic Team

Vamos aproveitar que estamos trabalhando com nossos sprites para consertar outro problema. Até agora o personagem mal encosta na serra e já morre.

undefined

Isso acontece porque a “máscara de colisão” tanto do personagem quanto da serra são excessivamente grandes, fazendo com que o jogador morra só por estar perto das serras

Então, considerando que o jogo é visto de cima, vamos mudar essa máscara de colisão, para a parte de baixo do nosso personagem.

undefinedundefined

Agora vá para o Sprite da serra, clique em “máscara de colisão”, mude do modo “automático” para o “manual” e escolha “Elipse” (visto que estamos falando de um círculo).

undefined

Vamos diminuir essa máscara de colisão e ajustar de acordo com o Sprite. Assim só, a parte cinza representa a máscara de colisão, se o objeto do player encostar na sombra dela ou passar de raspão pela serra, ele não vai morrer.

undefined

O personagem só vai morrer, se a parte mais escura do sprite dele, a máscara de colisão, entrar em contato com a máscara de colisão da serra.

Agora o Player está morrendo quando ele deveria morrer, mas ainda está deslizando, nós ainda não implementamos o Sprite dele correndo então vamos resolver esse problema!

Player movimento- Parte 2

Para concluir a movimentação do nosso personagem, temos que voltar para a janela do “oPlayer”, e clicar em “Etapa".

undefined

Queremos que ele esteja correndo toda vez que apertamos um desses botões: cima, baixo, esquerda, direita… Então vamos escrever uma função para isso.

if keyboard_check(vk_anykey)
{
    sprite_index = sPlayercorre
}
else
{
    sprite_index = sPlayer
}

Esta função diz:

Se apertarmos qualquer tecla, o Sprite do nosso objeto vai ser ele correndo.

Se não (tradução de else), o Sprite dele vai ser ele parado.

Vemos que já está funcionando, contudo, quando a personagem anda para a esquerda, ele continua virado para o mesmo lugar.

undefined

E para isso vamos voltar para este código em cima:

if keyboard_check(vk_left)
{
    x-=1
}


if keyboard_check(vk_right)
{
    x+=1
}

E vamos adicionar “image_xscale=-1” e “image_xscale=1”, fazendo:

if keyboard_check(vk_left)
{
    x-=1 image_xscale=-1
}

if keyboard_check(vk_right)
{
    x+=1 image_xscale=1
}

Esse “image_xscale” significa escala de imagem desse personagem. Se deixarmos 2, ele ficará duas vezes maior horizontalmente, 1, ele vai ficar normal. E se deixarmos -1, ele vai ficar invertido horizontalmente, sendo justamente o que nós queremos.

Você pode apertar “F5” sempre que quiser testar seu projeto.

undefined

Nosso jogo já tá parecendo um jogo de verdade, mas para ficar melhor ainda, colocaremos um fundo nessa fase, deixar o jogo um pouquinho mais difícil e fazer umas fases novas também.

Fundo

Vamos criar um Sprite para o fundo, que vai ser Sprite bem simples, do tamanho 32 por 32. Eu fiz uma grande branca e cinza que vamos chamar:“sFundo”.

undefinedundefined

Clique no “Ambiente”, vá para as “Camadas” e “Background”, sendo a camada da nossa cena que representa o fundo da fase.

undefined

Clicando aqui nas propriedades dessa camada, vamos selecionar o “sFundo” e fazer ele se repetir horizontal e verticalmente.

undefinedundefined

Para mudar a cor dele, clique em “Cor” e escolha uma cor de sua preferência.

undefined

Serras que movem

O jogo está bem mais bonitinho, mas ainda está muito fácil! Faremos então uma serra que movimenta.

Clique no “oSerra” pelo navegador de recursos usando o botão direito, e clique em “duplicar”. Vamos chamar esta nova serra de “oSerraMov”

undefined

Queremos fazer uma serra que fique andando pela fase, quicando pela tela e tenha uma velocidade que conseguimos manipular.

No menu da “oSerraMov”, vamos em “Adicionar Evento” e clicar em “Criar”.

undefined

Já que queremos manipular a velocidade desse objeto, vamos criar uma variável de velocidade horizontal, que vamos chamar “hsp”, e uma variável de velocidade vertical, que vamos chamar “vsp”.

hsp=0
vsp=0

Voltando ao “adicionar um evento”, clique em “Etapa”, e vamos começar a escrever os códigos dessa serra.

undefined

Vamos escrever que o X da serra vai ser somado pela velocidade horizontal, e o Y pela velocidade vertical.

x+=hsp
y+=vsp

Assim podemos modificar os valores do X e do Y usando as variáveis de velocidade.

Por exemplo, usando o número 2 como “hsp”, o X da serra sempre vai somar com 2, com um “vsp” de -2 por exemplo, o Y da serra sempre vai ser subtraído por 2.

undefined

Mas caso nós usemos esses valores, todas as serras andarão na mesma direção… E não é isso que queremos!

Queremos que elas andem em todas direções, aleatoriamente, felizmente existe uma função do GameMaker perfeita para isso, o: “random_range”.

Por isso vamos escrever:

hsp=random_range(-2,2)
vsp=random_range(-2,2)
Essa função o que vai fazer é trazer um número aleatório entre -2 e 2, ou seja, 1.5, 0.75, − 1, − 2… Feito isso, vamos fazer o player morrer para essa serra também. Para isso vamos outra vez para “oPlayer”, “Adicionar Evento”, “Colisão” e escolher o objeto “oSerraMov”. 

undefined

E mais uma vez vamos escrever:
room_restart()

Agora é só ir para o “Ambiente”, clicar na camada “Instances” e colocar nossa nova serra pela fase.

Mas ao apertar “F5” para testar o jogo, ela anda e vai embora para sempre, porque nós não programamos ela pra quicar pela tela ou algo do tipo.

undefined

De volta ao “oSerraMov”, clique em “Etapa” e vamos fazer um código para ela quicar pela tela.

Escreveremos um código que faça o “hsp” da serra se inverter quando seu X for abaixo de 0 e quando seu X for acima do tamanho da fase.

if (x<0) hsp=-hsp
if (x>room_width) hsp=-hsp

Agora faça o mesmo para o Y adicionando o código:

if (y<0) vsp=-vsp
if (y>room_height) vsp=-vsp

Agora nós temos serras paradas, serras que se movimentam, e nosso personagem precisa pegar todas as flores para avançar de fase.

undefined

Mas temos um código de erro quando tentamos ir para a próxima fase, porque não existe a próxima fase!

undefined

Então, bora lá, vamos fazer uma próxima fase.

Próximo nível

Vamos clicar com o botão direito em cima do ambiente que já temos, duplicar e renomear “Ambiente 2”.

undefined

Aqui vamos botar serras paradas, serras que se movimentam e flores em locais diferentes da primeira fase.

undefined

Podemos até clicar aqui em “background” e mudar a cor desse fundo.

undefined

Agora, podemos criar mais fases para o nosso joguinho, todas elas sendo padrões diferentes de serras e tudo mais.

undefined

Despedida

O resultado é um jogo bem simples, que servirá de introdução ao GameMaker. Muitos códigos escritos nesse tutorial não são extremamente otimizados, porém, são simples e relativamente fáceis de serem compreendidos.

Esperamos que você continue trabalhando nos seus projetos, sinta-se livre para continuar trabalhando nesse jogo, adicionar elementos diferentes, inimigos mecânicas novas e muito mais!

Espero que você tenha gostado desse tutorial.

Tchau, e Feliz GameMaking!