How to create a camera for looking at a world map (top-down, no player character)

Question

I'm trying to implement a camera feature, which works in that the images move - however:

1) Subsequent images - such as a new menu - get created at the place where they would have been created if I hadn't moved the camera. So if I move the camera by 30 pixels to the right, subsequent images that would have been created at (0,0) now get created at (30,0). This also applies to interacting with buttons; in the above example, to use a button that would have been created at (0,0), I need to hold my mouse on (0,0) even though the button now appears at (30,0)

So if I move my camera, I get results like https://i.sstatic.net/yfiRH.png (see how I am selecting a New Game while my mouse is above it? Where my mouse is, is where the button was before I moved the camera) or https://i.sstatic.net/VjOoe.png (the game remembers me moving the camera in the previous menu, and now creates the next menu at the same place where the original menu was, before I moved the camera

2) If I create an image larger than the screenwidth or screenheight, and then move the camera, I don't actually see the rest of the image. Instead, I see something like this: https://i.sstatic.net/JwtQs.png

So instead of showing the rest of the map, the game just moves a snapshot (of size screenwidth by screenheight) around: https://i.sstatic.net/S64q2.png - but if I'd enlargen the menu, you can see that the map should actually be much larger, and I obviously want to see the rest of the map when I move my camera: https://i.sstatic.net/YSN7s.png

The relevant variables are declared in class Controller:

    windowWidth = 800 #1792
    windowHeight = 600 #896
    windowResize = False
    cameraactive = False
    camera = pygame.display.set_mode((windowWidth, windowHeight))
    screen = pygame.Surface((windowWidth, windowHeight))
    mouse = pygame.mouse.get_pos()
    camerax = 0
    cameray = 0
    sprites = pygame.sprite.Group()
# All the other sprite.Group()s, such as spritesciv, are created just like this one
    spriteslist = [sprites , spritesciv , tiles , cities , texttiles , textcities , textcitiesselected , buttonscitiesselected , textbuttonscitiesselected , buttons , buttonsselectciv , buttonsrandomciv , textinputs]
    buttonslist = [tiles , cities , buttonscitiesselected , buttons , buttonsselectciv , buttonsrandomciv , textinputs]

The relevant functions, all within Controller

    def on_event(self):
        keys = pygame.key.get_pressed()
        for event in pygame.event.get():
            if event.type == pygame.QUIT:
                self._running = False
            if keys[K_ESCAPE]:
                self._running = False
            if event.type == MOUSEMOTION:
                Controller.mouse = pygame.mouse.get_pos()
            if event.type == pygame.VIDEORESIZE: #Controller.windowResize
                screensize = event.size
                Controller.windowWidth = event.w
                Controller.windowHeight = event.h
                screen = pygame.display.set_mode(screensize,RESIZABLE)
            if self.cameraactive:
                if Controller.mouse[0]<50:
                    self.camerax += 8
                if (self.windowWidth - Controller.mouse[0])<50:
                    self.camerax -= 8
                if Controller.mouse[1]<50:
                    self.cameray += 8
                if (self.windowHeight - Controller.mouse[1])<50:
                    self.cameray -= 8
            if keys[K_SPACE] and event.type == pygame.KEYUP:
                self.nextturn()
            if keys[K_TAB] and event.type == pygame.KEYUP:
                i = Controller.civilisationsactive.index(Controller.civilisation)
                if i < (len(Controller.civilisationsactive)-1):
                    Controller.civilisation = Controller.civilisationsactive[i + 1]
                else:
                    Controller.civilisation = Controller.civilisationsactive[0]
            for i in Controller.buttonslist:
                for button in i:
                    button._create_event(event)

    def empty_draw(self):
        for i in Controller.spriteslist:
            i.empty()

    def on_draw(self):
        self.screen.fill((255, 255, 255))
        for i in Controller.spriteslist:
            i.draw(self.screen)
        self.camera.blit(self.screen, (self.camerax, self.cameray))
        pygame.display.flip()
        pygame.display.update()

Thank you very much for your help. :)

Answer 1

You could create surface with full map and copy part of this map on the screen

screen.blit(fullmap, (0,0), camera)

But I would use different names:

screen (eventually window) - surface created with set_mode((800,600))

fullmap - surface created with Surface((2000, 1000)) to draw all elements

camera - Rect, not Surface with position/offset of camera

---

Minimal working code.

I use arrows to change position (x,y) of camera (Rect) and check if this rectangle doesn't leave full map.

Later I use this rectangle camera to copy part of map to screen.

I also added "icon" which is blited separatelly - always in the same place - so it never move with arrows.

import pygame
import random # to draw random rectangles on map

# --- constants ---

RED = (255, 0, 0)
GREEN = (0, 255, 0)
BLUE = (0, 0, 255)
COLORS = (RED, GREEN, BLUE)

TILE_SIZE = 50

# --- main ---

pygame.init()

# - window -
screen = pygame.display.set_mode((800,600))
screen_rect = screen.get_rect()

# - map - (with random rectangles)
fullmap = pygame.Surface((2000, 1000))
#for y in range(TILE_SIZE, 1000-TILE_SIZE, TILE_SIZE):
#    for x in range(TILE_SIZE, 2000-TILE_SIZE, TILE_SIZE):
for y in range(0, 1000, TILE_SIZE):
    for x in range(0, 2000, TILE_SIZE):
        pygame.draw.rect(fullmap, random.choice(COLORS), (x, y, TILE_SIZE, TILE_SIZE))
fullmap_rect = fullmap.get_rect()

# - icon(s) which not move -
icon = pygame.Surface((100, 100))
icon.fill((255,255,255))
icon_rect = icon.get_rect()
icon_rect.right = screen_rect.right - 10
icon_rect.bottom = screen_rect.bottom - 10

# - camera -
# `camera` is not `Surface` but only `Rect` with value/offset which I uses to cut map
camera = screen.get_rect()

# --- loop ---                         
running = True
while running:

    # - events -

    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False
        if event.type == pygame.KEYDOWN:
            if event.key == pygame.K_ESCAPE:
                running = False

    # - updates (without draws) -

    keys = pygame.key.get_pressed()
    if keys[pygame.K_LEFT]:
        camera.x -= 5
        if camera.left < fullmap_rect.left:
            camera.left = fullmap_rect.left
    if keys[pygame.K_RIGHT]:
        camera.x += 5
        if camera.right > fullmap_rect.right:
            camera.right = fullmap_rect.right
    if keys[pygame.K_UP]:
        camera.y -= 5
        if camera.top < fullmap_rect.top:
            camera.top = fullmap_rect.top
    if keys[pygame.K_DOWN]:
        camera.y += 5
        if camera.bottom > fullmap_rect.bottom:
            camera.bottom = fullmap_rect.bottom

    # - draws (without updates) -

    # moving map - using `camera` to copy part of `fullmap` to `screen`
    screen.blit(fullmap, (0,0), camera)

    # static icon(s)
    screen.blit(icon, icon_rect)

    pygame.display.update()

# --- end ---    
pygame.quit()