Primeiro Jogo #1 - Movimentação em Grid e Colisões

Crie seu Primeiro Jogo Completo #1
- Movimentação em Grid, Animação e Colisões -

Título: Crie seu Primeiro Jogo Completo #1 - Movimentação em Grid, Animação e Colisões.
Versão do GM: Game Maker 8.0 PRO, 8.1 PRO e também GMS:Standard
Dificuldade: Fácil
Requer Extensões: Não.
Requer DLLs: Não.
Tags: Primeiro Jogo, Top Down, Grid, Movimentação, GML, Paredes, Colisões, Importar Sprites.



Eai pessoal, belezinha?

Hoje inicio uma série de Aulas para a criação de um game completo Top Down. Durante essas aulas abordaremos diversos assuntos importantes para o desenvolvimento de jogos desse tipo, e tentaremos recriar quase tudo que se conhece nesse gênero de jogo.

Claro que não será possível recriar tudo que existe em todos os games, mas todos os princípios serão trabalhados e certamente ao fim dessas aulas você será capaz de criar games Top Down por conta própria.

Antes de começarmos é importante que você já tenha uma noção básica sobre o Game Maker e GML, que você poderá aprender acessando essas aulas do Alex FC. Além disso, através deste tópico gracioso você poderá baixar e jogar o jogo que criaremos durante as aulas, é legal para se conhecer tudo que iremos criar (no momento da criação dessa primeira aula o jogo estava na versão 1.0, pode ser que quando você ler esse tutorial o jogo possua mais funções).



Para começarmos, vamos Importar os Sprites para dentro do nosso novo projeto no Game Maker, baixe este arquivo e siga os passos seguintes:

1. Clique em File>Import Resources


2. Selecione o local onde o arquivo primeirojogo.gmres foi salvo, clique no arquivo e selecione Abrir/Open


3. Pronto! Todos Sprites serão carregados para seu game. Estamos fazendo isso pois nosso foco é a Programação do jogo, e não seu Design, por isso estamos usando as Sprites do próprio Game Maker no projeto. Se você quiser substituir por outras sprites que possuam o mesmo tamanho (32x32) provavelmente não terá problemas, pois não precisarão ser feitos ajustes.

A Imagem é Grande! Clique para Visualizar:

Feito isso estamos prontos para a criação dos demais elementos.


Para criar Objetos, clique na Bola Azul no topo da tela.


Uma Janela surgirá com a propriedades do Objeto. Dê a esse primeiro Objeto o nome de obj_explo, defina o Sprite para explo_baixo, clique na caixa Solid, defina Depth para -2, defina a Mask para o sprite "mask" (Quadrado Preto). O Resultado será o seguinte.

Entendendo as Configurações:
obj_explo - nome do Objeto, usaremos esse nome como referência nos scripts, portanto é importante estar correto.
explo_baixo - sprite do explorador olhando para baixo, serve apenas para que possamos identificá-lo na Room, já que criamos um script que fará a troca de sprites. Esse campo define o sprite inicial.
Solid - define o objeto como solido, mas mesmo que ele não seja sólido as Colisões acontecem, porém algumas funções como place_free funcionam apenas com objetos sólidos.
Depth -2 - Depth é a profundidade ou "camada" na qual o objeto se encontra. Estar na camada -2 o coloca acima de todos objetos que estão em camadas maiores que -2, como -1, 0, 1, 10, 35, etc...
Mask: mask - Define o Sprite "mask" como a Máscara do Objeto. Isso significa que em Colisões e para todos os efeitos, o Explorador é um bloco de 32x32 pixels. Usar máscaras previne problemas com Colisões e permite a Movimentação em Grid.

Dúvidas? Comente

Por enquanto pode dar um OK em nosso obj_explo.
Clique novamente na Bola Azul para Criar um Objeto.

Nesse novo Objeto defina o nome como obj_parede, defina o sprite como spr_parede, clique na caixa Solid, defina a Mask como o Sprite "mask", e de OK. A seguir uma imagem apenas para evitar enganos.


A explicação sobre esses elementos já foi dada acima.



Agora vamos definir as variáveis do obj_explo, serão 4 variáveis, sendo que uma delas é Built-in do próprio Game Maker, isso significa que não precisamos nos preocupar em programá-la, basta definir. Acesse novamente nosso obj_explo dando um clique duplo sobre ele, a janela de propriedades se abrirá. Siga os passos:

1. Clique em Add Event > Create
2. Clique na aba Control e arraste um Piece of Code para o campo Actions


3. O Editor de Script do Game Maker se abrirá (já viu as aulas do Alex FC não é? ). Dentro do Editor digite o código:

Código:

//Variáveis
parado=true //Define se o Explorador está parado ou andando. True=Parado, False=Andando
direcao=0 //Ele se moverá em 4 Direções, cada uma corresponderá a um número.
arma=false //O Jogador inicia a fase desarmado.
image_speed=0 //Define a velocidade da animação, essa é uma Built-in Variable do Game Maker, por isso fica colorida.

Digite exatamente como está acima, lembrando que tudo que vem depois do // é comentário e deverá ficar colorido (geralmente verde). A explicação do uso de cada variável está no próprio código.

IMPORTANTE: Esse código foi definido no Evento CREATE do Objeto, isso significa que ele Define variáveis que não existam antes, porém toda vez que o Objeto for Criado (Create né...) essas variáveis serão redefinidas, além disso o Create acontece antes mesmo da Room carregar completamente. Se seu game está dando algum bug antes de iniciar uma Room, provavelmente este erro está no Create. Tenha sempre isso em mente quando usar o Create. Exemplo: na próxima fase, mesmo se o jogador tinha pego a Arma, ele começará a fase novamente desarmado, pois arma voltará a ser 0.

4. Após isso, clique no "V" Verde para confirmar seu script.

Dessa forma definimos as Variáveis que nosso obj_explo usará.



A Movimentação em Grid é um tipo de movimentação de objetos que se alinha totalmente a "grade" definida. No nosso caso usaremos um grid de 32 x 32 pixels, isso significa que nosso objeto sempre está andando de 32 em 32 pixels, mesmo que soltemos a tecla, ele se moverá até estar alinhado. Este tpo de movimentação facilita a jogabilidade de Maze Games (Jogos de Labirinto, como Pac Man).

Para criar essa movimentação, clique sobre Add Event > Step e então arraste um Piece of Code para o campo Actions, igual acabamos de fazer com o Create.
O Editor se abrirá novamente, insira nele este cóigo um pouco mais complexo:

Código:

//Variaveis do Sprite e Movimento
switch keyboard_key
{
case not vk_down and not vk_right and not vk_up and not vk_left: if place_snapped(32,32){speed=0}; parado=true; break; //Parar se nenhuma direção estiver pressionada
case vk_right: if place_snapped(32,32){direction=0; speed=4}; direcao=1; parado=false; break;
case vk_up: if place_snapped(32,32){direction=90; speed=4}; direcao=2; parado=false; break;
case vk_left: if place_snapped(32,32){direction=180; speed=4}; direcao=3; parado=false; break;
case vk_down: if place_snapped(32,32){direction=270; speed=4}; direcao=0; parado=false; break;
}

Nesse caso usamos a declaração Switch para definir a movimentação, juntamente com keyboard_key (variável Built-in do Game Maker).
Não sabe usar Switch? Já falei para ver as aulas do Alex FC

O primeiro caso (case) verifica se nenhuma das Setas do Teclado estão pressionadas e pára o objeto alinhando-o com a grid usando place_snapped(32,32). E também define a variável parado como verdadeiro (true).
Os demais casos fazem a movimentação do objeto, alinhando com a grid 32x32, definindo a direction que o objeto seguirá, definindo a speed como 4 e as variáveis direcao e parado de acordo com o necessário.

Não sabe usar direction? Clique Aqui e Aprenda!



Neste game usei um padrão de animação que costumo usar todos meus jogos, sei que não é o melhor modo de fazer, mas é o jeito que me acostumei. Se quiser modificar fique a vontade

Para aplicar esse script, adicione um novo Piece of Code dentro do Step do obj_explo e insira o seguinte código:

Código Enooorme:

Sim, é enorme!!
Já testei essa mesma lógica dentro de um Switch e não funciona.

Bom vamos ao entendimento do código:
- a cada if direcao=n inicia uma declaração "se a variável direcao do objeto for tal..."
- o laço if parado=true{talcoisa}else{outracoisa} diz ao Game Maker que se a variável parado for true, o objeto volta a imagem 0 do sprite  (image_index=0) e pára a animação (image_speed=0), e redefine o sprite do objeto (sprite_index=tal)
- o laço if arma!=0{umasprite}else{outrasprite} faz com que nosso Explorador tenha 2 sprites diferentes: Armado e Desarmado.

Bom pessoal, se esse trecho do código ficar complicado, não se preocupem em decifrá-lo agora, apenas copie e cole pois ele é meio tenso mesmo...



Depois daquela animação complicada, vamos a algo bem mais simples!
Para criar a colisão com a Parede, que será única colisão verdadeiro do explorador (mais informações na próxima aula ), faça o seguinte:

1. Clique em Add Event > Collision  > com o obj_parede
2. Na aba Main, selecione o botão (Drag'n'Drop) Move Fixed
3. Configure como a imagem abaixo:


É só isso! Esse é tipo de colisão mais simples, e escolhemos usá-la por um bom motivo: porque funciona!
Não há razão para complicar algo que funciona do modo mais simples  



Em seguida, clique duas vezes sobre a Room0 e configure-a da seguinte maneira:


Salve o Projeto como Aula01.gmk e clique no Play Verde para testar. Tudo deve estar funcionando correntamente.



Pois é pessoal! Com isso finalizamos a Engine da Aula 01, realmente me desculpem por não dar uma boa explicação sobre a Animação do Personagem, mas é que realmente está complicado, em uma aula futura (quando provavelmente vocês estarão mais preparados) entraremos em laços de if complexos.

Obrigado por acompanhar essa aula e comente para dar uma força pro tópico!

Caramba Dharrison tutorial ótimo vai ser muito útil para os iniciantes, e essa coisa do grid não sabia mexer e agora sei.O tutorial ficou muito bom, muito bem explicado, nota 100000!

vlw manobrother
E nem completei o tutorial ainda, tenho que ir para o trabalho agora.

Essa é apenas a parte #1, em breve abordarei outros assuntos, até mesmo a criação de um Highscore Online ;)

abraço!

dharrison escreveu:Em Construção...
Tive que ir trabalhar, a noite completo o tutorial.

Que falta de comprometimento cara....deixar as coisas incompletas por ISSO!!!

Muito bacana seu tutorial cara, só pelo fato de eu ter aprendido umas coisas novas eu mal posso esperar pelo resto!!

Agora sim.
=)

Movido com louvor para a área de tutoriais aprovados.

Obrigado, Dharrison.