WPF C# Tutorial – Create a space battle shooter game in Visual Studio
- Subject: WPF C# Tutorials
- Learning Time: 3 hours
MainWindow Function –
This is a default function of the WPF projects. This function will load first by default so we can put our own instructions to load with it, this way when the game is debugged it will load of the default settings for this game. Below is the code inside of the main window function.
Start adding the code under the initialize components line. This function is reserved for the default settings for the WPF function such as rectangles, canvas and other things we need for this game to work. Under that line add our own code to it. Lets do this
gameTimer.Interval = TimeSpan.FromMilliseconds(20); this line is setting up the game timer, we want this timer to run every 20 milliseconds. This way we will have a smooth frame rate for this game.
gameTimer.Tick += gameEngine; this line is linking the game timer tick event to the game engine event we made earlier.
gameTimer.Start(); this line is starting the game timer.
MyCanvas.Focus(); this line will focus on the canvas we made in the xaml code. Without this the key down and key up function won’t be working for this game.
The lines below are setting up the background for this game. These will assigned to the main canvas so we can see the starry background on the canvas.
ImageBrush bg = new ImageBrush(); this line is creating a new image brush that will load the image we have downloaded for the background.
bg.ImageSource = new BitmapImage(new Uri(“pack://application:,,,/images/purple.png”)); image brush bg has a image source property which can be used to load the purple.png file from inside of the images folder. The new BitmapImage is allowing us to navigate to the images folder and load the purple.png file to this bg image brush.
bg.TileMode = TileMode.Tile; image brush bg has a tile mode and here we are setting up the background as a repeated tile image for the canvas. The purple.png file is a seamless texture file which means if it repeats over and over it will look seamless on the background.
bg.Viewport = new Rect(0, 0, 0.15, 0.15); this line is setting up the size for the tiles for the background. Inside the new rect we have 0,0 which is the left and top of the background that’s set to 0 and the other 0.15, 0.15 section is set up the height and width of the image.
bg.ViewportUnits = BrushMappingMode.RelativeToBoundingBox; set up the binding of this image to the binding box so it will placed next to each other on the background.
MyCanvas.Background = bg; finally assign the bg image brush to the MyCanvas background property.
Now we assign the image to the player rectangle.
ImageBrush playerImage = new ImageBrush(); we are making a new instance of an image brush class called playerImage.
playerImage.ImageSource = new BitmapImage(new Uri(“pack://application:,,,/images/player.png”)); navigate the player png same way we have done the bg image brush earlier.
player.Fill = playerImage; now assign the player image to the player rectangle using the fill property on the rectangles. This will assign the playerImage image brush to the player rectangle background. The rectangles do not have a background option so we use the fill option.
Selectable codes for the main window are below double check the code when you are entering in the main window function.
gameTimer.Interval = TimeSpan.FromMilliseconds(20);
// link the game engine event to the timer
gameTimer.Tick += gameEngine;
// start the timer
// make my canvas focus of this game
// make a new image brush instance called bg
ImageBrush bg = new ImageBrush();
// pass the purple image as the bg image source
bg.ImageSource = new BitmapImage(new Uri("pack://application:,,,/images/purple.png"));
// set bg to tile mode
bg.TileMode = TileMode.Tile;
// set the height and width of bg image brush
bg.Viewport = new Rect(0, 0, 0.15, 0.15);
// set the bg view port unit
bg.ViewportUnits = BrushMappingMode.RelativeToBoundingBox;
// assign bg as the background of my canvas
MyCanvas.Background = bg;
// make a player image, image brush
ImageBrush playerImage = new ImageBrush();
// load the player image into it
playerImage.ImageSource = new BitmapImage(new Uri("pack://application:,,,/images/player.png"));
// assign the player to the player rectangle fill
player.Fill = playerImage;
Go to the next page for key down and up function codes.