Microsoft XNA: Breakout Step by Step

A few days ago, surfing the great and mighty Internet, came across Microsoft XNA Studio. Not that I heard about this framework for the first time, but all the previous times somehow passed by, there was no time to understand it at all.
This time, something pulled me to dig deeper. Rightly judging that to get acquainted with the library there is no better method than to implement anything on it, and also having a free evening, I decided to write something simple, such as Arkanoid (Brick Out), which I have loved since childhood, not for personal gain, but for familiarization.

This is my first article on Habré, please do not kick with your feet

The meaning of this article is to show how easy it is to start creating your games using XNA and, in fact, give an impetus for further study of this platform. Therefore, the full-fledged game does not claim, the graphics - none, like the artist from me. Yes, and physics could be more realistic, but this is already beyond the scope of this article, I am sure that those interested in the development of games will find a lot of decent (and not very) materials in the network.
')
Sources can be downloaded here.



So what is Microsoft XNA?

Microsoft XNA is a toolkit and library for developing multi-platform 2D and 3D games in a managed Microsoft Managed Runtime Environment. Windows, Microsoft Xbox 360 and Microsoft Zune platforms are supported. Theoretically, you can write in any .Net language, in any IDE, but only C # and XNA Game Studio Express and all versions of Visual Studio 2005 and higher are officially supported. XNA also provides the ability to port games to supported platforms with minimal changes.

The latest version at the time of writing is Microsoft XNA Game Studio 3.1 (73.2 MB)

Creating a project

Create a new project - XNA Game Studio 3.1 - Windows Game (3.1)



Master will create a skeleton of the game:



The most interesting for us is the Game1.cs file, which defines the Game1 class, inherited from Microsoft.Xna.Framework.Game, where we will develop our game.
The Game1 class overrides the following Game methods:

void Initialize () - Called once to initialize resources before the game starts.
void LoadContent () - Called once, used to load content (sprites, etc.)
void UnloadContent () - Called once, used to upload content
void Update (GameTime gameTime) - This method implements the actual game logic, handling of collisions, handling keyboard or joystick events, playing audio, etc.
void Draw (GameTime gameTime) - Called to draw the playing field.

At the moment the compiled game looks like this

Add content

Add game resources, in this case, background pictures of bricks, rackets and balls - Content (Right Click) -> Add -> Existing Item ...



Pay attention to the Asset Name property, we use it to create the Texture2D object necessary for further animation.

Draw the background of the playing field

Download the image for the background of the playing field:

private Rectangle _viewPortRectangle; // private Texture2D _background; // protected override void LoadContent() { <... skip ...> // _viewPortRectangle = new Rectangle(0, 0, graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height); _background = Content.Load<Texture2D>( @"background" ); <... skip ...> } * This source code was highlighted with Source Code Highlighter .

1. private Rectangle _viewPortRectangle; // private Texture2D _background; // protected override void LoadContent() { <... skip ...> // _viewPortRectangle = new Rectangle(0, 0, graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height); _background = Content.Load<Texture2D>( @"background" ); <... skip ...> } * This source code was highlighted with Source Code Highlighter .
2. private Rectangle _viewPortRectangle; // private Texture2D _background; // protected override void LoadContent() { <... skip ...> // _viewPortRectangle = new Rectangle(0, 0, graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height); _background = Content.Load<Texture2D>( @"background" ); <... skip ...> } * This source code was highlighted with Source Code Highlighter .
4. private Rectangle _viewPortRectangle; // private Texture2D _background; // protected override void LoadContent() { <... skip ...> // _viewPortRectangle = new Rectangle(0, 0, graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height); _background = Content.Load<Texture2D>( @"background" ); <... skip ...> } * This source code was highlighted with Source Code Highlighter .
5. private Rectangle _viewPortRectangle; // private Texture2D _background; // protected override void LoadContent() { <... skip ...> // _viewPortRectangle = new Rectangle(0, 0, graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height); _background = Content.Load<Texture2D>( @"background" ); <... skip ...> } * This source code was highlighted with Source Code Highlighter .
6. private Rectangle _viewPortRectangle; // private Texture2D _background; // protected override void LoadContent() { <... skip ...> // _viewPortRectangle = new Rectangle(0, 0, graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height); _background = Content.Load<Texture2D>( @"background" ); <... skip ...> } * This source code was highlighted with Source Code Highlighter .
7. private Rectangle _viewPortRectangle; // private Texture2D _background; // protected override void LoadContent() { <... skip ...> // _viewPortRectangle = new Rectangle(0, 0, graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height); _background = Content.Load<Texture2D>( @"background" ); <... skip ...> } * This source code was highlighted with Source Code Highlighter .
8. private Rectangle _viewPortRectangle; // private Texture2D _background; // protected override void LoadContent() { <... skip ...> // _viewPortRectangle = new Rectangle(0, 0, graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height); _background = Content.Load<Texture2D>( @"background" ); <... skip ...> } * This source code was highlighted with Source Code Highlighter .
9. private Rectangle _viewPortRectangle; // private Texture2D _background; // protected override void LoadContent() { <... skip ...> // _viewPortRectangle = new Rectangle(0, 0, graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height); _background = Content.Load<Texture2D>( @"background" ); <... skip ...> } * This source code was highlighted with Source Code Highlighter .
10. private Rectangle _viewPortRectangle; // private Texture2D _background; // protected override void LoadContent() { <... skip ...> // _viewPortRectangle = new Rectangle(0, 0, graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height); _background = Content.Load<Texture2D>( @"background" ); <... skip ...> } * This source code was highlighted with Source Code Highlighter .
12. private Rectangle _viewPortRectangle; // private Texture2D _background; // protected override void LoadContent() { <... skip ...> // _viewPortRectangle = new Rectangle(0, 0, graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height); _background = Content.Load<Texture2D>( @"background" ); <... skip ...> } * This source code was highlighted with Source Code Highlighter .
13. private Rectangle _viewPortRectangle; // private Texture2D _background; // protected override void LoadContent() { <... skip ...> // _viewPortRectangle = new Rectangle(0, 0, graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height); _background = Content.Load<Texture2D>( @"background" ); <... skip ...> } * This source code was highlighted with Source Code Highlighter .
14. private Rectangle _viewPortRectangle; // private Texture2D _background; // protected override void LoadContent() { <... skip ...> // _viewPortRectangle = new Rectangle(0, 0, graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height); _background = Content.Load<Texture2D>( @"background" ); <... skip ...> } * This source code was highlighted with Source Code Highlighter .

private Rectangle _viewPortRectangle; // private Texture2D _background; // protected override void LoadContent() { <... skip ...> // _viewPortRectangle = new Rectangle(0, 0, graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height); _background = Content.Load<Texture2D>( @"background" ); <... skip ...> } * This source code was highlighted with Source Code Highlighter .

Background drawing

1. protected override void Draw (GameTime gameTime)
2. {
3. GraphicsDevice.Clear (Color.CornflowerBlue);
5. spriteBatch.Begin (SpriteBlendMode.AlphaBlend);
7. // Draw the background
8. spriteBatch.Draw (_background, _viewPortRectangle, Color.White);
10. spriteBatch.End ();
12. base .Draw (gameTime);
13. }

* This source code was highlighted with Source Code Highlighter .

The SpriteBatch.Begin method prepares the graphics device for rendering sprites, SpriteBatch.End completes the drawing process and returns the device to its initial state. All SpriteBatch.Draw methods should be enclosed in SpriteBatch.Begin - SpriteBatch.End.

Creating a game object

Create a GameObject class that encapsulates any of our game objects:

1. using Microsoft.Xna.Framework;
2. using Microsoft.Xna.Framework. Graphics ;
4. namespace Arkanoid
5. {
6. public class GameObject
7. {
8. public Texture2D Sprite { get ; set ; } // Sprite
10. public Vector2 Position; // Position
11. public Vector2 Velocity; // speed
12. public int Width { get { return Sprite.Width; }} // Width
13. public int Height { get { return Sprite.Height; }} // Height
14. public bool IsAlive { get ; set ; } // object is alive
15. public Rectangle Bounds // Object Borders
16. {
17. get
18. {
19. return new Rectangle (( int ) Position.X, ( int ) Position.Y, Width, Height);
20. }
21. }
23. // Expand motion on the horizontal axis
24. public void ReflectHorizontal ()
25. {
26. Velocity.Y = -Velocity.Y;
27. }
29. // Spreading on the vertical axis
30. public void ReflectVertical ()
31. {
32. Velocity.X = -Velocity.X;
33. }
35. public GameObject (Texture2D sprite)
36. {
37. Sprite = sprite;
38. IsAlive = true ;
39. Position = Vector2.Zero;
40. Velocity = Vector2.Zero;
41. }
42. }
43. }

