Este tutorial intenta explicar cómo hacer un puzzle rompecabezas con Construct2.
Esta es la segunda parte, "Hacer las piezas del rompecabezas". Puede ver la parte uno visitando Haciendo un puzzle-Segunda parte: Concepto.
Lo que necesitamos
Antes de empezar, tendrá que instalar el complemento Canvas plugin de R0j0hound. Ese plugin es necesario si desea permitir que el usuario cambie la imagen que hay que montar (en caso contrario, podría limitarse a usar sprites con la forma de piezas de rompecabezas).
Descargue el archivo y extráigalo en C:\Program Files\Construct 2\exporters\html5\plugins (sustituya "C:\Program Files\Construct" con la carpeta de Construct2 en su ordenador, por ejemplo "C:\Archivos de Programa\Construct"). ¡Tenga en cuenta que podría necesitar derechos de administración para hacerlo!
Si tiene un gestor de archivos comprimidos instalado (por ejemplo Winrar o 7zip, le sugiero que abra el archivo empleando el explorador de Windows (clic derecho en el archivo y seleccione "Abrir con=>Explorador de Windows"), para que aparezca un diálogo permitiéndole usar permisos de administrador.
Tendrá que reiniciar C2 para que los cambios tengan efecto.
También necesitará un archivo con algunas formas de puzzle (se adjunta uno al final de este tutorial).
Making our first jigsaw tile
Puesto que no estoy acostumbrado a usar las plantillas de proyecto de Construct2, comenzaremos con un proyecto en blanco.
Usaremos imágenes de gran tamaño, así que, en las propiedades del proyecto, ajuste el tamaño de ventana ("Window Size") a 1024x768.
Añada un sprite llamado "Pic" y cargue en él una imagen de 1024x768 píxeles como
Añada otro sprite e importe en él la imagen "Puzzle..PNG" adjunta a este tutorial (6 filas x 8 columnas). Llame "Piece" a ese sprite.
(Observe que puede emplearse cualquier patrón de puzzle, pero tardé bastantes horas en hacer este y me gustaría ahorrarle algo de su tiempo. Si usted edita la imagen en un editor de imágenes, verá un margen vacío (canal alfa vacío) alrededor de todos los sprites).
Clic en el botón "resize" (cambiar tamaño) para obtener el tamaño del sprite (189x189). Anote ese número!
Coloque su pieza en la esquina superior izquierda (189/2,189/2)=(95,95).
Haga un clon (clone) de "Piece". Cambie su propiedad "initial animation" (animación inicial) a 1.
Ahora, coloque la pieza a la derecha del sprite "Piece" original. "Encaje" el clon al "Piece" original; así podrá calcular el espacio entre piezas. La primera está en (95,95) y la segunda en (213,95), así que el espacio entre piezas es 213-95=118. ¡Anote también ese segundo número!
El margen será (Sprite_size-Sprite_Step)/2, es decir 71/2=35. ¡Anote ese número de nuevo!
Cree un objeto Canvas (Plugin Canvas) del mismo tamaño que su sprite (189x189). Para este tutorial lo rellenaremos con color, de modo que sea visible. En un caso real, no es necesario que usted lo haga.
Fije la propiedad "hotspot" del objeto Canvas "hotspot" en "center" (centrar), para que se comporte como un sprite en cuanto a su colocación.
Cambie el tamaño de "Pic" para asegurarse de que esté cubierto completamente por piezas de puzzle:
Puesto que el espacio entre piezas es 118 y tenemos 8 x 6 piezas, la nueva anchura será 8 piezas x 118 píxeles = 944 píxeles, y la nueva altura será 6 piezas x 118 píxeles = 708 píxeles. Por tanto, cambia el tamaño de "Pic" a (944,708).
Ahora, mueva el sprite "Piece" tantos píxeles hacia la esquina superior izquierda como tiene de ancho el margen entre sprites. El margen era 35 y "Piece" estaba en (95,95). Puesto que 95-35 = 60, tenemos que moverlo a (60,60).
Todos estos cambios de tamaño podrían ser realizados por el propio juego durante la ejecución del mismo, lo que permitiría tener distintos patrones de "corte" para el puzzle.
Creando eventos
Ahora, vayamos al editor de eventos para intentar cortar nuestra primera pieza de puzzle:
Añada un evento "on start of layour" ("al comienzo del layout"). La intención es "recortar" las piezas al comienzo del juego.
Añada acciones para detener la animación de los sprites (no deseamos que estén animados, solo deseamos una lista de imágenes):
On start of layout
Piece=> Stop animation
Piece2=>Stop animation
También deseamos que esos patrones de corte sean invisibles:
On start of layout
...
Piece=> Set invisible
Piece2=>Set invisible
Ahora, nos aseguraremos de que nuestro objeto "Canvas" es agrandado hasta que tenga el mismo tamaño que el sprite "Piece" y colocado en el mismo lugar:
On start of layout
...
Canvas=>Set size to (Piece.Width,Piece.Height)
Canvas=>Resize canvas to (self.Width,self.height)
Canvas=>Set position to Piece (image point 0)
Canvas=>Move to top of layer
Ahora empieza la magia. Primero, llenaremos el objeto Canvas con una porción cuadrada de la imagen contenida en "Pic":
On start of layout
...
Canvas=>Paste object Pic into Canvas
Pic=>Set invisible
Si en este momento ejecutamos nuestro proyecto, veremos una pequeña porción de cielo azul cortada en forma cuadrada.. Pero queremos que tenga forma de pieza de puzzle, así que debemos añadir dos eventos más:
On start of layout
...
Canvas=>Paste object Pic into Canvas
Pic=>Set invisible
Piece=> Set blend mode to Destination atop
Canvas => Paste object Piece into canvas.
Ejecute su proyecto. Ahora verá algo como esto:
Mejorando el código
Usando un bucle "for", puede cambiar el fotograma ("animation step") de "Piece", moverla hacia la derecha tantos píxeles como el espacio entre piezas, y entonces crear otra pieza de rompecabezas en una nueva instancia del objeto Canvas, hasta recortar las 8 x 6 piezas del rompecabezas. Le proponemos que lo haga como ejercicio.
Qué sigue a esto
En los próximos tutoriales, intentaremos ver cómo colocar todas estas piezas para que pueda moverlas y jugar con ellas.