Augmented Reality Puzzle

Puzzle games are simply wonderful. There are puzzles of all kinds, the typical jigsaw puzzle, the maze, with tokens and even video games of this genre (for example, Captain Toad). Puzzle games require the player to design a problem-solving strategy. The advantage of playing puzzle games is that you can develop all kinds of skills like coordination, cognition skills, reflexes etc. Additionally, augmented reality technology is becoming more and more popular and provides a way to play video games never before experienced. That's why today, I'll teach you the basics of creating an augmented reality puzzle game by making the most of this technology. Let's get started!

Step 1: Materials

Elements to develop our Puzzle:

- Unity 3D (preferably version 5.6 onwards)

- 3D modeling program (3D Max, Sketchup, etc)

- Android or iOS device

- Printer

- Vuforia Account

- Configured Unity for Android or iOS development

Step 2: ​Creating Our Image Target.

1. Before we begin, we must design or get an image where our game will be projected. In order to choose or design the right image, you must make sure that it has the following requirements:

a. It's a rich image in detail

b. It has good contrast

c. No repetitive patterns

d. The image must be in PNG or JPG format (JPGs must be RGB or grayscale (not CMYK)) of 8 or 24 bits; and must be less than 2 MB in size.

2. Once this is done, save the image to your computer and print it.

Step 3: ​Preparing the Necessary in Vuforia.

1. For the creation of our game we will need to have an augmented reality kit, and for that we will use Vuforia. We will log in to our account at the following link: https://developer.vuforia.com/vui/auth/login

If you do not have an account on this platform, simply register at this link: https://developer.vuforia.com/vui/auth/register

2. Once registered, we will go to https://developer.vuforia.com/vui/auth/register and download the file "Download Unity Extension (legacy)".

3. We will now create our development license:

a. Go to https://developer.vuforia.com/vui/auth/register and click on the "Get Development Key" button.

b. Then add the desired name for your application in the "App name" box. Check the confirmation box to accept the Vuforia Developer Agreement. Finally click on "Confirm".

c. Your new license will appear in the License Manager.

IMPORTANT: By obtaining a free development license, we are prohibited from marketing, distributing, sharing or doing any other activity other than for the purpose of developing our application. So the products that we make with this license will not be in its final version if not on the contrary will be the development phase. To be able to market, distribute, share or do any other activity with our application we must buy a license that suits our needs at https://developer.vuforia.com/vui/pricing

4. Next, we will create our target (the image where our game will be projected):

a. Go to https://developer.vuforia.com/target-manager and click on the "Add database" button.

b. Then add the desired name for your target database in the "Name" box. Among the options we have in "types", we will select "Device". Finally click on "Create".

c. Your new database will appear in the Target Manager.

d. Click on your database and there click on the "Add target" button.

e. In the "Type" section select "Simple image"; in the "File" section we will load our "Image Target"; Enter the width of your target in the "Width" section, no matter the number, this can be changed later; in the "Name" section we will put the name of our "target". Finally click "Add".

i. Check the rating of your image target. If you get less than 4 stars I recommend you to change your image.

f. As a last step we will click on the button "Download database (all)", and in the section "Select a development platform", we will mark "Unity editor".

Step 4: ​Creating the Map, the Enemies and the Character.

1. To create the map, enemies and character you will need some 3D modeling software.

a. I recommend you to use SketchUp if you want to model something simple and fast, if not, you can try with other programs like Maya, 3D Max, Blender, etc, and even alternate tasks between several programs.

2. Each program is handled differently, but I recommend that you create groups to classify different elements (platforms, materials, doors, etc.) in each model you make.

3. For a good design of our map consider these tips:

a. Since we are making use of augmented reality, to take full advantage of its potential, I suggest you build your model at different heights instead of creating large areas.

b. Make some walkable areas have obstacles (mobile or static) that make it difficult for them to pass.

c. Add multiple routes that divert or confuse the player from his main objective.

Additionally you can add movable objects such as platforms or enemies. Platforms can be useful to, for example, connect different areas of our map, and enemies may be defending the goal or simply blocking our player.

Let your imagination flow to create the best map to suit your needs!.

3. When everything is ready, export your models in the formats compatible with Unity (Obj, dae, FBX, etc.).

Step 5: Working at Unity: Initial Configuration

1. Let's download the file that I leave you called "AR Puzzle kit" where you will find everything you need to build your game. Unzip the folder where you want.

2. We'll open Unity and select the folder we just downloaded. Our project will open later.

3. Once we are inside our project in Unity, we will select the platform for which we are developing, like this: File > Build Settings and select the platform in which we are going to develop (iOS or Android). If you have never configured the Android or iOS development environment I suggest you read the Unity documentation:

Android: https://docs.unity3d.com/Manual/android-sdksetup....

