Creating a Hidden Object Game 

The Active Reader makes it easy for anyone to import art assets into Unity and create sophisticated interactive content without any programming.

The assets used in this tutorial can be downloaded by clicking here.

Step 1: Photoshop Export

Gather your assets in Photoshop. You can arrange them how you’d like them to appear in the tool, and by keeping each piece on a separate layer you can easily export them while keeping composition intact.

Here is a sample screen of a (very easy) hidden object game. You can see that everything is arranged and on separate layers. (Click any image in the tutorial to see it larger.)

To export these assets as .png’s, go to File > Scripts > Browse and locate the EXPORT_PNG.js script in the tool folder (ARTool > PHOTOSHOP).

The .png’s will be saved in the same folder as your .psd file. Put them all in a folder by themselves.

Step 2: Unity Import

Open the Active Reader tool in Unity. In the project tab, make a new folder for your bundle by right clicking on the Resources > Bundles folder and going to Create > Folder. 

Go to Active Reader > Import > Import Folder of Images in Place. Navigate to the folder of png’s you just made and click Choose. In the next browser window, you will automatically be taken to the Bundles folder in your project. Choose the folder you just made and click Choose.

Step 3: Setup

Create a new chapter by entering playmode and going to Active Reader > New Chapter. Enter a name in the text field and click Create. Your new chapter is saved inside the tool project folder, under Documents > Projects.

 

 

Go to Active Reader > Open Chapter and navigate to that folder to open the .flow file, and the Chapter Flow window will appear. Create a new page by clicking the New Page button. A page will appear in the list.

 

Click the edit button next to New Page 0 and the page properties window will appear. Here you can rename the page and add the bundle we created by dragging it from the list on the left to the Load area.

 

Click the Switch to Indie mode button at the top of the Chapter Flow window, then click the Edit button in the page properties window to launch the page editor.

 

Since you arranged everything in Photoshop, all you have to do is click the One of Each button here to bring in all of your assets. Check the Game view window to see how things will look on the device. You can adjust the aspect ratio by going to File > Build Settings, clicking the Player Settings button, and changing the Resolution in the Inspector.

 

Next, lock everything in place by selecting all of the assets and creating a motion block on each of them by clicking the Motion Block button in the page editor. Now when you save and close the page, the assets will be keyed in their current positions and not move when the page is re-opened.

 

Step 4: Setting Up a Hidden Object

The interactivity design for a hidden object will be that when touched, it will animate to give the user feedback, then disappear. The text for the object’s name in the list will also gray out to let the user know they’ve found that object.

Open the event editor by double clicking the green event block, and spawn an OnTouch block (Touch > Multitouch). Select the touchable object from the list and hook the block up to the Root. For this tutorial, let’s use the cowboy.

 

Next, create an animation using event blocks to let the user know they’ve found something. Use position, rotate, scale, and color blocks (found under Objects > Movers and Materials) to do this. Try a scale and color change.

Tip: Use curves shaped like an upside down “U” to make a pulse effect.

 

To make the object disappear after it’s been found, hook up a color block to fire after your animation blocks. 

You can test out what you’ve done so far by playing the page from the beginning and clicking on the cowboy.

Tip: Use a pause block (Page Control > Actions) connected right to the Root to keep the cursor inside the event block, and therefore never disable all the events by running past the end of the block.

Next, change the text in the list to show the user that the object’s been found. Hook up another color block after the animation blocks, and set it to the correct text object. Choose a color that will indicate it’s no longer active, such as gray.

That’s it for this object! The event tree should now look something like this:

 

One last step to make things easier to test is to set the default color of all object effected by color blocks. In the page editor, select the touchable object and its text object in the list and set a color block at default values at frame 0-1.

 

Now you can play the page from the beginning and test your work.

Step 5: Finding Multiple Objects

Sometimes in a hidden object game you will want the user to find a certain number of the same object. In this tutorial, there are two flying cars. To prepare, in Photoshop I created two text objects for the list: one that said there are 2 left to find, and one that said only 1 is left.

The set up for these objects will at first be the same as the other touchable object you created. Set them each up the same way, except for graying out the text, so that you have the following event tree:

You’ll be using the Set and Test Integer blocks, found under Data. For each OnTouch block, set up a Set Integer block to add 1 to an integer named something related to your objects. For this tutorial, the integer name is “cars”.

Also set up a Set Integer block from the root to start “cars” at 0. 

 

 

Next, spawn a Test Integer block for the same integer name, connect it to both OnTouch blocks, and set it to 1. This will be active when one of the two cars has been found. Connect two color blocks to it – one fading down the text object that says there are 2 objects left, and one fading up the one that says there is only one object left to find. It will look like this:

Next, spawn another Test Integer block for the same integer name, connet it to both OnTouch blocks, and set it to 2. This will be active when both cars have been found. From there, just gray out the text with a color block as we did before: 

 

The last step is to set the default color blocks in the page editor for each object as we did before. The two cars will be fully opaque, as will the text object saying there are two left to find. The text object saying there is only one left will be transparent to start.

You can test it out in the page editor by playing the page from the beginning.

Tip: You can recreate this process for any number of the same object. Just add 1 to the integer name each time one of the objects is clicked, and replace the text with the correct number of objects left by testing for increasing numbers for that integer. For example, if there were 6 objects, you would test for 1 and say 5 were remaining, test for 2 and say 4 were remaining, etc.

Step 6: The Timer

You may want to include a timer for your game to increase the difficulty. For the initial set up, make sure to have instances of your timer saves as separate assets, whether it’s digital numbers or an analog format like in this tutorial. Decide the total time you want to give the player beforehand, and then divide the segments accordingly.

For the purposes of this tutorial, I’m going to give the user 80 seconds, so I’ve divided up my timer into 8 segments, plus a blank one to start with.

Start by creating a color block in the timeline for your blank starting timer, set to full opaque. We will be fading in the segments on top of it.

Also make sure all of your timer pieces are placed properly in the scene so they can fade in and out seamlessly without the timer jumping around (stacked in the Z axis with the lowest time furthest from the camera). If you arranged everything beforehand in Photoshop, this should already be done.   

Once they are all placed, put a color block on each piece except the starting one to start them off invisible when the page loads.

In the event editor, use Wait blocks (Page Control > Triggers) to delay each timer piece fading in with a color block. For this tutorial, I’m having each piece wait 10 seconds and then fade in for a total of 80 seconds.

Connect the first Wait block to the Root to start the timer going when the page loads, and each one after that to the previous color block. Your event tree should look something like this (click for a larger view): 

Play the page and see how it works. The timer should count down as you wait. 

Tip: You can temporarily reduce the time in the wait blocks if you want to test the timer functionality faster.

The last step is to make something happen once time runs out. It’s up to you! Try loading a new page in front of the game that tells the user they ran out of time. Whatever you decide on, hook it up to the end of your timer event chain to trigger it.

Congratulations!! You have created a hidden object game without programming!

 

Back to top