A 3D game must be attractive. It has to offer amazing effects for the main characters and in the background. A spaceship has to fly through a meteor shower. An asteroid belt has to draw waves while a UFO pursues a spaceship. A missile should make a plane explode. The real world shows us things moving everywhere. Most of these scenes, however, aren’t repetitive sequences. Hence, we have to combine great designs, artificial intelligence (AI), and advanced physics to create special effects.
Working with 3D characters in the background
So far, we have added physics, collision detection capabilities, life, and action to our 3D scenes. We were able to simulate real-life effects for the collision of two 3D characters by adding some artificial intelligence. However, we need to combine this action with additional effects to create a realistic 3D world. Players want to move the camera while playing so that they can watch amazing effects. They want to be part of each 3D scene as if it were a real life situation. How can we create complex and realistic backgrounds capable of adding realistic behavior to the game?
We can do this combining everything we have learned so far with a good object-oriented design. We have to create random situations combined with more advanced physics. We have to add more 3D characters with movement to the scenes. We must add complexity to the backgrounds.
We can work with many independent physics engines to work with parallel worlds. In real-life, there are concurrent and parallel words. We have to reproduce this behavior in our 3D scenes.
Time for action – adding a transition to start the game
Your project manager does not want the game to start immediately. He wants you to add a butt on in order to allow the player to start the game by clicking on it. As you are using Balder, adding a butt on is not as simple as expected.
We are going to add a butt on to the main page, and we are going to change Balder’s default game initialization:
- Stay in the 3DInvadersSilverlight project.
- Expand App.xaml in the Solution Explorer and open App.xaml.cs––the C# code for App.xaml.
- Comment the following line of code (we are not going to use Balder’s services in this class):
//using Balder.Silverlight.Services;
- Comment the following line of code in the event handler for the Application_Startup event, after the line this.RootVisual = new MainPage();:
//TargetDevice.Initialize<InvadersGame>();
- Open the XAML code for MainPage.xaml and add the following lines of code after the line
(You will see a butt on with the ti tle Start the game.): <!-- A button to start the game -->
<Button x_Name="btnStartGame"
Content="Start the game!"
Canvas.Left="200" Canvas.Top="20"
Width="200" Height="30" Click="btnStartGame_Click">
</Button> - Now, expand MainPage.xaml in the Solution Explorer and open MainPage.xaml.cs––the C# code for MainPage.xaml.
- Add the following line of code at the beginning (As we are going to use many of Balder’s classes and interfaces.):
using Balder.Silverlight.Services;
- Add the following lines of code to program the event handler for the button’s Click event (this code will initialize the game using Balder’s services):
private void btnStartGame_Click(object sender, RoutedEventArgs e)
{
btnStartGame.Visibility = Visibility.Collapsed;
TargetDevice.Initialize<InvadersGame>();
} - Build and run the solution. Click on the Start the game! butt on and the UFOs will begin their chase game. The butt on will make a transition to start the game, as shown in the following screenshots:
What just happened?
You could use a Start the game! butt on to start a game using Balder’s services. Now, you will be able to offer the player more control over some parameters before starting the game.
We commented the code that started the game during the application start-up. Then, we added a button on the main page (MainPage). The code programmed in its Click event handler initializes the desired Balder.Core.Game subclass (InvadersGame) using just one line:
TargetDevice.Initialize<InvadersGame>();
This initialization adds a new specific Canvas as another layout root’s child, controlled by Balder to render the 3D scenes. Thus, we had to make some changes to add a simple butt on to control this initialization.
Time for action – creating a low polygon count meteor model
The 3D digital artists are creating models for many aliens. They do not have the time to create simple models. Hence, they teach you to use Blender and 3D Studio Max to create simple models with low polygon count. Your project manager wants you to add dozens of meteors, to the existing chase game. A gravitational force must attract these meteors and they have to appear in random initial positions in the 3D world.
First, we are going to create a low polygon count meteor using 3D Studio Max. Then, we are going to add a texture based on a PNG image and export the 3D model to the ASE format, compatible with Balder. As previously explained, we have to do this in order to export the ASE format with a bitmap texture definition enveloping the meshes.
We can also use Blender or any other 3D DCC tool to create this model. We have already learned how to export an ASE format from Blender. Thus, this time, we are going to learn the necessary steps to do it using 3D Studio Max.
- Start 3D Studio Max and create a new scene.
- Add a sphere with six segments.
- Locate the sphere in the scene’s center.
- Use the Uniform Scale tool to resize the low polygon count sphere to 11.329 in the three axis, as shown in the following screenshot:
- Click on the Material Editor button.
- Click on the first material sphere, on the Material Editor window’s upper-left corner.
- Click on the small square at the right side of the Diffuse color rectangle, as shown in the following screenshot:
- Select Bitmap from the list shown in the Material/Map Browser window that pops up and click on OK.
- Select the PNG file to be used as a texture to envelope the sphere. You can use Bricks.PNG, previously downloaded from http://www.freefoto.com/. You just need to add a reference to a bitmap file. Then, click on Open. The Material Editor preview panel will show a small sphere thumbnail enveloped by the selected bitmap, as shown in the following screenshot:
- Drag the new material and drop it on the sphere. If you are facing problems, remember that the 3D digital artist created a similar sphere a few days ago and he left the meteor.max file in the following folder (C:Silverlight3DInvaders3D3DModelsMETEOR).
- Save the file using the name meteor.max in the previously mentioned folder.
- Now, you have to export the model to the ASE format with the reference to the texture. Therefore, select File | Export and choose ASCII Scene Export (*.ASE) on the Type combo box. Select the aforementioned folder, enter the file name meteor.ase and click on Save.
- Check the following options in the ASCII Export dialog box. (They are unchecked by default):
- Mesh Normals
- Mapping Coordinates
- Vertex Colors
The dialog box should be similar to the one shown in the following screenshot:
- Click on OK. Now, the model is available as an ASE 3D model with reference to the texture. You will have to change the absolute path for the bitmap that defines the texture in order to allow Balder to load the model in a Silverlight application.