How do I make the tile map scroll in pygame?

Question

I implemented a tile map using pytmx and i'm trying to figure out how to allow it to scroll ( the entire map ) using the if Keys[pygame.K_somekey]:. I rendered some buttons so that when you press the play button, it starts rendering the map to display. From there, I need to implement scrolling or movement of the map.

I've tried rendering it over -5 or +5 in x or y directions using Screen.blit(Map,(MAP_X - 5, MAP_Y)) and the other actions for the other directions but it didn't seem to work. I've also tried pygame.scroll but that didn't work either.

#=======
# Imports 
#=======

import pygame ,sys , pytmx , time

#=======
# Start Pygame
#=======

pygame.init()

#=======
# Variables 
#=======

#NUMBER VARIABLES
DISPLAY_WIDTH = 1920
DISPLAY_HEIGHT = 1080
WHITE = (255,255,255)
FPS = 120
BUTTON_X = DISPLAY_WIDTH/2 - 64
PB_Y = 400
CB_Y  = 450
EB_Y  = 500
MOUSE_X = 0
MOUSE_Y = 1
OVER = 1
NOT_OVER = 0

#FUNCTION VARIABLES
Screen = pygame.display.set_mode((DISPLAY_WIDTH, DISPLAY_HEIGHT),pygame.FULLSCREEN)
Keys = pygame.key.get_pressed()
MOUSE = pygame.mouse.get_pos()

#TRUE/FALSE
Game_Over = False
Pressed = False

#=======
# Pre-Loads 
#=======

#BUTTONS
Config_Button = [pygame.image.load(r"C:\Users\Damien Santiago\Desktop\Test\@Resources\Menu Buttons\Config.png"),
                    pygame.image.load(r"C:\Users\Damien Santiago\Desktop\Test\@Resources\Menu Buttons\Config_Over.png")]
Play_Button = [pygame.image.load(r"C:\Users\Damien Santiago\Desktop\Test\@Resources\Menu Buttons\Play.png"),
                pygame.image.load(r"C:\Users\Damien Santiago\Desktop\Test\@Resources\Menu Buttons\Play_Over.png")]
Exit_Button = [pygame.image.load(r"C:\Users\Damien Santiago\Desktop\Test\@Resources\Menu Buttons\Exit.png"),
                pygame.image.load(r"C:\Users\Damien Santiago\Desktop\Test\@Resources\Menu Buttons\Exit_Over.png")]

#MAP ( TMX )
Map = pytmx.load_pygame(r"C:\Users\Damien Santiago\Desktop\Test\@Resources\Maps\Map.tmx")

#======
# Defined Functions
#======
def Render_Map():
    for layer in Map.visible_layers:
        for x, y, gid, in layer:
            MAP_X = x * Map.tilewidth
            MAP_Y = y * Map.tileheight
            tile = Map.get_tile_image_by_gid(gid)
            Screen.blit(tile, (MAP_X,MAP_Y))

#=======
# Code
#=======


while not Game_Over:

    MOUSE = pygame.mouse.get_pos()

    for event in pygame.event.get():

        if event.type == pygame.QUIT:
            sys.exit()
            break 

        if event.type == pygame.KEYDOWN:
            if event.key == pygame.K_ESCAPE:
                sys.exit()
                break
            break

        if event.type == pygame.MOUSEBUTTONDOWN:
            #PLAY BUTTON
            if  892 < MOUSE[MOUSE_X] < 1020 and 480 > MOUSE[MOUSE_Y] > 440:
                Pressed = True
                Render_Map()
                pygame.display.update()

            #SETTINGS/CONFIG BUTTON
            if  892 < MOUSE[0] < 1020 and 530 > MOUSE[1] >500:
                Pressed = True

            #EXIT BUTTON
            if  892 < MOUSE[MOUSE_X] < 1020 and 580 > MOUSE[MOUSE_Y] >550:
                sys.exit()

            break

        if Pressed == False:

            #PLAY BUTTON
            if  892 < MOUSE[MOUSE_X] < 1020 and 480 > MOUSE[MOUSE_Y] > 440:
                Screen.blit(Play_Button[OVER],(BUTTON_X, PB_Y))
                pygame.display.update()

            else:
                Screen.blit(Play_Button[NOT_OVER],(BUTTON_X, PB_Y))
                pygame.display.update()

            #SETTINGS/CONFIG BUTTON
            if  892 < MOUSE[MOUSE_X] < 1020 and 530 > MOUSE[MOUSE_Y] >500:
                Screen.blit(Config_Button[OVER],(BUTTON_X, CB_Y))
                pygame.display.update()

            else:
                Screen.blit(Config_Button[NOT_OVER],(BUTTON_X, CB_Y))
                pygame.display.update()

            #EXIT BUTTON
            if  892 < MOUSE[MOUSE_X] < 1020 and 580 > MOUSE[MOUSE_Y] >550:
                Screen.blit(Exit_Button[OVER],(BUTTON_X, EB_Y))
                pygame.display.update()

            else:
                Screen.blit(Exit_Button[NOT_OVER],(BUTTON_X, EB_Y))
                pygame.display.update()

You've to be more specific. *"I've tried rendering it over -5 or +5 in x or y directions using `Screen.blit(Map,(MAP_X - 5, MAP_Y))` [...] but it didn't seem to work. I've also tried `pygame.scroll` but that didn't work either."* - What did not work? How did you use `pygame.scroll`? — Rabbid76, Jun 21 '19 at 08:04
The map didn't move/scroll when I ran that code, neither did the pygame.scroll function. I've even tried to use Pyscroll but due to little documentation and with what documentation was present, it was kinda confusing to wrap my head around. — HelloWorld, Jun 21 '19 at 08:07
What do you expect by `Screen.blit(Map,(MAP_X - 5, MAP_Y))`? The tiles are placed 5 pixels to the left. If you want to scroll then the you've to `Screen.blit(Map,(MAP_X - shift, MAP_Y))` and continuously increase `shift`. The same is the case for `pygame.scroll`. — Rabbid76, Jun 21 '19 at 08:11
@Rabbid76 So I added this code to make the MAP_X variable increase while the K_a key is pressed. But the map doesn't shift. if Keys[pygame.K_a]: MAP_X = MAP_X - 5 Screen.blit(Map, (MAP_X, MAP_Y)) pygame.display.update() — HelloWorld, Jun 21 '19 at 08:19

score 2 · Accepted Answer · answered Jun 21 '19 at 08:40

All the tiles of the map are .blit to the screen separately in the function Render_Map. The position of each tile is calculated.
If you want to scroll the map, then you've to displace the tiles by an dynamic offset:

def Render_Map(offset_x, offset_y):
    for layer in Map.visible_layers:
        for x, y, gid, in layer:
            MAP_X = x * Map.tilewidth  + offset_x
            MAP_Y = y * Map.tileheight + offset_y
            tile = Map.get_tile_image_by_gid(gid)
            Screen.blit(tile, (MAP_X, MAP_Y))

Change the origin of the tiles when the key is pressed. e.g.:

pos_x = 0

while not Game_Over:

    for event in pygame.event.get():

        if event.type == pygame.QUIT:
            sys.exit()
            break 

    # [...]

    Keys = pygame.key.get_pressed()

    if Keys[pygame.K_a]:
        pos_x += 5

    Render_Map(pos_x, 0)
    pygame.display.update()

How do I make the tile map scroll in pygame?

1 Answers1