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

[ThomasJohnsen]

Example 3c: RenderTargets and Blending.

NOTE: This example also uses the GradientBall class from example 3 and 3b. Also the picture Penguins.jpg has been added to Content.

Public Class Game1
    Inherits Microsoft.Xna.Framework.Game
 
    Private WithEvents graphics As GraphicsDeviceManager
    Private WithEvents spriteBatch As SpriteBatch
 
    Private background As Texture2D
    Private rtarget As RenderTarget2D
    Private blendsub As BlendState
    Private blendrevsub As BlendState
 
    Public Sub New()
        graphics = New GraphicsDeviceManager(Me)
        Content.RootDirectory = "Content"
 
        Dim rnd As New Random
 
        For i As Integer = 1 To 20 'Generate 20 gray balls of varying sizes moving in random directions.
            Dim B As New GradientBall(Me, rnd.Next(30, 70), Color.Transparent, _
                                      Color.Gray, New Vector2(rnd.Next(2, 10), rnd.Next(2, 10)))
            Components.Add(B)
        Next
    End Sub
 
    Protected Overrides Sub Initialize()
        MyBase.Initialize()
 
        IsMouseVisible = True
        Window.AllowUserResizing = True
        Window.Title = "Example 3c (Various blendstates)" 'Modified title.
 
        blendsub = New BlendState() With {.AlphaBlendFunction = BlendFunction.Subtract, _
                                          .ColorBlendFunction = BlendFunction.Subtract, _
                                          .AlphaSourceBlend = Blend.One, .AlphaDestinationBlend = Blend.One, _
                                          .ColorSourceBlend = Blend.One, .ColorDestinationBlend = Blend.One}
        blendrevsub = New BlendState() With {.AlphaBlendFunction = BlendFunction.ReverseSubtract, _
                                             .ColorBlendFunction = BlendFunction.ReverseSubtract, _
                                             .AlphaSourceBlend = Blend.One, .AlphaDestinationBlend = Blend.One, _
                                             .ColorSourceBlend = Blend.One, .ColorDestinationBlend = Blend.One}
    End Sub
 
    Protected Overrides Sub LoadContent()
        MyBase.LoadContent()
        spriteBatch = New SpriteBatch(GraphicsDevice)
        background = Content.Load(Of Texture2D)("Penguins")
        rtarget = New RenderTarget2D(GraphicsDevice, background.Width, background.Height)
    End Sub
 
    Protected Overrides Sub UnloadContent()
        MyBase.UnloadContent()
        rtarget.Dispose()
    End Sub
 
    Protected Overrides Sub Update(ByVal gameTime As GameTime)
        If Keyboard.GetState.IsKeyDown(Keys.Escape) Then Me.Exit()
        If Keyboard.GetState.IsKeyUp(Keys.P) Then MyBase.Update(gameTime) 'Will allow you to pause
    End Sub
 
    Protected Overrides Sub Draw(ByVal gameTime As GameTime)
        'Draw the balls to the rtarget RenderTarget2D
        GraphicsDevice.SetRenderTarget(rtarget)
        GraphicsDevice.Clear(Color.Transparent)
        MyBase.Draw(gameTime)
        GraphicsDevice.SetRenderTarget(Nothing)
 
        'Blend with the background.
        If Mouse.GetState.LeftButton = ButtonState.Pressed Then
            GraphicsDevice.Clear(Color.Black)
            spriteBatch.Begin(Nothing, blendsub)
            spriteBatch.Draw(background, Vector2.Zero, Color.White)
            spriteBatch.Draw(rtarget, Vector2.Zero, Color.White)
            spriteBatch.End()
        ElseIf Mouse.GetState.RightButton = ButtonState.Pressed Then
            GraphicsDevice.Clear(Color.White)
            spriteBatch.Begin(Nothing, blendrevsub)
            spriteBatch.Draw(background, Vector2.Zero, Color.White)
            spriteBatch.Draw(rtarget, Vector2.Zero, Color.White)
            spriteBatch.End()
        Else
            GraphicsDevice.Clear(Color.Black)
            spriteBatch.Begin(Nothing, BlendState.Additive)
            spriteBatch.Draw(background, Vector2.Zero, Color.White)
            spriteBatch.Draw(rtarget, Vector2.Zero, Color.White)
            spriteBatch.End()
        End If
    End Sub
End Class

In this example, we will begin in the Draw method. Instead of just drawing the 20 balls, that are initialized in the same way as the one in example 3 or the 100 in example 3b, we choose to draw the balls to a target other than the screen. A socalled RenderTarget, which I have added as a global variable named rtarget and initialized/disposed in LoadContent and UnloadContent respectively, is basically nothing more than a bitmap. The GraphicsDevice is instructed to draw into this bitmap with the SetRenderTarget method, and the call to MyBase.Draw will draw all the 20 gray balls into it. The current render-target is then set to Nothing indicating that we wish to draw directly to the screen again.
Now we encounter one of those gray areas, where I did not use Update for user-input, but rather chose to use the Draw method directly, as it makes for shorter code in this example. Apologies in advance for teaching you bad coding-practise. The Draw method is seperated into 3 parts:
Pressing the LMB: On a black background, the blendsub BlendState is used to draw first the gray balls and then the Penguin texture.
Pressing the RMB: On a white background, the blendrevsub BlendState is used to draw first the gray balls and then the Penguin texture.
No buttons pressed: On a black background, additive blending is used to draw first the gray balls and then the Penguin texture.
Basically all blending is done using the following formula:
ResultColor = SourceColor * SourceBlendColor <ColorBlendFunction> DestinationColor * DestinationBlendColor
ResultAlpha = SourceAlpha * SourceBlendAlpha <AlphaBlendFunction> DestinationAlpha * DestinationBlendAlpha
The blendsub BlendState uses Subtraction as function and One for both blends giving a simple subtraction of source-color and destination-color as result. The blendrevsub is identical except it uses reverse subtraction giving subtraction of destination-color and source-color as result. And finally BlendState.Additive has one for both blends and uses addition as function giving source-color plus destination-color as result.
In these 3 examples, the additive blend is the most interesting giving a glow-like effect, but subtraction, min, max etc. have their uses and can be combined to give a wide range of interesting results.
At this point, you could try reloading your example 3b (100 balls) and try drawing the GradientBalls with additive blending (as opposed to the default Alpha). It should give you some odd modern-art type images with a complete blur of bright colors.