I'm trying to implement a parallax rendering to my multi layered backgrounds. It's a classic 2d fighting game like The King of Fighters and Street Fighter.

It may have a stage composed by 5 layers.


1 = Factor of 100% (the original, where generally the characters and the floor are present)

2 = Factor of 75%

3 = Factor of 50% (half of movement and scale of the first layer)

4 = Factor of 25%

5 = Factor of 0% (static, generally stuff very far away of the camera, like the sky, moon, stars etc.)

The camera with scale 1 shows 640 x 384 pixels, and with the max zoon out (scale 0.5) shows 1280 x 768 pixels.

Ie, all the stages of the game have a maximum size of 1280 x 768

These would be the sizes of the images of each layer aforementioned:

100% = 1280 x 768

75% = 1120 x 672

50% = 960 x 576

25% = 800 x 480

0% = 640 x 384

Every works fine when my transform matrix is with scale of 1, since it's only needed to multiply the actual camera position to the factor of the current layer being rendered.

The difficulty arises when the scale of the camera changes. It seems that I need to compensate the scale of the matrix in the parallax factor of the layers, but I can't figure out how.

Any sugestion?


Here some images of an example of a layer with 50% factor (960 x 576):

The first image the camera matrix is with scale 1 (no zoom) and is positioned in left edge of the screen. The second is the same but in the right edge and the last image is with the max zoom out (0.5).

I already correct the scale of the layer, the problem is correct the offset of its translation.

This layer is draw at the position (0, 0) relative to the stage size (1280 x 768) and with a origin Vector of (160 x 96).

enter image description here enter image description here enter image description here

--- UPDATE2 ---

I don't think my problem is in the camera matrix, because the sprites without the parallax processing are drawing correctly with any zoom, but here it is:

var gameResolution = new Vector2(640, 384);

var currentScale = new Vector2(GraphicsDevice.Viewport.TitleSafeArea.Width / gameResolution.X * camera.Zoom,
                               GraphicsDevice.Viewport.TitleSafeArea.Height / gameResolution.Y * zoom);

var middleOfScreen = new Vector2(GraphicsDevice.Viewport.TitleSafeArea.Width - 1) / 2f,
                                 GraphicsDevice.Viewport.TitleSafeArea.Height - 1) / 2f);

var currentTranslation = new Vector2(middleOfScreen.X - cameraPosition.X * currentScale.X,
                                     middleOfScreen.Y - cameraPosition.Y * currentScale.Y);

var cameraMatrix = Matrix.CreateTranslation(currentTranslation.X, currentTranslation.Y, 0);

cameraMatrix.M11 = currentScale.X;
cameraMatrix.M22 = currentScale.Y;
  • \$\begingroup\$ So then zoom is working, but the paralax is scrolling too fast when you are zoomed in? We need the exact problem you are having. \$\endgroup\$
    – Shroeder
    Commented Oct 24, 2014 at 13:15
  • \$\begingroup\$ Yes! The zoom is okay for layers with 100% factor, since I multiply it's position by 1 during the offset calculation of the parallax logic. For layers with different factors, for example 75%, I multiply by 0.75 and it works when my scale matrix is 1, but when happens a zoom out, the offset is incorrect. \$\endgroup\$
    – Emir Lima
    Commented Oct 24, 2014 at 14:20
  • \$\begingroup\$ Are you using your zoom factor as the value to multiply your layers by? for example, if you are zoomed in 15 %, your 75% layer would be 75% + (75% * 15%). Are you tracking your zoom amount, and are you using it in your calculations. You say 'my scale matrix is 1', I was wondering if that is the value of your zoom? \$\endgroup\$
    – Shroeder
    Commented Oct 24, 2014 at 14:29
  • \$\begingroup\$ Yes. 1 means 'no zoom' (original scale). My zoom can go by 1 to 0.5f (reducing the size of everything and making them fit all in the screen). I'll post a screen shot to your understanding in my lunch time. \$\endgroup\$
    – Emir Lima
    Commented Oct 24, 2014 at 14:44
  • \$\begingroup\$ Can you post your camera view matrix code? \$\endgroup\$
    – jgallant
    Commented Oct 24, 2014 at 16:09


You must log in to answer this question.

Browse other questions tagged .