Short list of examples (exclusively 2D) as an introduction to XNA

[ThomasJohnsen]

Short list of examples on how XNA can be utilized to create a range of interesting effects (with almost complete focus on 2D).

Disclaimer: This is not a guide for XNA. Nor it is an in-depth discussion about 2D-graphics and implementation thereof in XNA. It is simply meant as a taste of some of the graphics abilities of XNA, written solely to get a reader sufficiently curious to delve deeper into XNA himself/herself.
I expect any reader to be not only an experienced VB programmer but also well-versed in graphical terms such as anti-aliasing, alpha-blending etc.

Prelude: To use XNA in VB is a relative new feature. I had trouble getting it to work with my VB.Net 2010 Express, but was pointed to a satisfactory solution involving downloading VS 2010 Express for Windows Phone, which includes a VB template for XNA games. This template will be the base for all the examples. The fact that XNA is relative new to VB also means that the vast majority of all examples online are written in C#. And since HLSL (High-Level Shader Language used in some of the examples to code a graphics card directly) is very similar to ANSI C, it is adviceable that any reader has a firm grasp on C and C#.
All examples are provided with the entire code at the top of the post. Any template-generated comment is removed and comments are added to the core lines I have added in the example. This will allow a reader to quickly sift through the code and advance to the next example right away, in case the example is understood without further reading. This introduction to XNA is supposed to be an extremely quick study and take no more than 2-4 hours to read through - links are provide in some cases to elaborate on certain topics, should the reader be inclined to study further.

------------------------------------------------------------------------------

Example 1: Displaying a Sprite (examination of the template-generated code and making the most basic of examples).

Public Class Game1
    Inherits Microsoft.Xna.Framework.Game
 
    Private WithEvents graphics As GraphicsDeviceManager
    Private WithEvents spriteBatch As SpriteBatch
 
    Private myfirsttexture As Texture2D 'Add a global texture.
 
    Public Sub New()
        graphics = New GraphicsDeviceManager(Me)
        Content.RootDirectory = "Content"
    End Sub
 
    Protected Overrides Sub Initialize()
        IsMouseVisible = True           'Make the mousepointer visible.
        Window.AllowUserResizing = True 'Allow user to resize window.
        Window.Title = "Example 1"      'Change the title of the window.
        MyBase.Initialize()
    End Sub
 
    Protected Overrides Sub LoadContent()
        spriteBatch = New SpriteBatch(GraphicsDevice)
        myfirsttexture = Content.Load(Of Texture2D)("Koala") 'Loading the texture from the Content project.
        MyBase.LoadContent()
    End Sub
 
    Protected Overrides Sub UnloadContent()
        MyBase.UnloadContent()
    End Sub
 
    Protected Overrides Sub Update(ByVal gameTime As GameTime)
        If Keyboard.GetState.IsKeyDown(Keys.Escape) Then Me.Exit() '** Modified to exit on Escape keypress
 
        MyBase.Update(gameTime)
    End Sub
 
    Protected Overrides Sub Draw(ByVal gameTime As GameTime)
        GraphicsDevice.Clear(Color.Black) '** Modified to be black background instead of CornflowerBlue
 
        spriteBatch.Begin()                                         'Begin a batch of sprites.
        spriteBatch.Draw(myfirsttexture, Vector2.Zero, Color.White) 'Draw our texture to the batch.
        spriteBatch.End()                                           'End the current batch of sprites.
        MyBase.Draw(gameTime)
    End Sub
End Class

Start by creating a new Windows Game (4.0) project and call it Example1. Most notably the solution will include 2 projects - one being your actual project and one being a container for all project content. The content project is similar in many ways to using Resources in VB.Net. Data loaded from the content-project need never be disposed - the contentmanager will make sure all allocated resources are freed before the program terminates.
The main project includes a class called Game1 inheriting a Game-class. This is the class we will be editing and expanding in all of the examples.
Besides the constructor, a Game class has 5 core methods:
* Initialize.
* LoadContent.
* UnloadContent.
* Update.
* Draw.
The 3 first are typically only called once while the last two are called in succession over and over while program is running. Typical program flow is:
Initialize -> LoadContent -> Update -> Draw -> Update -> Draw -> ... -> Update -> Draw -> Update -> UnloadContent.
Commonly Initialize is used for any pre-loading initializations, LoadContent is used to load content from the Content project, Update is used to get input from the user, Draw is used to refresh the display and UnloadContent is used to unload any non-content allocated resources. This is not written in stone though - you can easily load content in the Initialize method or scan for user-input in the Draw method, but as a general rule sticking as much to the common practises makes for readable code.
You have probably noticed already, that XNA is not event-driven. There is a natural flow of Updates and Draws taking place while program is running, allowing you to process user-input etc. without using events. This seperates the Draw method from the traditional VB.Net Paint event and the Update method from any of the Mouse, Keyboard and similar events. Input from the user is handled very differently, which we will get back to in another example.
You might also have noticed, that the Game1 class has two global variables declared for your convenience. You are free to remove or rename them as you see fit, but through the course of these examples, keeping them is a good idea. The first variable is a GraphicsDeviceManager object, used mainly to draw information about the current display-device and events attached to it. It will not be used much in the examples. The second variable is a SpriteBatch. SpriteBatches will be used in almost all examples as it is the only way to draw 2D textures to the display. Sprite is a very old name for a small and moveable bitmap, but it has in XNA terminology been extended to included any size 2D graphical object that can be drawn to the screen.
At this point you should copy the code supplied at the top into the Game1 class (replacing all that was there already).
I have added another global variable of type Texture2D. This variable is used to hold an image, and will be initialized in LoadContent. I added the picture 'Koala.jpg' to the content project (right-click and choose 'Add->Existing Item...') and loaded it into <myfirsttexture> using the method Content.Load(Of Texture2D)("Koala"). You will notice that no extension is supplied. Extensions are never used when loading from content!!!
Besides these comments, I consider Initialize, the rest of LoadContent and Update to be self-explanatory (remember keyboard input will be handled in later examples, so the Update method can be overlooked for now). Thus we turn our attention to the Draw method:
SpriteBatches are initialized with a call to the Begin method specifying which order, blending etc. things drawn to it should use. In our example, no parameters are supplied meaning that default values are used (most notably FIFO sorting and Alpha blending). After the Begin method, there can be any number of Draw methods invoked on the spritebatch, and finally an End method, that effectively terminates the drawing sequence. In this example, only a single call to Draw is made causing the Koala picture to be drawn at Vector2.Zero (which is (0,0)) with Color.White as tint.
At this point feel free to load other images and add variables to hold them. Try drawing several images at the time, preferable some with varying degrees of transparency, on top of each other. Also try drawing at other locations (New Vector2(x, y)) and using other tints.

Before this example is ended, I will take a line or two explaining how vectors and matrices work in XNA. Many of the known operators, such as +, -, *, / and unary -, work on both vectors and matrices. It is perfectly legal to use <VectorX-variable> + <VectorX-variable> and the result will be the expected one. Also <any scalar> * <VectorX> or <VectorX> / <any scalar> will produce the expected results. Matrices however are allways 4x4 (whereas vectors can be Vector2, Vector3 and Vector4), but any matrix can be applied to a vector using the shared VectorX.Transform() using only the apropriate entries. Both vectors and matrices are structures.