Sprites e Layouts

Trocando os sprites: Imagem única

 

Nosso quadrado vermelho vai tomar a forma de um encanador italiano agora, para isso devemos alterar seus sprites.

1. Clique no seu quadradinho vermelho com o lado direito do mouse e escola a opção “Edit animations”

2. Várias janelas serão abertas (possivelmente 4), mas vamos utilizar apenas essas duas:

3. É através destas duas janelas que podemos criar, editar e excluir animações. Na janela “Animation frames (1)” clique na área branca com o lado direito do mouse, vá em “Import frame” e clique na opção “From files...”. Esta opção nos permite importar imagens separadas para nosso projeto e criar uma animação.

4. Vá até a pasta “assets” que disponibilizamos para você e entre na subpasta “sprites”, por fim, selecione somente a imagem “mario-parado.png” e clique em abrir.

5. Se sua janela estiver como na imagem abaixo, o frame foi importado com sucesso. A numeração abaixo de cada imagem indica a ordem em que essas imagens serão apresentadas, não queremos que que nosso quadrado vermelho aparece mais, delete-o clicando dele e apertando a tecla “delete” ou com o lado direito do mouse e selecione a opção “delete”.

6. Na janela “Animations”, clique com o lado direito do mouse no nome da animação e clique na opção “Rename” e renomeie para “mario_parado”.

7. Após isso, feche qualquer janela que as ouras fecharão junto. Seu jogo deve estar assim agora:

Caso não consiga ver corretamente, dê zoom segurando a tecla Crtl + Roda do mouse.

Rode seu jogo e vera que temos nosso personagem, porém mesmo mexendo ou pulando ele perece parado, vamos criar uma animação para podermos criar a impressão de movimento no nosso personagem.

Trocando os sprites: faixa de sprites

1. Clique no nosso personagem, vá em “Edit animations” e na janela “Animations” clique com o lado direito do mouse na área branca e clique em “Add animation” para criar uma animação. Coloque o nome de “mario_andando”, por fim, clique nela para selecioná-la.

2. Veja que nossa animação já possui um frame em branco, clique com o lado direito do mouse na área branca, vá em “Import frames”, mas desta vez, clique em “From Sprite strip”.

3. Selecione a imagem “mario-andando.png” e clique em abrir

4. Uma janela, como a que está abaixo será aberta, nela, o primeiro campo representa o número de colunas que nosso sprite tem, no nosso caso 3. O segundo campo é o número de linhas do Sprite importado, no nosso caso 1. Marque a caixinha para apagar qualquer animação existente e clique em “Ok”

5. Uma janela de alerta será aberta perguntando se você realmente deseja apagar a animação existente (aquele frame em branco), clique em “OK”

6. Se sua animação ficou como a que está abaixo, pode fechar a janela.

Se você rodar o jogo agora verá que a animação não está funcionando, isso por que não associamos ela ao teclado ainda, vamos fazer isso então!

Associando animações aos eventos do teclado

1. Insira o objeto keyboard ao seu jogo.

2. Vá em Event Sheet e adicione um novo evento, selecione Keyboard, escolha a condição “Key is down” e clique em “Next”

3. Uma nova janela se abrirá, clique no botão para escolher qual tecla você quer monitorar.

4. Clique na seta para direita, o nome da tecla deve aparecer no campo como demonstrado no exemplo abaixo, depois clique em “OK”

5. Você voltará para a tela anterior, onde você pode verificar a tecla a ser monitorada. Clique em “Done”.

6. Clique em “Add action” para associar uma ação ao botão do teclado. Selecione “Sprite => Next”, selecione a ação “Set animation” e clique em “Next”.

7. Será aberta uma nova janela, nela, no campo “Animation” coloque o nome da animação que deseja acionar quando a tecla for pressionada, no nosso exemplo é a animação “mario_andando”, feito isso, clique em “Done”

8. O resultado será como o da imagem abaixo. Rode seu jogo.

Nossa animação para a direita está feita, para a animação para a esquerda não precisamos fazer tudo novamente.

Movendo para os lados corretamente

1. Clique na área indicada para selecionar todo o evento

2. Use os comandos Ctrl + C para copiar e Ctrl + V para colar

3. Clique com o lado direito do mouse sobre o segundo “Right arrow is down” e clique em “edit”

4. A janela para a seleção de teclas será aberta novamente, mude para a seta da esquerda e confirme. Seu projeto deverá estar assim:

5. É possível adicionar mais de uma ação por condição, é isso que faremos agora. Para isso, clique no “Add action” que está na mesma direção da condição. Como no mostrado abaixo:

6. Selecione “Sprite” e selecione a ação “Set mirrored”

7. Será aberta uma nova janela como a que está abaixo. Certifique-se de que a opção “State” esteja selecionada em “Mirrored” e clique em “Done”.

8. Seu programa deverá estar assim:

Rode seu jogo. Agora seu personagem se move para direita e esquerda, mas não volta a olhar para a direita. Isso acontece por que não estamos desespelhando nosso personagem, para fazer isso você deve:

  1. Adicionar uma nova ação a condição “Right arrow is down”.

  2. Selecione “Sprite” como ação “Set mirrored” novamente;

  3. Desta vez selecione “Not mirrored” no “State”

  4. No final seu projeto deverá estar assim:

Rode seu jogo. Agora você se move para ambos os lados de maneira correta, porém, quando ele começa a se mover, não fica “parado” novamente, vamos corrigir isso.

Configurando animação para quando o personagem está parado

  1. Crie um evento;

  2. Selecione “Sprite” depois a condição “Platform On stopped”

  3. Adicione uma ação ao evento.

  4. Selecione “Sprite”, escolha o evento “Set animation” e escreva “mario_parado”

  5. No final seu programa deverá estar assim:

Rode seu programa e agora seu personagem se move e para corretamente.

Tela de Game Over

Vamos agora criar nossa tela de game over, para fazer isso, vamos primeiro criar um layout.

  1. Na janela “Projects”, clique com o lado direito do mouse na pasta “Layouts” e escolha a opção “Add layout”

  2. Uma tela como a seguir abrirá

As opções são:

Add event sheet: Cria uma folha de eventos separada, nela você pode adicionar eventos que só funcionarão nessa nova tela.

 

Don’t add event sheet: Cria a tela mas sem event sheet

 

Cancel: cancela a criação de um novo layout (tela)

 

Para este exercício vamos usar a segunda opção “Don’t add event sheet”.

   3. Uma nova tela foi criada, ela deve estar em branco.

   4. Crie um objeto do tipo “TiledBackground” e pinte-o de preto;

   5. Você pode ver que na sua tela existe um tracejado, ele indica o tamanho da tela, redimensione o “TiledBackground” até cobrir essa área tracejada

   6. Adicione um objeto “Text”

   7. No painel de propriedades você pode alterar o texto, fonte, cor, etc. Escreva em branco “GAME OVER” sem aspas e centralize a mensagem tanto dentro da caixa de texto quando dentro da parte preta.

   8. No Layout 1 adicione um novo comportamento ao seu personagem, o “Destroy outside layout”, esse comportamento realmente “mata” o personagem caso ele saia da tela.

   9. Vá em “Event sheet”

   10. Escolha “Sprite” e escolha a condição “On destroyed”

   11. Adicione uma ação a recém-criada condição.

   12. Selecione “System” e escolha a ação “Go to layout”

   13. Selecione o “layout 2” e clique em “Done”

   14. Seu evento deverá estar assim:

   15. Para funcionar, você que apagar o evento “Is outside layout” criado na última aula

   16. Para apagar selecione o evento todo e clique em “Delete” ou com o lado direito do mouse e selecione a opção “Delete”

Exercício Individual 1:

  1. Adicione a animação de pulo

  2. Associe a animação ao pulo

  3. Associe o som do pulo ao pulo

Exercício individual 2:

  1. Importar as musicas de “morte” e “game over” da pasta de assets

  2. Quando o Mario morrer a música tema deverá parar;

  3. A música de morte deverá tocar;

  4. Esperar 3 segundos no layout 1

  5. Ir para o layout 2

  6. Tocar a música de game over

Contatos

  • YouTube - Círculo Branco
  • Facebook - Círculo Branco
  • Instagram - White Circle

© 2023 por ManáosTech. Feito no futuro para o seu presente.

Telefones:

(92) 99103-8067

(92) 98121-0730

manaostech@gmail.com

Endereço

Rua Wilson de Castro - 36A

( Antiga Rua A )

Conjunto Eldorado