BreynGINE

Mi primer juego (tutorial de bienvenida)

Estás leyendo el tutorial en la web. En el editor del ordenador está en Ayuda > Tutoriales, al lado de tu proyecto. Los enlaces que en el editor copian dibujos y sonidos a tu proyecto, aquí los descargan en ZIP; en el móvil, BreynGINE te ofrece copiarlos al abrir el tutorial.

Capítulo 1Te damos la bienvenida

Este tutorial te enseña a hacer un juego de plataformas completo, desde cero y sin escribir ni una línea de código. Al terminar tendrás a un personaje que corre y salta, monedas que recoger, un marcador, un enemigo al que pisar y una pantalla de victoria.

El juego que vas a hacer: «Mi primer juego».
El juego que vas a hacer: «Mi primer juego».

Por el camino conocerás las tres herramientas que hacen fácil BreynGINE:

  • Sprites: para dibujar tus personajes y objetos píxel a píxel, con sus animaciones.
  • Audio: para ver la forma de los sonidos, recortarlos, darles volumen y quitarles el ruido de fondo.
  • BreynFlow: para decir lo que hace cada cosa con reglas que se leen como frases: «Cuando ocurre algo, si se cumple algo, haz esto».

Cada capítulo es un paso con capturas de pantalla. El tutorial está en la pestaña Tutorial, junto a Juego: puedes arrastrarla a cualquier panel, o fuera del editor para tenerla en su propia ventana. Tómatelo con calma: puedes cerrarla cuando quieras y volver desde Ayuda > Tutorial de bienvenida; se abre en el capítulo en el que lo dejaste.

Consejo: si te equivocas, Ctrl+Z deshace casi todo (también en Sprites, en Audio y en las reglas de BreynFlow), y Ctrl+S guarda la escena.

Cuando quieras, pulsa Siguiente.

Capítulo 2Un vistazo al editor

Antes de empezar, un paseo rápido por la pantalla. Si has usado Unity, todo te resultará familiar.

1
Jerarquía: los objetos de la escena que tienes abierta (el personaje, el suelo, las monedas...). El botón + crea objetos nuevos.
2
Proyecto: los archivos de tu juego: escenas, dibujos, sonidos...
3
Escena: donde colocas y mueves los objetos. Las pestañas de arriba cambian la herramienta de esta zona: 2D, 3D, Script, BreynFlow, Audio y Sprites.
4
Juego: aquí se ve tu juego cuando lo pruebas con el botón ▶ (arriba a la derecha).
5
Inspector: las propiedades del objeto seleccionado: su posición, su tamaño, su color... Abajo del todo está el botón Añadir componente.
6
Ayuda: te explica lo que vas haciendo con BreynFlow y te sugiere el siguiente paso.
7
Consola: mensajes del editor y de tu juego.
Consejo: los paneles se pueden arrastrar por su pestaña a cualquier borde, como en Unity. Si un día se te desordenan, Editor > Layout del editor > Predeterminado los devuelve a su sitio.

Capítulo 3Tu proyecto

Todo juego vive en un proyecto: una carpeta con sus escenas, dibujos y sonidos. Para este tutorial, crea uno nuevo desde el administrador de proyectos (si estás dentro de otro proyecto, ve a Proyecto > Salir al listado de proyectos).

1
Pulsa Crear (o Crear nuevo proyecto).
2
Escribe el nombre: Mi primer juego, y elige la carpeta donde guardarlo.
3
En Plantilla, elige 2D (cámara). Así empiezas con una escena lista con su cámara.
4
Pulsa Crear. El editor se abre con tu proyecto.
Las plantillas: elige «2D (cámara)».
Las plantillas: elige «2D (cámara)».
Consejo: en la pestaña Tienda de Assets del Administrador de proyectos tienes la plantilla Plataformas con BreynFlow, con un juego parecido ya terminado (pulsa en ella y en Descargar). Viene bien para curiosear después del tutorial.

El editor abre la escena main (la principal), con dos objetos en la Jerarquía: Main, la raíz de la escena, y Main Camera, la cámara que decide qué parte del mundo se ve.

Capítulo 4La cámara y el color del cielo

Vamos a hacer un juego de estilo retro, con dibujos pequeños de 16 píxeles. Para que se vean grandes, le diremos a la cámara que se acerque.

1
En la Jerarquía, haz clic en Main Camera.
2
En el Inspector, busca Zoom y pon 2 (en x y en y). Ahora todo se verá el doble de grande.

En la escena verás un rectángulo: es lo que enseña la cámara, la pantalla de tu juego. Todo el nivel cabrá dentro.

Ahora el cielo. Por defecto el fondo es gris; vamos a ponerlo azul:

1
Abre Proyecto > Configuración del proyecto.
2
Escribe color de fondo en el buscador y haz clic en Entorno.
3
Haz clic en la barra de color de Color de fondo predeterminado y elige un azul claro, como el del cielo.
4
Cierra la ventana.
Consejo: en el Inspector, los nombres de las propiedades salen en inglés (Zoom, Position, Scale...), como en la documentación de Godot. Si los prefieres en español: Editor > Configuración del editor > Interfaz > Inspector > Estilo del nombre de la propiedad predeterminada: Localizado.

Capítulo 5Dibuja al protagonista

Hora de dibujar. Pulsa la pestaña Sprites, arriba.

1
Pulsa Nuevo sprite...
2
Nombre: jugador. Ancho y alto: 16 (o elige 16 x 16 en Tamaños habituales).
3
Pulsa Aceptar.

Ya tienes un lienzo transparente de 16 × 16 píxeles. A la izquierda están las herramientas: lápiz (B), goma (E), relleno (G), línea (L), rectángulo (U), elipse (O), cuentagotas (I) y selección (M). A la derecha, los colores, las capas y las animaciones; abajo, los fotogramas.

Elige un color en la paleta (o pulsa el cuadro de color para cualquier otro) y dibuja con el lápiz. El botón derecho pinta con el segundo color (transparente: borra). Con la rueda del ratón te acercas.

Dibujando: contorno oscuro, cuerpo naranja, ojos y mejillas.
Dibujando: contorno oscuro, cuerpo naranja, ojos y mejillas.
Consejo: activa el espejo izquierda-derecha (el botón con flechas ↔) y lo que dibujes en un lado aparecerá en el otro. Ideal para caras.

Las animaciones

Un personaje vivo se mueve. Haremos tres animaciones:

  • idle (quieto): 2 fotogramas, respirando (el segundo, con el cuerpo un píxel más abajo).
  • walk (andar): 2 fotogramas, con los pies en distinta posición.
  • jump (saltar): 1 fotograma, con los pies juntos.

Para el siguiente fotograma, pulsa Copiar abajo a la derecha (duplica el fotograma actual) y cambia lo que se mueve. El papel cebolla (el último botón de la izquierda) te enseña en transparente el fotograma anterior para que no pierdas el sitio.

Después, en Animaciones, pulsa + Animación, ponle el nombre y elige su primer y último fotograma y su velocidad. Para jump, quita Repetir.

Cinco fotogramas y tres animaciones: idle (1-2), walk (3-4) y jump (5).
Cinco fotogramas y tres animaciones: idle (1-2), walk (3-4) y jump (5).
Importante: usa exactamente los nombres idle, walk y jump: luego BreynFlow los usará para animar al personaje solo.

Pulsa Guardar. En la carpeta sprites del panel Proyecto aparecen tu dibujo (jugador.bsprite), su hoja de sprites y sus animaciones (jugador_frames.tres).

Capítulo 6La moneda y el enemigo

Con lo que ya sabes, dibuja dos sprites más:

La moneda: Nuevo sprite... con el nombre moneda y tamaño 12 x 12. Haz 4 fotogramas para que gire: la moneda redonda, más estrecha, de canto y otra vez estrecha. Crea la animación girar con los 4 fotogramas, a 8 fotogramas por segundo, y guarda.

La moneda con el papel cebolla activado.
La moneda con el papel cebolla activado.

El enemigo: enemigo, de 16 x 16, con 2 fotogramas (aplastado y estirado) y la animación caminar. Guarda.

Consejo: ¿ya tienes dibujos hechos en Aseprite o una hoja de sprites descargada? Abrir... abre archivos de Aseprite con sus capas y animaciones, y Cortar hoja... separa una hoja de sprites en fotogramas.

Capítulo 7Limpia los sonidos

Un juego sin sonido está a medias. Grabar un sonido con el móvil es fácil, pero suele quedar un silencio al principio y al final, poco volumen y un ruido de fondo (un zumbido, el aire...). El editor de Audio lo arregla.

Para practicar, usa los dos sonidos de ejemplo que trae este tutorial: copia los sonidos de ejemplo al proyecto (descargar el ZIP). Aparecerán en la carpeta sonidos: moneda_grabada.wav y salto_grabado.wav.

Pulsa la pestaña Audio, después Abrir... y elige moneda_grabada.wav (también puedes hacer clic derecho en el sonido, en el panel Proyecto, y elegir Editar audio).

