Share
Bienvenido a una nueva serie de tutoriales en los que te mostraré cómo construir un juego de rompecabezas de Match-3, desde cero, en Construct 2. En esta primera parte, vamos a sentar las bases del juego y obtener la cuadrícula de rompecabezas básica. en la pantalla.
Un juego de Match-3 es un rompecabezas basado en bloques donde mueves bloques en el área del juego para crear grupos de tres o más que comparten un atributo común (como un color o una forma). En la mayoría de los juegos de match-3, al jugador también se le otorgan bonificaciones por hacer coincidir más de tres bloques a la vez.
La mayoría de los juegos de rompecabezas de match-3 son de naturaleza competitiva, y el objetivo del jugador es generalmente obtener la puntuación más alta posible antes de que se agote el tiempo, o si se cumple alguna otra condición de pérdida. Algunos ejemplos de juegos de combinaciones incluyen Pokemon Puzzle League, Bejeweled y el reciente éxito Candy Crush Saga..
Decidí basar el juego de match-3 que haremos en Pokemon Puzzle League:
Si nunca lo has jugado antes, PPL es un juego de combinaciones bastante simple en el que los bloques se elevan desde la parte inferior de la pantalla del juego y el jugador tiene que crear juegos para evitar que la pantalla se llene. Si los bloques llegan a la parte superior, el jugador pierde y se ve obligado a comenzar de nuevo..
Aquí hay una demostración del juego en el que trabajaremos durante toda la serie:
En este primer artículo, nos centraremos en sentar las bases de nuestro juego. Este artículo se centrará específicamente en configurar el proyecto y generar una cuadrícula de bloques al azar para el jugador.
Antes de comenzar con este tutorial, asegúrese de instalar la versión más reciente de Construct 2 (C2). Cuando construí la versión original del juego, estaba usando la versión 122, así que siempre que tengas una versión más nueva, deberías estar bien. Además, si nunca ha usado C2, debería consultar esta guía que detalla los conceptos básicos de cómo usar C2 y cómo crear la mayoría de los tipos de objetos..
También debe descargar el paquete de gráficos que he creado para este tutorial. Aunque, por supuesto, puedes usar los gráficos que quieras, daré un posicionamiento específico para muchos elementos en estos tutoriales, y esas posiciones se basan en las imágenes que utilicé. Si utiliza otros gráficos, deberá tener en cuenta las diferencias de tamaño en esos gráficos al seguir estos tutoriales..
Una vez que tenga todo configurado y tenga un buen conocimiento de C2, siga leyendo!
Antes de que construyamos todo el juego, necesitamos configurar el proyecto en sí. Cargue C2 y siga estos pasos:
Accentsconagua
600x600.Fondo, la capa intermedia para Bloques, y la capa superior a Campo de juego. GameBG. Fondo.650, 650. 
GameFieldBorder.9, -12.16, 732.Campo de juego.GameFieldBorder objeto. 368, -12 .
GameFieldBottom.197, 625.344, 150.Campo de juego.GameFieldBottom objeto. 196, -30.180.
Lo último que debemos hacer es crear un fondo para el área real en la que aparecerán los bloques..
0, y el Alfa a 200.359, 570.195,294.Fondo
El campo de juego ya está completo, pero todavía tenemos que hacer un Sprite que pueda usarse para los Bloques..
Antes de seguir adelante, me gustaría explicar las imágenes de bloque. El bloque gris está ahí para representar un bloque "inactivo", que se implementará en un próximo tutorial. Las imágenes restantes se agrupan en grupos de tres para cada bloque: el primer cuadro es para cuando no se usa el bloque, el segundo es para cuando el jugador está manipulando el bloque y el tercero para cuando el bloque se combina en una grupo.
Finalmente, tome el bloque que hemos hecho y colóquelo en algún lugar del diseño que evite que el jugador lo vea durante un juego real. Además, establece el tamaño del bloque a 40, 40.
Ahora hemos traído todas las imágenes que necesitamos para este artículo y podemos continuar haciendo que el juego funcione..
En la versión final del juego, los bloques se moverán hacia arriba en todo momento, y los nuevos bloques se moverán hacia la pantalla desde la parte inferior. Por ahora, sin embargo, necesitamos que funcionen los mecanismos básicos, por lo que solo vamos a generar una cuadrícula de bloques de 8x8 y dejarlo así..
Ir Hoja de evento 1 y agregue estas variables globales para definir la posición inicial de desove de los Bloques:
Variable global: valor SPAWNX = 49 constante = verdadero Variable global: valor SPAWNY = 526 constante = verdadero
También necesitamos hacer otra cosa antes de realizar el primer evento: necesitamos crear una variable de instancia para el Bloque que le diga al bloque de qué color es.
Cree una nueva variable de instancia para el objeto Bloque, nómbrela Color y no cambies ninguna otra configuración.
Ahora haremos nuestro primer evento. El objetivo de este evento es crear una cuadrícula estática de bloques para fines de prueba:
Evento: Condición: Sistema> Al inicio del diseño Condición: Sistema> Para Nombre: "Y" Índice de inicio = 0 Fin de índice = 7 Sub-Evento: Sistema> Para Nombre: "X" Índice de inicio = 0 Fin de índice = 7 Acción: Sistema> Crear objeto de objeto: Bloque X = (SPAWNX + (loopIndex ("X")) * (Block.Width + 2)) Y = (SPAWNY - (loopIndex ("Y")) * (Block.Width + 2) ) Ambas fórmulas dicen básicamente lo mismo. Primero, agregamos 2 al ancho del bloque para que cada bloque tenga un búfer de 2px entre él y sus vecinos para evitar falsos positivos cuando se usa la detección de colisiones. Luego, multiplicamos ese número por el índice actual en el bucle for, y lo agregamos a la posición X o Y inicial. Además, estamos restando del valor Y porque en C2 el punto 0 en el eje Y está en la parte superior de la pantalla del juego, por lo que al disminuir el valor de la posición Y, estamos poniendo un objeto más cerca de la parte superior de la pantalla..
Entonces, ¿qué hace esto? Esto significa que a medida que los bucles X e Y se repiten, y los valores de X e Y aumentan, la posición en la que coloca cada bloque cambiará, lo que finalmente resultará en una cuadrícula cuadrada:
Si ejecuta el juego en este punto, tendrá una cuadrícula de bloques, pero, en lugar de ser de colores diferentes, todos ellos solo recorrerán cada imagen de bloque en sucesión..
Para arreglar esto necesitamos hacer dos cosas..
Primero, debemos asignar a cada bloque un valor de color utilizando la variable de instancia que creamos anteriormente. Para hacer esto, agrega otra acción:
Acción: Bloque> Establecer valor Color = piso (Aleatorio (1,7))
Esto asignará al bloque un valor de color aleatorio de 1 a 6. (La razón por la que no es de 1 a 7 se explica en la explicación de la Aleatorio función.)
Tu función ahora debería verse así:
También necesitamos agregar un sistema que cambie la imagen de un bloque en función de su valor. Para hacer esto, comience agregando una nueva Variable de Instancia al objeto Bloque:
Variable de instancia para el nombre del bloque: "IsMatched" Tipo: Valor inicial booleano = falso
Ahora, agregue un nuevo evento:
Evento: Sistema> Cada acción Tick: Bloquear> Establecer valor de cuadro = (Block.Color-1) * 3 + 1
Esta fórmula primero resta 1 del valor de color del bloque para tener en cuenta el hecho de que los valores comienzan en 1 en lugar de 0. Luego, multiplica ese número por 3 para tener en cuenta el hecho de que cada bloque tiene 3 cuadros de animación. Finalmente, agrega 1 a ese valor ya que la imagen estándar de un bloque es la primera imagen en el conjunto de imágenes..
Veamos un ejemplo rápido con un bloque que tiene un valor de color de 4, para ver qué cuadro de animación utilizará. Primero resta 1 del valor de color para obtener 3. Luego multiplica ese número por 3 para hacer 9. Finalmente, agrega 1 a ese valor para hacer 10. Esto significa que un Bloque con un valor de color de 4 usará el cuadro 10 como su marco de animación predeterminado, y será un bloque púrpura / cuadrado.
Si ejecutas tu juego ahora, verás que cada bloque es de un color diferente, pero aún no hemos implementado animaciones para cuando el mouse se desplaza sobre el bloque o para cuando coincide. Esto se tratará en el siguiente tutorial, junto con cómo intercambiar dos bloques vecinos.
Aquí hay una pequeña demostración de cómo debería verse el juego en este punto (toma la fuente aquí):
Haz click para cargar la demo.. Si desea continuar trabajando por su cuenta, comience a cambiar el cuadro de animación del Bloque en función del evento "Mouse> El cursor está sobre el objeto". También puedes comenzar a utilizar el comportamiento "Arrastrar y soltar" para manipular el Bloque y considerar cómo determinar qué intenta hacer el jugador con el Bloque cuando comienzan a arrastrarlo o cuándo lo sueltan..
Gracias por leer esta parte del tutorial, donde establecimos las bases básicas para nuestro juego de Match-3. ¡Vuelve pronto para la siguiente parte de la serie! Puede mantenerse al día a través de Facebook, Twitter, Google+, RSS o correo electrónico..
