I want to do a transition like those in the Metroid games. Here is an example of what i mean: https://www.youtube.com/watch?v=RKJ3MAi0ZI0.
You enter the door, the screen fades to black and the camera scrolls to the next room where the screen fades in again.

I'm using Monogame Extended and i have a TiledMap. I use them like described in the documentation. I have a camera with a view matrix and a projection matrix

   Camera2D camera;


   public void DrawGame(GameTime gameTime, SpriteBatch spriteBatch)
        var viewMatrix = camera.GetViewMatrix();
        var projectionMatrix = Matrix.CreateOrthographicOffCenter(0, gDevice.Viewport.Width, gDevice.Viewport.Height, 0, 0f, -1f);

        tiledMap.Draw(viewMatrix, projectionMatrix);

My idea is now to create a second tiledMap to placing them directly next to the first one where the transition occurs. Then i just have to move the camera from one map to the next one. My problem now is that i have no clue how to put them next to each other. From my understanding i somehow have to use the view and projection matrix to draw the tiledMap but i can't figure out how it should work with two tiledMaps.

  • 2
    \$\begingroup\$ Can you show an example of the Metroid transition you want to imitate? \$\endgroup\$
    – DMGregory
    May 13, 2019 at 20:41
  • \$\begingroup\$ From the looks of your description, it looks more like the NES Metroid transition that you want to make rather than the door transition. It is however difficult to understand what you've tried if I don't know what you exactly want and what you currently got so far. \$\endgroup\$
    – Steven
    May 14, 2019 at 6:22
  • \$\begingroup\$ I edited my post \$\endgroup\$
    – Ultralord
    May 15, 2019 at 20:30

1 Answer 1


Trying to scroll the camera to match the positions of the door will be to complicated for what you are trying to achieve. Instead you can try something simpler.

  • Fade out the first level and draw the door sprite as a separate layer with full opacity and normal colour.
  • Load the second level on the background but keep it faded out. At this point you know the position of the door your character will come out.
  • Play a short animation where your original door (the one you have as a separate layer) moves from it's current position to the target position (the new door). From what I can see from the video, the door sprite moves only in one axis per time.

Once the door movement animation finishes start fading in the second level. At this point you can show your character and delete the extra door sprite.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .