Scrolling texture in cycle

Question

I'm using C# and XNA and I would like to make a scrolling background in my game.

I'm trying to figure out what the best way to implement a scrolling texture that moves in some direction indefinitely. Let's say a space background with stars. So, when ship moves do does the texture, but in opposite direction. Kinda like in "tiling" mode.

My only guess so far is to render two textures which are, let's say moving left, and then just make the most left one jump to right when it's beyond visibility or something similar to this.

So, I was wondering is there some simple way to do it in XNA, maybe some render mode, or is the way I described it is good enough? I just don't want to overcomplicate things. I obviously tried to google first, but found pretty much nothing, but it is strange considering that many games use similar techniques too.

Answer 1

Theory

A scrolling background image is easy to implement with the XNA SpriteBatch class. There are several overloads of the Draw method which let the caller specify a source rectangle. This source rectangle defines the section of the texture that is drawn to the specified destination rectangle on screen:

Changing the position of the source rectangle will change the section of the texture displayed in the destination rectangle.

In order to have the sprite cover the whole screen use the following destination rectangle:

var destination = new Rectangle(0, 0, screenWidth, screenHeight);

If the whole texture should be displayed use the following destination rectangle:

var source = new Rectangle(0, 0, textureWidth, textureHeight);

Than all you have to do is animate the source rectangle's X and Y coordinates and you are done.

Well, almost done. The texture should start again even if the source rectangle moves out of the texture area. To do that you have to set a SamplerState that uses texture wrap. Fortunately the Begin method of the SpriteBatch allows the usage of a custom SamplerState. You can use one of the following:

// Either one of the three is fine, the only difference is the filter quality
SamplerState sampler;
sampler = SamplerState.PointWrap;
sampler = SamplerState.LinearWrap;
sampler = SamplerState.AnisotropicWrap;

Example

// Begin drawing with the default states
// Except the SamplerState should be set to PointWrap, LinearWrap or AnisotropicWrap
spriteBatch.Begin(
    SpriteSortMode.Deferred, 
    BlendState.Opaque, 
    SamplerState.AnisotropicWrap, // Make the texture wrap
    DepthStencilState.Default, 
    RasterizerState.CullCounterClockwise
);

// Rectangle over the whole game screen
var screenArea = new Rectangle(0, 0, 800, 600);

// Calculate the current offset of the texture
// For this example I use the game time
var offset = (int)gameTime.TotalGameTime.TotalMilliseconds;

// Offset increases over time, so the texture moves from the bottom to the top of the screen
var destination =  new Rectangle(0, offset, texture.Width, texture.Height);

// Draw the texture 
spriteBatch.Draw(
    texture, 
    screenArea, 
    destination,
    Color.White
);

Answer 2

Microsoft has a XNA tutorial that does exactly this, you can grab the source code and read up on the actual programming logic behind a scrolling background. Bonus points they do parallax scrolling for a nice effect.

Link: http://xbox.create.msdn.com/en-US/education/tutorial/2dgame/getting_started