pythonpygame2d-gamespytmx

How do I make the tile map scroll in pygame?


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()

Solution

  • 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()