1. Proyecto y sprites

En esta parte

Vas a crear un proyecto vacío e importar las tres imágenes del juego: la nave, el disparo y el enemigo. Al final, las tres aparecen en el panel Recursos, listas para usar.

Crear el proyecto

1. Abre Brasa. En el hub, haz clic en + Novo (nuevo).

2. En Modelo (plantilla), deja Vazio (vacío). En Nome (nombre), escribe Primeiro Jogo.

3. En Resolução (resolución), elige 320×180. Es el tamaño de la pantalla del juego en píxeles: pequeña, para que el pixel art quede grande y nítido.

4. Haz clic en Criar (crear). El editor se abre con una room llamada Main, vacía.

El panel Recursos, a la izquierda, muestra las carpetas del proyecto: objects, rooms, sounds, sprites y src. Cada tipo de cosa tiene una carpeta, pero puedes organizarlas como quieras.

Importar las imágenes

Un sprite es la imagen de un objeto. Puede tener varios cuadros, como en un dibujo animado.

1. Abre la carpeta donde descomprimiste el primeiro-jogo-recursos.zip.

2. Haz clic en la carpeta sprites, en el panel Recursos, para seleccionarla. Después arrastra nave.png, tiro.png e inimigo.png desde el Explorador de archivos hasta el panel. Los archivos van a la carpeta seleccionada.

   Si prefieres, haz clic derecho en la carpeta sprites y elige Importar sprite (PNG)….

3. Los tres sprites aparecen en la carpeta con los nombres nave, tiro e inimigo. El nombre del sprite es el nombre del archivo, sin el .png.

Cortar la nave en cuadros

La imagen nave.png tiene dos naves lado a lado, una con la llama del motor más grande que la otra. Alternando entre las dos, la llama parece parpadear. Tienes que decirle a Brasa que la imagen tiene dos cuadros.

1. Haz doble clic en nave en el panel Recursos. El editor de sprite se abre en una pestaña.

2. En Fatiar (cortar), en Por, deja elegido Colunas (columnas) y pon Colunas = 2 y Linhas = 1. Abajo, Frame pasa a mostrar 16 x 16 px: cada cuadro mide 16 por 16 píxeles.

3. En Origem (origen), haz clic en Centro. El origen es el punto del sprite que queda exactamente en la posición del objeto. Con el origen en el centro, la posición de la nave es su punto medio.

4. Ahora la caja de colisión: el área que cuenta cuando la nave toca algo. Un sprite recién importado usa la imagen entera. En Colisão (colisión), haz clic en Manual: aparece un rectángulo verde con asas encima del cuadro. Arrastra las asas para que cubra solo el cuerpo de la nave, sin la llama.

5. Abajo, la línea de tiempo muestra los dos cuadros, y la Prévia (vista previa) muestra la animación en marcha. Deja el campo fps como está: en este tutorial, la velocidad de la animación va en el código.

Haz lo mismo con los otros dos sprites:

• inimigo: también tiene dos cuadros. Colunas = 2, Linhas = 1, Origem en el Centro.
• tiro: tiene un solo cuadro. Deja Colunas y Linhas en 1 y pon el Origem en el Centro.

Los cambios se guardan con Ctrl+S (o cuando pulsas Play).

Qué aprendiste

• Un proyecto Vazio empieza con la room Main y las carpetas objects, rooms, sounds, sprites y src.
• Para importar imágenes, basta con arrastrar archivos PNG al panel Recursos.
• Un sprite puede tener varios cuadros. Los separas en Fatiar.
• El origen es el punto de referencia del sprite, y la caja de colisión es el área que cuenta en las colisiones. Mira más en Editor de sprite.

Siguiente parte: 2. La nave →