Iae galera, tudo tranquilo?
Bem... dessa vez eu vou criar um super tutorial de como criar seu jogo de
Top-Down de aventura e batalha em tempo real. Para quem não sabe, Top-Down é quando você olha o personagem por cima e tem a liberdade de se movimentar para todas as direções (diferente de um jogo de plataforma, onde a gravidade é aplicada ao jogo).
Nesse projetos, vamos explorar muitas possibilidades, o que fará o tutorial ser bem extenso. Mas depois que completarmos, você irá me agradecer. Pode ter certeza x3 Só cuidado para não se perder no fluxo do tutorial. Se não entendeu uma parte, vá tentando até conseguir, não pule partes e leia atentamente ou tudo vai dar errado no final.
Para isso, vocês devem ter o
GameMaker 8.0 ou o
8.1 Standard(
não usem o 8.1 Lite/grátis pois ela coloca uma watermark da Yoyo games no seu jogo).
Antes de começarmos, não se esqueca de ir no
Menu e checar se a opção
Advanced Mode está ativa.
0. Objetivo do tutorial
1. Iniciando
2. O Jogador
2.1 Primeiros passos
2.2 Movimentação
2.3 Ataque
2.3 Energia, Vidas e Game over
2.4 Vida Extra
3. Nossa primeira room e a câmera
4. Obstáculos
5. Itens
6. Inimigos e sistema de batalha
7. Objetivo do jogo
8. Interface
9. Considerações finais
0. Objetivo do tutorial:
Criar um jogo Top-Down em que o jogador necessita pegar o diamante no final das fases, atacando os inimigos com socos e flechas se necessário. O jogo deverá apresentar uma interface básica também.
1. Iniciando:
Bom galera, primeiro vamos criar os objetos do jogo. Para os sprites, recomendo que por hora usem alguns básicos como quadrados de diferentes cores. Vamos criar alguns sprites e objetos vazios por hora para usarmos mais tarde:
Sprites: (Faça todos eles 32x32 de preferência)
- jogador_esquerda
- jogador_direita
- jogador_cima
- jogador_baixo
- jogador_ataque_esquerda
- jogador_ataque_direita
- jogador_ataque_cima
- jogador_ataque_baixo
- parede_sprite
- flecha_sprite
- tesouro_sprite
- mask_32_32 (Deve ser um quadrado cheio que ocupe toda a imagem, sem sobras)
- item_energia_sprite
- item_vida_sprite
- diamante_sprite
- vida_barra_sprite
- bola_de_fogo_sprite
Objetos:
-
jogador
-
ataque_principal
-
ataque_1
-
flecha
-
inimigo_principal
- inimigo_1
- inimigo_2
- inimigo_3
-
obstaculo_principal
-
obstaculo_alto
-
obstaculo_raso
-
tesouro
-
inimigo
- item_energia
- item_vida
- diamante
- jogador_posicao_inicial
- interface
- bola_de_fogo
Criem esses objetos com os mesmos nomes. Todos eles ficarão vazios, se quiser, você já pode especificar as sprites deles.
Já, já, iremos usar GML (Game Maker Language) para programas nossos jogos, então, copie e cole os códigos em
verde e coloque-os nos eventos que eu irei especificar.
Mas colar onde? Cole nas páginas do
Execute Code.
2. O Jogador
Bem, aqui está o nosso herói da vez. Ele vai carregar em sí o foco principal da câmera do jogo e várias variáveis importantes, por isso, ele nunca poderá deixar de existir.
2.1 Primeiros passos:
Assim sendo, vamos deixá-lo
Persistent. Assim, basta colocar ele apenas na primeira room do jogo que ele passará adiante em todas as outras Rooms.
Também deixaremos ele
Sólid. Pois assim, os inimigos não vão passar por cima dele futuramente e interpretarão ele como um obstáculo em potêncial.
Para evitarmos bugs na colisão com obstáculos, adicionaremos uma
Mask para o jogador. A
Mask dele será a
mask_32_32 que criamos anteriormente.
Agora no
Create event, vamos dar ao nosso personagem algumas funções importantes. Coloque uma peça de código e vamos carregá-lo com algumas informações necessárias.
atacando =false
face =0
pontos =0
energia =100
energia_maximo =energia
vidas =3
2.2 Movimentação:
Agora vamos lhe dar movimentação, que é a parte mais importante. Para isso, vamos usar um código que checa se na direção não existe objetos sólidos, se o botão está sendo pressionado e, enquanto as duas estiverem satisfeitas, o jogador vai andar. Veja um exemplo:
if keyboard_check(vk_up) //Checa se o botão 'Direcional para Cima' está pressionado
{face = 90 //A direção do jogador, em graus. Não é obrigatório, mas será muito útil.
sprite_index = jogador_cima //Caso for verdade, o jogador mudará sua sprite.
if place_free(x,y-4){y -=4} //Agora, se quatro pixels acima estiver livres de obstáculos sólidos, o jogador andará quatro pixels acima. Se não, ele não anda nada.
}
Se você entendeu como funciona este código, será fácil programar as outras direções do personagem. Vamos colocar este código no
step event do objeto
jogador. Assim, usaremos as setas de direção para movermos nosso personagem.
//Movimentação para a direita
if keyboard_check(vk_right)
{face =0
sprite_index = jogador_direita
if place_free(x+4,y){x +=4}
}
//Movimentação para a esquerda
if keyboard_check(vk_left)
{face =180
sprite_index = jogador_esquerda
if place_free(x-4,y){x -=4}
}
//Movimentação para cima
if keyboard_check(vk_up)
{face =90
sprite_index = jogador_cima
if place_free(x,y-4){y -=4}
}
//Movimentação para baixo
if keyboard_check(vk_down)
{face =270
sprite_index = jogador_baixo
if place_free(x,y+4){y +=4}
}
Depois disso, vamos arrumar a
velocidade visual de movimentação do personagem.
Mas como assim? Bem, você provavelmente quer ver o seu personagem ''andando'' apenas quando ele tem certa velocidade, e não mechendo as pernas enquanto estiver parado.
Para isso, vamos utilizar o seguinte código, também no
step event, e deve ser após o código anterior:
if keyboard_check (vk_down) or keyboard_check (vk_up) or keyboard_check (vk_right) or keyboard_check (vk_left) = true //Checa se algum direcional está sendo pressionado
{
image_speed=0.5 //A imagem do personagem se movimentará junto com ele
}
else //Se não...
{
image_speed =0 //O desenho do personagem ficará parado
image_index =0 //e voltará para a primeira imagem
}
Agora, a movimentação de nosso personagem está completa.
2.3 Ataque
Bom, agora vamos trabalhar no ataque do nosso personagem. Para inovar, vamos fazer duas possibilidades: o ataque de curto alcance e atirar flechas. ''Atirar flechas'' pode ser facilmente substituido por tiros, então fique ligado!
Antes disso, vamos alterar um pouco os nossos objetos ataque_principal, ataque_1 e flecha. Faça o ataque_1 e a flecha ficarem
Parent do ataque_principal.
O
ataque_1 representará o ataque de curta distância do personagem, seja um soco ou coisa do tipo. Coloque qualquer sprite, de preferência 32x32 e de apenas uma subimagem. Você provavelmente vai querer que ele exista mais fique invisível aos olhos do jogador, então, vamos
desmarcar a caixa de
Visible dele. Agora, vá em
Other events >
Animation End e coloque apenas a função
instance_destroy(). Isso fará com que ele se destrua quase instantaneamente.
Mas porque isso é necessário? Simples, para ele ser destruído (o ataque) assim que acertar ou não acertar o inimigo.
Agora a
flecha. Coloque no objeto uma sprite com 4 subimagens, cada uma com a flecha apontando para uma direção diferente. A primeira subimagem deve ser da flecha apontando para a direita (a segunda, para cima, a terceira para a esquerda e a ultima para baixo). Agora, coloque no
create event o seguinte código:
direction = jogador.face //Faz com que ela vá na direção do jogador no momento que ela foi criada
speed =8 //Velocidade da flecha
image_speed =0
image_index=direction*image_number/360 //Este código faz com que a flecha escolha automáticamente a subimagem certa conforme sua direção.
Ainda no
Create Event, coloque o
alarm[0] para 150, e no evento do alarm[0], coloque
instance_destroy(). Isso fará com que, em 5 segundos, a flecha se auto-destrua, para impedir que ela vá muito longe.
Agora coloque um
evento de colisão com o objeto
obstaculo_alto,
instance_destroy() também, para ela ser destruida assim que bater em alguma parede ou coisa do gênero.
Agora que nós programamos os dois tipos de ataque, vamos programar para o jogador em criar ambos. O botão para o jogador atacar de perto será a letra
A, e para o jogador atirar uma flecha, será a letra
S.
Primeiro vamos programar o ataque curto/soco no
jogador. Adicione o seguinte código na letra correspondente (neste caso, a letra
A).
if atacando =false //Se ele ainda não estiver atacando no momento...
{atacando =true //Agora ele está.
if face = 0
instance_create(x+16,y,ataque_1)
if face =90
instance_create(y-16,y,ataque_1)
if face =180
instance_create(x-16,y,ataque_1)
if face = 270
instance_create(y+16,y,ataque_1)
}
Agora faça o mesmo com a flecha, só que em outra tecla (no nosso caso,
S). Use o mesmo código acima, trocando apenas o ataque_1 por flecha. Se você preferir, troque também todos os 16 por 8, assim, evitará alguns bugs de colisão nas paredes e etc.
Muito bem! Agora nosso personagem ataca! Mas perái... ele pode até criar o ataque e a flecha, mas ele ainda não aparece atacando... Bom, para isso, vamos utilizar um código simples como o de andar, e de quebra, impediremos o jogador de andar enquanto ataca.
Coloque este código no step event, na mesma página do código do movimento, porém primeiro. Assim:
if atacando =true //Se o personagem estiver atacando...
{
image_speed =0.5
if face =0
sprite_index = jogador_atacando_direita
if face =90
sprite_index = jogador_atacando_cima
if face =180
sprite_index = jogador_atacando_esquerda
if face =270
sprite_index = jogador_atacando_baixo
}
else //Ou então... apartir daqui, ficará o código do movimento do personagem, assim, se ele NÃO estiver atacando, ele ficará livre para andar.
{Coloque o código de movimento aqui dentro e apague esta mensagem, ou seu jogo vai dar erro}
Agora, coloque isto no evento
Other >
Animation end:
atacando =false //Assim, o jogador vai parar de atacar assim que a animação de ataque dele terminar.
Ufa! Sei que essa parte foi extremamente cansativa e trabalhosa, mas posso lhe dizer: o pior já foi. Agora respire fundo e vamos continuar.
2.4 Energia, Vidas e Game over:
Agora vamos programar a parte da energia, vida e para nosso personagem morrer. O Próprio GameMaker oferece esse sistema, mas é, na verdade, bem limitado, fora isso, se você conseguir entender como funciona, você terá infinitas possibilidades!
No Create event do nosso personagem, vamos
relembrar algumas coisas que nós especificamos:
energia =100
energia_maximo =energia
vidas =3
Assim sendo, vamos fazer o seguinte: Quando a energia chegar em 0, o personagem perde uma vida. Se as vidas chegarem ao 0, o jogo acaba. Faça o seguinte, numa folha de código separada no
step event do jogador:
if energia < 0 {energia =0} // Impede que a energia fique menos que 0
if energia > energia_maximo {energia = energia_maximo} //Impede que a energia fique mais que o limite que especificamos.
if energia =0 //Agora, se a energia chegar à 0...
{
show_message("Você morreu! Tente novamente!") //Mensagem de morte
vidas -=1 // Retira uma vida
room_restart() // Futuramente faremos com que isso faça o jogador voltar para a posição inicial
}
Muito bem, agora a nossa energia está programada e irá funcionar corretamente. Agora vamos programar as vidas. Você pode colocar este código na mesma folha da energia, depois ou antes:
if vidas <=0 {
show_message("Fim de Jogo!!") // Mensagem de Game over
game_restart() // Reinicia o jogo
}
Muito bem! Agora o nosso Game over também está programado.
2.5: Vida extra:
Nós ainda temos que pensar no que fazer com os pontos que o personagem vai pegar durante o jogo. Por que não colocamos, por exemplo, para cada 1000 pontos que ele obter, ele ganha uma nova vida?
Para isso, coloque outra folha de código no step event:
if pontos >=1000 // Se o jogador tiver mil ou mais pontos
{
vidas +=1 // Ele ganha mais uma vida
pontos -=1000 // Não se esqueça de descontar os mil pontos, ou ele ficará ganhando vidas infinitas toda hora
}
Ótimo! Agora nosso jogador está definitivamente completo! Agora que temos metade do jogo em nossas mãos, vamos aos outros aspectos necessário para o jogo rodar.
3. Nossa primeira room e a câmera:
Bom, agora, crie uma sala de cerca de 960x960 e coloque uma instância de jogador no centro dela.Você pode colocar um background legal.
Agora, vá na aba
Views e marque a caixa
Enable use of views e no View[0], marque a caixa
Visible when room starts. Agora você pode alterar livremente os valores, mas considere muitas coisas antes:
View in room: Altera o tamanho da câmera da room. O padrão é 640x480 e é um bom tamanho, quase ideal. Não precisa alterar o X e Y pois não será uma câmera fixa, ela vai seguir o
jogador.
Port on Screen: Altera o tamanha da tela do jogo no computador da pessoa. Se você colocar maior que o View in room, ele vai esticar os gráficos do seu jogo, e se for menor, vai comprimir. O ideal é deixar do mesmo tamanho que o view.
Object following: Coloque jogador. O Hsp (Horizontal Speed) e Vsp (Vertical Speed) é a velocidade da câmera ao seguir o jogador. De preferência deixe -1 como está. Já o Hbor e Vbor, coloque valores como 128/96, para centralizar um pouco o jogador na câmera.
4. Obstáculos:
Agora vamos criar os obstáculos do jogo. Eu pedi a vocês para criarem os objetos
obstaculo_principal,
obstaculo_raso e
obstaculo_alto.
Mas por quê isso?
Bem, a explicação é muito simples: o
obstaculo_alto não permitirá a passagem de flechas e coisas do gênero enquanto o
obstaculo_raso sim, mas ambos não permitirão o jogador nem os inimigos passarem. Legal, né? Assim, você poderá fazer paredes não deixar flechas passarem, mas ao mesmo tempo possibilitar do jogador atirar flechas nos inimigos do outro lado de um rio ou por grades, por exemplo.
Bom, se você acompanhou o tutorial, já programamos a flecha para ser destruída no contato com o obstáculo_alto.
Agora, faça o
obstaculo_alto e
obstaculo_raso ficaram no
Parent com o
obstaculo_principal. Isso não terá uma utilidade definida, mas é somente por conveniência. Coloque também
todos os três como
Solid por motivos óbvios.
Agora, você pode criar todos os obstáculos que imaginar: árvores, pedras, rios e etc. Mas lembre-se sempre de ligar os obstáculos no
Parent com o
obstaculo_alto ou o
obstaculo_raso, dependendo se ele deixa ou não flechas passarem por ele. Lembre-se: nenhum objeto além do
obstáculo_raso e
obstáculo_alto devem ser ligados diretamente no
obstáculo_principal.
Lembre-se também de colocar a
mask_32_32 como
mask dos obstáculos para impedir bugs de colisão.
Então, coloque os obstáculos na sua room e faça um rápido teste. Atire flechas e tente andar sobre eles. Se nenhum deles deixar o jogador passar, e os rasos (provalmente rios, por exemplo) não destruirem as flechas, ótimo! Deu tudo certo!
Se você quiser colocar a room como
Persistent, fique a vontade.
Mas lembre-se: Se ela NÃO for Persistent, sempre que você voltar nela um novo jogador será criado, então, você pode:
- Deixar a room persistent
- Impedir do jogador voltar nessa room depois que sair dela
5. Itens:
Agora vamos criar nossos itens. Eu pedi para vocês criarem três itens: item_energia, item_vida e tesouro. São muito simples de serem programados, e todas suas funções eles serão especificadas via
Collision event com o
jogador.
item_energia:
jogador.energia +=25
instance_destroy()
item_vida:
jogador.vida +=1
instance_destroy()
item_tesouro:
jogador.pontos +=100
instance_destroy()
Se os itens tiverem uma animação básica em seus sprites, coloque um
image_speed =0.5 no
Create event para que ela não fique muito rápida.
Agora nós temos os itens para espalhar pelo nosso jogo. Agora vamos continuar que estamos quase acabando!
6. Inimigos e sistema de batalhas:
Bom, agora chegou a hora de colocar ameaças e desafios no nosso jogo. Existe infinitas possibilidades para programar uma IA de inimigos. Não vamos entrar em detalhes perfeccionistas nem uma IA tão inteligente, vamos apenas fazer um molde básico de inimigo.
Como o nosso jogo permite o personagem atacar, vamos ter que fazer inimigos mais agressivos e que saibam atacar o jogador também.
Eu pedi para vocês criarem quatro objetos:
inimigo_principal,
inimigo_1,
inimigo_2,
inimigo_3. Assim como nos obstáculos, o inimigo_1,2 e 3 serão ligados no
inimigo_principal, e assim como os obstáculos, o
inimigo_principal não fará parte do jogo diretamente, é apenas o molde que dará as informações mais necessárias para seus afiliados, por isso, faremos o principal nele, e para diferenciar um inimigo do outro, faremos pequenas alterações, como velocidade, sprite e etc. Se ficou difícil de entender, vamos por a mão na massa que se aprende mesmo é fazendo.
Vamos primeiro fazer o ataque deles, que será representado pelo objeto bola_de_fogo que já foi criado. No
Create event da
bola_de_fogo, coloque:
move_towards_point(jogador.x,jogador.y,4)
Na
colisão com o
jogador, coloque:
jogador.energia -10
instance_destroy()
E na
colisão com o
obstaculo_alto, coloque apenas:
instance_destroy()
No
Create event do
inimigo_principal, coloque:
velocidade =0
energia =0
delay =0
Então, no
step event, vamos fazer uma IA básica:
if distance_to_object(jogador) <=160 //Se ele estiver a menos de 160 pixels de distância do jogador...
{
if distance_to_object(jogador) <=64 //Agora, se ele estiver ainda mais perto do jogador...
{
if delay <=0{
delay =100
instance_create(x,y,bola_de_fogo) //Ele ataca
}
}
else //Se não...
mp_potential_step(jogador.x,jogador.y,velocidade,0) //Ele continua andando em direção ao jogador
}
else //Se não...
speed =0 //Para de andar
if delay >0{delay -=1}
if energia <=0 {instance_destroy()} //Se a energia acabar, ele é destruido.
Agora vamos fazer o inimigo perder energia quando é atacado. Para isso, crie um
Collision event com o objeto ataque_principal:
energia -=irandom_range(10,25) //Faremos ele perder entre 10 e 25 pontos de energia quando atacado.
other.destroy_instance() //Destruir o ataque
Só para finalizar, vamos fazer com que os inimigos parem de andar no contato com a parede. Coloque um evento de
colisão com o
obstáculo_principal.
speed =0 //Apenas por conveniência, já que a IA dele impede que ele tente atravessar obstáculos
Agora, nosso
inimigo_principal já está totalmente pronto. Agora, vamos fazer pequenas alterações no
inimigo_1,
inimigo_2 e
inimigo_3.
No
Create event do
inimigo_1:
velocidade =1
energia =50
delay =0
No
Create event do
inimigo_2:
velocidade =4
energia =20
delay =0
No
Create event do
inimigo_3:
velocidade =2
energia =70
delay =0
Todo os outros eventos não precisam ser alterados, pois estão puxando informação da programação do
inimigo_principal, já que estão de
Parent nele. Agora que os inimigos estão totalmente programados, você nós podemos partir para o penúltimo passo do nosso mega tutorial.
7. Objetivo do jogo
Claro que todo jogo deve ter um objetivo. Então, vamos colocar como objetivo o jogador pegar o
diamante. Você provavelmente deve ter colocado várias instâncias na sua primeira room, então, agora coloque alguns inimigos, faça um pequeno "labirinto" (mas não leve ao pé da letra, pois isso não é um jogo de maze) e coloque o diamante no fim dele. Agora vamos programar o diamante.
Coloque um
Collision event do
diamante com o
Jogador.
if (room != room_last) //Se não for a última room do jogo
{
show_message("Você conseguiu! Vamos para a próxima fase!") //Mensagem de sucesso
room_goto_next() //Próxima fase
}
else //Mas se for...
{
show_message("Parabéns! Você conseguiu vencer a última fase! Obrigado por jogar!!") //Mensagem final
game_end() //O jogo fecha
}
Agora o diamante está programado para passar as fases e terminar o jogo. Mas quando você passa a fase, provavelmente perceberá que o seu
jogador, que é
Persistent, inicia a próxima no mesmo lugar que ele terminou a anterior. É aí que encontra nosso objeto especial:
jogador_posicao_inicial.
Coloque o
jogador_posicao_inicial no lugar que você quer que o
jogador comece a fase. Então coloque no
other >
room_start do
jogador_posicao_inicial e coloque o seguinte código:
jogador.x = x
jogador y =y
Agora sempre que o jogador entrar numa room ou morrer (lembra que programamos para a room reiniciar quando o personagem morrer?), ele é transportado automáticamente para o
jogador_posicao_inicial. Não se esqueça de colocar um
sprite qualquer nele e deixar o
Visible dele
desligado. E claro, lembre-se de colocar o
jogador_posicao_inicial em todas as rooms do jogo.
8. Interface:
Agora que nosso jogo está praticamente completo, por que não deixá-lo mais bonito e com algumas informações? Para isso, criamos o sprite
vida_barra_sprite. Faça dele um sprite cerca de 100x25 com cerca de 20 subimagens, cada uma menos cheia que a outra.
 |
