Adding Parallax scrolling to your XNA code

Written by Dean Edis on .

In our previous article we covered how we can write a simplified Photoshop-style API for displaying multiple textures on the screen.

In this article we will develop the code further to allow parallax scrolling. Parallax scrolling is used widely in games, and is useful for causing objects in a 2D scene to appear ‘distant’ by making them scroll at a slower rate than those ‘in front’.

To do this we build on our existing Layers class, as in principle we want to create a single ‘layer-able’ object containing multiple overlaid textures, creating ParallaxLayer.

For example:

First we need to allow the position of a Layer to be set. That’s easy enough - We just add a Vector2 Layer.Origin property and use this value in the TextureLayer.Draw(...) code:

public override void Draw(SpriteBatch spriteBatch)

{

 spriteBatch.Draw(m_texture, Origin, CreateWhite(ActualOpacity));

}

Then, when calling ParallaxLayer.Update(...) we scale the Origin of each Layer according to a preset amount:

public override void Update(GameTime gameTime)

{

 foreach (var layerInfo in m_layerInfos)

 layerInfo.Layer.Origin = Origin * layerInfo.MovementFactor;

 

 base.Update(gameTime);

}

 

When adding each layer to the ParallaxLayer object we also set the movementFactor value (typically in the range of 0.0f to 1.0f).

In the example code we use these values:

// Create a Layers object, and define the order of the layers to display.

m_rootLayers = new ParallaxLayer();

m_rootLayers.Add(cloudsLayer, 0.2f);

m_rootLayers.Add(mountainsFarLayer, 0.6f);

m_rootLayers.Add(mountainsNearLayer, 1.0f);

...to create a scene looking like this:

The scene can be scrolled using the arrow keys to show how each Layer moves relative to the others.

I hope you find the code useful!

DOWNLOAD SOURCE

Adding Photoshop-style layers to your XNA code

Written by Dean Edis on .

We recently added a ‘credits’ stage to our Lunar Panda Deluxe XNA game, and wanted a simple way of fading from one screen-sized bitmap to another. We would chain these bitmaps together so we could show several ‘stills’ from the game as a simple slideshow.

This prompted me to write our Layers class.

Simply put, this mimics the sort of basic image layering you would see in a paint package such as GIMP or Photoshop. The code supports nested layers with varying opacity, and is easily extended to support many more features.

Being able to nest layers is a very powerful feature. You could assign a game HUD as one (or more) layer, and have several layers to represent your actual game screen. In Lunar Panda this could be the ‘space’ background image, animated moons, Mr Panda, active obstacles, and the moon terrain itself.

Here is a screenshot showing three separate layers superimposed on each other. One of them has a custom opacity applied:

 

The bottom-most layer is a blue/yellow plasma effect. Then comes a slightly transparent chequered pattern, then the ‘PAWS’ texture on top.

You can download the fully documented Layers code (including the example source and pre-built binary) from here:

DOWNLOAD SOURCE

In the example code we create the Layers object in the LoadContent() routine. First we load the Texture2D objects:

var patternLayer = new TextureLayer(Content.Load("pattern"));
var plasmaLayer = new TextureLayer(Content.Load("plasma"));
var pawsLayer = new TextureLayer(Content.Load("paws"));

 

Then tweak the opacity values:

// Tweak layer opacity.
plasmaLayer.Opacity = 0.9f;

 ...and finally add them to our Layers object:

// Create a Layers object, and define the order of the layers to display.

m_rootLayers = new Layers(); 
m_rootLayers.Add(patternLayer); 
m_rootLayers.Add(plasmaLayer); 
m_rootLayers.Add(pawsLayer);

Drawing the layers is now simple:

protected override void Draw(GameTime gameTime)
{ 
GraphicsDevice.Clear(Color.CornflowerBlue); 
m_spriteBatch.Begin(); 
m_rootLayers.Draw(m_spriteBatch); 
m_spriteBatch.End(); base.Draw(gameTime); 
}

In a future post I’ll show how to extend this code to animate the opacity values over time, allow layers to be used as image masks, and support parallax scrolling.

Charlie Brooker: Videogames Changed the World

Written by Adrian Killens on .

Back in 2010 I took on a little project that I called 'Song A Week' for which I wrote and recorded one song every week for an entire year. A by-product of which was a selection of YouTube clips that I made to go with some of those songs. One such video featured Steve Bradshaw, a friend of mine, writing a video game on the ZX Spectrum called Chasing Aidy. I'd actually forgotten all about this until Channel 4 contacted me a little while ago asking if they could use part of it in an upcoming video game documentary. Obviously I said yes. The documentary turned out to be Charlie Brooker: Videogames Changed the World. So there go, a few seconds of fame and I even got my name in the end credits!

If you haven't already seen it then go check it out on 4OD and if you want to see the entire clip then here it is in all its low-fi glory!

Aidy Interview on BBC Radio Cambridgeshire

Written by Adrian Killens on .

Just in case you missed it, here's my interview with Mark Rumble that I did last Sunday on BBC Radio Cambridgeshire. We talk about the new video game consoles and our mutual appreciation of the Sega Master System.