1. Projeto e sprites

Nesta parte

Você vai criar um projeto vazio e importar as três imagens do jogo: a nave, o tiro e o inimigo. No fim, as três aparecem no painel Recursos, prontas para usar.

Criar o projeto

1. Abra a Brasa. No hub, clique em + Novo.

2. Em Modelo, deixe Vazio. Em Nome, escreva Primeiro Jogo.

3. Em Resolução, escolha 320×180. É o tamanho da tela do jogo em pixels: pequena, para a pixel art ficar grande e nítida.

4. Clique em Criar. O editor abre com uma room chamada Main, vazia.

O painel Recursos, à esquerda, mostra as pastas do projeto: objects, rooms, sounds, sprites e src. Cada tipo de coisa tem uma pasta, mas você pode organizar do jeito que quiser.

Importar as imagens

Um sprite é a imagem de um objeto. Ele pode ter vários quadros, como num desenho animado.

1. Abra a pasta onde você descompactou o primeiro-jogo-recursos.zip.

2. Clique na pasta sprites, no painel Recursos, para selecioná-la. Depois arraste nave.png, tiro.png e inimigo.png do Explorador de Arquivos para o painel. Os arquivos vão para a pasta selecionada.

   Se preferir, clique com o botão direito na pasta sprites e escolha Importar sprite (PNG)….

3. Os três sprites aparecem na pasta com os nomes nave, tiro e inimigo. O nome do sprite é o nome do arquivo, sem o .png.

Fatiar a nave em quadros

A imagem nave.png tem duas naves lado a lado, uma com a chama do motor maior que a outra. Alternando entre as duas, a chama parece tremular. Você precisa dizer à Brasa que a imagem tem dois quadros.

1. Dê dois cliques em nave no painel Recursos. O editor de sprite abre numa aba.

2. Em Fatiar, em Por, deixe Colunas escolhido e coloque Colunas = 2 e Linhas = 1. Embaixo, Frame passa a mostrar 16 x 16 px: cada quadro tem 16 por 16 pixels.

3. Em Origem, clique em Centro. A origem é o ponto do sprite que fica exatamente na posição do objeto. Com a origem no centro, a posição da nave é o meio dela.

4. Agora a caixa de colisão: a área que conta quando a nave encosta em algo. Um sprite recém-importado usa a imagem inteira. Em Colisão, clique em Manual: aparece um retângulo verde com alças em cima do quadro. Arraste as alças para ele cobrir só o corpo da nave, sem a chama.

5. Embaixo, a linha do tempo mostra os dois quadros, e a Prévia mostra a animação rodando. Deixe o campo fps como está: neste tutorial, a velocidade da animação vai no código.

Faça o mesmo com os outros dois sprites:

• inimigo: também tem dois quadros. Colunas = 2, Linhas = 1, Origem no Centro.
• tiro: tem um quadro só. Deixe Colunas e Linhas em 1 e coloque a Origem no Centro.

As mudanças são salvas com Ctrl+S (ou quando você aperta Play).

O que você aprendeu

• Um projeto Vazio começa com a room Main e as pastas objects, rooms, sounds, sprites e src.
• Para importar imagens, é só arrastar arquivos PNG para o painel Recursos.
• Um sprite pode ter vários quadros. Você os separa em Fatiar.
• A origem é o ponto de referência do sprite, e a caixa de colisão é a área que conta nas colisões. Veja mais em Editor de sprite.

Próxima parte: 2. A nave →