Advertisement
  1. Game Development
  2. From Scratch
Gamedevelopment

Hacer un juego de Match-3 en Construct 2: Puntos, Coincidencias y Gravedad

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Make a Match-3 Game in Construct 2.
Make a Match-3 Game in Construct 2: Match Detection
Make a Match-3 Game in Construct 2: More Swapping, Points, and Matching

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

En el tutorial anterior, integramos un sistema básico de detección de coincidencias en nuestro juego de Match-3. Mientras que estamos bien en nuestro camino a tener un juego jugable, todavía hay algunos elementos importantes del juego que necesitamos antes de que podamos realmente llamar a lo que tenemos un "juego". Este artículo va a centrarse en rellenar algunos de los detalles que faltan, y nos está acercando mucho más a nuestro producto final.


Demostración final del juego

Aquí está una demostración del juego que estamos trabajando y llegaremos a través de esta serie:




1. Puntos de Premiacion

Vamos a cubrir puntos antes de comenzar a mejorar el sistema de concordancia, porque será mucho más fácil ver el primer problema en nuestro sistema de concordancia actual si tenemos un sistema de puntos implementado.

El sistema de puntos en nuestro juego va a ser muy simple, para cada bloque utilizado para formar un grupo dado, el jugador recibirá 10 puntos. En un tutorial posterior también agregamos un sistema que permite al jugador ganar más puntos encadenando múltiples grupos, pero por ahora nos centraremos en introducir un simple sistema de puntos para el jugador.

Antes de comenzar a editar los eventos, necesitamos agregar en una pantalla de Puntos, por lo que primero vaya a la Layout 1 y haga lo siguiente:

  1. Inserte un nuevo objeto Sprite.
    1. Abra la imagen Game Field Images/ScoreArea.png del paquete de gráficos.
    2. Cierre el editor de animación.
    3. Ajuste la posición a 491, 383.
  2. Inserte un nuevo objeto Text.
    1. Establezca la fuente Font a Calibri, Bold, 22 mediante el menú desplegable.
    2. Establecer el nombre Name en ScoreText
    3. Establezca el color en blanco White o 255, 255, 255
    4. Establezca la Posición Position en 419, 398.
    5. Establezca el tamaño Size en 200, 50.
    6. Establezca el texto Text en 0.

El Layout 1 debería verse así:

Construct 2 Match-3 tutorial

Ahora que tenemos algo que decirle al jugador lo que significa el texto de puntos y un objeto de texto para mostrar la puntuación del jugador, podemos pasar a darle los puntos al jugador. Vaya a la Event Sheet 1 y cree una nueva variable global.

La variable debe tener este aspecto:

Construct 2 Match-3 tutorial

Esta es la variable que vamos a modificar cada vez que le damos puntos al jugador. A continuación, crearemos una nueva función que, cuando se le llame, detectará cuántos bloques el jugador ha emparejado en grupos y les dará el número de puntos apropiado.

Su código debería tener este aspecto:

Construct 2 Match-3 tutorial

Así pues, para reiterar, este acontecimiento mira cada solo bloque. Cada vez que encuentra un Bloque que tiene IsMatched configurado como verdadero true - lo que significa que se ha confirmado que es parte de un grupo - le da al jugador 10 puntos para ese Bloque, y actualiza el texto de puntuación.

Si prueba su juego en este punto, parecerá que la función no está funcionando. La razón de esto es porque en realidad no hemos llamado la función en ningún lugar del código, por lo que los puntos nunca se están incrementando, y el texto nunca se está actualizando. Vaya a su función FindMatches y añada una nueva Acción al principio del sub-evento final para esta función.

Su función FindMatches debería tener el siguiente aspecto:

Construct 2 Match-3 tutorial

Nota: Asegúrese de haber agregado esta nueva Acción al principio del Sub-Evento. Si agrega esta acción al final, no funcionará ya que todos los bloques coincidentes se habrán destruido antes de que se llame a la función GivePoints. Esto significa que, cuando busca los bloques coincidentes, no encontrará ninguno y, por lo tanto, el jugador no recibirá ningún punto.

En este punto puedes probar tu juego nuevamente y deberías ver la actualización de los puntos de texto, y que el jugador está recibiendo el número correcto de puntos por cada partido que hagan.


2. Mejorar la Detección de Coincidencias

Ahora que tenemos el sistema de puntos en, quiero que ejecute el juego, y crear el escenario mostrado a continuación.

Construct 2 Match-3 tutorial

Ahora intercambia los bloques que he destacado aquí y mira tu puntuación para ver cuántos puntos ganas.

Construct 2 Match-3 tutorial

Cuando usted formó esta coincidencia, usted debe haber visto que usted ganó 50 puntos. Esto se debe a que, actualmente, el sistema de puntos le da al jugador 10 puntos por cada Bloque que está marcado como IsMatched, en lugar de dar al jugador 10 puntos por cada Bloque utilizado en cada partido, como el sistema que describí anteriormente.

Si el sistema de puntos funcionaba correctamente, le daría al jugador 60 puntos: 30 para el grupo vertical de tres bloques y 30 para el grupo horizontal de tres bloques. Este problema se deriva del hecho de que el sistema de coincidencia no tiene ninguna forma de marcar cuando un Bloque se corresponde tanto horizontal como verticalmente; Sólo sabe si el bloque es igualado en absoluto.

Para resolver este problema primero vamos a agregar dos nuevas Variables de Instancia a nuestro objeto Block, MatchedX y MatchedY.

Sus variables deben verse así:

Construct 2 Match-3 tutorial

Estas variables se van a utilizar conjuntamente con IsMatched para decirle al sistema cuando el bloque es parte de grupos horizontales, o X, y cuando el bloque es parte de grupos verticales o Y. Ahora que tenemos las variables, vamos a modificar la función CheckMatches para que cuando etiqueta un Bloque IsMatched porque encontró un grupo lo suficientemente grande, también etiquetará ese Bloque como parte de un grupo X o Y dependiendo de si Parámetro 3 o el parámetro 4 es 1.

Vaya a la función CheckMatches y reemplace la verificación original de NumMatchesFound con estos dos nuevos sub-eventos:

Su función CheckMatches debería verse así:

Construct 2 Match-3 tutorial

Así que la nueva versión de CheckMatches funciona de la misma manera que la anterior, excepto que ahora también comprueba si el bloque se encontró que es una coincidencia en un grupo vertical o un grupo horizontal, y etiqueta el bloque de acuerdo con las nuevas variables MatchedX y MatchedY.

Premiacion de puntos extra a los bloques que coinciden dos veces

Ahora que tenemos una manera de determinar cuándo un bloque es emparejado verticalmente, emparejado horizontalmente, y emparejado en ambas direcciones, a diferencia de apenas saber que se ha emparejado en un grupo, necesitamos agregar un sub-acontecimiento a la función de GivePoints que Distribuirá un extra de 10 puntos para un bloque que tiene MatchedX y MatchedY establecido en true.

Vaya a la función GivePoints y agregue este sub-evento:

Su función de GivePoints ahora debería verse así:

Construct 2 Match-3 tutorial

Si ejecutas tu juego y vuelves a crear el escenario ilustrado arriba, tu puntuación ahora debería aumentar correctamente en 60 puntos.


3. Añadir gravedad

Ahora que tenemos un sistema de Puntos implementado, y hemos actualizado el sistema de coincidencia, vamos a empezar a mejorar otro aspecto importante de la jugabilidad. Si has pasado el tiempo jugando con el juego hasta este punto, sabrás que uno de los mayores problemas es que cuando se destruyen los Bloques, no pasa nada a los Bloques por encima de ellos. Específicamente, los bloques sobre espacios vacíos no caen para llenar esos espacios.

Esto está bien en las pruebas, pero en la versión final sería perjudicial para el juego dejar las cosas como son, así que lo siguiente que vamos a agregar es "gravedad" que hará que los bloques caigan y llenen Espacios vacíos cuando se destruyen otros bloques.

La forma en que vamos a implementar este sistema es realmente muy simple. Realizaremos una comprobación utilizando el evento Block > Is overlapping at offset de compensación para ver si hay un bloque debajo del bloque que estamos viendo. Si encontramos que no hay bloque, moveremos el bloque que estamos mirando abajo para llenar el espacio vacío; De lo contrario, no haremos nada.

Para realizar este trabajo crearemos un nuevo Evento:

Su código debería tener este aspecto:

Construct 2 Match-3 tutorial

Si se ejecuta el juego en este momento, verá que en el momento en que el juego comienza, todos los bloques caen de la pantalla! La razón de esto es porque no pusimos nada en el código para decirle dónde estaría el "piso" del campo de juego.

Así que esencialmente, los bloques en la fila inferior se dan cuenta de que no hay bloques debajo de ellos y caen en consecuencia. Entonces, una vez que la fila más baja de bloques ha caído, la fila siguiente más baja ve que ahora no hay bloques debajo de ellos, y ellos también caen. Este proceso continúa, hasta que todos los bloques han caído, y deja la pantalla completamente vacía.

Puede ver una versión un poco ralentizada de esto en acción en el GIF a continuación:

Construct 2 Match-3 tutorial

Para corregir esto, agregaremos una segunda condición al Evento.

Su código ahora debería verse así:

Construct 2 Match-3 tutorial

Mediante la adición de esta nueva condición nos aseguramos de que sólo los bloques que están por encima de la posición Y de la fila más baja son afectados por nuestra "gravedad". A pesar de esta corrección, todavía tenemos algunos problemas.

Tratando la funcionalidad arrastrar

El principal problema es que el evento que busca ver si hay un espacio vacío debajo de un bloque no tiene nada que decirle que esté inactivo cuando el jugador está arrastrando un bloque. Esto significa que, si arrastra un Bloque demasiado lejos sin soltarlo, los Bloques en la posición arriba de donde lo arrastró caerán en el espacio que queda del Bloque que arrastró. Además de eso, el Bloque que está arrastrando también tendrá un problema si lo saca del campo de juego, y comenzará a caer lejos del cursor del ratón, ya que no hay bloques debajo de él.

