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:
-
Adicionar uma nova ação a condição “Right arrow is down”.
-
Selecione “Sprite” como ação “Set mirrored” novamente;
-
Desta vez selecione “Not mirrored” no “State”
-
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
-
Crie um evento;
-
Selecione “Sprite” depois a condição “Platform On stopped”
-
Adicione uma ação ao evento.
-
Selecione “Sprite”, escolha o evento “Set animation” e escreva “mario_parado”
-
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.
-
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:
-
Adicione a animação de pulo
-
Associe a animação ao pulo
-
Associe o som do pulo ao pulo
Exercício individual 2:
-
Importar as musicas de “morte” e “game over” da pasta de assets
-
Quando o Mario morrer a música tema deverá parar;
-
A música de morte deverá tocar;
-
Esperar 3 segundos no layout 1
-
Ir para o layout 2
-
Tocar a música de game over