Hidden Object: Episode 9 – Add the Splash, Menu & Options Screens
September 29, 2009 in Hidden Object Game, Silverlight
This is episode 9 of Creating a Hidden Object Game is Silverlight 3. In the last episode we added background music. Now we will create a screen to set the music volume. While we are at it, we will create the splash and menu screens.
When the game is finished, it will have a screen flow as follows:
Currently we have been working on the Game screen which in the project is a UserControl called MainPage.xaml. We are going to create the menu, options, and splash screens as Canvas objects that are off screen of MainPage and are at the bottom of the Objects tree (or top of the z-order) so they show up over all other controls. I chose to do this since I want the background music to play during all of these screens and the MediaElement on MainPage is the one that is playing it. There are various other ways to approach this.
Let’s open Blend, add 3 Canvas controls, and name them splashCanvas, menuCanvas, and optionsCanvas. Make each Canvas have a black background and position them on the artboard so that they are to the left of MainPage:

On splashCanvas, add 4 TextBlock controls and enter the title information:

On menuCanvas, add the page title in a TextBlock and 2 Buttons:

On optionsCanvas, add a TextBlock for the page title, a TextBlock for the slider title, a Slider control, and a Button:

Since the silder’s Value property will be used in a Binding for the MediaElement’s Volume property, we will name the slider as sliderMusicVolume.
To control the screen flow, we will use the States panel to create a ScreenStates group with the following states: GameScreen, SplashScreen, MenuScreen, OptionsScreen.
On the States tab, click the Add state group button:

Then next to the ScreenStates group, click the Add state button:

As I entered the following states, I didn’t worry about setting any properties for any of the controls and after adding OptionsScreen I just turned off recording.

The GameScreen state represents when the MainPage is visible which is how it currently is shown on the artboard. No change will need to be made for this state. Click on the SplashScreen state in the States tab to turn on recording mode. Then click splashCanvas and change its Top and Left properties both to 0. Turn off recording of the SplashScreen state.
Repeat for the MenuScreen and OptionsScreen states so that when one of these states is active, MainPage will be covered by menuCanvas or optionsCanvas.
Click on the Base state at the top of the States tab to make sure you are completely out of state editing mode.
We now need to add a TextBlock with the Text property set to “MENU” and add it to LayoutRoot in MainPage. Because I added this control after the Canvas controls for the other screens, I need to change its order in the Objects tree so that it doesn’t appear above those screens. We will worry about making the MENU TextBlock into a Button at a later time.
Now it is time to use the GoToStateAction to connect the screen flow. Drop the first GoToStateAction onto LayoutRoot and change the EventName to Loaded and the StateName to SplashScreen:

This will cause the splash screen to show first.
NOTE: While we are still in development, we can set the loaded StateName to GameScreen to reduce testing time.
Drop another GoToStateAction onto splashCanvas and change the StateName to MenuScreen. When the splash screen is clicked, we will advance to the menu screen:

Drop two more GoToStateAction actions onto the Start and Options buttons on menuCanvas. Change the StateNames to GameScreen and OptionsScreen respectively.
Start button:

Options button:

Drop another GoToStateAction onto the Close button in optionsCanvas and change the StateName to MenuScreen:

Finally, drop the last GoToStateAction onto the MENU TextBlock in MainPage and set the StateName to MenuScreen:

We have just put together the majority of our screen flow with 6 instances of GoToStateAction and no code!
The last thing we need to do is to connect the slider value to the volume of the background music. In the Objects tree, select the musicMediaElement and in the Properties pane, click the peg to the right of the Volume property and click Data Binding to open the Create Data Binding window:

Select the ElementProperty tab. In the Scene elements list, open optionsCanvas and select sliderMusicVolume. In the Properties list, select Value. Now when the slider in the options screen is changed, it will set the volume on the MediaElement playing the background music.
The last thing we need to do is set some values on the slider control. Select the control and change the following properties found in the Common Properties group: LargeChange, Maximum, and Value.

In the next episode, we will try to figure out a way to determine when all the objects have been found so we can show a Win screen.


























