Creating Your Own Hidden Object Game with VB.NET

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 :

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

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:

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.

Creating Your Own Hidden Object Game with VB.NET - Page 2

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

PropertySetting
Name frmJJM
BackColor WhiteSmoke
FormBorderStyle None
Size 1028, 746
TransparencyKey Control
WindowState Maximized

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

ControlPropertySetting
Panel Name pnlJJMInfo
  BackColor Black
  Location 0,0
  Size 1028, 38
PictureBox Name picJJMItems
  BackColor Black
  Dock Bottom
  Locaction - if necessary 0, 662
  Size - if necessary 1028, 84
PictureBox Name picJJMGame
  BackColor Control
  Dock Fill
  Image JungleJiveMystery_Part_1.My.Resources.Resources._28723_large
  SizeMode StretchImage
PictureBox Name picJJMExit
  BackColor Transparent
  Dock Right
  Image Image of your choice for the Exit Button
  Location 972, 0
  Size 56, 38
  SizeMode CenterImage

This should cover our design, for now.

Creating Your Own Hidden Object Game with VB.NET - Page 3

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.

Game Screen
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.

Resources
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.

Game Screen with all pictures
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!



Related Articles

Downloads

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Live Event Date: November 20, 2014 @ 2:00 p.m. ET / 11:00 a.m. PT Are you wanting to target two or more platforms such as iOS, Android, and/or Windows? You are not alone. 90% of enterprises today are targeting two or more platforms. Attend this eSeminar to discover how mobile app developers can rely on one IDE to create applications across platforms and approaches (web, native, and/or hybrid), saving time, money, and effort and introducing apps to market faster. You'll learn the trade-offs for gaining long …

  • IBM Worklight is a mobile application development platform that lets you extend your business to mobile devices. It is designed to provide an open, comprehensive platform to build, run and manage HTML5, hybrid and native mobile apps.

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds