BreynGINE

Mi shooter 3D (tutorial)

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 1Base Infernal

En este tutorial vas a hacer un shooter en primera persona al estilo de los clásicos de los 90, como Doom: pasillos de una base, demonios que te persiguen, una pistola, botiquines, munición, una llave roja y una puerta que solo se abre con ella. Sin escribir ni una línea de código.

«Base Infernal», el juego que vas a hacer.
«Base Infernal», el juego que vas a hacer.

Por el camino aprenderás:

  • Formas: construir el nivel dentro del propio editor, con suelos, paredes, escaleras y texturas, y abrir puertas en las paredes.
  • Luces: dar ambiente con luces de colores.
  • Objetos de juego 3D: el jugador en primera persona, los enemigos y los objetos para recoger, listos para usar.
  • BreynFlow en 3D: moverse con el ratón y WASD, disparar, perseguir, morder, recoger y abrir puertas.
Consejo: si todavía no has hecho el tutorial de bienvenida, échale un vistazo antes: ahí se explica cómo funcionan las reglas de BreynFlow. Aquí iremos un poco más rápido.
Consejo: ¿quieres verlo terminado antes de empezar? En la pestaña Tienda de Assets del Administrador de proyectos, descarga la plantilla Shooter 3D: es el juego de este tutorial, listo para jugar y para curiosear sus reglas.

Cuando quieras, pulsa Siguiente.

Capítulo 2El proyecto

1
En el administrador de proyectos, pulsa Crear.
2
Nombre: Base Infernal. Plantilla: 3D (cámara, luz y cielo).
3
Pulsa Crear.

El editor se abre en la pestaña 3D con la escena main: un cielo, una luz (el sol), una cámara y un plano.

Vamos a hacer el nivel con formas, y el jugador traerá su propia cámara, así que borra lo que sobra: en la Jerarquía, haz clic en Main Camera, luego Ctrl+clic en Plane, y pulsa Supr.

Los dibujos y los sonidos

Para no tener que dibujarlo todo, este tutorial trae los dibujos y los sonidos del juego: copia los dibujos y sonidos al proyecto (descargar el ZIP).

En el panel Proyecto aparecen dos carpetas: sprites (el demonio, el arma, el fogonazo, el botiquín, la munición y la llave) y sonidos (el disparo, el dolor, la muerte, el golpe, recoger y la puerta).

Consejo: cuando termines, prueba a cambiarlos por los tuyos: los dibujos se abren en la pestaña Sprites y los sonidos en Audio.

Capítulo 3El suelo

El nivel tendrá tres salas en fila: la de inicio, la de los demonios y la sala final, con la salida. Mide 12 metros de ancho y 30 de largo.

Arriba del visor 3D está el botón Formas. Ábrelo:

Formas: cubos, esferas, rampas, escaleras, suelos, paredes... y las herramientas para combinarlas.
Formas: cubos, esferas, rampas, escaleras, suelos, paredes... y las herramientas para combinarlas.
1
Elige Suelo. Aparece una losa de 10 × 10 metros donde mira la vista.
2
Pulsa F2 (o doble clic en la Jerarquía) y llámalo Suelo.
3
En el Inspector: Size = 12, 0.2, 30. Y abajo, en Transform > Position: 0, -0.1, -9.
4
En Aspecto (justo debajo de Size), haz clic en la textura de Piedra.
El suelo, de piedra. En Aspecto eliges el color y la textura.
El suelo, de piedra. En Aspecto eliges el color y la textura.

Las texturas se miden en metros: por mucho que estires una forma, nunca se deforman, y siguen de una forma a la de al lado. La primera vez que usas una, se copia a la carpeta textures del proyecto.

Consejo: para moverte por la vista 3D: clic derecho + WASD para volar, rueda para acercarte, Alt + clic para girar alrededor y F para enfocar lo seleccionado.

Capítulo 4Las paredes

1
Formas > Pared. Llámala Pared oeste. En Aspecto, elige Panel técnico. Size: 0.25, 3, 30. Position: -6, 1.5, -9.
2
Con ella seleccionada, pulsa Ctrl+D para duplicarla. Llama a la copia Pared este y pon su Position x en 6.
3
Duplica otra vez: Pared sur, con Size 12, 3, 0.25 y Position 0, 1.5, 6.
4
Tres copias más de la pared sur, cambiando solo su Position z:
  • Pared norte: z = -24.
  • Pared centro: z = -6 (separa la primera sala de la segunda).
  • Pared de la puerta: z = -18 (separa la segunda sala de la final).
Las seis paredes, vistas desde arriba.
Las seis paredes, vistas desde arriba.
Consejo: las copias hechas con Ctrl+D comparten la textura. Si a una le cambias el color o la textura en Aspecto, solo cambia esa.

Capítulo 5Puertas en las paredes

Ahora no se puede pasar de una sala a otra. Vamos a abrir un hueco en las dos paredes del centro, con la herramienta Hacer un hueco: una forma «muerde» a otra.

1
Formas > Cubo. Llámalo Hueco. Size: 2.4, 2.8, 1. Position: 0, 1.3, -6. Queda atravesando la Pared centro, y por abajo entra un poco en el suelo: así el hueco no deja ningún bordillo con el que tropezar.
2
En la Jerarquía, haz clic en Pared centro y luego Ctrl+clic en Hueco. El orden importa: primero la que se queda, luego la que hace el hueco.
3
Formas > Hacer un hueco.
¡Una puerta! El Hueco ahora está dentro de la Pared centro: si lo mueves, el hueco se mueve.
¡Una puerta! El Hueco ahora está dentro de la Pared centro: si lo mueves, el hueco se mueve.

Haz lo mismo con la Pared de la puerta: otro cubo, Hueco puerta, igual pero en z = -18.

Consejo: con Unir puedes juntar varias formas en una sola, y con Separar deshaces la unión o el hueco. Todo se puede deshacer con Ctrl+Z.

Capítulo 6Techo, escaleras y una plataforma

El techo: Formas > Suelo, llamado Techo, con Size 12, 0.2, 30, Position 0, 3.1, -9 y la textura Techo. Ya no se ve el interior desde arriba: haz clic en el ojo del Techo en la Jerarquía para esconderlo mientras construyes (y vuelve a mostrarlo al terminar).

Las escaleras: en la segunda sala, unas escaleras suben a una plataforma donde estará la llave.

1
Formas > Escaleras. Position: 4.25, 0.75, -9.5. Textura: Metal. Suben hacia el fondo.
2
Formas > Cubo, llamado Plataforma. Size: 3.5, 1.5, 4. Position: 4.25, 0.75, -12.75. Textura: Metal.
Las escaleras y la plataforma, en la segunda sala.
Las escaleras y la plataforma, en la segunda sala.
Consejo: las escaleras y la rampa tienen tiradores (los puntos rojos) para cambiar su tamaño en la vista, y en el Inspector puedes elegir cuántos escalones tienen.

Capítulo 7Las luces

Con el techo puesto, dentro está oscuro: el sol no entra. Mejor: así damos ambiente con luces.

1
En la Jerarquía, selecciona Main, pulsa + y elige Luz > Luz puntual. Position: 0, 2.6, 0. En el Inspector: Light > Energy = 1.5 y Omni > Range = 10. Es la luz de la primera sala.
2
Duplícala (Ctrl+D) para la segunda sala: Position z = -12, Range = 12 y un Color rojo (como 255, 90, 60): la sala de los demonios.
3
Otra copia para la sala final: z = -21, color verde.
La sala de los demonios, con su luz roja.
La sala de los demonios, con su luz roja.
Consejo: para ver la escena por dentro mientras trabajas, muestra el Techo y vuela con la vista hasta dentro (clic derecho + WASD).

Capítulo 8El jugador

1
Selecciona Main, pulsa + y, en la sección Juego 3D, elige Jugador (primera persona).
Los objetos para juegos 3D: el jugador, el enemigo y el objeto para recoger.
Los objetos para juegos 3D: el jugador, el enemigo y el objeto para recoger.

