pythonpygamegame-development2048

Why are the letters in my tiles unaligned? (2048)


I am attempting to code the game 2048 with pygame. I noticed that all of the numbers are unaligned(picture below) and I don't think I can sleep until this is fixed.

AHHH

This is the important part of the code (the rest is stuff for making the game itself work; but, I don't think that's important):

# Yes, I know my code is a mess.
import pygame
from pygame import *



COLORS = {"bg": (249, 246, 242),
          "subBG": (204, 192, 179),
          "0": (224, 212, 199),
          "2": (238, 228, 218),
          "4": (237, 224, 200),
          "8": (242, 177, 121),
          "16": (245, 149, 99),
          "32": (246, 124, 100),
          "64": (246, 94, 59),
          "128": (237, 207, 114),
          "256": (237, 204, 97),
          "512": (237, 200, 80),
          "1024": (237, 197, 63),
          "2048": (237, 194, 46),
          "other": (15, 15, 18),
          "light": (249, 246, 242),
          "dark": (119, 110, 101)}

pygame.init() 

X, Y = 1080, 950

window = pygame.display.set_mode((X, Y))
window.fill(COLORS["bg"])
pygame.display.set_caption('2048')
f = font.SysFont('clearsans-medium.ttf', 48)
  

running = True



while running:  
    colors = [[],[],[],[]]
    for row in range(4):
        for col in range(4):
            colors[row] += [COLORS[str(board[row][col])]]

    pygame.draw.rect(window, COLORS["subBG"], Rect(X/2-215, Y/2-215, 420, 420), border_radius= 8)
    row1 = [pygame.draw.rect(window, colors[0][0], Rect(X/2-200, Y/2-200, 90, 90), border_radius= 8),
            pygame.draw.rect(window, colors[0][1], Rect(X/2-100, Y/2-200, 90, 90), border_radius= 8),
            pygame.draw.rect(window, colors[0][2], Rect(X/2, Y/2-200, 90, 90), border_radius= 8),
            pygame.draw.rect(window, colors[0][3], Rect(X/2+100, Y/2-200, 90, 90), border_radius= 8)]

    row2 = [pygame.draw.rect(window, colors[1][0], Rect(X/2-200, Y/2-100, 90, 90), border_radius= 8),
            pygame.draw.rect(window, colors[1][1], Rect(X/2-100, Y/2-100, 90, 90), border_radius= 8),
            pygame.draw.rect(window, colors[1][2], Rect(X/2, Y/2-100, 90, 90), border_radius= 8),
            pygame.draw.rect(window, colors[1][3], Rect(X/2+100, Y/2-100, 90, 90), border_radius= 8)]

    row3 = [pygame.draw.rect(window, colors[2][0], Rect(X/2-200, Y/2, 90, 90), border_radius= 8),
            pygame.draw.rect(window, colors[2][1], Rect(X/2-100, Y/2, 90, 90), border_radius= 8),
            pygame.draw.rect(window, colors[2][2], Rect(X/2, Y/2, 90, 90), border_radius= 8),
            pygame.draw.rect(window, colors[2][3], Rect(X/2+100, Y/2, 90, 90), border_radius= 8)]

    row4 = [pygame.draw.rect(window, colors[3][0], Rect(X/2-200, Y/2+100, 90, 90), border_radius= 8),
            pygame.draw.rect(window, colors[3][1], Rect(X/2-100, Y/2+100, 90, 90), border_radius= 8),
            pygame.draw.rect(window, colors[3][2], Rect(X/2, Y/2+100, 90, 90), border_radius= 8),
            pygame.draw.rect(window, colors[3][3], Rect(X/2+100, Y/2+100, 90, 90), border_radius= 8)]
    for row in range(4):
        for col in range(4):
            gridRow = [row1, row2, row3, row4][row]
            if board[row][col] != 0:
                text = f.render(str(board[row][col]), True, COLORS['light' if board[row][col] >= 8 else 'dark'])
                textRect = text.get_rect(center= gridRow[col].center)
                window.blit(text, textRect)


    pygame.display.update()

How would I go about aligning the characters and why are they not aligned in the first place‽


Edit:

The board variable is a multi-dimensional list:

board = [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0]]

Edit 2:

I tried using a different font as @tadman suggested, and it didn't seem to change the font (I used Calibri)

f = font.SysFont('Calibri.ttf', 48)
txt = f.render("hdfahsj", True, COLORS['dark'])
window.blit(txt, (50, 70))


Solution

  • Using font.Font() as apposed to font.SysFont() seemed to have worked.