Perspective 2D rendering with transformation matrix

Graphics
1

Hi!
Im a student currently busy writing a simple r-type clone and i was wondering if there is a way to create a transformation matrix that creates a depth illusion (stuff in the back appears smaller and moves slower when moving the camera).

I managed to achieve this effect by setting the view and projection property of a base effect and passing it on to the spritebatch.begin method.
public class Camera
{
private Matrix View()
{
var p = new Plane(new Vector3(0, 1, 0), 1);
return Matrix.CreateLookAt(_position, _position + Vector3.Forward, Vector3.Up)
* Matrix.CreateReflection§* Matrix.CreateRotationZ(_rotation * (float)Math.PI/180);
}

    private Matrix GetProjection()
    {
        return Matrix.CreatePerspectiveFieldOfView((float) (FieldOfView * Math.PI/180f), AspectRatio, ZNearPlane, ZFarPlane);
    }

    public Matrix GetTransformationMatrix()
    {
        return Matrix.CreateTranslation(-_position) * GetProjection();
    }

    public BasicEffect GetCameraEffect()
    {
        _spriteEffect.View = View();
        _spriteEffect.Projection = GetProjection();
        return _spriteEffect;
    }
}

baseeffect rendering
baseeffect rendering1137×249 30.7 KB

But apperently it has the drawback that it is impossible to tint/fade textures by changing the color that is passed into the spritebatch.draw method.

Example of the desired effect

I tried the same thing by ditching the baseeffect and using the GetTransformationMatrix Method instead but so far i had no luck

TransformationMatrix
TransformationMatrix1110×272 31.9 KB

Hopefully it is not that much of a rookie mistake that i just failed to look up properly.
Anyway thank you for your time and i’m looking forward for your advice.

2

You will have to use a layer depth and update your GetTransformationMatrix method to return add a scale matrix based on the layer depth. I can’t think of an easy way to update your existing code to track this. You could use different calls to begin and end for each layer in the layer depth and pass the layer depth to GetTransformationMatrix and create the scale matrix that way.

3

Thank you for your quick reply!
Even though it is most unfortunate. :confused:
Would it be a great idea to draw everything separately?
I feel like that might be kinda slow.

4

Not that much slower compared to doing it all in one batch, unless you’re talking thousands and thousands of textures at once. If you want tinting/fading your only option is to handle the scaling manually and drawing them in the correct order.

Wait. You might be able to make use of the overload that takes a scale parameter. It allows for a layer depth as well that you could sort with. Before calling draw you could calculate the scale. The transformation matrix would still position the in screen space. Something along the lines:

float scale = 1;
if (layerDepth == .25f)
   scale = 0.5f;
else if (layerDepth == .5f)
   scale = 0.75f;
else if (layerDepth == 1)
   scale = 1.25f;

// draw with scale

It’s a little hacky but would allow for tinting/fading within the same sprite batch.

5

Thanks again! I will consider that option!