BreynGINE

Mi shooter 3D (en el móvil)

Esta es la versión para el móvil y la tablet (Android), con la interfaz táctil del editor. ¿Lo vas a hacer en el ordenador? Ve a la versión para ordenador.
Estás leyendo el tutorial en el navegador del móvil. En BreynGINE, ☰ > Ayuda > Tutoriales abre esta misma página y te ofrece copiar a tu proyecto los dibujos y sonidos que necesita; aquí también puedes descargarlos en ZIP.

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, y todo desde el móvil.

«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, mirar, disparar, perseguir, morder, recoger y abrir puertas.
  • Controles táctiles: un joystick para andar y un botón para disparar, y el dedo para mirar.

Es la versión del tutorial para la interfaz táctil del editor, con capturas del móvil. Si aún no conoces las pestañas de abajo (Escena, Vista, Inspector, Proyecto, Más), la barra de entornos y los gestos, mira el capítulo El editor en el móvil de Mi primer juego: ahí se explica también 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 del administrador de proyectos está la plantilla Shooter 3D: es el juego de este tutorial, listo para jugar y para curiosear sus reglas.

Capítulo 2El proyecto

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

El editor se abre en la vista 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 pestaña Escena, mantén el dedo sobre Main Camera y elige Borrar. Haz lo mismo con Plane.

Los dibujos y los sonidos

Para no tener que dibujarlo todo, este tutorial trae los dibujos y los sonidos del juego. Con tu proyecto abierto, toca ☰ > Ayuda > Tutoriales > Mi shooter 3D (tutorial) y elige Copiar y abrir: BreynGINE los copia al proyecto y vuelve a abrir esta página. (También puedes descargarlos aquí (descargar el ZIP).)

En la pestaña 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 vista Sprites y los sonidos en Audio.

Capítulo 3Moverse por el mundo 3D

En la pestaña Vista, con la vista 3D:

  • Un dedo toca para seleccionar y arrastra las flechas de colores para mover lo seleccionado.
  • Dos dedos: pellizca para acercarte o alejarte, y arrastra para girar la cámara alrededor.
  • El cubo de ejes de arriba a la derecha (X, Y, Z) pone la cámara mirando de frente, desde arriba o de lado con un toque. Desde arriba (Y) es como mejor se ve el plano del nivel.
  • ⋮ Perspectiva > Foco en Selección lleva la cámara hasta el objeto seleccionado.
La base terminada, en la vista 3D del móvil.
La base terminada, en la vista 3D del móvil.

Capítulo 4El 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 de la vista 3D está el botón Formas. Tócalo:

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
Mantén el dedo sobre ella en la pestaña Escena, elige Renombrar y llámala Suelo.
3
En el Inspector: Size = 12, 0.2, 30. Y en Position: 0, -0.1, -9 (escribe position en Filtrar Propiedades para encontrarla enseguida).
4
En Aspecto (justo debajo de Size), toca la textura de Piedra.
El Size y el Aspecto del suelo, en el Inspector: el color y la textura.
El Size y el Aspecto del suelo, en el Inspector: 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: antes de crear cada forma, toca Main en la pestaña Escena: así la forma nueva se pone en la escena y no dentro de la que tuvieras seleccionada.

Capítulo 5Las 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
Mantén el dedo sobre ella y elige Duplicar. 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 comparten la textura. Si a una le cambias el color o la textura en Aspecto, solo cambia esa.

Capítulo 6Puertas 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
Toca Main y 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
Con el Hueco seleccionado, toca Formas > Hacer un hueco.
3
Se abre una lista con las formas de la escena: elige Pared centro, la pared en la que se hace el hueco, y toca Aceptar.
«Hacer el hueco de «Hueco» en...»: la Pared centro. ¡Y una puerta!«Hacer el hueco de «Hueco» en...»: la Pared centro. ¡Y una puerta!
«Hacer el hueco de «Hueco» en...»: la Pared centro. ¡Y 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: Unir funciona igual: selecciona una forma, toca Unir y elige a cuál se une. Con Separar deshaces la unión o el hueco. Y todo se puede deshacer con ↶.

Capítulo 7Techo, 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: toca 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: en el Inspector de las escaleras puedes elegir cuántos escalones tienen.

Capítulo 8Las luces

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

1
En la pestaña Escena, toca Main, toca + y elige Luz puntual (en la sección Luz). Position: 0, 2.6, 0. En el Inspector: Energy = 1.5 y Range = 10 (búscalas con el filtro). Es la luz de la primera sala.
2
Duplícala para la segunda sala: Position z = -12, Range = 12 y un Color rojo (toca el color y pon 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.

Capítulo 9El jugador

1
Toca Main, + y, en la sección Juego 3D (desliza la lista hacia abajo), elige Jugador (primera persona).
Los objetos para juegos 3D: los jugadores, el enemigo y el objeto para recoger.
Los objetos para juegos 3D: los jugadores, 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
En el Inspector, abajo del todo, toca Añadir componente > BreynFlow (reglas sin código). Ve a la Vista y desliza la barra de entornos hasta BreynFlow. Crea la regla Moverse:
  • CUANDO: Cada fotograma.
  • HAZ: Mover con los controles. Toca plataformas y, en la ficha, elige el estilo primera persona y Velocidad 5 (en 3D se mide en metros por segundo).
La regla Moverse, en primera persona.
La regla Moverse, en primera persona.

Los controles táctiles

En el móvil no hay ratón ni teclado: hacen falta un joystick para andar y un botón para disparar. Con el Jugador seleccionado, crea otra regla:

  • Controles táctiles. CUANDO: Empieza la escena. HAZ: Controles táctiles (escribe tactil en el buscador).

La acción viene como «mostrar los controles táctiles (joystick sí, botones A = ui_accept)». Toca A = ui_accept y, en la ficha, toca Botones. Escribe Disparar en Nueva Clave y mouse_left en Nuevo Valor (el clic izquierdo del ratón, con el que se dispara en el ordenador), toca Agregar Par Clave/Valor y borra la A con su papelera.

Un solo botón: Disparar, que pulsa mouse_left.
Un solo botón: Disparar, que pulsa mouse_left.

Así se juega en el móvil:

  • El joystick, a la izquierda: aparece donde apoyas el pulgar y te mueve como WASD: hacia delante, hacia atrás y de lado.
  • Un dedo en cualquier otro sitio de la pantalla mira: arrástralo para girar la vista, como el ratón en el ordenador.
  • Disparar, abajo a la derecha. Todavía no hace nada: la regla de disparar viene enseguida.

¡A probarlo!

Guarda (💾) y toca ▶. Camina con el joystick y mira con el otro pulgar. Pasa por las puertas y sube a la plataforma. Para parar, toca ■.

Paseando por la base.
Paseando por la base.
Consejo: ¿la vista gira demasiado rápido o lento? En la ficha de Mover con los controles, cambia la Sensibilidad del ratón: vale también para el dedo. En un ordenador, los controles táctiles no salen y se juega con el ratón y WASD.

Capítulo 10La 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 pantalla. Abre ☰ > Proyecto > Configuración del Proyecto:

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

Ve a la vista 2D (en la barra de entornos): ahí se coloca la pantalla del jugador. El rectángulo azul es la pantalla, de 1152 × 648.

1
Toca Main, + > Imagen (sección Interfaz). Llámala Arma. En el Inspector, en su Texture, toca la flechita > Carga Rápida... y elige sprites/arma.png. 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
+ > 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, 24, y Balas («BALAS: 20») en 910, 24. Van arriba, para que los controles táctiles no los tapen.
5
+ > 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 vista 2D del móvil.
La pantalla del jugador, en la vista 2D del móvil.
Consejo: para mover lo que hay en la vista 2D, mejor escribir los números en el Inspector que arrastrar con el dedo: es más exacto.

Capítulo 11Disparar

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. Toca ui_accept y elige mouse_left: el botón Disparar en el móvil, y el clic izquierdo en el ordenador.
  • 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 (flechita del campo > Carga Rápida... > disparo).
  • HAZ: Mostrar u ocultar: mostrar el Fogonazo; Esperar 0.05 s; ocultar el Fogonazo.
La regla Disparar.
La regla Disparar.

Pruébalo: cada toque de Disparar suena, sale el fogonazo y baja el contador de balas. Con 0 balas, ya no dispara. El disparo va a donde apunta la mira, el centro de la pantalla: apunta girando la vista con el dedo.

Capítulo 12El demonio

1
Toca Main, + > Enemigo (3D). Position: -3, 0, -12 (en la segunda sala). Ya está en el grupo enemies.
2
Despliégalo en la Jerarquía (la flechita de su izquierda), toca su Dibujo y pon sprites/demonio.png en 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, toca el objeto de la pieza y elige Un objeto de la escena...

Capítulo 13Herido 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.
La regla Perseguir: solo cuando el jugador está a menos de 12 metros.
La regla Perseguir: solo cuando el jugador está a menos de 12 metros.

Ahora, una horda: mantén el dedo sobre el Demonio y elige Duplicar, 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 14Botiquines y munición

1
Toca Main y + > 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 15La 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: toca Main y 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.
Consejo: para la segunda y la tercera condición de Abrir, toca + Condición otra vez: las condiciones se juntan con «y» (se tienen que cumplir todas).

Capítulo 16La 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 17¡A jugar!

Muestra el Techo (el ojo de la Jerarquía), guarda (💾) y toca ▶.

1
Coge la munición de la primera sala.
2
Cruza la puerta: los demonios te persiguen. Gira la vista con el dedo hasta tenerlos en la mira y toca Disparar.
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.

Cuando pares el juego, mira la vista BreynFlow: cada regla cuenta cuántas veces se ha ejecutado. Si algo no funciona, ahí se ve qué condición no se cumple.

Consejo: para jugarlo fuera del editor, instálalo en el móvil como una app: ☰ > Proyecto > Herramientas > Generar APK (Android)..., como en el capítulo Juega y compártelo de Mi primer juego.

Capítulo 18Y 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: otro botón táctil, Fuerte = mouse_right, y una regla con «Tecla o botón» mouse_right para 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 vista 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 (arriba de 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