La onda: ese «pelo» que hay antes y después del sonido es el ruido de fondo.
La onda: ese «pelo» que hay antes y después del sonido es el ruido de fondo.

Quitar el ruido de fondo

Como en Adobe Audition: primero le enseñas al editor cómo suena el ruido, y luego lo quita de todo el sonido.

1
Arrastra en la onda para seleccionar un trozo donde solo hay ruido, sin el sonido: el principio, por ejemplo. Medio segundo o más.
2
Abre Efectos > Capturar perfil de ruido.
3
Haz clic en cualquier sitio de la onda para quitar la selección (sin selección, los efectos se aplican a todo el sonido).
4
Abre Efectos > Reducir ruido.... Con Escuchar lo oyes antes de aplicarlo. Si el sonido queda raro, baja la Reducción; si queda ruido, sube la Sensibilidad. Pulsa Aplicar.
Después: la línea queda plana donde solo había ruido.
Después: la línea queda plana donde solo había ruido.

Recortar, dar volumen y guardar

1
Selecciona solo el sonido, desde justo antes de que empiece hasta que se apaga, y pulsa Recortar (Ctrl+T): se queda solo lo seleccionado.
2
Sin nada seleccionado, Efectos > Normalizar... sube el volumen al máximo sin que distorsione.
3
Selecciona el último trocito y aplica Efectos > Salida suave, para que termine sin un corte brusco.
4
Pulsa Guardar como... y guárdalo en la carpeta sonidos como moneda.wav.

Repite lo mismo con salto_grabado.wav y guárdalo como salto.wav.

Consejo: en Efectos también hay eco, reverberación y filtros. Y si abres un MP3, al guardarlo se hace una copia en WAV u OGG (los MP3 no se pueden escribir).

Capítulo 8Construye el nivel

Vuelve a la pestaña 2D. Vamos a hacer el suelo, tres plataformas y dos paredes.

En la Jerarquía, selecciona Main y pulsa +. En la sección Juego 2D hay objetos preparados para jugar: cada uno trae su cuerpo físico, su colisión y un dibujo provisional de color.

El menú Crear: Jugador, Plataforma, Objeto para recoger y Enemigo.
El menú Crear: Jugador, Plataforma, Objeto para recoger y Enemigo.
1
Elige Plataforma. Aparece una barra verde en el centro de la vista. Para cambiarle el nombre, selecciónala en la Jerarquía, pulsa F2 y llámala Suelo.
2
Hazla más larga: con la herramienta Escalar (tecla S) estírala hasta cubrir el ancho de la pantalla, o en el Inspector, en Transform > Scale, pon x = 6. Colócala abajo del todo, dentro del rectángulo de la cámara (por ejemplo, Position y = 146).
3
Crea tres plataformas más y colócalas como una escalera, cada una un poco más alta que la anterior (por ejemplo en x = -150, 0 y 150, con y = 84, 34 y -16).
4
Para las paredes, crea otras dos plataformas, ponles Scale x = 0.17 e y = 20 (quedan altas y finas) y llévalas a los bordes izquierdo y derecho de la pantalla. Así nadie se sale del nivel.
El nivel: suelo, tres plataformas y dos paredes en los bordes.
El nivel: suelo, tres plataformas y dos paredes en los bordes.
Consejo: para cambiar el color de una plataforma, selecciona su hijo Dibujo y cambia Color en el Inspector.

Capítulo 9El jugador

1
Selecciona Main en la Jerarquía, pulsa + y elige Jugador (plataformas). Aparece un cuadrado azul: es el dibujo provisional. Llévalo encima del suelo, a la izquierda.
2
Con el Jugador seleccionado, ve a la pestaña Sprites, abre jugador.bsprite (con Abrir... o con doble clic en el panel Proyecto) y pulsa Añadir a la escena.

El dibujo sustituye al cuadrado azul y la colisión se ajusta sola a su tamaño. El jugador ya está en el grupo player, que usaremos en las reglas.

Si pulsaras ▶ ahora, el jugador se quedaría quieto: todavía no sabe qué hacer. Eso se lo enseñamos con BreynFlow.

Capítulo 10Dale vida con BreynFlow

BreynFlow es la forma de dar órdenes a los objetos sin programar. Cada regla tiene tres partes:

  • CUANDO: lo que pasa (empieza el juego, se pulsa una tecla, dos cosas chocan...).
  • SI (opcional): lo que se tiene que cumplir (está en el suelo, tiene 5 monedas...).
  • HAZ: lo que ocurre (moverse, saltar, sonar, desaparecer...).
