# How can I implement screen transitions like in the 2D Zelda games?

I want to implement a screen transition in the style of the 2D Legend of Zelda games (like this). That is, I'd the screen to remain static until the player moves to an exit, at which point the next screen smoothly scrolls into view as the old screen scrolls out of view.

How can I accomplish this?

• Start by creating a class, that will handle screen transitions. – jgallant Aug 6 '15 at 13:52
• i have got a array with all my maps – Sergi Martinez Aug 6 '15 at 14:23
• What do you already know/have you already tried? You need to be a lot more specific in order for this question to be answerable; right now it's not. – jhocking Aug 6 '15 at 15:47

If you're using a tilemap, this transition is fairly easy to do. You will probably already have some sort of camera class. The thing is you only move the camera when the player reaches the edge.

Suppose your screen is 20 tiles wide and 10 high, the camera shows 0, 0 to 19,9. If the character reaches the border of tile 19-20 set the camera to a 'transition state' now move the camera while moving your character to tile 20. So increment camera x until it reaches 20 (the tile you character is). The camera should show 20,0 to 39,9. Return the game to the normal state and play resumes.

So no need to render the entire map, just control your camera movement.

Edited to reflect the comment made below.

• Close. the first room would be 0,0,19,9 for a 20x10 room. Also if you want to replicate how Zelda does it, then the room changes when (and WHILE) link crosses the boundary from 19 to 20 for example. While the room is changing, Link pauses, but then the edge of the room pushes him to the next tile. It does not keep any rows or columns of tiles when the room changes. – Fuzzy Logic Aug 26 '15 at 2:30
• Ah, yes 0 to 19 I knew when I was typing that I overlooked something :-) anyway, the magic happen in the camera movement so there is no need to create huge images :-) – Felsir Aug 26 '15 at 5:09

First, your entire map needs to be loaded (all "rooms/zones") like a single image. Next, you have a viewport that displays the Zone your in, say 0,0 to 50,50. next, you set collision to if player collides with zoneWallRight start a render loop that will render the map scroll in that direction. (move the view port x,y)

at least, this is how I would do it. That way you could also do zoneWallDown or up.

• okay thx but how to load like a single image? im loading theys and putting one by one in the next position like map[0].X=30 map[1].X=60 – Sergi Martinez Aug 6 '15 at 22:24
• done at all how can i close the question? – Sergi Martinez Aug 10 '15 at 12:33
• @SergiMartinez click the question-mark next to this question if it answered your question. Click the up arrow if it helped you. – ashes999 Aug 10 '15 at 12:39