3D Game Development with Microsoft Silverlight 3

«»

SHARE & COMMENT :

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:

  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:\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.
    

  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:\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:
  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.

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:

  1. 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/):
    1. 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

    2. 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.wav

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

  2. 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).
  3. Start Expression Encoder.
  4. Select File | New Job.
  5. 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.
  6. 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:
  7. 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.
  8. 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:
  9. After a few seconds (depending on the audio files length and format), Expression
    Blend will show Ready in the Status columns.
  10. 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.
  11. 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.

«»

Comments

comments

Pages: 1 2 3 4 5

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Speak Your Mind

*

Close
Please support the site
By clicking any of these buttons you help our site to get better