AR - Exploration - Puzzle

Illusionary is an AR puzzle game which uses anamorphic illusions to rebuild the game world. The game promotes exploration by making the user to move around in the playspace.

My Roles

  • UX & Gameplay Designer

  • Programmer

Team Size

  • 5 People


  • 3 weeks

  • Spring 2019


  • ARCore

  • ARKit

  • Unity


Illusionary Gameplay

Illusionary Gameplay

Play Video

My process


Goal - Create a game that makes use of AR

A common goal of the team was to get experience working on an AR game.


So why would we want to try making a game in AR or get experience using this tech?

Lots of research indicates that AR and VR technology adoption has been rising quickly in recent years. It's in our best interest to follow market and industry trends.


The top genres of mobile games are Action, Puzzle and Simulation. To find a gap in the market and appeal to a large audience, these genres have the highest chance of success.

Inspiration - Anamorphic Illusions

Anamorphic illusions are usually pieces of art meant to be looked at from a certain point of view.


How do we make illusions into a puzzle?

To keep the essence of anamorphic illusions, the puzzle game was based on visual elements, which had one specific solution to solve the puzzle.

Uses and Restrictions of AR


AR allows users to visualize virtual elements on camera background.

Use: Connect real world and virtual world seamlessly.

Restrictions: All visualization is restricted to screen space. This means that either the virtual element has to be small in scale or far away. The person can only focus on one point at a time.

This also means that any obstruction on the screen might interfere with the visualizations.


❌Scale Too Large


❌View obstructed


✔️ Good AR Visualization


3D Movement in the Playspace

AR tracks the movement of the phone.

Use: The phone can be moved to change the camera view in AR. This movement feels very intuitive and natural since the movement matches exactly with the real world movement.

Restrictions: Manual movement of the phone can make it hard to point at a certain spot with high fidelity. If the user is also restricted in the amount of space they have available, they might not be able to take advantage of this feature.

How can we take advantage of visualization and movement?

We can choose to make the content be the focus point of the experience, or the user.

Asset 6_4x.png

Player Point of Focus

  • Takes advantage of 3 axis of rotation as the user turns around to look in every direction.
  • User has to scan the area around them and can could easily miss out content if not directed to look in a certain direction.
Asset 7_4x.png

Content Point of Focus

  • Takes advantage of 3 axis of position as the user moves around an object to view it from different angles.
  • Also takes advantage of the 3 axis of rotation to keep the phone pointed at the content.
  • Can easily keep track of content while moving around it.

Keeping the content as a point of focus works better to make the player move around while looking for a solution.

What is a comfortable space for AR?

To avoid arm fatigue and uneasy directions to look at an AR object, the game play was limited to a 45 degree horizontal area around the object.

Asset 8_4x.png
Comfortable AR viewing area is marked with green.

To account for users of different heights, the object position is set based on the user's position.

Asset 9_4x.png
Center point is decided based on the user's phone location.

Finally, a 1 meter radius circle around the object became the solution space. All gameplay was designed to fit this space to make it easier for users to set their own space easier and not interfere with other possible obstacles.

Asset 10_4x.png
All puzzles can be solved within the green area.

How are the puzzles made?


Stretching objects in one direction followed our requirements: it was a challenge scenario that had a solution indicated by visual cues.

However, items were easily identifieable by users even when stretched.


Splitting the items into different sections made the solution a bit less obvious.


Users found a different way to guess the solution, the direction that the pieces seemed to follow.

ez 3 solution.png

Keeping the objects much more constrained into a spherical area, kept the puzzle solutions better hidden and pushed users to explore the illusions more.

ez5 solution.png

Unusual outline shapes should be used for the illusions to keep each level interesting, harder to guess and to induce a feeling of discovery to the user after they solve each level.

❌Simple and boring outlines


✔️ Interesting items with different shapes


Fixing the User Experience

Hiding model split lines

Joining lines at the edges of pieces were created due to each piece being scaled to different proportions.

This made the illusion not look perfect when looked at from the solution angle. The user would not be able to see a satisfying final piece as an anamorphic illusion should. A glow shader was used to cover up the areas where the pieces should join together. During the glow effect, the pieces are switched with a single object.


How do make sure that the illusions look right?

After a lot of testing, it was determined that different puzzles have different sensitivities to how close the user needs to look at the illusion from the ideal spot for the illusion to look correct.

This inconsistency was due to different scales and shapes of the items used as illusions. To fix this, I created the functionality to record a log of positions of where the user is and input when the illusion looks complete. Based on this data, we calculated the area in which the user needs to be in so the puzzle solution is revealed only when the illusion has been solved.



How do we create a narrative?

To make use of the AR technology, a pawn shop was created to hold all the "illusion" items.

This shop is placed at the start of the game when the user chooses their play space. The items appear as broken which hints to the user that they need to be repaired for the shop to be revived. The shop spawns on the floor, grounding the experience to the real world.


illusionary promo.png

How do we pick levels?

Since the game revolves around aiming the phone at the objects, the same mechanic was used to select the levels​.

The user has to look at one of the items placed in the pawn shop and tap on the screen to select. This interaction is very easy and intuitive for a casual audience to use. To tell the levels from the rest of the shop, the items grow in size when hovered.




Picking and trying to evoke a certain type of emotion from a user can help make critical design decisions.

AR technology has very unique advantages and disadvantages which have to be carefully considered to make sure it is right for the project.

Designing for AR has its own challenges due to the nature of the technology and considerations that have to be made specifically for this type of user interactions.



P1810261 - Copy.jpg
illusionary photos.png