Haz un juego de Match 3 en Construct 2 animaciones e intercambio de bloques

En el artículo anterior de esta serie, dedicamos tiempo a configurar nuestro juego para tener todas las imágenes necesarias en su lugar y generar aleatoriamente una cuadrícula de bloques para el jugador. Con esos sistemas implementados, ahora trabajaremos en la funcionalidad básica y le daremos al jugador la capacidad de manipular el campo de juego..


Demostración final del juego

Aquí está una demostración del juego en el que estamos trabajando a lo largo de esta serie:




1. Agregando Animación

Terminamos el tutorial anterior después de hacer que cada bloque se muestre como un color diferente. Pensé que sería bueno elegir el lugar exacto y comenzar agregando animación a los bloques para que las imágenes cambien según lo que el jugador haga o haga. La primera animación que agregaremos es un evento de mouse-over..

Primero, agrega un ratón oponerse a Diseño 1. Entonces, vuelve a Hoja de evento 1 y añadir un nuevo Evento.

 Evento: Ratón> El cursor está sobre el objeto Objeto = Acción de bloque: Bloquear> Establecer valor de cuadro = (Bloque.Color-1) * 3 + 2

Ahora, si entras en el juego, la imagen de los bloques debe cambiar cuando pasas el cursor sobre ellos, y vuelve a cambiar cuando mueves el cursor..

Tenemos un evento de animación más para hacer:

 Evento: Bloque> Es el conjunto de variables de la instancia booleana Instancia variable = IsMatched Acción: Bloque> Establecer valor de marco = (Block.Color-1) * 3 + 3

También debemos asegurarnos de que cuando pase el mouse sobre un bloque coincidente la imagen no cambie, así que agregue otra condición al evento de mouse que hicimos:

 Condición: Invertir: Bloque> Es conjunto de variables de instancia booleanas Variable de instancia = IsMatched

Invertir esto significa que la imagen flotante solo se usa si el bloque no es parte de una coincidencia. Ya que no tenemos un sistema coincidente en su lugar, no debería ver ningún cambio, pero a medida que avancemos, este evento entrará en juego.

Con los tres de estos eventos en su lugar, su hoja de eventos ahora debería tener este aspecto:



2. Intercambiando dos bloques vecinos

Lo siguiente en lo que trabajaremos es darle al jugador la capacidad de intercambiar bloques vecinos. Para hacer que este sistema funcione, utilizaremos una combinación de Arrays y Funciones, por lo que si no los ha usado en C2 anteriormente, consulte el manual para obtener más información..

En qué estamos trabajando

Antes de explicar cómo hacer el sistema, quiero que vea lo que estamos haciendo y que explique brevemente cómo funciona. Para ver cómo será el sistema, reproduce la demostración a continuación. Para intercambiar bloques, simplemente haga clic y arrástrelos sobre un lugar vecino en una de las cuatro direcciones cardinales.

Haz click para cargar la demo..

Debes notar que cuando comiences a arrastrar un bloque, aparecerán cuatro cuadrados de colores encima de los bloques que están directamente al lado. Cuando sueltas el bloque hay un evento que verifica si el bloque se superpone con cualquiera de estos cuadrados de colores.

Si el bloque se superpone a uno de los cuadrados de color, intercambia el bloque que movió con el bloque en el que se dibujó ese cuadrado de color o simplemente coloca el bloque movido en la nueva ubicación. Si su bloque no se superpone a uno de los cuadrados de colores, no hace nada. Tampoco hace nada si el bloque se superpone a varios cuadrados de colores..

La razón por la que estamos utilizando este sistema, en lugar de verificar si el bloque en sí se está superponiendo a otro bloque, es que no tenemos una manera fácil de verificar dónde están los dos bloques entre sí. Al volver a colocar los cuadrados de color en las ubicaciones válidas y luego utilizarlos como base para nuestros controles, tenemos una idea mucho mejor de lo que el jugador tenía la intención de hacer cuando intentaron hacer un intercambio..

Añadiendo los bloques de colores

Ahora que entendemos lo que está sucediendo, podemos comenzar a implementarlo. Ir Diseño 1 y agrega un Función objeto, y un Formación objeto. Dejar el Función nombre del objeto como Función, pero cambia el nombre de Formación a BlockPositions. los Función objeto nos permitirá utilizar Funciones dentro de nuestro código, y la Formación Es lo que usaremos para almacenar las posiciones de los bloques que estamos intercambiando. También necesitamos establecer la Altura y Profundidad de la matriz a 2.

Una vez que hayas hecho eso, crea cuatro nuevos sprites para usar como nuestros cuadrados de colores:

  • Un sprite verde, llamado BottomBlock.
  • Un sprite rojo, llamado Bloqueo izquierdo.
  • Un sprite amarillo, llamado Bloqueo a la derecha.
  • Un sprite azul, llamado TopBlock.

Los colores en realidad no importan, pero usar estos colores hace que cada uno sea diferente, así que son fáciles de identificar y hace que sea más fácil seguirlos, ya que eso es lo que hice. Estos sprites deben colocarse fuera del diseño para que el jugador no pueda verlos..

También debe establecer el tamaño de cada uno de estos para 30,30 y dales a cada uno un Opacidad de 0. En la demostración anterior, cada una es solo ligeramente transparente porque quería que pudieras ver lo que estaba sucediendo, pero en el juego real, el jugador no debería poder verlas en absoluto..

Finalmente, seleccione su actual Bloquear objeto y agregar el Arrastrar y soltar comportamiento a ello.

Ahora vuelve a Hoja de evento 1 y crea un nuevo Evento con seis Comportamiento.

Evento: Bloque> Al arrastrar Arrastrar y arrastrar Inicio de acción: Bloquear posiciones> Establecer en XY X = 0 Y = 0 Valor = Bloque.X Acción: Bloquear posiciones> Establecer en XY X = 0 Y = 1 Valor = Bloquear.Y Acción: Bloqueo de fondo> Establecer posición X = Block.XY = Block.Y - (Block.Width + 2) Acción: TopBlock> Set Position X = Block.XY = Block.Y + (Block.Width + 2) Action: LeftBlock> Set Position X = Block. X - (Block.Width + 2) Y = Block.Y Acción: Bloqueo derecho> Establecer posición X = Block.X + (Block.Width + 2) Y = Block.Y

Este evento almacena la posición inicial del bloque que movió y mueve los cuadrados de colores para que se encuentren en las posiciones correctas en relación con el bloque que se está moviendo..

Tu evento debería verse así:


Averiguar qué está haciendo el jugador

El próximo evento que agregaremos realizará la verificación para ver qué intercambio está intentando hacer el jugador..

Primero, el evento escuchará cuando el jugador "suelte" el bloque que está moviendo. A continuación, realizará una serie de comprobaciones para ver con qué cuadrado de color está chocando el bloque, y si realiza el intercambio apropiado, o simplemente restablece la posición del bloque movido.

 Evento: Bloque> En Arrastrar y soltar Sub Evento: Bloque> Se superpone Acción de Bloqueo de fondo: Bloquear posiciones> Establecer en XY X = 1 Y = 0 Valor = Fondo de bloqueo.X Acción: Bloquear posiciones> Establecer en XY X = 1 Y = 1 Valor = Bloqueo de fondo .Y Acción: Bloque> Establecer posición X = Posiciones de bloque.At (0,0) Y = Posiciones de bloque.At (0,1)

Así es como debe verse hasta ahora:


En este momento, el Evento solo cuentas para swaps con el Bloquear debajo del que está siendo movido. Para agregar los otros, haga clic derecho en el sub-evento y agregue un Más. Luego, copie la condición del primer sub-evento en el evento Else pero cambie el objetivo desde BottomBlock a TopBlock.

Ahora, copia el Comportamiento desde el sub-evento original hasta el evento Else y nuevamente cambie cualquier instancia de BottomBlock a TopBlock. Haz esto dos veces más con Bloqueo izquierdo y Bloqueo a la derecha, para que tengas cuatro subeventos totales, y para que la configuración de tu evento se vea así:


Finalmente, agregue un evento Else más:

 Sub-evento: Else Acción: Bloque> Establecer posición X = BlockPositions.At (0,0) Y = BlockPositions.At (0,1)

En realidad cambiando los bloques

A partir de aquí implementaremos el propio intercambio de mecánica. Para intercambiar los bloques, primero moveremos el bloque que el jugador arrastró a una ubicación fuera de la pantalla.