1
Selecciona el Jugador y, en el Inspector, pulsa Añadir componente > BreynFlow (reglas sin código).
2
Pulsa Nueva regla. Se abre el buscador de piezas, ordenadas por temas, con una explicación y un ejemplo de cada una. Elige Ciclo de vida > Cada fotograma y pulsa Añadir a la regla.
3
En la regla, pulsa Acción (en HAZ). Escribe mover en el buscador y elige Mover con los controles.

Cambiar los valores

Lo resaltado en las reglas se puede cambiar con un clic. Haz clic en la velocidad y, en la ficha que se abre, pon:

  • Velocidad: 120.
  • En Aspecto: Animación quieto, Animación andar y Animación saltar: idle, walk y jump, los nombres de tus animaciones. Así el personaje anda, se queda quieto o salta con su dibujo correcto, y mira hacia donde camina.

La regla de saltar

Pulsa Nueva regla otra vez y crea esta:

1
CUANDO: Controles > Tecla o botón. Por defecto es «ui_accept»: Espacio o Intro (y el botón A de un mando).
2
SI: pulsa Condición y elige Física > Está en el suelo (para que no salte en el aire).
3
HAZ: Saltar, con fuerza 380.
4
HAZ: Reproducir sonido. Haz clic en el hueco del sonido y, en la ficha, arrastra salto.wav desde el panel Proyecto hasta Sonido (o pulsa en él y elige Cargar).

Haz clic en «Regla 1 (haz clic para ponerle nombre)» y llama a las reglas Moverse y Saltar. Así:

Las dos reglas del jugador, en la pestaña BreynFlow.
Las dos reglas del jugador, en la pestaña BreynFlow.
Consejo: debajo de cada regla, en cursiva, BreynFlow la lee en voz alta como una frase. Si la frase dice lo que quieres, la regla está bien.

Capítulo 11¡A jugar!

Guarda la escena (Ctrl+S) y pulsa ▶ (arriba a la derecha), o Ctrl+P. Tu juego aparece en el panel Juego.

Muévete con las flechas y salta con Espacio. Prueba a subir por las plataformas.

¡Ya se mueve y salta!
¡Ya se mueve y salta!

Mientras juegas, mira la pestaña BreynFlow: cada regla parpadea cuando se ejecuta y cuenta cuántas veces lo ha hecho (▶ 25). Si una condición no se cumple, se marca. Es la forma más fácil de saber por qué algo no funciona.

Para parar, pulsa el cuadrado ■ (o otra vez Ctrl+P).

Consejo: ¿el personaje no llega a la primera plataforma? Sube la fuerza del salto o baja un poco las plataformas. Ajustar es parte de hacer juegos.

Capítulo 12Las monedas

1
Selecciona Main, pulsa + y elige Objeto para recoger (moneda, estrella...). Colócalo encima de la primera plataforma.
2
Con la moneda seleccionada, ve a Sprites, abre moneda.bsprite y pulsa Añadir a la escena. Ya gira sola: su animación empieza al jugar.
3
Añádele BreynFlow (Añadir componente) y crea esta regla:
  • CUANDO: Física > Choque. Ya viene preparado: «este objeto toca el grupo player».
  • HAZ: Cambiar variable: escribe monedas como nombre, haz clic en del objeto para que sea global (de todo el juego) y déjalo en sumar 1.
  • HAZ: Reproducir sonido: moneda.wav.
  • HAZ: Destruir: este objeto (la moneda desaparece).
La regla de la moneda, con el nombre «Recoger».
La regla de la moneda, con el nombre «Recoger».

Más monedas

Selecciona la moneda en la Jerarquía y pulsa Ctrl+D cuatro veces. Cada copia trae su dibujo y sus reglas. Reparte las cinco monedas por el nivel: una en cada plataforma y dos en el suelo.

Cinco monedas repartidas por el nivel.
Cinco monedas repartidas por el nivel.
Consejo: las copias hechas con Ctrl+D comparten las reglas: si cambias la regla de una moneda, cambian todas. Muy cómodo para objetos iguales.

Capítulo 13El marcador y la victoria

Las monedas ya suman, pero no se ve. Vamos a mostrarlo.

