I’ll try to keep this short & clear so ( hopefully ) I’ll have to time actually code tonight.
In first post we talked about Fixed and Tiled Backgrounds
In second post we talked about Big Huge Backgrounds
In this post we’ll talk about Flowing Backgrounds. I believe it sounds silly but couldn’t find any other ( better ) name for it. What we’re going to do is create a layer which will constantly move even if the player doesn’t , like clouds in the background.
They’ll move even if the player doesn’t and they move faster ( relative to the player and camera ) if the player moves in opposite direction etc etc.
We’ll create and move a tiled background for this post but you can also use exact same logic for moving other background types like Big Huge ones.
Flowing Background
OK now as I said we’ll use a tiled background for this one so our FlowingBackground class will be pretty close to TiledBackground class we created earlier. Let’s have a look at how Tiled Backgrounds work again ,
Remember this picture from Fixed & Tiled Background post? It’s all same ,
{
privatereadonlyTexture2D _texture;
readonlyint _horizontalTileCount;
readonlyint _verticalTileCount;
Vector2 _startCoord;
privatefloat _speed;
publicRectangle _previousCameraRectangle;
public FlowingBackground(Texture2D texture, float speed, int environmentWidth, int environmentHeight)
{
_texture = texture;
_horizontalTileCount = (int)(Math.Round((double)environmentWidth / _texture.Width) +1);
_verticalTileCount = (int)(Math.Round((double)environmentHeight / _texture.Height) +1);
_startCoord =newVector2(0, 0);
_speed = speed;
}
}
Again we have a texture , horizontal tile count , vertical tile count , start coordination and as an addition we also have a speed and Camera position data from previous update.
Nothing fancy in constructor as you can see , we just set the variables we need and calculate vertical and horizontal tile counts.
Oh and by the way , I forgot to say it before , we will move our background in X dimension. Of course you can also implement something more complex with a bit of extra code but for the sake of simplicity , we’ll move it in X dimension with a constant speed set in constructor.
{
var dif = game.CameraService.CameraRectangle.X – _previousCameraRectangle.X;
_previousCameraRectangle = game.CameraService.CameraRectangle;
_startCoord.X = _startCoord.X + (this._speed) – dif;
if ((–_startCoord.X >= _texture.Width) || (_startCoord.X >= _texture.Width))
_startCoord.X =0;
_startCoord.Y = ((game.CameraService.CameraRectangle.Y / _texture.Height) * _texture.Height) – game.CameraService.CameraRectangle.Y;
}
As you can see our Update method will be a bit different than Tiled Background Update method.
At first we get the Camera.X difference between previous and current Camera Position. Remember in this example , our camera is following player character so the difference in Camera.X is almost same as the difference in Player.Position.X ( just not in map edges ). This is a nice effect but you can also remove this of course.
Then we update the start coordination for our tiles and since we’re only changing X , we have to check if the start coordination is in the range we want. ( talked about it a bit in Tiled Background part )
{
for (int i =0; i < _verticalTileCount; i++)
{
for (int j =–1; j < _horizontalTileCount; j++)
{
spriteBatch.Draw(_texture,
newRectangle(
(int)_startCoord.X + (j * _texture.Width),
(int)_startCoord.Y + (i * _texture.Height),
_texture.Width, _texture.Height),
Color.White);
}
}
}
Draw method is exactly same as Tiled Background as you can see , nothing fancy here , just iterating through X & Y and drawing a 2D matrix , tile by tile.
And now it should look something like this ;
.png "CodeMonekyGetUpGetCoffee (5)")
Well it looks same as Tiled Background as an image but trust me , it moves!
There are a few more background types I want to talk about in the future like , progress indicator or parallax ( I’m not even sure that is what people call parallax really , but it’s such a cool name )background.
Hope you find it useful !
Visual Studio 2010 Solution