La idea de hacer este juego me salió de una publicidad que ví mientras estaba en Instagram. Luego reforcé la idea cuándo lo empecé a ver en varios lugares. Eventualmente lo empecé a buscar y se me ocurrieron muchas mecánicas, y decidí empezarlo. También como excusa para probar un sistema de popups que acababa de hacer para mi framework personal.

En primer lugar lo que intenté hacer es dada una imagen, obtener una matriz de sub imágenes. Lo hice con sprites porque me pareció más sencillo.

Básicamente esto lo que hace es ir en bloques por la imagen pasada y construye una tupla con la info necesaria de cada fragmento de imagen. Luego hice una prueba para ver cómo funcionaba y posicioné cada fragmento por separado en la escena. De momento el inicio va muy bien.

Y con esto empezamos. Así que diría que es un buen comienzo.

Lo siguiente con lo que estuve lidiando es cómo hacer para detectar hacia dónde “draggeo” el segmento. Básicamente la forma de resolverlo fue implementar IDragHandler en el MonoBehaviour que representa la parte visual del tile. Lo que me importaba más que nada es si lo tengo que mover hacia la izquierda, derecha, abajo o arriba, y no específicamente obtener el vector dirección, sino “clampearlo” hacia uno de esos posibles valores. Lo que terminé haciendo es el producto punto entre cada una de esas direcciones y la dirección hacia donde “draggie”.

La lógica que apliqué detrás de esto es que las direcciones para las que estaba moviendo el dedo/mouse van a ser positivas, y las demás negativas. Después lo que hice fue agregarles una variable para saber qué tan accurate lo quiero. O sea que en lugar de comparar con cero preguntaba si era mayor a determinado threshold. En tal caso, podía asumir que se estaba moviendo en esa dirección.

Ahora con esto puedo permitirle al usuario que draggee un poco “mal” o que sea más preciso al momento de mover el tile. Y terminó quedando así:

Veremos qué más sale mañana…

Para continuar un poco con el proyecto me enfoqué en seguir con el gameplay. Básicamente lo que logré es que sea “jugable” y que ya se pueda ganar. Mejoré un poco la manera en la que dibuja la matriz y ahora puede encajar una imagen en una matriz de cualquier formato (no necesariamente cuadrada). Lo que más me costó de todo esto es representar la parte visual, porque los datos y la lógica corrían perfectamente en los tests por consola. El problema es que la dirección en la cual uno mueve el dedo hay que convertirla a una especie de dirección matricial para saber si se puede mover una celda hacia esa posición.

Estuve luchando hasta horas de la madrugada porque no me gustaba cómo quedaba y no me dejaba dormir no poder hacerlo “genérico”.

Pero después de un rato y un café con medialunas, me dí cuenta que lo estaba pensando mal. Estas son cosas que pasan cuando uno está cargado de motivación pero también tiene sueño. Lo que me dí cuenta es que al mover el dedo hacia arriba generaba un vector hacia arriba (toda la lógica del mundo, no?). Pero la matriz no CRECE hacia arriba. Y el arriba del mundo es el abajo de la matriz.

Si miran en el dibujo de más abajo, la matriz tradicionalmente crece hacia la derecha y hacia abajo:

Entonces… Si yo muevo el dedo hacia arriba y capturo ESA dirección, lógicamente estoy preguntando si puedo mover la pieza hacia abajo en la matriz. Bueno… Nada… Un pequeño error en la forma de mirarlo y sólo te saca un par de horas… No pasa nada…

Otra cosa que me pasó es que al mover un tile de una celda a la otra no estaba actualizando su posición dentro de su data. Por lo cual el board me decía: “Che… Nunca movista nada por acá”. Eh aquí el problema:

Y luego de haber hecho todo lo anterior… Me quedó así:

Vamos a ver cómo avanza en los siguientes días. Quiero hacer una pequeña versión jugable de principio a fin y después veo si le agrego más cositas.

Le agregué ahora la posibilidad de tener un tablero incluso diferente o de otro tamaño y que pueda de todas maneras descubrir si se armó o no la matriz. Básicamente le puse ID a cada tile y en el algoritmo lo primero que hago es buscar el tile con el ID = 0 y desde ahí empiezo a comprobar matricialmente que cada ID siguiente sea mayor que el anterior. Si eso se cumple, entonces está todo resuelto.

Primero calculo cuántos elementos de la imagen están en la matriz y después voy restándole valor a esa variable. SE SUPONE que cuando se termienn de recorrer todos esa variable debería estar en cero. Y si eso ocurre quiere decir que pasó por el if que valida los ID (por todos los tiles). Con que uno no se cumpla detengo el ciclo porque ya sé que si uno no se cumple no está resuelto.

Y queda de esta manera:

Se agregó la posibilidad de bloquear determinadas celdas. Esto previene que sean movidas en los shuffles y también previene que sean movidas por el usuario. Podría ser una mecánica interesante en este tipo de puzzles en niveles más avanzados. En el ejemplo a continuación bloqueo el tile del centro del sistema de shuffle.

Estaba pensando que es un tema subir imágenes por lo de “derechos de autor”. Así que se me ocurrió que quizás podrías usar tu cámara para sacar una foto y poder armar la imagen de lo que vos quieras. Investigué un poco sobre cómo usar el tipo de dato WebCamTexture y obtuve algunos resultados que están bastante copados. Así que lo incorporé al juego. Este es el resultado: