I have a basic method of scrolling around on a map (moving the map instead of the player), but at when the player gets to a certain proximity to the edge, how do you stop the map from scrolling, but still allow the player to move around until it is away from that proximity? I'm not looking for any code. Just a suggestion so that I can implement it myself. I can see it visually (creating 4 boxed intersecting boundaries for the player to enter), but not sure how to come about stopping and resuming the scrolling of the map.

  • \$\begingroup\$ If you're moving the map to scroll, you can't really stop moving the map but continue scrolling. You need to find a new way to scroll. \$\endgroup\$ – MichaelHouse Jul 30 '12 at 16:43

Define your viewport (position and size of the viewport). If you have this, you can define your borders. When your viewport position defines the upper left corner of your screen its pretty easy to restrict the screen position.

First of all you set the screen position to be centered on the player:

viewport.x = player.x - viewport.width / 2
viewport.y = player.y - viewport.height / 2

Then you have to make sure, that the viewport doesn't goes over the map.

if(viewport.x < 0) viewport.x = 0
if(viewport.y < 0) viewport.y = 0
if(viewport.x > map.width - viewport.width) viewport.x = map.width - viewport.width
if(viewport.y > map.height - viewport.height) viewport.y = map.height - viewport.height

Basically this should be what you are looking for... You have to keep some things in mind, for example you can leave out the upper bounds check, if the screen size in that dimension is bigger than the map size ( viewport.width > map.width ). Also, if you have your map width in tiles instead of pixel, you would have to multiply the map sizes with the tile size.

If your screen position marks the middle of the screen, you would need to change some of the calculations a bit, but the basic idea is the same.


You shouldn't do scrolling like that, it is very counter intuitive. Just create a Camera object, that has a position, and then render everything according to the camera's position. Move the camera around, don't change the entity positions, as that can alter your logic and mess everything up.

//If the camera is really far to the right, everything is rendered far to the left.
render(e.sprite, e.position.x - camera.position.x, e.position.y - camera.position.y)
  • \$\begingroup\$ I dont see a tutorial on the slick website \$\endgroup\$ – ChocoMan Jul 30 '12 at 15:54
  • 1
    \$\begingroup\$ Horizontal scroll bars on code samples... bleh. But this works. \$\endgroup\$ – MichaelHouse Jul 30 '12 at 16:44
  • \$\begingroup\$ The horizontal bar is no more, @Byte56. :) \$\endgroup\$ – jcora Oct 10 '12 at 21:45
  • 1
    \$\begingroup\$ Woot. Much better. Now we just need the OP to accept it. \$\endgroup\$ – MichaelHouse Oct 10 '12 at 21:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.