Part 1 - The Basics

Introduction

Have you ever played a hidden object game? If you haven't, it is a game where you have to find random objects hidden away on the gamescreen. These objects are carefully and smartly embedded into the screen so that it looks as if they are part of the background picture. I am hooked on these games. I can play them for hours and hours, non stop. With this article series, we'll make our own hidden object game and I'll describe all the logic involved with these types of games.

Getting / Designing the Pictures

Before we do any code, we need to know what pictures we will need. We'll also need to know what the background of the game should look like. With all of these in place, we need to strategically hide all the pictures within the background. With this series, I have decided upon 20 pictures :

Name	Picture
bird1.gif
bird2.gif
bird3.gif
bird4.gif
cellphone.gif
earring1.gif
earring2.gif
grapes.gif
key.gif
lion.gif
newspaper.gif
pencil.gif
rhino.gif
shoe1.gif
shoe2.gif
toilet.gif
upsidedown.gif
violin.gif
wallet.gif
zeppelin.gif

As you can see, these pictrues don't have anything in common. They are random pictures that we will use inside our game. This is one of the tricks Hidden Object games use. They use unrelated pictures, which you might not expect, and you need to find them based on the cleverly constructed clues - which we'll do a bit later. You may be wondering if you should draw these pictures yourself or what. Well, Yes, if you have the correct tools such as CorelDraw and PhotoShop, and obviously the talent to draw, then you can feel free to design them. In normal circumstances, a graphic designer should be involved - as is the case with these games. What I did, because of time restraints, was to draw only a few of the above pictures, the rest I found through Google Images. Keep in mind that the pictures may be copyrighted.

The last image needed for our game screen is the background:

Figure 1 - Background

Objective

Once we have the pictures we have decided upon, we need to hide them away in the background. The game player should then find them based on our cryptic clues.

Jungle Jive Mystery

Jungle Jive Mystery is the name of our game. As you can deduce from the background picture and the name of the game, it has something to do with a jungle. Now, with all mystery games, there is a story involved. Our story, in this case, is that the King has lost his pet snake named Nicholas. You are hired to find him, and hopefully get a reward. The story itself will be built into the game throughout this series.

Let us now start with creating the game.

Design

Open Visual Studio 2010 and select to make a new Visual Basic Windows forms project. Name it JungleJiveMystery. Set the following properties for Form1

Add the following controls, with their associated properties, to your form:

This should cover our design, for now.

Code

First, let's add code to the picJJMExit picturebox, so that we can test the project as we go :

 Private Sub picJJMExit_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles picJJMExit.Click
	Application.Exit()

End Sub

Now we can quickly test it to see what our design looks like. It should look similar to the following image, and the Close button should work.

Figure 2 - Game Screen

The next obvious step is to add our pictures to the background. Click on Project, select JungleJiveMystery Properties... and select the Resources tab. Inside the Resources tab make sure that you select Images as Resource Type, and then click on the dropdown arrow next to Add Resource. Select Add Existing Resource and navigate to where all your images are, then simply add them. Your resources screen should look like the screenshot below.

Figure 3 - Resources

It would be clunky and messy if we were to add twenty pictureboxes during design time. I hate doing that. Adding the pictureboxes during runtime gives us a bit more versatility, because we can set all the settings in one place instead of guessing in Design time.

Add the following code in your Declarations section.

Private picItems(19) As PictureBox

Private picSources(19) As Bitmap

Here we create an array of pictureboxes as well as an array of bitmaps - to be used with our pictures.

Continue with the Form_Load event :

Private Sub Form1_Load(ByVal sender As Object, ByVal e As 
System.EventArgs) Handles Me.Load

'Allocate images appropriately

picSources(0) = New Bitmap(My.Resources.shoe1)

picSources(1) = New Bitmap(My.Resources.shoe2)

picSources(2) = New Bitmap(My.Resources.rhino)

picSources(3) = New Bitmap(My.Resources.key)

picSources(4) = New Bitmap(My.Resources.grapes)

picSources(5) = New Bitmap(My.Resources.violin)

picSources(6) = New Bitmap(My.Resources.upsidedown)

picSources(7) = New Bitmap(My.Resources.newspaper)

picSources(8) = New Bitmap(My.Resources.bird1)

picSources(9) = New Bitmap(My.Resources.bird2)

picSources(10) = New Bitmap(My.Resources.bird3)

picSources(11) = New Bitmap(My.Resources.bird4)

picSources(12) = New Bitmap(My.Resources.lion)

picSources(13) = New Bitmap(My.Resources.earring1)

picSources(14) = New Bitmap(My.Resources.earring2)

picSources(15) = New Bitmap(My.Resources.toilet)

picSources(16) = New Bitmap(My.Resources.pencil)

picSources(17) = New Bitmap(My.Resources.cellphone)

picSources(18) = New Bitmap(My.Resources.wallet)

picSources(19) = New Bitmap(My.Resources.zeppelin)



'Create pictureboxes on form

Dim i As Integer

For i = 0 To 19



picItems(i) = New PictureBox

AddHandler picItems(i).Click, AddressOf picItems_Click 'Add a handler so that we 
can click on them



'Set properties

With picItems(i)

.SizeMode = PictureBoxSizeMode.AutoSize

.Image = picSources(i)

.BackColor = System.Drawing.Color.Transparent

.Visible = True

End With

Me.picJJMGame.Controls.Add(picItems(i))



Next i



'Set each picture's Location

picItems(0).Location = New Point(15, 540) 'shoe 1

picItems(1).Location = New Point(550, 380) 'shoe 2

picItems(2).Location = New Point(690, 165) 'rhino

picItems(3).Location = New Point(30, 165) 'key

picItems(4).Location = New Point(900, 630) 'grapes

picItems(5).Location = New Point(695, 635) 'violin

picItems(6).Location = New Point(970, 400) 'upside down

picItems(7).Location = New Point(400, 630) 'newspaper

picItems(8).Location = New Point(280, 60) 'bird 1

picItems(9).Location = New Point(50, 30) 'bird 2

picItems(10).Location = New Point(950, 190) 'bird 3

picItems(11).Location = New Point(600, 600) 'bird 4

picItems(12).Location = New Point(300, 380) 'lion

picItems(13).Location = New Point(100, 340) 'earring 1

picItems(14).Location = New Point(750, 340) 'earring 2

picItems(14).BringToFront()

picItems(15).Location = New Point(150, 340) 'toilet

picItems(16).Location = New Point(900, 140) 'pencil

picItems(17).Location = New Point(375, 285) 'cell phone

picItems(18).Location = New Point(15, 630) 'wallet

picItems(19).Location = New Point(400, 30) 'zeppelin





End Sub

When we attempt to run this code, we will get an error, because we do not have the picItems_Click event yet. Let's add it now.

 Private Sub picItems_Click(ByVal sender As Object, ByVal e As EventArgs)

Dim pic As PictureBox = DirectCast(sender, PictureBox) 'convert clicked object 
to picturebox



If sender.Equals(picItems(0)) Or sender.Equals(picItems(1)) Then ' 2 shoes

pic.Visible = False



ElseIf sender.Equals(picItems(2)) Then 'rhino



pic.Visible = False



ElseIf sender.Equals(picItems(3)) Then 'key

picItems(3).Visible = False



ElseIf sender.Equals(picItems(4)) Then 'grapes

pic.Visible = False



ElseIf sender.Equals(picItems(5)) Then 'violin



pic.Visible = False



ElseIf sender.Equals(picItems(6)) Then 'upsidedown



pic.Visible = False



ElseIf sender.Equals(picItems(7)) Then 'newspaper



pic.Visible = False



ElseIf sender.Equals(picItems(8)) Or sender.Equals(picItems(9)) Or 
sender.Equals(picItems(10)) _

Or sender.Equals(picItems(11)) Then '4 birds



pic.Visible = False



ElseIf sender.Equals(picItems(12)) Then 'lion



pic.Visible = False



ElseIf sender.Equals(picItems(13)) Or sender.Equals(picItems(14)) Then '2 
earrings



pic.Visible = False





ElseIf sender.Equals(picItems(15)) Then 'toilet



pic.Visible = False



ElseIf sender.Equals(picItems(16)) Then 'pencil



pic.Visible = False



ElseIf sender.Equals(picItems(17)) Then 'cellphone



pic.Visible = False



ElseIf sender.Equals(picItems(18)) Then 'wallet



pic.Visible = False



ElseIf sender.Equals(picItems(19)) Then 'zeppelin



pic.Visible = False

End If



End Sub

Let's run this game now, and see what happens! Your game screen should look like the next picture.

Figure 4 - Game Screen with all pictures

You can modify the Location properties according to your needs, as this is just a small example. You are also now able to click on each picture, and it will disappear!

Last note. I am including my pictures, as well as this project as a download for you. You will need to unzip the Images into the Bin\Debug directory of your project first, before you run my samples, as this might cause exceptions.

Conclusion

This is the core framework we need for our final game. In the next installment of this series, we will go deeper into the finer details of hidden object games. We will add a countdown facility, we'll list the items needed as well as adding a score. Lastly, we'll add the ability to keep track of how many items are left upon each item found. I hope you have enjoyed this article! Stay tuned for the next part!