Entrada destacada

Como usar enums en Android, kotlin

Programando una cuadrícula (Grid) en python con pygame

A continuación se muestra un sencillo ejemplo de como utilizar pygame en python para dibujar una cuadrícula o rejilla (como gusten llamarle). El resultado que obtendremos se muestra en la figura.
También se describe una forma para indicar coordenadas con las cuales marcar una casilla.


Código fuente


Se muestra el código completo para dibujar la cuadrícula, después se describe el código paso a paso y al final un vídeo para mostrar el funcionamiento.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import pygame
import random

blueP = (20, 34, 238)
greenP = (20, 240, 50)
redP = (230, 0, 20)
BLACK = (0, 0, 0)
sizeSquare = 40
px = int(eval(input("Coordenada en X: ")))
py = int(eval(input("Coordenada en Y: ")))

x = 0
y = 0
pygame.init()
size = (600, 600)
screen = pygame.display.set_mode(size)
pygame.display.set_caption("Grid on PYGAME")
clock = pygame.time.Clock()
gameOver = False

while not gameOver:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            gameOver = True
    screen.fill(BLACK)
    Fuente = pygame.font.Font('Alice and the Wicked Monster.ttf', 16)
    Tx = 0
    Ty = 0
    for i in range(1, size[0], 40):
        for j in range(1, size[1], 40):
            pygame.draw.rect(screen, blueP, [i, j, 38, 38], 0)
            if py == 0:
                y = 1
            elif py == Ty:
                y = j
            Ty += 1
        if px == 0:
            x = 1
        elif px == Tx:
            x = i
        Texto = Fuente.render(str(Tx), True, greenP)
        screen.blit(Texto, [i, 2])
        if Tx != 0:
            screen.blit(Texto, [2, i + 16])
        Tx += 1
        Ty = 0
    colAl = (random.randrange(1, 255), random.randrange(1, 255), random.randrange(1, 255))
    pygame.draw.rect(screen, colAl, [x, y, 38, 38], 0)
    pygame.display.flip()
    clock.tick(5)
pygame.quit()

Paso a paso


  • De la línea 4 a 7 se declaran algunos colores, la forma de hacer un color es utilizando una tupla la cual debe contener 3 elementos, uno para Rojo, otro para Verde y otro para Azul (RGB) los números que se utilicen deben estar en un rango de 0 a 255, donde 0 denota negro o sin color y 255 blanco o todo el color. 
  • En la línea ocho inicializamos una variable con el valor que definirá el tamaño de los cuadros.
  • En las líneas 9 y 10 se obtienen los datos de entrada que pasaremos como coordenadas en la cuadrícula. 
  • De las líneas 14 a 19 en orden, se inicializá pygame, se define una tupla con las medidas de la ventana, se abre y establece el modo de la pantalla, se crea un título para la ventana, se define un objeto para controlar las iteraciones del bucle principal, se inicilizá la variable que controla la terminación del programa a false.
  • En la línea 21 se inicia el bucle principal el cual no terminará hasta que gameOver sea true. En las líneas 21 y 22 se lee una lista de eventos, en caso de que el usuario haga click en el botón de cerrar de la ventana, gameOver pasa a ser true.
  • La línea 25 limpia la pantalla, en la siguiente línea se define un tipo de fuente(esta pudo haber quedado antes del bucle principal). 
  • Las líneas 29 a 31 son suficientes para generar toda la cuadrícula, el algoritmo que le sigue es para obtener las coordenadas exactas de donde se debe dibujar el cuadrado que queremos posicionar en determinada coordenada, ya que los cuadros que se están dibujando no son exactamente de 1x1 sino que estos están a escala para ser visualizados mejor. Si no logras comprender esta parte te recomiendo que omitas desde la linea 33 hasta la 49, que des valores distintos a los parámetros de pygame.draw.rect(screen, blueP, [i, j, 38, 38], 0), que es la línea que dibuja los cuadrados. Una vez que comprendas mejor esta parte entenderás que desde la línea 33 a 41 solo se obtiene las coordenadas iniciales para el cuadro que se dibujará después.   
  • En la línea 42 se define el texto que se desea dibujar, en este caso se utiliza para ir dibujando las coordenadas en la cuadrícula (líneas 43 a 47). En la línea 48 se obtiene un color aleatorio que cambiara con cada ciclo, y en la línea 49 se dibuja un cuadrado que contendrá el color aleatorio en la coordenadas ingresadas por el usuario.
  • Línea 50, se actualiza la pantalla, luego en la línea 51 se limita a 5 fotogramas por segundo y se vuelve a hacer todo otra vez.
  • Para finalizar, se utiliza pygame.quit() para terminar correctamente pygame.

La parte de dibujo de formas podrás entenderla con mayor claridad en el siguiente enlace: Introducción a los gráficos en Pygame

Funcionamiento




Comentarios