XNA - Scrolling Background

If you're familiar with the game Mario Bros 3 or Jetpack Joyride then you're familiar with a scrolling background. Basically a scrolling background is a background that moves either vertically, horizontally, or both during gameplay; this is typically to represent movement to or give the appearance that a character's movement is quicker.

To compile this code, simply create a new windows form, add a picture to your resources(this will be the background image), and add the XNA references. The image that I use will be called <crate> and I will also include the image in this thread. A quick note, I didn't create the image. It was one that I found off of Google and I edited it a bit to give it a better background appearance.

Vb.Net:

Code:

---

Option Strict On
Option Explicit On

Imports Microsoft.Xna.Framework
Imports Microsoft.Xna.Framework.Graphics
Public Class Form2
    Private grafix As GraphicsDevice = Nothing
    Private s_Batch As SpriteBatch = Nothing
    Private background1 As Texture2D
    Private background2 As Texture2D

    'Sets up the graphics device
    Private Function initialize(ByRef surface As PictureBox) As Boolean
        Try
            Dim pparam As New PresentationParameters
            pparam.DeviceWindowHandle = surface.Handle
            pparam.IsFullScreen = False

            Dim grafixAdapt As GraphicsAdapter = GraphicsAdapter.DefaultAdapter

            grafix = New GraphicsDevice(grafixAdapt, GraphicsProfile.HiDef, pparam)


            initialize = True
        Catch ex As Exception
            initialize = False
        End Try
    End Function

    'Converts bitmaps to texture2d
    Public Shared Function BitmapToTexture2D(GraphicsDevice As GraphicsDevice, image As System.Drawing.Bitmap) As Texture2D
        Dim bufferSize As Integer = image.Height * image.Width * 4

        Dim memoryStream As New System.IO.MemoryStream(bufferSize)
        image.Save(memoryStream, System.Drawing.Imaging.ImageFormat.Png)

        memoryStream.Seek(0, IO.SeekOrigin.Begin)
        Dim texture As Texture2D = Texture2D.FromStream(GraphicsDevice, memoryStream, image.Width, image.Height, False)

        memoryStream.Close()
        Return texture
    End Function

    'Loads call the sprites
    Private Sub Load_Content()
        If IsNothing(grafix) = False Then
            s_Batch = New SpriteBatch(grafix)

            background1 = BitmapToTexture2D(grafix, My.Resources.crate)
            background2 = BitmapToTexture2D(grafix, My.Resources.crate)

        Else
            Throw New ArgumentNullException("Grafix")
            Exit Sub
        End If

    End Sub

    Private bg_loop As New System.ComponentModel.BackgroundWorker

    Private Sub Form2_FormClosing(sender As Object, e As System.Windows.Forms.FormClosingEventArgs) Handles Me.FormClosing
        quit = True
    End Sub

    Private Sub Form2_Load(sender As System.Object, e As System.EventArgs) Handles MyBase.Load
        Dim pb_surface As New PictureBox

        'Sets up the properties of Me & pb_surface
        With Me
            .AutoSize = True
            .FormBorderStyle = Windows.Forms.FormBorderStyle.FixedToolWindow
            .Size = New System.Drawing.Size(600, 300)
            .StartPosition = FormStartPosition.CenterScreen
        End With

        With pb_surface
            .Dock = DockStyle.Fill
            .Name = "pb_surface"
        End With

        Me.Controls.Add(pb_surface)

        '----------------------------------------------------------
        '----------------------------------------------------------
        '----------------------------------------------------------

        'Tries to set up the XNA
        Dim bool As Boolean = initialize(pb_surface)
        If bool = True Then
            Call Load_Content()

            AddHandler bg_loop.DoWork, AddressOf bg_loop_DoWork

            'Runs the game loop
            bg_loop.RunWorkerAsync()
        Else
            MessageBox.Show("There was a problem initializing XNA.")
            Me.Close()
        End If

    End Sub

    Private pos As Integer = 0
    Private quit As Boolean = False
    Private Sub bg_loop_DoWork(sender As Object, e As System.ComponentModel.DoWorkEventArgs)
        Do While quit = False
            grafix.Clear(Color.CornflowerBlue)

            With s_Batch
                .Begin()

                If pos > -Me.Controls("pb_surface").Width Then
                    pos -= 1
                Else
                    pos = 0
                End If

                'background1 & 2 are Texture2d
                .Draw(background1, New Rectangle(pos, 0, Me.Controls("pb_surface").Width, Me.Controls("pb_surface").Height), Color.White)
                .Draw(background2, New Rectangle(pos + Me.Controls("pb_surface").Width, 0, Me.Controls("pb_surface").Width, Me.Controls("pb_surface").Height), Color.White)

                .End()
            End With

            grafix.Present()
        Loop
    End Sub

End Class

---

Basically the real magic happens in the backgroundworker's DoWork event. What happens there is it moves the images to the left every time the DoWork event fires. Once the variable pos equals the picturebox's width, we reset pos to 0 so it appears to infinitely move.

Edit - Well I would add the picture, but it's to large, even if I zip it.