Trae su cuerpo, su colisión con forma de cápsula y una Cámara a la altura de los ojos: lo que ve el jugador. Ya está en el grupo player.

2
Ponle Position 0, 0, 3: en la primera sala, mirando hacia las puertas.
3
Añádele BreynFlow (Añadir componente) y crea la regla Moverse:
  • CUANDO: Cada fotograma.
  • HAZ: Mover con los controles. Haz clic en plataformas y, en la ficha, elige el estilo primera persona y Velocidad 5 (en 3D se mide en metros por segundo).

¡A probarlo!

Guarda (Ctrl+S) y pulsa ▶. Haz clic en el juego: el ratón mira y WASD (o las flechas) camina. Pasa por las puertas y sube a la plataforma. Con Esc sueltas el ratón; con un clic lo vuelves a atrapar.

Paseando por la base.
Paseando por la base.
Consejo: ¿el ratón gira demasiado rápido o lento? En la ficha de Mover con los controles, cambia la Sensibilidad del ratón.

Capítulo 9La pantalla del jugador

Ahora, lo que se ve encima del juego: el arma, la mira, la salud y las balas. Antes, dos ajustes para que se vea bien en cualquier ventana. Abre Proyecto > Configuración del proyecto:

  • Escribe stretch en el buscador, haz clic en Ventana y pon Estirar > Modo en canvas_items: la pantalla del jugador crece con la ventana.
  • Escribe filtro de textura, haz clic en Texturas (en Renderizado) y pon Filtro de Textura Predeterminado en Nearest: los píxeles se ven nítidos.

Vuelve a la pestaña 2D: ahí se coloca la pantalla del jugador. El rectángulo azul es la pantalla, de 1152 × 648.

1
Selecciona Main, + > Interfaz > Imagen. Llámala Arma. Arrastra sprites/arma.png desde el panel Proyecto a su Texture. Pon Expand Mode en Ignore Size, y en Layout > Transform: Size 224, 232 y Position 464, 416 (abajo, en el centro).
2
Otra imagen, Fogonazo, con sprites/fogonazo.png, Ignore Size, Size 144, 96, Position 504, 340 (en la punta del arma). Escóndela con el ojo de la Jerarquía: solo se verá al disparar.
3
+ > Interfaz > Texto: Mira, con el texto +, tamaño de letra 32 (Theme Overrides > Font Sizes), en Position 566, 300.
4
Dos textos más, con tamaño de letra 28: Salud («SALUD: 100») en 24, 596, y Balas («BALAS: 20») en 910, 596.
5
+ > Interfaz > Panel: Daño, que tape toda la pantalla (Position 0, 0, Size 1152, 648), con Self Modulate rojo y medio transparente (alfa 90). Escóndelo: se verá un instante cuando un demonio te muerda.
La pantalla del jugador, en la pestaña 2D.
La pantalla del jugador, en la pestaña 2D.
Consejo: en vez de arrastrar los dibujos y sonidos desde el panel Proyecto, puedes pulsar el icono Carga rápida que hay junto al campo (Texture, Sonido...): se abre una lista con los archivos del proyecto que sirven ahí; escribe parte del nombre (arma, disparo...) y pulsa Intro.

Capítulo 10Disparar

Las balas y la salud son variables globales: las usan el jugador, los enemigos y los objetos. Añade BreynFlow al texto Salud con estas reglas:

  • Empezar. CUANDO: Empieza la escena. HAZ: Cambiar variable salud (global): poner a 100; balas (global): poner a 20; llave (global): poner a 0.
  • Mostrar la salud. CUANDO: Cambia una variable: salud (global). HAZ: Cambiar texto de este objeto a SALUD: {salud}.
  • Mostrar las balas. CUANDO: Cambia una variable: balas (global). HAZ: Cambiar texto del texto Balas a BALAS: {balas}.