* This source code was highlighted with Source Code Highlighter .

Rendering and animation of the racket

First, create an object representing the racket and place it in the middle of the playing field a little higher from its bottom edge.

1. private GameObject _paddle; // racket
3. protected override void LoadContent ()
4. {
5. <... skip ...>
7. // Create a racket, the starting position in the middle of the playing field, above the bottom edge
8. _paddle = new GameObject (Content.Load <Texture2D> ( @ "paddle" ));
9. _paddle.Position = new Vector2 ((_ viewPortRectangle.Width - _paddle.Width) / 2,
10. _viewPortRectangle.Height - _paddle.Height - 20);
12. <... skip ...>
13. }

* This source code was highlighted with Source Code Highlighter .

Drawing the racket on the screen

1. protected override void Draw (GameTime gameTime)
2. {
3. <... skip ...>
5. spriteBatch.Draw (_paddle.Sprite, _paddle.Position, Color.White);
7. <... skip ...>
8. }

* This source code was highlighted with Source Code Highlighter .

At this stage, if you compile the application, we get something like this:



It would be Neplho to make the racket respond to keystrokes, for this we add the following code to the Update method

1. protected override void Update (GameTime gameTime)
2. {
3. <... skip ...>
5. KeyboardState keyboardState = Keyboard.GetState ();
7. // Move the racket to the right
8. if (keyboardState.IsKeyDown (Keys.Right))
9. _paddle.Position.X + = 6f;
11. // Move the racket to the left
12. if (keyboardState.IsKeyDown (Keys.Left))
13. _paddle.Position.X - = 6f;
15. // Restrict the movement of the racket to the playing field
16. _paddle.Position.X = MathHelper.Clamp (_paddle.Position.X, 0, _viewPortRectangle.Width - _paddle.Width);
18. <... skip ...>
19. }

* This source code was highlighted with Source Code Highlighter .

Bricks drawing

Create an array of GameObject representing the bricks that we actually break.

1. private int _brickPaneWidth = 10; // How many Cypriots draw in width
2. private int _brickPaneHeight = 5; // How many Cypriots draw in height
3. private Texture2D _brickSprite; // Sprite bricks
4. private GameObject [,] _bricks; // Array of bricks

* This source code was highlighted with Source Code Highlighter .

Add the following code to the LoadContent () method

1. protected override void LoadContent ()
2. {
3. <... skip ...>
5. // Create an array of bricks
6. _brickSprite = Content.Load <Texture2D> ( @ "brick" );
7. _bricks = new GameObject [_brickPaneWidth, _brickPaneHeight];
9. for ( int i = 0; i <_brickPaneWidth; i ++)
10. {
11. for ( int j = 0; j <_brickPaneHeight; j ++)
12. {
13. _bricks [i, j] = new GameObject (_brickSprite)
14. {
15. Position = new Vector2 (i * 55 + 120, j * 25 + 100)
16. };
17. }
18. }
20. <... skip ...>
21. }

* This source code was highlighted with Source Code Highlighter .

Drawing an array of bricks, the search is performed if the brick is “alive”, i.e. not broken by the ball

1. protected override void Draw (GameTime gameTime)
2. {
3. <... skip ...>
5. // Draw Bricks
6. foreach ( var brick in _bricks)
7. if (brick.IsAlive)
8. spriteBatch.Draw (brick.Sprite, brick.Position, Color.White);
10. <... skip ...>
11. }

* This source code was highlighted with Source Code Highlighter .

At this stage, the playing field looks like this.

Ball drawing

Create a ball object

