0
\$\begingroup\$

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.

\$\endgroup\$
3
  • 2
    \$\begingroup\$ Can you show an example of the Metroid transition you want to imitate? \$\endgroup\$ Commented 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\$ Commented May 14, 2019 at 6:22
  • \$\begingroup\$ I edited my post \$\endgroup\$ Commented May 15, 2019 at 20:30

1 Answer 1

Reset to default
1
\$\begingroup\$

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.

\$\endgroup\$

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.