Ahora, en el Jugador, una regla nueva, Disparar:

  • CUANDO: Tecla o botón. Haz clic en ui_accept y elige mouse_left: el clic izquierdo del ratón.
  • SI: Comparar variable balas (global) mayor que 0.
  • HAZ: Disparar. En la ficha, cambia health por vida: el disparo quitará 25 a la variable «vida» de lo que alcance.
  • HAZ: Cambiar variable balas (global): restar 1.
  • HAZ: Reproducir sonido sonidos/disparo.wav.
  • HAZ: Mostrar u ocultar: mostrar el Fogonazo; Esperar 0.05 s; ocultar el Fogonazo.
Las dos reglas del jugador.
Las dos reglas del jugador.

Pruébalo: cada clic suena, sale el fogonazo y baja el contador de balas. Con 0 balas, ya no dispara.

Capítulo 11El demonio

1
Selecciona Main, + > Enemigo (3D). Position: -3, 0, -12 (en la segunda sala). Ya está en el grupo enemies.
2
Despliégalo en la Jerarquía, selecciona su Dibujo y arrastra sprites/demonio.png a su Texture.
El demonio: un dibujo que siempre mira a la cámara, como en los clásicos.
El demonio: un dibujo que siempre mira a la cámara, como en los clásicos.
3
Llama Demonio al enemigo, añádele BreynFlow y crea estas reglas:
  • Empezar. CUANDO: Empieza la escena. HAZ: Cambiar variable vida (del objeto: cada demonio tiene la suya): poner a 50. Dos disparos y cae.
  • Perseguir. CUANDO: Cada fotograma. SI: Distancia de este objeto al Jugador menor que 12. HAZ: Mover hacia (seguir) el Jugador, velocidad 2.5, distancia de parada 1.2. En 3D camina por el suelo y no atraviesa las paredes.
  • Morder. CUANDO: Pasa el tiempo: cada 1 s. SI: Distancia al Jugador menor que 1.8. HAZ: salud (global): restar 10; Reproducir sonido herido.wav; mostrar el panel Daño, esperar 0.15 s y ocultarlo.
Consejo: para elegir el Jugador o el panel Daño, haz clic en el objeto de la pieza y elige Un objeto de la escena...

Capítulo 12Herido y derrotado

Cuando un disparo alcanza al demonio, le quita 25 de su «vida» y le manda el mensaje hit. Dos reglas más para el Demonio:

  • Herido. CUANDO: Llega un mensaje: hit. HAZ: Reproducir sonido dolor.wav; Cambiar propiedad modulate del Dibujo a #ff5050 (rojo); esperar 0.12 s; modulate a white.
  • Derrotado. CUANDO: Cambia una variable: vida (del objeto). SI: vida (del objeto) menor o igual que 0. HAZ: Reproducir sonido muerte.wav; Destruir este objeto.
Las cinco reglas del demonio.
Las cinco reglas del demonio.

Ahora, una horda: selecciona el Demonio y pulsa Ctrl+D dos veces. Pon una copia en 3, 0, -15 y otra en la sala final, en 2.5, 0, -20.5. Las copias comparten las reglas, pero cada una tiene su propia vida.

¡Fuego!
¡Fuego!

Capítulo 13Botiquines y munición

1
+ > Objeto para recoger (3D): Botiquín, en -4, 0, -15. En su Dibujo, la textura sprites/botiquin.png.
2
Añádele BreynFlow con la regla Recoger: CUANDO: Choque (ya viene «toca el grupo player»). SI: salud (global) menor que 100. HAZ: salud (global): sumar 25; Reproducir sonido recoger.wav; Destruir este objeto.
3
Otro objeto para recoger: Munición, en -4, 0, 1, con sprites/municion.png. Su regla: CUANDO: Choque con player. HAZ: balas (global): sumar 10; sonido recoger.wav; Destruir.
El botiquín y la caja de munición: flotan y siempre te miran.
El botiquín y la caja de munición: flotan y siempre te miran.
Consejo: el botiquín no se recoge si ya tienes 100 de salud: así no lo malgastas.

Capítulo 14La llave roja y la puerta

La llave: otro objeto para recoger, Llave, sobre la plataforma: 4.25, 1.5, -13, con sprites/llave.png. Su regla: CUANDO: Choque con player. HAZ: llave (global): poner a 1; Mostrar mensaje «¡Tienes la llave roja!» durante 2 s; sonido recoger.wav; Destruir.

La puerta: Formas > Cubo, llamado Puerta, con Size 2.4, 2.8, 0.3 y Position 0, 1.3, -18: tapa el hueco de la Pared de la puerta. En Aspecto, la textura Puerta metálica (sale una vez por cara). Añádele BreynFlow:

  • Empezar. CUANDO: Empieza la escena. HAZ: abierta (del objeto): poner a 0.
  • Abrir. CUANDO: Cada fotograma. SI: Distancia de este objeto al Jugador menor que 3; llave (global) igual a 1; abierta (del objeto) igual a 0. HAZ: abierta: poner a 1; sonido puerta.wav; Mover a: este objeto, desplazando (0, 2.8, 0) en 1 s. Sube y deja pasar.
  • Cerrada. CUANDO: Pasa el tiempo: cada 2 s. SI: Distancia al Jugador menor que 3; llave (global) igual a 0. HAZ: Mostrar mensaje «Necesitas la llave roja» durante 1.5 s.
Las reglas de la puerta.
Las reglas de la puerta.

Capítulo 15La salida y la derrota

La salida: Formas > Cilindro, llamado Salida, en la sala final: Radius 1, Height 0.1 y Position 0, 0.05, -22.5, con un color verde en Aspecto. Añádele BreynFlow:

  • Ganar. CUANDO: Cada fotograma. SI: Distancia de este objeto al Jugador menor que 1.2; ganado (del objeto) distinto de 1. HAZ: ganado: poner a 1; Mostrar mensaje «¡NIVEL COMPLETADO!» durante 3 s; Esperar 3 s; Reiniciar la escena.

La derrota: en el texto Salud, una última regla:

  • Morir. CUANDO: Cambia una variable: salud (global). SI: salud (global) menor o igual que 0. HAZ: Activar o desactivar: desactivar al Jugador; Mostrar mensaje «¡HAS MUERTO!» durante 2 s; Esperar 2 s; Reiniciar la escena.
La salida, en la sala final.
La salida, en la sala final.

Capítulo 16¡A jugar!

Muestra el Techo (el ojo de la Jerarquía), guarda (Ctrl+S) y pulsa ▶.

1
Coge la munición de la primera sala.
2
Cruza la puerta: los demonios te persiguen. Apunta con la mira y dispara con el clic izquierdo.
3
Si te muerden, busca el botiquín.
4
Sube por las escaleras a la plataforma y coge la llave roja.
5
Abre la puerta, acaba con el último demonio y pisa la salida.

Mientras juegas, mira la pestaña BreynFlow: cada regla parpadea cuando se ejecuta. Si algo no funciona, ahí se ve qué condición no se cumple.

Capítulo 17Y ahora, ¿qué?

¡Tienes tu propio shooter! Algunas ideas para seguir:

  • Más niveles: crea otra escena con otras formas y, al ganar, usa Cambiar de escena en vez de reiniciar.
  • Lava: un suelo con la textura Lava y una regla «Cada fotograma, si la distancia al Jugador es menor que 2: salud restar 1».
  • Más armas: con «Tecla o botón» mouse_right, un disparo más fuerte que gasta más balas.
  • Música: una regla «Empieza la escena» con Reproducir música.
  • Tus dibujos: abre los sprites en la pestaña Sprites y hazlos tuyos, o dibuja otros enemigos.
  • Convertir en malla: cuando el nivel esté terminado, Formas > Convertir en malla lo hace más ligero para el móvil.
Consejo: en Ver como código (en las reglas), BreynFlow te enseña cómo serían en C#. Así puedes ver cómo se hace un juego en primera persona por dentro.

← Todos los tutoriales