Voy a tratar de enseñar aquí cómo hacer un puzzle rompecabezas con Scirra Construct2.
El concepto
Este tutorial es la primera parte, "El concepto". Aquí intentaré mostrar con imágenes cómo funciona el sistema.
Cómo "encajan" las piezas en la computadora
El usuario verá un puzzle en que las piezas "encajan" unas con otras. Pero lo que la computadora ve es muy distinto:
- Hay unas cuantas piezas cuadradas colocadas en forma rectangular.
- Cada pieza cuadrada está superpuesta a las de alrededor.
- Cada pieza cuadrada tiene "Variables de instancia" (PlaceX, PlaceY) con números de orden que indican el lugar correcto de la pieza.
Cuando el usuario ve que las piezas "encajan", lo que hace la computadora es comprobar si cada pieza está superpuesta a la pieza de la derecha o la izquierda, usando las "variables de instancia":
Las piezas a derecha e izquierda necesitan tener la misma PlaceY que la actual.
PlaceX en la pieza a la izquierda debe ser PlaceX actual -1.
PlaceX en la pieza a la derecha debe ser PlaceX actual +1.
Las piezas de encima y debajo necesitan tener la misma PlaceX que la actual.
PlaceY en la pieza de encima debe ser PlaceY actual-1.
PlaceY en la pieza de debajo debe ser PlaceY actual+1.
En la práctica, resulta más fácil comprobar si las piezas adecuadas están en las posiciones adecuadas:
Cada vez que "soltamos" una pieza que estábamos arrastrando, buscamos las piezas con los valores adecuados de (PlaceX,PlaceY) y comprobamos dónde están.
Si Azul está a la derecha de Blanco, su posición debe ser (X+AP-M,Y) donde X es la coordenada X de Blanco, AP es el ancho del cuadro de la pieza, y M es el margen de superposición entre piezas.
En el programa real que desarrollé, la anchura de pieza era 118 y el margen era 39, con lo que (AP-M)=79. Así que si estuviéramos moviendo la pieza superior izquierda y buscando la pieza a su derecha, deberíamos buscar la pieza con PlaceX=1 y PlaceY=0, y comprobar si sus coordenadas en pantalla eran (Pieza.X+79,Pieza.Y+0).
Dando un pequeño margen de error
En el mundo real, es muy difícil colocar las piezas exactamente en el mismo pixel en que las vamos a buscar. Debemos permitir un pequeño margen de error. En el programa real, usé un margen de error de 5 píxeles.
Podemos hacer esto usando fórmulas como la siguiente:
abs(Dónde_debería_estar_la_pieza-Dónde_está_la_pieza) ≤ Margen_de_Error.
Empleamos abs() porque, si la pieza está un poco más a la derecha, estaremos restando mayor de menor, produciendo un número negativo. Abs() elimina el signo, así que no tenemos que preocuparnos si el substraendo es mayor que el minuendo.
Por ejemplo, si suelto la pieza Superior Izquierda en (0,0) y, cuando busco la pieza que debería estar a su derecha la encuentro en (0,99), al hacer la comparación me sale que:
79-99=-20; -20≤5 => las piezas están juntas.
La computadora pensará que las piezas están juntas porque -20 es menor que 5.
En cambio, si usamos abs():
abs(79-99)=abs(-20)=20. => las piezas no están juntas.
Otra forma de hacer esta prueba sería comparar la distancia (con distance() ) entre la posición ideal de la pieza y su posición real (distance() devuelve números positivos).
Uniendo las piezas
Después de todas las pruebas, debemos unir las piezas. Primero, las movemos a la "posición ideal", de manera que encajen de la mejor forma posible. Después, hacemos que se muevan juntas como un grupo.
Tras varios intentos, descubrí que la mejor manera de hacer esto es añadir una variable de instancia llamada "grupo".
Al comienzo del juego, se asigna un distinto valor a la variable "grupo" de cada pieza.
Cada vez que arrastramos una pieza, todas las de su mismo grupo se unen juntas (pin behaviour) a un sprite invisible llamado "pin" (que a su vez se pega a la pieza que estamos arrastrando).
Cada vez que soltamos un grupo de piezas, se comprueban todas las del grupo para ver si encajan con alguna otra pieza no perteneciente al grupo.
Si la pieza A del grupo G encaja con la pieza B del grupo H, todas las piezas del grupo G se "mueven" al grupo H.
Espero que esto os ayude a diseñar un puzzle rompecabezas como el mío, o al menos a entender su archivo capx. Prometo que haré otro tutorial explicando cómo escribir un programa real, con código fuente.
Siguiente tutorial en esta serie:
Haciendo un puzzle - Segunda parte: hacer las piezas del rompecabezas