El objeto de este tutorial es explicar cómo se crea un puzzle rompecabezas con el programa Construct2 de Scirra. Esta tercera parte, "Uniendo las piezas", explica cómo hacer que unas piezas "encajen" con otras.
Anteriormente
Los anteriores capítulos de esta serie de tutoriales son los siguientes:
Haciendo un Puzzle - Primera parte: Concepto
Haciendo un Puzzle - Segunda parte: Hacer las piezas del rompecabezas
El primer capítulo muestra algunos de los conceptos que emplearemos en este tutorial, mientras que el segundo explica cómo "recortar en forma de rompecabezas" una imagen, para crear las piezas, de forma que podamos emplear sobre la marcha cualquier imagen para hacer el puzzle.
En el capítulo anterior (capítulo segundo) se sugería al lector que mejorase los "eventos" (perdón por el anglicismo) añadiendo un bucle "for... " para crear todas las piezas, empleando la misma lógica que se usó en la creación de la pieza de la esquina superior izquierda. El archivo adjunto contiene un bucle como el descrito.
El archivo también contiene otra mejora: los tamaños de las piezas, "fijados" durante el diseño del programa, ahora son variables que se calculan durante el juego, y se ha añadido un grupo "Resize" ("Cambiar Tamaño"), que calcula por si solo todos los cambios de tamaño que hicimos a mano en el capítulo segundo.
Tutorial_puzzle_2b.capx contiene todo lo que hemos hecho hasta este punto.
Colocar las rutinas de cambio de tamaño dentro de un grupo "ocupa" un evento extra (debería tenerse en cuenta si se está usando la versión gratuita de Construct2, limitada a 100 eventos), pero ayuda a recordar el propósito de todos esos eventos. Y tiene una ventaja adicional: Ahora se puede ocultar todo el grupo "Resize" hasta que se necesite hacer algún cambio en él.
Añadiendo movimiento
"Drag and drop," la forma más sencilla
Lo primero que se hará es añadir cierta interacción del usuario.
Vayamos a la vista "Layout" y añadamos al objeto "Canvas" el behaviour "drag and drop" (comportamiento "soltar y arrastrar" (por cierto, ahora podríamos borrar el objeto "Piece2"). "Drag and drop" es fabuloso porque evita la necesidad de comprobar si el usuario utiliza ratón o pantalla táctil.
Si añadimos la conducta "drag and drop" al objeto "Canvas" en lugar de hacerlo sobre "Pieza" es porque la pieza que realmente movemos es una instancia del objeto Canvas. Puesto que tener nuestra pieza con el nombre "Canvas" es un tanto confuso, vamos a renombrar los objetos:
- Cambiamos el nombre de "Piece" y "Piece2" a "PieceMask" y "PieceMask2"("MáscaraDePieza", "MáscaraDePieza2"), respectivamente.
- Cambiamos el nombre de "Canvas" a "ActualPiece" ("PiezaReal").
'Subir' las piezas activas
Ejecutemos el proyecto. Veremos que se pueden mover las piezas, pero, cuando se mueven, hay otras piezas encima que las ocultan. Necesitamos añadir algo de código a la hoja de eventos:
Al final de la hoja de Eventos, añadimos este evento:
ActualPiece.On DragDrop drag start => ActualPiece.MoveToTop
También habremos observado que aparece un objeto "ActualPiece" sobrante (un cuadro triangular) bajo una de las piezas. Se trata del primer objeto "ActualPiece" incluido en nuestro Layout. Necesitamos que esté colocada en el Layout para poder acceder a la clase ActualPiece desde la hoja de eventos; pero, puesto que en la hoja se opera sobre clones, hay que borrarla al principio del layout (condición "On Start of Layout"):
En el primer evento "Start of Layour" (pero fuera del grupo "Resize"), añadimos la acción "ActualPiece.Destroy".