Dibujo de figuras geométricas en Pygame (Ejemplo de dibujo)

Programar un videojuego implica conocer bastantes conceptos, sean de programación, gráficos, animación, audio, vídeo, etc. En este tutorial podrás conocer cómo se utilizan las formas de dibujo más básicas que se pueden hacer con pyagme, al final se describe cómo combinar algunas figuras para hacer un dibujo como el que se muestra a en la figura.

Antes de empezar: Como Instalar Pygame

Una vez instalada la librería, seguimos los siguientes pasos.

1. Importar librería

2. Inicializar pygame

3. Definir colores

4. Abrir y establecer las dimensiones de una ventana

5. Establecer un bucle principal del programa (gameloop)

6. Establecer bucle de procesamiento de eventos

7. Limpiar pantalla

8. Crear los dibujos

9. Actualizar pantalla

10. Finalizar el programa

Podemos ver todos estos pasos resumidos y codificados en el siguiente ejemplo, el cual abre una ventana con un fondo negro.

#Introducción a los gráficos en python
#Dibujando escenario
 
import pygame
import random
  
NEGRO = (0, 0, 0)
ROJO = (255, 0, 0)
CAFE = (90, 50, 15)

pygame.init()
Dimensiones = (400, 500)
Pantalla = pygame.display.set_mode(Dimensiones)
pygame.display.set_caption("Introducción a los Gráficos")
 
Terminar = False
#Se define para poder gestionar cada cuando se ejecuta un fotograma
reloj = pygame.time.Clock()
 
while not Terminar:
    #---Manejo de eventos
    for Evento in pygame.event.get():
       if Evento.type == pygame.QUIT:
            Terminar = True
    #---La lógica del juego
 

    #---Código de dibujo----
    Pantalla.fill(NEGRO)
    #--Todos los dibujos van después de esta línea

    #--Todos los dibujos van antes de esta línea
    pygame.display.flip()
    reloj.tick(20)  # Limitamos a 20 fotogramas por segundo
pygame.quit()

El código anterior puede servirnos como plantilla para cualquier programa básico de Pygame.

Introducción al dibujo

Línea: la siguiente línea de código dibuja una línea de color verde desde el punto [10, 10] a el punto [650, 470], donde el primer valor de cada lista es la coordenada en X y el segundo la coordenada en Y [x, y]. El último parámetro indica el grosor de la línea.

pygame.draw.line(Pantalla, VERDE, [10, 10], [650, 470], 2)

Rectángulo: para dibujar un rectángulo, igual que para la línea el primer parámetro es la variable Pantalla, después el color de la figura, y en este caso para dibujar un rectángulo usamos una lista con cuatro elementos, de los cuales el primer par corresponden a las coordenadas (x, y) de la esquina superior izquierda, los otros dos indican el tamaño de la figura (ancho y alto). Así la siguiente linea dibuja un rectángulo que en realidad es un cuadrado, con coordenadas iniciales x = 150, y = 50, con un ancho y alto de 400.

pygame.draw.rect(Pantalla, ROJO, [150, 50, 400, 400], 0)

Círculo: a esta función se le indica con una lista de dos elementos el centro del círculo, después el radio y de igual forma que la línea el ultimo parámetro es el grosor de la línea, con la excepción de que si usamos 0 el circulo se dibujará con relleno (esto funciona también para la función rect).

pygame.draw.circle(Pantalla, AZUL, [150, 50, 400, 400], 0)

Arco: un arco se dibuja utilizando un rectángulo como referencia y es con las medidas de un rectángulo que se especifica la posición, que tan largo es horizontalmente y de manera vertical, también se indica el ángulo inicial y final que están dados en radianes. Entonces para dibujar un arco que comience en 0° y termine en 180°, en las medidas de un cuadro de 400 x 400 queda de la siguiente forma.

pygame.draw.arc(Pantalla, AZUL, [150, 50, 400, 400], 0, math.pi, 2)

Polígono: podemos dibujar polígonos con “n” lados utilizando la función polygon, a la cual debemos especificarle los “n” puntos, cada uno especificado por un par de coordenadas, la lista que contendrá estos puntos, puede contener tantos puntos sean necesarios. (no es necesario cerrar la figura, el último punto se unirá automáticamente al primero).

pygame.draw.polygon(Pantalla, ROJO, [[350, 10],[ 20, 400], [680, 400]], 0)

Elipse: Para dibujar una elipse también se dibuja sobre las medidas de un rectángulo, como si de un contenedor se tratara. Y a excepción del arco, para dibujar la elipse solo es necesario especificar el rectángulo que lo contendrá y si será relleno o un tamaño de línea.

pygame.draw.ellipse(Pantalla, AMARILLO, [50, 50, 600, 400], 0)

Texto: Para dibujar texto es un tanto diferente a dibujar figuras, primero hay que inicializar las funciones de fuente, después se crea una variable que contendrá las características de la fuente como son el tipo y tamaño. Como tercer paso se crea la imagen del texto, es aquí donde se específica el texto que queremos dibujar y su color. Finalmente se posiciona y dibuja el texto.

pygame.font.init()
fuente = pygame.font.Font(None, 25)
texto = fuente.render("Hola mundo", True, NEGRO)
Pantalla.blit(texto, [100, 100])

Poniendo en práctica la teoría

El siguiente ejemplo combina la mayoría de las figuras descritas anteriormente. Para conseguir el dibujo anterior se deben utilizar bucles para dibujar formas que se repiten, a continuación se muestra el código completo para dibujar la imagen del castillo.

#Introducción a los graficos en python
#Dibujando escenario
 
import pygame
import random

AZULNOCHE = (9, 35, 67)
VERDEPASTO = (17, 99, 67)
VERDE = (10, 255, 10)
BLANCO = (222, 224, 200)
GRIS = (186, 186, 177)
GrisCastillo = (158, 158, 158)
NEGRO = (2, 3, 3)
ROJO = (255, 0, 0)
CAFE = (90, 50, 15)
 
Centro = []
for i in range(15):
    Centro.append([random.randrange(50, 390), random.randrange(0, 200)])
 
pygame.init()
Dimensiones = (400, 500)
Pantalla = pygame.display.set_mode(Dimensiones)
pygame.display.set_caption("Escenario")
 
Terminar = False
reloj = pygame.time.Clock()
 
while not Terminar:
    for Evento in pygame.event.get():
        if Evento.type == pygame.QUIT:
            Terminar = True
    #manejo de eventos
 #La lógica del juego
 #Codigo de dibujo
 Pantalla.fill((255, 255, 255))
 
 pygame.draw.rect(Pantalla, AZULNOCHE, [0, 0, 400, 300], 0)
 pygame.draw.rect(Pantalla, VERDEPASTO, [0, 300, 400, 300], 0)
 pygame.draw.circle(Pantalla, BLANCO, [25, 25], 20, 0)
 pygame.draw.circle(Pantalla, GRIS, [15, 15], 4, 1)
 pygame.draw.circle(Pantalla, GRIS, [36, 24], 3, 1)
 pygame.draw.circle(Pantalla, GRIS, [24, 35], 5, 1)
 for y in range(0, 195, 7):
  for x in range(0, 398, 4):
     pygame.draw.line(Pantalla, VERDE, [x, 310 + y], [x + 2, 305 + y], 1)
 for i in range(6):
  c = (random.randrange(50, 390), random.randrange(0, 200))
  r = random.randrange(0, 4)
 pygame.draw.circle(Pantalla, BLANCO, c, r, 0)
    #---Castillo---
    for x in range(0, 70, 20):
        pygame.draw.rect(Pantalla, GrisCastillo, [290 + x, 220, 10, 10])
        pygame.draw.rect(Pantalla, NEGRO, [290 + x, 220, 10, 10], 1)
    pygame.draw.rect(Pantalla, GrisCastillo, [250, 200, 40, 105], 0)
    pygame.draw.rect(Pantalla, NEGRO, [250, 200, 40, 105], 2)
    pygame.draw.rect(Pantalla, NEGRO, [262, 210, 16, 16], 0)
    pygame.draw.rect(Pantalla, GrisCastillo, [290, 230, 70, 75], 0)
    pygame.draw.rect(Pantalla, NEGRO, [290, 230, 70, 75], 2)
    pygame.draw.rect(Pantalla, GrisCastillo, [360, 200, 40, 105], 0)
    pygame.draw.rect(Pantalla, NEGRO, [360, 200, 40, 105], 2)
    pygame.draw.rect(Pantalla, NEGRO, [372, 210, 16, 16], 0)
    pygame.draw.polygon(Pantalla, NEGRO, [[248, 200], [270, 178], [292, 200]])
    pygame.draw.polygon(Pantalla, NEGRO, [[358, 200], [380, 178], [402, 200]])
    pygame.draw.circle(Pantalla, CAFE, [325, 270], 15, 0)
    pygame.draw.circle(Pantalla, NEGRO, [325, 270], 15, 2)
    pygame.draw.rect(Pantalla, CAFE, [310, 270, 30, 30], 0)
    pygame.draw.rect(Pantalla, NEGRO, [310, 270, 30, 30], 1)
    pygame.draw.circle(Pantalla, CAFE, [325, 270], 13, 0)
    #fuente
    Fuente = pygame.font.Font(None, 25)
    Texto = Fuente.render("Castle of Tepec", True, ROJO)
    Pantalla.blit(Texto, [250, 10])
    pygame.display.flip()
    reloj.tick(20)
pygame.quit()

El código quedaría mejor si agrupáramos cada dibujo que compone la escena en funciones, una función para dibujar la luna, una para el castillo, una para el fondo, tal vez otra para la parte del pasto y así tener mejor organizado nuestro código y pueda ser ajustado a distintos tamaños de pantalla o que pueda interactuar con otros objetos de dibujo. Si te interesa ver cómo queda organizado el programa anterior en funciones puedes ver el ejemplo aquí EjemploFunciones.py.

Anterior Siguiente

Curioseando en Programación

Buscar este blog

Entrada destacada

Como usar enums en Android, kotlin