1. Project and sprites

In this part

You will create an empty project and import the three images of the game: the ship, the shot and the enemy. At the end, all three show up in the Recursos (Resources) panel, ready to use.

Create the project

1. Open Brasa. In the hub, click + Novo (new).

2. In Modelo (template), leave Vazio (empty). In Nome (name), type Primeiro Jogo.

3. In Resolução (resolution), choose 320×180. It’s the size of the game screen in pixels: small, so the pixel art looks big and crisp.

4. Click Criar (create). The editor opens with an empty room called Main.

The Recursos panel, on the left, shows the folders of the project: objects, rooms, sounds, sprites and src. Each kind of thing has a folder, but you can organize them any way you like.

Import the images

A sprite is the image of an object. It can have several frames, like a cartoon.

1. Open the folder where you unzipped primeiro-jogo-recursos.zip.

2. Click the sprites folder, in the Recursos panel, to select it. Then drag nave.png, tiro.png and inimigo.png from File Explorer into the panel. The files go into the selected folder.

   If you prefer, right-click the sprites folder and choose Importar sprite (PNG)… (import sprite).

3. The three sprites show up in the folder with the names nave, tiro and inimigo. The name of the sprite is the name of the file, without the .png.

Slice the ship into frames

The image nave.png has two ships side by side, one with a bigger engine flame than the other. Alternating between the two, the flame seems to flicker. You need to tell Brasa that the image has two frames.

1. Double-click nave in the Recursos panel. The sprite editor opens in a tab.

2. In Fatiar (slice), under Por (by), leave Colunas (columns) chosen and set Colunas = 2 and Linhas = 1. Below, Frame now shows 16 x 16 px: each frame is 16 by 16 pixels.

3. In Origem (origin), click Centro (center). The origin is the point of the sprite that sits exactly at the position of the object. With the origin in the center, the position of the ship is its middle.

4. Now the collision box: the area that counts when the ship touches something. A freshly imported sprite uses the whole image. In Colisão (collision), click Manual: a green rectangle with handles appears over the frame. Drag the handles so it covers only the body of the ship, without the flame.

5. At the bottom, the timeline shows the two frames, and the Prévia (preview) shows the animation playing. Leave the fps field as it is: in this tutorial, the speed of the animation goes in the code.

Do the same with the other two sprites:

• inimigo: also has two frames. Colunas = 2, Linhas = 1, Origem at the Centro.
• tiro: has a single frame. Leave Colunas and Linhas at 1 and set the Origem to the Centro.

The changes are saved with Ctrl+S (or when you press Play).

What you learned

• A Vazio project starts with the room Main and the folders objects, rooms, sounds, sprites and src.
• To import images, just drag PNG files into the Recursos panel.
• A sprite can have several frames. You separate them in Fatiar.
• The origin is the reference point of the sprite, and the collision box is the area that counts in collisions. See more in Sprite editor.

Next part: 2. The ship →