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 <Canvas.Resources>. 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:
- Stay in the 3DInvadersSilverlight project.
- Open MainPage.xaml.cs and add the following line before the first one in the
medIntroduction_MediaEnded method:cnvVideo.Visibility = Visibility.Collapsed; - 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.
- 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:\Silverlight3D\Invaders3D\Media).You can use any other MP3 sound for this exercise. The aforementioned MP3 demo is not included in the accompanying source code. - Stay in the 3DInvadersSilverlight project.
- Right-click on the Media sub-folder in the 3DInvadersSilverlight.Web
project and select Add | Existing item… from the context menu that appears. - Go to the folder in which you copied the downloaded MP3 file
(C:\Silverlight3D\Invaders3D\Media). 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: - 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(); - 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.
What just happened?
You discovered that the speakers worked! Now, the game has att ractive background music.
Leave the speakers on, because your project manager wants more sound effects in the game.
We created a new MediaElement instance (backgroundMusic). However, this time,
we used C# to create it, instead of working on XAML code. We had to add the new
MediaElement to a parent container:
LayoutRoot.Children.Add(backgroundMusic);
Then, we defined the desired Volume level and the Source as a new relative Uri(Uniform
Resource Identifier):
backgroundMusic.Volume = 0.8;
backgroundMusic.Source = new Uri("Media/distorted_velocity._1.mp3",
UriKind.Relative);
The Volume ranges from 0 to 1. It uses a linear scale. We used 0.8 because we want the
future sound effects to be louder than the background music.
The first parameter for the new Uriis the relative path (ClientBin is our base path
in the web project). The second one is the UriKind. In this case, we are working with a
Relative Uri.
Once we set up all the necessary parameters, we called the Play method and Silverlight
started playing the MP3 file:
backgroundMusic.Play();
The code goes on running while the music file is being played. Hence, the game starts and
we can still hear the music.
Time for action – preparing audio files to use them in Silverlight
As with video files, Silverlight 3 does not support all audio formats. Now, we are going to use
Expression Encoder to convert audio files video from WAV (WAVeform audio format) format
to a WMA (Windows Media Audio) format with an adaptive streaming audio encoding
profile, compatible with Silverlight 3:
- Your project manager found two excellent WAV files to use as sound effects for
the game on The Freesound Project website (http://www.freesound.org/): - The first one is the Ufo atmosphere. This can be downloaded from
http://www.freesound.org/samplesViewSingle.php?id=235—
filename 235__Erratic__ufo_atmosphere.wav - The second one is that of a thunder clap. This can be downloaded from
http://www.freesound.org/samplesViewSingle.php?id=2525—
file name 2525__RHumphries__rbh_thunder_03.wavThe Freesound Project website off ers high quality sounds with a Creative Commons License. The website off ers thousands of samples. However, it does not off er songs. - Save or copy the original audio files (235__Erratic__ufo_
atmosphere.wav and 2525__RHumphries__rbh_thunder_03.wav)
in a new folder (C:\Silverlight3D\Invaders3D\Media). - Start Expression Encoder.
- Select File | New Job.
- Now, select File | Import…. Browse to the folder that holds the audio files
(C:\Silverlight3D\Invaders3D\Media) and select the files to import,
235__Erratic__ufo_atmosphere.wav and 2525__RHumphries__rbh_
thunder_03.wav. Then, click on Open. Expression Encoder will analyze the
files for a few seconds, and then it will display a Ready Status for both items. - Expand Profile and select WMA High Quality Audio from the Audio
combo box. This step defines the desired audio profile for the encoding
process. The expanded Audio options will display the output audio’s
codec, mode, bitrate, sample rate, bits per sample, and channels, among
other parameter values, as shown in the following screenshot: - Click on the Output tab, expand Job output and click on the Browse for output
folder button (…) on the right side of the Directory text box. Browse to the folder
that holds the original audio files (C:\Silverlight3D\Invaders3D\Media)
and click on OK. - Select File | Encode or click on the Encode button. Expression Blend will
begin the encoding job and will display the overall progress as shown in the
following screenshot: - After a few seconds (depending on the audio files length and format), Expression
Blend will show Ready in the Status columns. - Right-click on one of the items (235__Erratic__ufo_atmosphere.wma) under
Media Content and select Open File Location in the context menu that appears. A
new Explorer window will appear showing the folder with a new sub-folder with
the default user name as a prefix, the date and the time. Enter in this sub-folder
and move the audio files (235__Erratic__ufo_atmosphere.wma and 2525__
RHumphries__rbh_thunder_03.wma) to the previously mentioned parent folder. - Double-click on the new audio files and listen to them using your default media
player (Windows Media Player or VLC Media Player, among others). Check
whether audio quality, channels and sampling are as good as expected,
as shown in the following screenshot:
What just happened?
You used Expression Blend to encode the original WAV audio files into WMA with adaptive
streaming audio encoding profiles. Now, the audio files are compatible with Silverlight 3.
In this case, we created audio files that were very high quality because
we want to test the game locally. However, we will have to choose a
different encoding profile according to the Internet bandwidth off ered
by the hosting service and the average download speed available for the
game's potential players.
