Puzzle Mechanics – Rotating Picture Puzzle

Greetings Readers!

Welcome to another exciting edition of Chronicles of Coding: The Good, The Bad, And The Buggy. In this week’s post I will be discussing the design of one of my puzzles that involves rotating pieces of a picture to make the picture look correct using buttons to rotate rows and columns independently.

The first step to this is finding a picture and getting it split into a grid. While this first step may seem a hard to figure out how to accomplish, there are a lot of websites that will do this for you for free (with/without a donation), I used Imagy. So, that takes care of the first step.

The next step is implementing the visual interface in Unity. There are a couple different ways to do this but I made a bunch of planes, set into a grid overlaying a wall. There are 12 planes acting as buttons to rotate the pieces in-place. Each of the picture planes will use the picture pieces as a material and when all the pieces reach (0, 0, 0) for their rotation, the puzzle will be solved.

The last step is scripting the interaction, this is where I can’t decide on which option to go with. The first option is to write two scripts, one for a left rotation, and one for a right rotation. This has the advantage of easily being able to tell a button what objects it can rotate which way. They would both have variables for their controlled objects and an interact method that rotates those objects by 90o. The downside is that I could very easily make the mistake of adding the wrong objects to some button’s script. There is also the question of getting multiple objects to rotate at the same time, which could be difficult given that the method can only act on one object at a time. This could cause a domino effect instead of simultaneous movement. Another option is to write a script for each picture piece and attach that script to the rotate button. This could give me the simultaneous movement I’m after, but it would get pretty confusing having three very similar scripts attached to an object.

The third and potentially best option is to use scriptable objects. This could potentially give me the simultaneous movement I’m after and I would only need one script for each picture panel piece and one script for each button. The methods for turning would be kept within the scriptable object and the picture panel piece would be subscribed to these scriptable objects, so when the button is clicked all the panels subscribed to that scriptable object will react at the same time. Essentially, the button sends the turn signal to a scriptable object -> the object reacts to the input and sends the correct signal to turn the panel -> every panel subscribed to this object reacts at the same time and rotates. I think this is my best option.

Puzzle Mechanics can sometimes be difficult to develop but they can also be fun to think about.

Keep your eyes peeled for my next post!