Tutorial de juego Endless Runner

Vamos a crear un juego de tipo Endless Runner. La traducción literal de Endless Runner es "Corredor sin fin", significa que tenemos un personaje que corre y corre, y mientras no te tropieces con algo sigue corriendo hasta lograr el récord mundial de distancia! Juegalo primero aquí para saber cómo es.

Instalar Construct 2

Si tu computador no tiene instalado Construct, obtén una copia de la última versión de Construct 2 aquí y luego instálalo.

Primeros pasos

Ahora que ya lo tienes instalado, inicia Construct 2. Haz clic en el botón File (archivo) y selecciona New (nuevo).

En el cuadro de diálogo haz clic en New empty project (proyecto nuevo vacío) y luego en Open (abrir).
Ahora deberías ver un layout (diseño) vacío, es la vista de diseño donde crearás y pondrás los objetos. Este layout sería como un nivel del juego o una pantalla de menú.

Ahora grabemos el proyecto, puedes hacerlo con File / Save (grabar). Te recomiendo crear una carpeta en el escritorio que incluya tu nombre, por ejemplo "Proyectos Construct JUAN". Luego dale un nombre a tu proyecto, por ejemplo "Corredor_infinito".
Cuando grabes el proyecto, Construct 2 mantendrá todos los archivos del proyecto dentro de un sólo archivo .capx con el nombre que escojas.

Crear Layers

En un juego de plataformas típicamente tenemos tres capas de objetos:
- El fondo: las imágenes de montañas, cerros, etc. Cosas que están lejos y que son decorativas.
- Juego: son los objetos sobre los que podemos saltar y correr
- UI (User Inteface) o Interfaz de Usuario: son los textos del juego que van por sobre todo, por ejemplo, las vidas, el puntaje, mensajes de ayuda, etc.

Para poner los objetos ordenadamente vamos a crear tres layers (capas).

Los layouts pueden tener múltiples layers (capas) que puedes usar para agrupar objetos. Imagina que la capas son láminas de vidrio apiladas una encima de otra con objetos pintados en cada una. Esto te permite organizar rápidamente cuales objetos se verán por encima de otros, ocultar una capa y todos sus objetos, bloquearlas, aplicarles efectos y mucho más. Por ejemplo, en este juego, queremos que todo (personaje, fantasmas, balas) se muestren por encima del fondo, así que crearemos una nueva capa para los nuevos objetos.

Para gestionar las capas, clic en la pestaña Layers (capas) que normalmente está a la derecha al lado de Projects ( Proyectos). 



En la lista deberías ver Layer 0 (Construct 2 cuenta desde cero, y no desde uno, ya que la mayoría de los lenguajes de programación funcionan así). Haz clic en el icono del lápiz para renombrarla a Fondo, ya que será nuestra capa de fondo.

Haz clic en el layer "Fondo " que acabas de renombrar. Fíjate que a la izquierda de Construct aparecen en la barra de "Properties" las propiedades de "Fondo". Asegúrate que la propiedad Transparent (transparente) esté en No.


Ahora haz doble clic en cualquier lugar del layout para añadir un objeto nuevo. También puedes usar el botón derecho y seleccionar Insert new object (añadir nuevo objeto). Cuando aparezca el cuadro de diálogo, haz doble clic en el objeto Tiled Background para añadirlo.

El cursor cambiará a una forma de cruz para indicarte donde situar el objeto. Haz clic en cualquier lugar cerca del centro del layout. Ahora se abrirá el Editor de texturas  para que introduzcas una imagen. Importa la imagen que guardaste antes. Clic en el icono de la carpeta para cargarla desde el disco duro, busca donde la has guardado y selecciónala.


aCierra el editor de textura en la X que está arriba a la derecha. Ahora deberías de ver tu objeto Tiled Background en el layout. Vamos a redimensionarlo para que cubra toda la superficie. Para ello selecciónalo y mira la barra de Properties (propiedades) de la izquierda. Ahí están todas las propiedades del objeto que tengas seleccionado. En este caso nos interesan Position (posición) y Size (tamaño) . Pon la posición en 0,0 (esquina superior izquierda del layout) y dale un tamaño de 1120, 360. 1120 es el doble de 560, el ancho de la imagen que agregamos como TeldBackground antes. Esto es porque queremos que se muestre dos veces en pantalla. Como se irá moviendo hacia la izquierda, queremos que cuando vaya saliendo de la pantalla, vaya entrando otra copia del fondo por la derecha, para eso necesitamos tenerla dos veces.



Revisemos nuestro trabajo. Mantén pulsada la tecla control y mueve la rueda del ratón hacia abajo para alejar la imagen. Otra forma de hacerlo es hacer clic en View / zoom out (ver - alejar) un par de veces. También puedes mantener pulsada la barra espaciadora o el botón central del ratón para desplazarte por el layout. Fácil ¿eh?

Vuelve a la barra de layers, haz clic en Fondo y luego en el icono del pequeño candado para bloquear esa capa. Esto significa que no podrás seleccionar nada de esa capa. Esto es conveniente para nuestro fondo, ya que sino sería muy fácil seleccionarlo accidentalmente y realmente no necesitamos editarlo de nuevo. No obstante, si necesitas hacerle cambios de nuevo, puedes hacer clic de nuevo en el candado para desbloquearlo.

Ahora haz clic en el icono "+" (añadir) para agregar una nueva capa y cámbiale el nombre a Juego.
En la barra de propiedades, cambíale la propiedad Transparent a Yes. Esto es para que cuando pongamos algo en la capa de Fondo, se pueda ver, de otro modo la capa Juego taparía a la capa Fondo.
Finalmente haz clic en el icono "+" (añadir) para agregar una nueva capa y cámbiale el nombre a UI. En esta capa vamos a poner mensajes para el usuario.

Las casillas de verificación te permiten ocultar las capas en el editor, pero no lo necesitamos hacer ahora. Tus layers debieran verse así:


Vamos a arreglar que cuando caiga el personaje vuelva a comenzar el juego. Haz clic en Add event para agregar un evento. Clic en Player. Luego elije Compare Y (está abajo de la lista en Size & Position, para buscar tambien puedes escribir en el campo de texto de arriba a la derecha). En el campo Comparison elije > Greater than.
Luego pon el curso en el campo siguiente. Fíjate que hay una ventana cerca que se llama "Objects with expressions". Esta ventana nos ayuda a encontrar valores de los objetos. Necesitamos encontrar el alto del layout. Haz clic en System y luego en LayoutHeight. Para buscar también puedes escribir en el campo de texto de arriba a la derecha (como abajo).


Ahora vamos a agregar una acción para este evento. Haz clic en Add action al lado del evento que acabas de agregar. Luego haz clic en System y luego en Restart layout. Luego agrega otra acción a ese mismo evento: System y luego Reset global variables. Más adelante vamos a guardar la distancia recorrida en una variable y necesitamos que vuelvan a su valor inicial cuando se reinicia el juego.


¿Te has fijado que el Player mete sus patitas dentro del bloque?
Esto es porque están mal definidos sus bordes de colisión. Vamos a corregir eso ahora.

Haz doble clic sobre Player en la barra de objetos (a la derecha). Se abrirán varias ventanas. La que nos interesa es el editor de imágenes (el título de la ventana es Edit image: alien).
En esta ventana podemos cambiar las propiedades de la imagen del personaje, incluidos sus bordes de colisión.
Haz click en último ícono de la izquierda (Set collision polygon). Si está muy chico, agranda con CTRL y la ruedita del mouse (o con el botón Zoom in)

Mueve los puntos rojos encima del personaje como esta mostrado en la imagen.
Las líneas azules son las que determinan los bordes del objeto para detectar colisiones. Deben estar rodeando lo más cerca posible al objeto.


Ahora haz clic en el ícono de arriba del que apretaste recién (se llama Set origin and image points). Verás una cruz sobre la mitad del personaje. Haz clic entre las piernas del personaje y lo más pegado al borde de abajo.

DistanciaTotal lo vamos a usar para guardar la distancia total recorrida (en pixeles) por nuestro personaje. Nos servirá para calcular el puntaje.

Distancia nos permite llevar la cuenta de cuánto ha avanzado el bloque de obstáculos que crearemos a la derecha.
DistanciaNuevoBloque es una medida de cuantos pixeles tenemos que esperar que avance el bloque hacia la izquierda antes de crear un nuevo bloque de obstáculos.O sea, cuando Distancia sea igual o mayor a DistanciaNuevoBloque entonces tenemos que crear un nuevo bloque de obstáculos.

Antes de crear nuevos bloque necesitamos asegurarnos que los que salgan por la izquierda se destruyen, o seguirán usando memoria del computador y éste se puede poner muy lento.
Agrega un nuevo evento. Elije bloques y luego Compare X, luego Less than y en el valor de X pone -Self.Width. Esto significa que cuando el bloque tenga una posición hacia la izquierda (x es negativo hacia la izquierda) igual a su propio (self) ancho (width), entonces se cumplirá la condición.  Ahora agrega la acción, elije bloques, y luego Destroy.

Ahora necesitamos ir actualizando nuestras variables que cuentan distancia.
Crea un nuevo evento, para la condición elije System y luego Every tick (un tick sucede cada vez que se vuelve a pintar la pantalla del computador con tu juego, o sea, siempre). Agrega la acción System y luego Add to. En la ventana que aparece elije en Variable a Distancia, y en Value pon
bloques.Bullet.Speed * dt

Necesitamos agregar otra acción similar: Agrega la acción System y luego Add to. En la ventana que aparece elije en Variable a DistanciaTotal (antes era Distancia), y en Value pon bloques.Bullet.Speed * dt

El evento debería quedar así:


Ahora sí vamos a crear nuevos bloques. Pero ¡afírmate! Vamos a crear un evento con 6 acciones.
Primero crea un evento con la siguiente condición: System y luego Compare variable. En la ventana que aparece elije en Variable a Distancia, en Comparison elije Greater or equal y en Value pon DistanciaNuevoBloque.

Debería verse así tu evento:

Vamos a ver que significa cada cosa.
La condición Distancia > DistanciaNuevoBloque significa que el último bloque de obstáculos que creamos ya avanzó hacia la izquierda el número de pixeles guardado en DistanciaNuevoBloque y que por lo tanto ternemos que crear un nuevo bloque de obstáculos.

1. Substract DistanciaNuevoBloque from Distancia. hay que quitarle al contador Distancia el valor de DistanciaNuevoBloque, para que cuente desde donde terminaba el bloque anterior.
2. Create object bloques on layer "Juego" at (0,0). Obviamente tenemos que crear un nuevo bloque y posicionarlo en el layer de Juego. Por mientras los ponemos en 0,0.
3. Set size to (100 + random(400), 60 + random(180) ). Esta función Set size recibe dos valores (están separados por la coma). El primer valor es el ancho y el segundo es el alto. Random(400) devuelve un valor aleatorio entre 0 y 400. Es decir, esto le da un tamaño al bloque con un alto entre 100 y 500, y un ancho entre 60 y 240.
4. Set position to (LayoutWidth, LayoutHeight - Self.Height). La función Set position también recibe dos valores. El primer valor es el ancho del layout, es decir ubica al bloque justo en el extremo derecho del layout. El segundo valor es elalto del Layout menos el alto del bloque (que se definió en el punto anterior). Como la coordenada 0,0 del layout está en la esquina superior izquierda, esto significa que posiciona al bloque con su base en el extremo de abajo del layout.
5. Set Bullet angle of motion to 180 degrees. Esto ya lo comentamos, el comportamiento Bullet por defecto avanza hacia la derecha, le damos vuelta 180 grados para vaya a la izquierda.
6. Set DistanciaNuevoBloque to bloques.Width+ 20 + random(200). Tenemos que guardar en DistanciaNuevoBloque la distancia en pixeles que debe recorrer el bloque para que creemos uno nuevo. La distancia tiene que ser al menos al ancho del bloque que acabamos de crear (bloques.Width), le damos un margen de unos 20 pixeles (para que el nuevo bloque no quede pegado) y una distancia aleatoria de entre 0 y 200 pixeles.

Prueba el juego y ve qué sucede.


En el próximo tutorial veremos como seguir avanzando en nuestro juego.