| Salve esta imagem se desejar. |
Agora, precisamos de um objeto para colocar nossa interface na tela. Para isso criamos o objeto
interface. Deixe ele sempre
Visible e
Persistent, e coloque ele na mesma sala que o
jogador. Além disso, coloque o
Depth dela como
-1000 (isso fará ela ficar acima de qualquer objeto).
Agora, acrescente o
Draw Event e vamos fazer a interface básica do nosso joguinho.
draw_sprite(vida_barra_sprite,(jogador.energia*20/jogador.energia_maximo),view_xview[0]+4,view_yview[0]+4)
Este código colocará sua barra de energia no canto superior esquerdo da tela como mágica. Agora vamos adicionar algumas informações, como vidas restantes e a pontuação.
Coloque uma cor legal no draw event da interface (uma que não seja tão escura nem tão clara) e crie uma fonte legal, nem muito pequena nem muito grande e coloque-a também (ambos acima da folha de código).
Agora adicione o código na mesma folha da barra de vida.
draw_text(view_xview[0]+4,view_yview[0]+30,"Vidas: "+string(jogador.vidas))
draw_text(view_xview[0]+4,view_yview[0]+50,"Pontos: "+string(jogador.pontos))
Pronto! Agora sua interface está completa!
9. Considerações finais:
Pronto! Agora criamos todos os básicos que um jogo deve ter usando GML. Teste seu jogo e veja se funciona. Se algo no tutorial está dando errado, favor avisar!!
Logo, criarei uma engine com tudo pronto e disponibilizarei o Download para vocês verem como é nosso jogo pronto.
Copie, mas cite a fonte!!!
Até a próxima!