1. private GameObject _ball; // Ball
3. protected override void LoadContent ()
4. {
5. <... skip ...>
7. // Making the ball, the starting position in the middle of the racket,
8. // starting direction - right, up
9. _ball = new GameObject (Content.Load <Texture2D> ( @ "ball" ));
10. _ball.Position = new Vector2 ((_ viewPortRectangle.Width - _ball.Width) / 2,
11. _viewPortRectangle.Height - _paddle.Height - _ball.Height - 20);
12. _ball.Velocity = new Vector2 (3, -3);
13. <... skip ...>
14. }

* This source code was highlighted with Source Code Highlighter .

To animate the ball, add a new UpdateBall () method, and call it in the Update () method. We will need this method in the future to handle ball collisions with bricks and a racket.

1. private void UpdateBall ()
2. {
3. _ball.Position + = _ball.Velocity;
4. }
6. protected override void Update (GameTime gameTime)
7. {
8. <... skip ...>
10. // Move the ball
11. UpdateBall ();
13. <... skip ...>
14. }

* This source code was highlighted with Source Code Highlighter .

To draw a ball, add the following code to the Draw () method

1. protected override void Draw (GameTime gameTime)
2. {
3. <... skip ...>
5. // Draw a ball
6. spriteBatch.Draw (_ball.Sprite, _ball.Position, Color.White);
8. <... skip ...>
9. }

* This source code was highlighted with Source Code Highlighter .

At the moment, we have an almost completely finished playing field, but without collision handling the ball immediately flies out of the playing field. Add handling ball collisions with the playing field, bricks and racket

Collision handling

Let's create a new method that determines the place of collision of objects and changes the direction of the ball's flight.

1. // Determination of the side of the collision and reflection of the ball's direction of flight
2. public void Collide (GameObject gameObject, Rectangle rect2)
3. {
5. // Object collided from above or below, we reflect the direction of flight horizontally
6. if (rect2.Left <= gameObject.Bounds.Center.X && gameObject.Bounds.Center.X <= rect2.Right)
7. gameObject.ReflectHorizontal ();
9. // Object collided to the left or to the right, reflect the direction of the flight vertically
10. else if (rect2.Top <= gameObject.Bounds.Center.Y && gameObject.Bounds.Center.Y <= rect2.Bottom)
11. gameObject.ReflectVertical ();
12. }

* This source code was highlighted with Source Code Highlighter .

Add the following code to the UpdateBall () method

1. private void UpdateBall ()
2. {
3. // The future position of the ball is needed to prevent the ball from sticking on the object's surface
4. Rectangle nextRect = new Rectangle (( int ) (_ ball.Position.X + _ball.Velocity.X),
5. ( int ) (_ ball.Position.Y + _ball.Velocity.Y),
6. _ball.Width, _ball.Height);
8. // Facing the top edge of the playing field
9. if (nextRect.Y <= 0)
10. _ball.ReflectHorizontal ();
12. // When pushing the ball against the bottom edge of the playing field, the ball "dies"
13. if (nextRect.Y> = _viewPortRectangle.Height - nextRect.Height)
14. {
15. _ball.IsAlive = false ;
16. }
18. // Collision of the ball with the left or right edge of the playing field
19. if ((nextRect.X> = _viewPortRectangle.Width - nextRect.Width) || nextRect.X <= 0)
20. {
21. _ball.ReflectVertical ();
22. }
24. // Collision of the ball with the racket
25. if (nextRect.Intersects (_paddle.Bounds))
26. Collide (_ball, _paddle.Bounds);
28. // Collision of a ball with bricks
29. foreach ( var brick in _bricks)
30. {
31. if (nextRect.Intersects (brick.Bounds) && brick.IsAlive)
32. {
33. brick.IsAlive = false ;
34. Collide (_ball, brick.Bounds);
35. }
36. }
38. _ball.Position + = _ball.Velocity;
39. }

* This source code was highlighted with Source Code Highlighter .

So what happened



Of course, the physics in the game, to put it mildly, no, sometimes the ball sticks when colliding with a moving racket. But, again, the meaning of this article is familiarity with the environment of Microsoft XNA Game Studio, and, I must say, it copes well with the routine, freeing up developer time to focus on the logic of the game.

Sources can be downloaded here.

Additional resources:
creators.xna.com
XNAWiki

Ps. Many thanks to ivv for the invitation.
Pps. Thanks for the karma, moved to XNA.

The text was prepared in Habra Editor