Hacemos esto porque tenemos que ubicar los bloques según sus posiciones antes de que podamos manipularlos; si comenzamos colocando uno de los bloques en la posición almacenada del otro bloque, los pondremos a ambos en el mismo lugar y los haremos muy difíciles. separados unos de otros Al mover el bloque a una ubicación específica en la que sabemos que no habrá otros bloques, evitamos que cualquiera de los bloques se encuentre en la misma ubicación que otro bloque, y evitamos que el sistema tenga un problema para determinar qué bloque queremos.

Luego moveremos el bloque que intercambiaron. original bloque con a la ubicación del bloque original. Finalmente, moveremos el bloque original a la ubicación del segundo bloque desde su ubicación fuera de la pantalla, y restableceremos la información en la matriz para 0.

 Evento: Función> En función Nombre: Sub-evento "SwapBlocks": Condición: Bloque> Comparar XX = BlockPositions.At (0,0) Condición: Bloque> Comparar YY = BlockPositions.At (0,1) Acción: Bloquear> Establecer posición X = -80 Y = -80 Sub-evento: Condición: Bloque> Comparar XX = BlockPosiciones.At (1,0) Condición: Bloque> Comparar YY = BlockPosiciones.At (1,1) Acción: Bloquear> Establecer posición X = BlockPositions.At (0,0) Y = BlockPositions.At (0,1) Sub-evento: Condición: Bloque> Comparar XX = -80 Condición: Bloque> Comparar YY = -80 Acción: Bloquear> Establecer posición X = BlockPosiciones .At (1,0) Y = BlockPositions.At (1,1) Action: BlockPositions> Establecer en XY X = 0 Y = 0 Valor = 0 Acción: BlockPositions> Establecer en XY X = 0 Y = 1 Valor = 0 Acción : BlockPositions> Establecer en XY X = 1 Y = 0 Valor = 0 Acción: BlockPositions> Establecer en XY X = 1 Y = 1 Valor = 0

Tu Evento hoja para que se vea así:


Ahora, vuelva a los cuatro controles que hicimos anteriormente que determinaron con qué cuadrado de color estaba chocando el bloque arrastrado, y agregue esto Acción hasta el final de la Comportamiento lista para los cuatro:

 Acción: Función> Nombre de la función de llamada: "SwapBlocks"

Asegurarse de que el jugador haya querido hacer eso

Si ejecutas el juego ahora, funcionará casi perfectamente. Lo único que aún no hace es verificar si el bloque se superpone a varios cuadrados de colores. (Si es así, no queremos que pase nada porque significa que la mudanza puede ser un error).

Actualmente verifica los cuadrados de colores en el orden. Fondo, Parte superior, Izquierda, Derecha, y lo que encuentre primero, intercambia con. Para arreglar esto tenemos que agregar dos condiciones invertidas a cada cheque..

Al Parte superior y Fondo cheques, agregue estas condiciones:

 Condición: Invertido: Bloque> Está superponiendo otro objeto Objeto: LeftBlock Condición: Invertido: Bloque> Está superponiendo otro objeto Objeto: RightBlock

Al Derecha y Izquierda cheques, agregue estas condiciones:

 Condición: Invertido: Bloque> Está superponiendo otro objeto Objeto: TopBlock Condición: Invertido: Bloque> Está superponiendo otro objeto Objeto: BottomBlock

Como los cuadrados son solo de 30x30px, es imposible que el bloque se superponga dos en extremos opuestos al mismo tiempo. Estas verificaciones nos permiten asegurarnos de que el movimiento de arrastre no esté demasiado inclinado hacia ninguno de los lados, y asegura que el jugador tenga un movimiento mayormente recto, por lo que está claro que estamos detectando el tipo correcto de intercambio.

Tu Evento La hoja ahora debería verse así:


Y aquí está una demostración de nuestro juego en su estado actual:

Haz click para cargar la demo..

Conclusión

Ahora tenemos un mecánico de intercambio totalmente funcional. En el siguiente tutorial, configuraremos un sistema de detección de partidos fuerte y comenzaremos a ver realmente el juego en acción..

Si desea continuar trabajando por su cuenta, debe observar cómo podría detectar cuándo dos bloques son del mismo color y cómo podría saber si están uno al lado del otro y si forman un grupo completo. Un buen lugar para comenzar sería con un Sistema> Para cada uno evento con el Bloquear objeto, y realizar algún tipo de verificación en cada Bloquear individualmente.

Espero que hayan disfrutado este tutorial y que estén disfrutando de la serie hasta ahora; Asegúrate de volver pronto para la próxima entrega..