You are browsing the archive for Silverlight.

Next Entries →

Hidden Object: Episode 3 – Marking Items off the List

September 17, 2009 in Hidden Object Game, Silverlight

In this episode of Creating a Hidden Object Game in Silverlight 3 we overlay the items in the image with paths and associate the ChangePropertyAction to change the Opacity of the TextBlock to indicate that the item has been found.

In order to detect when an item is clicked in the office image, we need a hotspot. A Path works great for this and odd-shaped items can be outlined using the Pen tool. Press the “P” key and the Pen tool will be selected:

Center the mouse cursor over the stapler and use the mouse wheel to zoom in. Now click various points to outline the shape of the stapler:

I started with a point in the bottom left corner and clicked a total of 7 points to outline the shape. When I got to point 5 in the top left, the path’s fill started obstructing my view of the rest of the object. Simply move over to the Appearance group and set the Opacity below 50%. Continue to draw the remaining points. When you get back to the first point, the mouse cursor will change to the pen with a loop indicating that clicking will close the path. Give the path a name (staplerPath) and set the Opacity to 0%. It is time to add the ChangePropertyAction to the path. On the Assets tab, click Behaviors and find the ChangePropertyAction.

 

 

Drag the action from the Assets tab to the Object tree and drop it on staplerPath:

 

 

This action is now associated with staplerPath object. Adding this action to our object tree caused two assemblies to be added to the References folder:

  • Microsoft.Expression.Interactions.dll
  • System.Windows.Interactivity.dll

Looking at the Properties panel you will see the properties for this action and notice that there is already an EventTrigger selected to fire when the staplerPath object gets a MouseLeftButtonDown event. That is exactly what we want. In the Common Properties group you will see TargetName and PropertyName. The TargetName is the name of the object that will have its property changed and PropertyName is the name of the property. Since we want the staplerText TextBlock to be dimmed when the staperPath object is clicked, then we set the TargetName to staplerText. An easy way to do that is to grab the bullseye (called the artboard element picker) and drag it to staplerText on either the canvas or the object tree. The Properties for this action should now look like this:

 

Press F5 to run the project and click on the stapler. The text for stapler is now dimmed.

 

You can play with the Animation Properties by setting duration for the property change and even set an easing value if you don’t want a linear change in the Opacity from 100% to 40%. Let’s make this even better by adding a sound effect when an item is clicked.  I found a nice magic wand sound on SoundBible.com and added it to the project in an Audio folder. Now drag the PlaySoundAction from the Assets list onto staplerPath and set the Properties to use the audio file:

 

 

Now repeat this same process for the other 12 items. We have the core of our very own hidden object game!

 

In our next episode, we will write a custom behavior that will shoot a spray of particles when an item is clicked.

Tags: , , , , ,
4 Comments »

Hidden Object: Episode 2 – Create the Item list

September 17, 2009 in Hidden Object Game, Silverlight

This is the second episode in the series: Creating a Hidden Object Game in Silverlight 3

In this episode, we will add the image for the item list and create a wrap panel with a text blocks for each item in the list. If you have not already installed the Silverlight Toolkit, you will need to download and install it. This project is using the Silverlight 3 Toolkit July 2009 Installer.

I found an image of a whiteboard and did some cropping, removed the background, and saved it as a PNG. This was added to the Images folder.

Drag the image to the bottom center of the canvas and resize it to 328×205 and position it at 202, 395.

Now it is time to add the WrapPanel and position it on top of the whiteboard image:

  • Go to the Assets tab
  • Select Controls
  • Scroll down until you find the WrapPanel control and select it

Now you can draw the WrapPanel over the whiteboard image. If you go to the Projects tab and open the References folder you will notice that the following references have been added:

  • System.Windows.Controls.dll
  • System.Windows.Controls.Toolkit.dll

Before we start adding TextBlock controls to the WrapPanel, lets create a style called WhiteboardText and add it to the Application.Resources section of App.xaml:

<Style x:Key="WhiteboardText" TargetType="TextBlock">
 <Setter Property="Foreground" Value="#FFB11111"/>
 <Setter Property="FontFamily" Value="Comic Sans MS"/>
 <Setter Property="FontSize" Value="16"/>
 <Setter Property="Margin" Value="10,15,10,0"/>
</Style>

To keep the Image and WrapPanel together, select both in the tree and from the context menu pick Group Into > Canvas:

Select the WrapPanel in the tree, select the TextBlock tool in the Tools panel and double-click the canvas. This will add a TextBlock control as a child of the WrapPanel. Make sure the Width and Height properties are set to Auto. In the Miscellaneous group click the peg to the right of the textbox and pick Local Resources > WhiteboardText. We will now copy that TextBlock and paste it 12 more times so that the WrapPanel has a total of 13 items. For each TextBlock, change the Text and Name properties based on this list of items:

  • Stapler
  • Idol
  • Candies
  • Ball
  • Tape
  • Eeyore
  • Pencil
  • Tigger
  • Business Cards
  • Learning WCF
  • Rock
  • Dog
  • Post Its

So for the first TextBlock the Text is “Stapler” and the Name is staplerText. When I copied and pasted the TextBlock in the tree, it added a Margin property to the 12 items pasted. Since that property is contained in WhiteboardText I did a quick manual clean-up of the xaml. The hidden object game now looks like this:

In the next episode, we will use the ChangePropertyAction to mark items off the list when we select them as well as the PlaySoundAction.

Tags: , ,
7 Comments »

Hidden Object: Episode 1 – Create the Project & Picture

September 17, 2009 in Hidden Object Game, Silverlight

This is the first episode in the series: Creating a Hidden Object Game in Silverlight 3

In this episode, we will get the project started and layout the UI.

Before we begin, make sure that you have the following installed:

  • Silverlight 3 Tools for Visual Studio 2008 SP1
  • Blend 3
  • Silverlight Toolkit
  • Expression Blend 3 SDK

The first 3 can be downloaded from the Get Started tab at Silverlight.net. You can download the Expression Blend 3 SDK from here.

First we launch Blend 3 and create a new Silverlight project:

The project is called ClutteredCube as that will be the main image for the hidden object game. The two things that we are going to do is change the LayoutRoot so that its LayoutType is Canvas and change the UserControl’s dimension to 800×600:

One day I brought a digital camera to work and took a photo of my cube. This is really how it looks with just a few items added to make the game more interesting:

You can use your own images as you follow this tutorial or download these.

The image has been resized and cropped to 800×500. Create an Images folder in the project and add the file to it.

Now drag-n-drop the office image onto the canvas and position it at the top. Select the LayoutRoot again, select Background under Brushes and use the color eyedropper to pick a dark color from the shelf or drawer. The page should now look like this:

In the next episode, we will create the list of items.

Tags: , ,
2 Comments »

Creating a Hidden Object Game in Silverlight 3

September 16, 2009 in Hidden Object Game, Silverlight

According to the Casual Games Association, there are over 200 million casual game players worldwide.  One genre of casual game is the hidden object game. Mystery Case Files: Return to Ravenhearst by Big Fish Games is one example.  You are presented with a picture full of images and a list of items you must find.  As you click on the item in the picture, it is crossed off the list.  When you find the last item, you progress in the story to the next location or puzzle.

In this series, we will create a hidden object game using Silverlight 3 and behaviors, actions, and triggers.

Tags: ,
16 Comments »

Next Entries →