Adding Sound, Music, and Video in 3D Game Development with Microsoft Silverlight 3: Part 2

Time for action – animating projections

Your project manager wants you to animate the perspective transform applied to the video while it is being reproduced.

We are going to add a StoryBoard in XAML code to animate the PlaneProjection instance:

1. Stay in the project, 3DInvadersSilverlight.
2. Open MainPage.xaml and replace the PlaneProjection definition with the following line (we have to add a name to refer to it):

   <PlaneProjection x:Name ="proIntroduction" RotationX="-40"
   		RotationY="15" RotationZ="-6" LocalOffsetX="-70"
   		LocalOffsetY="-105" />
   

3. Add the following lines of code before the end of the definition of the cnvVideo Canvas:
   <Canvas.Resources>
       <Storyboard x_Name=”introductionSB”>
           <DoubleAnimation Storyboard.TargetName=”proIntroduction”
                   Storyboard.TargetProperty=”RotationX”
                   From=”-40″ To=”0″ Duration=”0:0:5″
                   AutoReverse=”False” RepeatBehavior=”1x” />
       </Storyboard>
   </Canvas.Resources>
4. Now, add the following line of code before the end of the PlayIntroductoryVideo method (to start the animation):

   introductionSB.Begin();

5. Build and run the solution. Click on the butt on and the video will start its reproduction after the transition effect. While the video is being played, the projection will be animated, as shown in the following diagram:

   

What just happened?

Now, the projection that shows the video is animated while the video is being reproduced.

Working with a StoryBoard in XAML to animate a projection

First, we added a name to the existing PlaneProjection (proIntroduction). Then, we were able to create a new StoryBoard with a DoubleAnimation instance as a child, with the StoryBoard‘s TargetName set to proIntroduction and its TargetProperty set to RotationX. Thus, the DoubleAnimation controls proIntroduction‘s RotationX value. The RotationX value will go from -40 to 0 in five seconds—the same time as the video’s duration:

From="-40" To="0" Duration="0:0:5"

The animation will run once (1x) and it won’t reverse its behavior:

AutoReverse="False" RepeatBehavior="1x"

We added the StoryBoard inside . Thus, we were able to start it by calling its Begin method, in the PlayIntroductionVideo procedure:

introductionSB.Begin();

We can define StoryBoard instances and different Animation (System. Windows.Media.Animation) subclasses instances as DoubleAnimation, using XAML code. This way, we can create amazing animations for many properties of many other UIElements defined in XAML code.

Time for action – solving navigation problems

When the game starts, there is an undesired side effect. The projected video appears in the right background, as shown in the following screenshot:

This usually happens when working with projections. Now, we are going to solve this small problem:

1. Stay in the 3DInvadersSilverlight project.
2. Open MainPage.xaml.cs and add the following line before the first one in the medIntroduction_MediaEnded method:

   cnvVideo.Visibility = Visibility.Collapsed;
   

3. Build and run the solution. Click on the button and after the video reproduction and animation, the game will start without the undesired background, as shown in the following screenshot:

   

What just happened?

Now, once the video finishes its reproduction and associated animation, we have hidden the Canvas that contains it. Hence, there are no parts of the previous animation visible when the game starts.

Time for action – reproducing music

Great games have appealing background music. Now, we are going to search and add background music to our game:

As with other digital content, sound and music have a copyright owner and a license. Hence, we must be very careful when downloading sound and music for our games. We must read licenses before deploying our games with these digital contents embedded.

1. One of the 3D digital artists found a very cool electro music sample for reproduction as background music. You have to pay to use it. However, you can download a free demo (Distorted velocity. 1) from http://www.musicmediatracks.com/music/Style/Electro/. Save the downloaded MP3 file (distorted_velocity._1.mp3) in the previously created media folder (C:Silverlight3DInvaders3DMedia).

   You can use any other MP3 sound for this exercise. The aforementioned MP3 demo is not included in the accompanying source code.

2. Stay in the 3DInvadersSilverlight project.
3. Right-click on the Media sub-folder in the 3DInvadersSilverlight.Web project and select Add | Existing item… from the context menu that appears.
4. Go to the folder in which you copied the downloaded MP3 file (C:Silverlight3DInvaders3DMedia). Select the MP3 file and click on Add. This way, the audio file will be part of the web project, in the Media folder, as shown in the following screenshot:

   

5. Now, add the following lines of code at the beginning of the btnStartGame button’s Click event. This code will enable the new background music to start playing:

   // Background music
   MediaElement backgroundMusic = new MediaElement();
   LayoutRoot.Children.Add(backgroundMusic);
   backgroundMusic.Volume = 0.8;
   backgroundMusic.Source =
      new Uri("Media/distorted_velocity._1.mp3", UriKind.Relative);
   backgroundMusic.Play();
   

6. Build and run the solution. Click on the button and turn on your speakers. You will hear the background music while the transition effect starts.