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 a Movimentação do Personagem sem Scripts

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 a Movimentação do Personagem sem Scripts

Mensagem por didipimenta » Seg Mar 20, 2017 12:31 pm

GameMaker – Criando a Movimentação do Personagem sem Scripts


Olá pessoal!
Tudo bem com vocês?
Hoje vamos aprender a criar a movimentação do Personagem sem scripts, sem códigos! Vamos utilizar os eventos e ações pré-determinados do GameMaker Studio.
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.
 
Vamos praticar? ^^

1. Primeiro vamos criar um novo Projeto no GameMaker. Abra o GameMaker e clique na Aba New e renomeie o nome do Seu Projeto para: “Fazendo um objeto andar no GameMaker. Depois clique no Botão Create. Ilustração abaixo:
Imagem

2. Em seguida, clique com o Botão Direito na opção Sprites – Create Sprite. Figura abaixo:
Imagem
3. Na janela que se abre, vamos clicar em Edit Sprite. Figura abaixo:
Imagem
4. Depois, vamos clicar no Menu File – Add from Strip…. Figura abaixo:
Imagem
5. Procure a imagem dos sprites em movimentos no seu computador. No nosso caso, a imagem está dentro da Pasta Imagens. Selecione a imagem e clique em Abrir. Figura abaixo:
Imagem
Obs.: Você deve procurar a imagem dos sprites em movimentos na Internet e salvar em seu PC antes de seguir esse tutorial.
6. Assim que clicar em Abrir, aparecerá essa janela com essas configurações abaixo:
Imagem
7. Para alterar a largura e altura de seu Sprite, modique os valores dos campos “image width” (largura) e “image height” (altura). No nosso caso, alteramos a largura para 90 e altura para 120 e clicamos em OK para finalizar o primeiro Sprite. Observe a figura abaixo:
Imagem
Obs.: A seleção retangular em volta do Sprite corresponde exatamente os valores digitados na largura e altura. Portanto, muito cuidado para não cortar parte do Sprite, digitando valores inferiores.
8. Agora, vamos repetir o mesmo procedimento do passo 4: clicar no Menu File – Add from Strip. Selecionar a mesma imagem e clicar em Abrir. Vamos aproveitar a seleção retangular criada para o primeiro Sprite e arrastá-la para o segundo Sprite. Figura abaixo:
Imagem
9. Depois disso, repete o mesmo procedimento do passo 8 até a última figura do seu Sprite, selecionando cada parte do seu Sprite. O resultado final ficará assim:
Imagem
Obs.: Cada figura que compõe o Sprite é um frame. O conjunto desses frames cria um movimento em ordem sequencial ou crescente. Ex: Primeiro aparece a “image 0”, depois “image 1”, e assim sucessivamente até o último frame.
10. Para exibir o movimento de todos os frames é só marcar a opção Show Preview. Caso queira diminuir ou aumentar a velocidade da execução do movimento, basta apenas mudar o valor na opção Speed. Você também poderá mudar a cor do plano de fundo do Sprite na opção Background Color. Figura abaixo:
Imagem
11. Depois, salve o seu Sprite, clicando em Ok, save changes. Figura abaixo:
Imagem
12. Agora, vamos renomear o Sprite para jogador_movimento e clicar em OK. Figura abaixo:
Imagem
13. Depois, vamos criar outro Sprite. Só que dessa vez um Sprite parado, ou seja, apenas um frame ou figura. Clique com o Botão Direito na opção Sprites – Create Sprite.
Imagem
14. Agora, vamos renomear o Sprite para jogador_parado e clique em OK. Figura abaixo:
Imagem
15. Depois, vamos clicar com o Botão Direito na opção Objects – Create Object. Figura abaixo:
Imagem
16. Em seguida, vamos renomear o objeto para obj_jogador_parado. Depois selecionar o Sprite jogador_parado, e clicar em OK.
Imagem
17. Agora, vamos duplicar o Sprite do jogador_movimento e inverter a direção para esquerda. Para isso, clique com o Botão Direito em cima do Sprite jogador_movimento  e selecione a opção Duplicate.
Imagem
18. Em seguida, clique na opção Edit Sprite. Depois clique no Menu Transform – e selecione a opção Mirror/Flip. Figuras abaixo:
Figura 1
Imagem
Figura 2
Imagem
19. Verifique se as opções Mirror Horizontally e Apply to all images in the Sprite estão marcadas e clique em OK.
Imagem
Obs.: Esta opção serve para modificar a direção do seu Sprite na horizontal. No nosso caso, já tínhamos um Sprite do jogador em movimento para direita. Duplicamos esse Sprite e invertemos sua direção para a esquerda e aplicamos essa modificação em todas as imagens do nosso Sprite.
20. Observe agora que todas as imagens do nosso Sprite estão para esquerda. Clique em OK, save changes para salvar as alterações. Figura abaixo:
Imagem
21. Agora, vamos renomear o Sprite para jogador_movimento_esq e clicar em OK. Figura abaixo:
Imagem
22. Depois vamos repetir o mesmo procedimento dos passos 13 e 14. Vamos criar outro Sprite. Só que dessa vez um Sprite do jogador_parado para esquerda, ou seja, apenas um frame ou figura. Clique com o Botão Direito no Sprite jogador_movimento_esq e selecione a opção Duplicate. Em seguida clique em Edit Sprite. Delete os sprites, deixando apenas um para esquerda e clique em OK, save changes para salvar as alterações Clique em Figura abaixo:
Imagem
23. Agora, vamos renomear o Sprite para jogador_parado_esq e clicar em OK. Figura abaixo:
Imagem
24. Pronto! Criamos todas as Sprites necessárias para fazer o objeto andar. Agora vamos adicionar alguns eventos e ações no objeto. Para isso, clique 2 vezes no objeto obj_jogador_parado. Em seguida, clique em Add Event – Key Press – e selecione Right. Figuras abaixo:
Figura 3
Imagem
Figura 4
Imagem
Obs.: O evento corresponde pressionar no teclado a seta direcional para direita. Agora vamos colocar a ação do objeto.
25. Na Aba Move, clique na opção Move Fixed e arraste para dentro da janela Actions (Ações). Aparecerá uma janela de configurações. Selecione a direção para Direita e digite 3 no campo Speed (velocidade). Em seguida, clique em Ok.
Imagem
26. Depois, clique na Aba main1, no grupo Sprite, e arraste a opção Change Sprite para dentro da janela Actions. Aparecerá outra janela de configurações. Selecione o Sprite jogador_movimento. No campo subimage, digite -1 para o movimento começar no 1 frame. E no campo speed, digite 3. Depois, clique em OK.
Imagem
27. Agora, vamos adicionar um evento para quando soltarmos a tecla direcional para direita, o jogador parar. Clique em Add event – Key Release – e selecione Right.
Imagem
28. Depois, Na Aba Move, clique na opção Move Fixed e arraste para dentro da janela Actions. No controle de Direção, selecione Parar e clique em OK.
Imagem
29. Em seguida na Aba main1 novamente, no grupo Sprite, arraste a opção Change Sprite para dentro da janela Actions. Aparecerá outra janela de configurações. Selecione o Sprite jogador_parado e depois, clique em OK.
Imagem
30. Repita os mesmos procedimentos do Passo 24 ao 29, só que dessa vez selecione Left (Esquerda) e todos os Sprites para a esquerda (jogador_movimento_esq e jogador_parado_esq) com suas ações correspondentes. Depois clique em OK para salvar as configurações no objeto. Figura abaixo:
Imagem
31. Agora, vamos criar uma Tela de jogo e adicionar o jogador_parado. Clique com o Botão Direito na opção Rooms e selecione Create Room. Figura abaixo:
Imagem
32. Na Janela Room Properties, clique na Aba Backgrounds – Color – Escolha um cor para a sua Tela. Figura abaixo:
Imagem
33. Em seguida, clique na Aba Objects e selecione o objeto jogador_parado. Vá até a Room e dê clique com o Botão Esquerdo para adicionar o Jogador na Tela. Depois clique em Close the form, saving changes para salvar as alterações. Figura abaixo:
Imagem
34. Para finalizar, clique no Menu Run – e selecione a opção Run normally, ou simplesmente pressione F5 para executar o jogo. Utilize as setas direcionais esquerda e direita para movimentar o jogador. Figura abaixo:
Imagem
35. O resultado final ficará como na 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 0 visitante