An AR step-by-step guide for a puzzle.
I have been wanting to see how a step by step guide would look and feel like in AR. So using the puzzle i had at home i created this AR guide for how to solve it. Since I have been working alot in Playmaker, a visual scripting tool for Unity. I did this fully in Playmaker, with only little code to connect ARFoundation with Playmaker. Below are some screenshots from the different statemachines i used to control the app. I used a controller for the context of the app then for each step of the puzzle i made a template statemachine that would be generic for each step. The generic template controls the text and the value of the step, so I could understand which step was the first and last step. Because on the first step and last step different tweens would happen.
The template that is on each piece of the puzzle
For the graphics I created UI sprites and built a world canvas that would be the way the user interacts with the steps. This was built with AR in mind, but due to the small size of the puzzle and the way the user would interact with the puzzle in real life it was not advantageous to use such a canvas. Therefore i added also the ability to swipe between each step, removing the obstacle of trying to tap a small world space button. The text though worked, but with a screen-space canvas the text would have given more clarity to each step.
For the 3D models i created them just by measuring each wooden block so it could be scale 1:1 in the app. Then I created a custom shader in Amplify Shader Editor, in which I could control both the color and alpha inside each step.