iOS: https://docs.unity3d.com/Manual/android-sdksetup....

Once you have set up your Android or iOS development environment, simply click on "Switch Platform".

Step 6: ​Importing Packages and Resources

Next, we will import some necessary packages.

a. We look for the packages we downloaded in the previous steps and pass them on to Unity (Step 3).

b. Finally we will import our great 3D models that we have created previously.

Step 7: Adding and Configuring Elements for Augmented Reality

1. Within our project we look for the following path: Assets > Vuforia > Prefabs, and being in the folder "Prefabs" we will drag the elements "ARCamera" and "ImageTarget" on the window "Hierarchy".

2. Click on the "ARCamera" element and click on the "Open Vuforia Configuration" button. A menu will be opened, there we will complete the fields as follows: to complete the "App licence key" section we must return to the Vuforia website at this address: https://developer.vuforia.com/license-manager and click on the license we created previously, from there we copy what is in the box and paste it into the "App licence key" section of our project. In the section "Max Simultaneus Tracked Object" we will put a big number, so we make sure that all 3d models and their components are visualized. Finally check the boxes "Load Object Targets" and "Datasets".

3. Click on the element "ImageTarget", move to the component "Image Target Behaviour" and in the section "Database" we look for the name of our database and in the section "Image Target" we look for the name of our target. All this must coincide with what we did in the previous steps. If you want you can check the box "Enable Extended Tracking".

Step 8: ​Working With Our 3D Models

1. Drag our "3d map" to the Hierarchy inside the "ImageTarget" element window and display all the children that make up the map and select them except for the stairs if your map contains any. Then, in the "Inspector" window, click on the "Add Component" button and search for "Mesh Collider". This will allow our main character to collide with our map and not cross it.

a. In case there is a ladder in your model, you must create a ramp with the object "Plane" and place it where the ladder is located.

2. Drag our "3D character" to the Hierarchy window inside the "ImageTarget" element and without displaying anything, go to the "Inspector" window and look for the following components: "RigidBody", "Capsule Collider" and "Character Controller" and we will configure them this way:

a. RigidBody: Configure it as you see it in the image, although you can change the mass if necessary.

b. CapsuleCollider: You must get the 3D character inside the capsule. Do not activate the "IsTrigger" box.

c. Character Controller: We must make the capsule a little smaller than the one we configured with Capsule Collider.

Additionally we will add the label "Player" to our character.

Step 9: ​Moving the Character

In the "Hierarchy" window there is an element called "Controls". There you can configure how you want the controls to look in Android/iOS. I have previously configured a design for you to use, but of course you can modify it as you wish. Let's program each button like this:

1. Deploy the children that contains the element "Controls" and click on the button you want to program.

2. In the "Inspector" window, move to the "Event Trigger" component. There are two blocks called "PointerDown" and "PointerUp". To each block we will add our character. Now let's add the functionality to each block like this:

a. We will add a "TouchControls" feature, then, and depending on which button and block we are configuring the action to perform (TouchControls.plater[Orientation]UI[block“PointerDown” or“PointerUp”]) . For example, if we are configuring the left button and the "PointerDown" block of that button, the code should look like this: TouchControls.playerLeftUIPointerDown

3. Finally we select our character in the "Hierarchy" window and add the scripts "Player" and "TouchControls". Additionally we can modify the values of "Player" if we want.

Step 10: ​Death and Respawn System

If our character falls, collides with an enemy or something bad, he should die and reappear. To explain how the system works, I'll do it in case our character falls, but you can apply it to whatever you want.

1. Add an empty object by right clicking on the "Hierarchy" window and place it where we want our character to reappear.

2. Create a cube by right clicking on the "Hierarchy" window: 3D Object > Cube. Place the cube in such a way that, if the character falls from the map, it collides with the cube. In the inspector we remove "Mesh Renderer"; in "Box collider" we activate the "Is Trigger" box and add the "Respawn" script.

3. Once added the script "Respawn", in the space "Player" we drag of the window "Hierarchy" to our main character, and in the space "RespawnPoint" we will drag to the empty object that we have just created.

Step 11: Now It's Your Turn to Keep Creating.

We've already seen the basics to make our augmented reality puzzle work. Now it's up to you to add more items on your own. It's possible to create a challenging map without adding enemies, platforms or movable obstacles, but if you want you can add them and create the most difficult challenge to complete that even the brightest minds will dread and that only a few will manage to complete such a challenge, then go ahead!

Thanks to augmented reality we have a complete view of our game, it looks like it's in real life! Just imagine all the possibilities you can achieve using this technology. Thank you very much for reading my contribution, I tried my best to explain the subject even though my mother tongue is not English. I will be delighted to solve any doubt, and I would like to know in passing how your puzzle looked to you.

Greetings.

ACSG_64