1
Selecciona Main, pulsa + y elige Interfaz > Texto. Llámalo Marcador. En el Inspector, en Text, escribe Monedas: 0, y llévalo a la esquina de arriba a la izquierda de la pantalla.
2
Crea otro texto, Victoria, con el texto ¡Has ganado!, en el centro. Para hacerlo más grande: Theme Overrides > Font Sizes > Font Size = 28. Luego escóndelo: haz clic en el ojo de la Jerarquía (o quita Visible en el Inspector).
3
Añade BreynFlow al Marcador con tres reglas:
  • Empezar sin monedas. CUANDO: Empieza la escena. HAZ: Cambiar variable monedas (global): poner a 0. Así, al volver a empezar, no se arrastran las monedas de antes.
  • Mostrar las monedas. CUANDO: Cambia una variable: monedas (global). HAZ: Cambiar texto de este objeto a Monedas: {monedas}. Lo que va entre llaves se cambia por el valor de la variable.
  • Ganar. CUANDO: Cambia una variable: monedas (global). SI: Comparar variable: monedas (global) mayor o igual que 5. HAZ: Mostrar u ocultar: mostrar el texto Victoria (haz clic en el objeto, elige Un objeto de la escena... y luego Victoria); Esperar 2 segundos; Reiniciar la escena.

Prueba el juego: cada moneda suma en el marcador y, con la quinta, ¡has ganado!

Capítulo 14Un enemigo

Un poco de emoción.

1
Selecciona Main, pulsa + y elige Enemigo. Ponlo en el suelo, a la derecha. Ya está en el grupo enemies.
2
Con el enemigo seleccionado, en Sprites abre enemigo.bsprite y pulsa Añadir a la escena.
3
Añádele BreynFlow con cuatro reglas:
  • Caminar. CUANDO: Cada fotograma. HAZ: Caminar, velocidad 40.
  • Darse la vuelta en las paredes. CUANDO: Aterriza o choca con una pared (ya viene en «choca con una pared»). HAZ: Dar la vuelta.
  • Lo pisan. CUANDO: Choque con el grupo player. SI: Lado del choque: el otro objeto vino por arriba. HAZ: Rebotar al otro objeto (el jugador) con fuerza 260; Destruir este objeto.
  • Toca al jugador. CUANDO: Choque con el grupo player. SI: Lado del choque: vino de lado. HAZ: Activar o desactivar: desactivar al otro objeto; Esperar 0,5 segundos; Reiniciar la escena.

Ahora el enemigo va y viene. Si lo pisas, rebotas y desaparece; si te toca de lado, vuelves a empezar.

El nivel terminado, en la escena.
El nivel terminado, en la escena.
Consejo: «el otro objeto» es el que participa en el evento: en un choque, el que ha chocado con este. Así una regla del enemigo puede hacer cosas al jugador.

Capítulo 15Juega y compártelo

¡Tu juego está terminado! Guarda (Ctrl+S) y pulsa ▶ para disfrutarlo.

Para llevarlo más allá:

  • En un móvil Android: Proyecto > Herramientas > Generar APK (Android)... crea el instalable con un solo botón. Con Icono de app... del editor de Sprites, tu personaje puede ser el icono.
  • En el ordenador: Proyecto > Ajustes de compilación (Ctrl+Shift+B) para elegir la plataforma y compilar.
  • Publícalo en la Breynart App Store (Ayuda > Breynart App Store).

Capítulo 16Y ahora, ¿qué?

Ya sabes lo básico de las tres herramientas. Algunas ideas para seguir:

  • Añade música de fondo: una regla «Empieza la escena» con Reproducir música. Puede repetirse entera o solo un trozo, sin cortes.
  • Haz más niveles: crea otra escena y, al ganar, usa Cambiar de escena en vez de reiniciar.
  • Pon vidas: una variable global «vidas» que baje al tocar al enemigo, y el texto «Vidas: {vidas}».
  • Explora todas las piezas en el buscador de BreynFlow: hay temporizadores, mensajes entre objetos, guardar y cargar partida, perseguir al jugador...
  • Mira Ver como código en las reglas: BreynFlow te enseña cómo serían en C#, por si un día quieres dar el salto a programar.
Consejo: el panel Ayuda siempre te cuenta qué hace la pieza que seleccionas. Y este tutorial sigue en Ayuda > Tutorial de bienvenida para cuando lo necesites.

Más tutoriales

¿Te has quedado con ganas de más? Para ver más tutoriales, ve al menú Ayuda > Tutoriales. Allí tienes, con capturas paso a paso como este:

  • Mi lista de tareas: una app para el móvil con pantallas, listas, ajustes y su propio icono.
  • Mi programa de facturación: un programa de escritorio con clientes, productos, facturas y PDF.
  • Mi shooter 3D: un juego en primera persona al estilo de los clásicos, con el nivel hecho con formas, demonios, una llave y una puerta.
  • Mi aventura en la jungla: una aventura en tercera persona al estilo de Tomb Raider, en un mundo de bloques: una jungla generada, una pirámide maya y un mecanismo de piedra y losa para abrir su entrada.

¡Diviértete creando!

← Todos los tutoriales