Para solucionar este problema necesitamos agregar una nueva variable global para decirle al sistema cuándo estamos moviendo un Bloque, una nueva acción a los bloques de arrastrar y soltar eventos para establecer esta variable global, y una tercera condición al evento de gravedad para que tome Esta variable en cuenta antes de activar.

Primero, hagamos la variable global:

Su variable debe tener este aspecto:

Construct 2 Match-3 tutorial

Ahora, vaya al evento On DragDrop drag start y añada una nueva Acción:

Además, vaya al evento On DragDrop drop y agregue una acción nueva al evento principal:

Con las líneas añadidas, los eventos de DragDrop deberían verse así:

Construct 2 Match-3 tutorial

Finalmente, vaya al Evento de gravedad y añada una nueva condición:

Su código de gravedad debería verse así:

Construct 2 Match-3 tutorial

La nueva variable que creamos, BlockBeingMoved, se utiliza para decirle al sistema cuando el jugador está moviendo un bloque. Si la variable es igual a 0, significa que no se está moviendo ningún bloque y puede ejecutar los scripts de gravedad de forma normal. Si la variable es igual a 1, significa que se está moviendo un Bloque, y los scripts de gravedad no deben ejecutarse.

Si ejecuta el juego en este punto, verá que no importa dónde mueva el bloque mientras lo arrastra, no se producen problemas.

Comprobación de nuevas coincidencias

Ahora sólo tenemos una última cuestión que tratar con respecto al sistema de gravedad. Ejecutar el juego y crear un escenario similar a esto:

Construct 2 Match-3 tutorial

Ahora, haga el intercambio que he destacado en esta imagen siguiente.

Construct 2 Match-3 tutorial

Usted debe notar que cuando el grupo Bloques Verde/Estrella es destruido, un Bloque Naranja/Hexagono se cae y forma un grupo de tres Bloques, pero no se destruye.

La razón por la que estos bloques no se destruyen es porque nunca llamamos a la función FindMatches una segunda vez para ver si se formaron nuevos coincidencias cuando los bloques cayeron para llenar los espacios vacíos. Para solucionar esto, vaya al evento que comprueba espacios vacíos debajo de bloques y agregue este Else evento:

Su código debería tener este aspecto:

Construct 2 Match-3 tutorial

Esta instrucción else significa que, siempre que encuentre que no hay espacios vacíos, realizará una comprobación para ver si hay grupos que destruir. Este evento se ejecutará automáticamente cada vez que los bloques caigan en nuevas posiciones, ya que es activado por una declaración Else que está vinculada a esa comprobación, y sólo se disparará una vez que está seguro de todos los bloques han caído en su lugar.

Si ejecuta el juego en este punto, encontrará que ahora puede crear cadenas de bloques mediante la destrucción de bloques de una manera que los grupos se forman cuando los bloques restantes caen. Además de eso, también encontrarás que cuando inicias el juego por primera vez, todos los grupos que se generan inicialmente también serán destruidos. Como dije en el tutorial anterior, eventualmente eliminaremos los partidos pre-hechos, por lo que este tema no importará al final.

Eliminación de bloques del diseño inicial

Finalmente, tenemos que hacer otra cosa antes de que podamos considerar nuestro sistema de gravedad completo. Dependiendo de dónde colocaste el sprite de Bloque inicial cuando completaste el primer tutorial, puedes notar que al iniciar el juego cae y se hace visible.

Si no sabes a qué me refiero, ve a Layout 1, establece la posición de tu bloque sprite en 521, -32, y ejecuta el juego. Cuando juegues el juego, deberías ver el bloque original en la posición que he destacado en la imagen de abajo:

Construct 2 Match-3 tutorial

Como se puede ver en la imagen anterior, el bloque inicial cae de su posición fuera de la pantalla y se hace visible. No queremos esto porque sólo nos va a causar problemas más adelante. Para solucionar este pequeño problema vamos a agregar una Acción al evento On start of layout que destruirá cualquier Bloque que esté en el Layout cuando se cargue inicialmente.

Su evento ahora debería verse así:

Construct 2 Match-3 tutorial

Ahora cuando se ejecuta el juego, ya no debería ver el bloque. Usted puede estar preguntándose por qué no eliminamos el bloque del Layout para que no tengamos que preocuparnos por este problema en absoluto. La razón por la que no lo hicimos es porque Construct 2 no puede crear copias de ningún tipo de objeto con Events, a menos que ya exista una instancia de ese tipo de objeto en el juego cuando se cargue por primera vez. Al eliminarlo en un evento, lo eliminamos para que no se convierta en un problema más tarde, y hacemos posible generar tantos bloques como necesitamos a través del código.


Conclusion

Hemos cubierto una gran cantidad de temas en este tutorial, y aunque hay más que podíamos hacer, creo que es importante tomar un descanso y dejar que esta información inundar. En la próxima entrega, vamos a arreglar un par de pequeños problemas, hacer El texto de puntos flotantes de fantasía que usted podría haber notado es en la demo final, y configurar el sistema de encadenamiento.

Espero que tengas mucho de esta parte de la serie, y te veré aquí la próxima semana.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.