Phoenix, Drawing the Main Background for the Project
Monday, April 25 2005
Drawing the Main Background for the Project.
For this next post I am going to go through the setup and displaying of the main background image for the project. This image will be a static image that will not move or be changed as the application or game is played. Also I just wanted to mention that I have started working with the Beta 2 of the Framework and Visual C# express edition.
Setting up the Media Directories
What we do need to do first is to setup the media directories and configure the application to collect the path location from a configuration file. Go to the project item in the solution explorer right click on the main project name and select Add -> New Folder, call this folder Media. Next select the Media folder and right click on it and select add new folder again (As above), this time call the folder Graphics. This directory will be where we are going to store all of the graphics files that we are going to use in the project.
For this project I have created a Forum on www.ircomm.net that I will use to post the source code and supporting files for the project, here is the direct link to the project forums, http://www.ircomm.net/forums/30/ShowForum.aspx
Now that we have the directories setup we need to get the main background images from the Forums (http://www.ircomm.net/forums/30/ShowForum.aspx) and save them to the Graphics Directory that we just created. At the same time we need to make sure that we add these to the project inside the solution explorer. To do this select the Graphics directory, right click and select add existing Item, browse to the file and select it. Next also in the solution explorer go to the properties of the file or files we just added and change the "Copy to Output Directory" option to "Copy if newer". This will make sure that each time we rebuild the project the most up to date files will be added to the project. Note that this process will automatically create the directories that are needed in the build directories; you will not have to do that as we have added them to the project.
The final part that we need to do in this section is to add a setting to the application that will store the path to the Media Directories. To do this we will use the features of the IDE to add entries to the Application Configuration File. Go to the solution Explorer for the project and expand the Properties node, next you will need to double click on the Settings.settings item, this will open up the Settings Designer for the current Project. In the name field type 'MediaPathGraphics' (without the quotes) set the type to string and the scope to application, these values will determine the value that we are calling from in the application and in the old was this would be the key in an INI file. Next we need to put the directory path to the Graphics files in the value field, this will need to be a valid path as we are going to use this directly in code (As the project goes on I might add error checking to check that it is a valid path and that there are files located in the directory), add the following value making sure that you do not include the quotes '.\Media\Graphics\'.
Creating the Background Object
Now we need to add another class file to the project and call it background.cs, this will be our main background object for the project and will control what image is displayed on the main background and also the animation of the second layer of the background. For the first part we are just going to create the main background image and display it to the screen, copy the following code into the Background.cs file.
using System;
using System.Collections.Generic;
using System.Text;
using System.Drawing;
using Microsoft.DirectX;
using Microsoft.DirectX.Direct3D;
namespace Phoenix
{
/// <summary>
/// This is a basic Class that will be used to display a
/// background image on a directX Device.
/// Used for 2D Drawing on a D3D Device.
/// </summary>
public class Background
{
// Full path and file name to be used as the background
private string backgroundImagePath = "";
private Texture backgroundSpriteTexture;
private Microsoft.DirectX.Direct3D.Sprite backgroundSprite;
private Rectangle backgroundTextureSize;
/// <summary>
/// Sets up the background Object
/// </summary>
/// <param name="device">The DirectX Device that the Background will
/// be assigned to.</param>
/// <param name="BackgroundImagePath">The Full path and filename
/// to the Image file to be used as the background</param>
public Background(Device device, string BackgroundImagePath)
{
backgroundImagePath = BackgroundImagePath;
// Load in the background texture from the file and assign it to
// the sprite
backgroundSpriteTexture = TextureLoader.FromFile(device, backgroundImagePath);
using (Surface s = backgroundSpriteTexture.GetSurfaceLevel(0))
{
SurfaceDescription desc = s.Description;
backgroundTextureSize = new Rectangle(0, 0, desc.Width, desc.Height);
}
backgroundSprite = new Sprite(device);
}
/// <summary>
/// Full file name and Path to the Image
/// to be used as the background image.
/// </summary>
public string BackgroundImagePath
{
get { return backgroundImagePath; }
set { backgroundImagePath = value; }
}
/// <summary>
/// Draw the Background to the Device
/// </summary>
public void Draw()
{
backgroundSprite.Begin(SpriteFlags.AlphaBlend);
backgroundSprite.Draw(backgroundSpriteTexture, backgroundTextureSize,
new Vector3(0, 0, 0), new Vector3(0, 0, 1), Color.White);
backgroundSprite.End();
}
}
}
To use the above class we will need to make some changes to the MainDisplay.cs file. The first thing that we need to do is to set up the background object in the main application, to do this just under where we set up the DirectX Device add the following code (I have included the DirectX device line so that you can see where I have added the code.
private Device device = null; // set up the directX Device
private Background background; // Set up the Background Object
Now that that is done we now need to ad a line to the InitializeGraphics call that will finish the setup of the background object and tell the object what it needs... Add the following line to the end of the InitializeGraphics procedure.
// Setup our Background
background = new Background(device, Properties.Settings.Default.MediaPathGraphics + "background.png");
The above line of code will collect the MediaPathGraphics from the configuration files and will add the background.png file, this is then passed to the background object along with the Directx Device that we wish to display the background on. The Final stage that we need to do is to actually draw the background on the screen. In doing this we want this to be the first item drawn so that all of the objects that are drawn after it are drawn on top of the background. To do this we need to make a change in our OnPaint override.
Add the following code to the OnPaint override between the device.BeginScene(); and the device.EndScene(); calls,
background.Draw();
If you now run the application you should see a space looking background appear on our screen, at the moment this will not look like much but over the next few articles this will have some animated layers on the background that will hopefully simulate that the background is moving.
Well that is all for the moment, I hope that every thing is working well for you, if not the source code will be located in the forum which you can download and have a look at. For the next article I am going to work on an object that will allow us to display some basic text to the screen.
BTW: Please post some feed back on the articles so that I can continue to improve them as I go along,
Thanks...
