Dibujo de líneas con Pygame

Dibujar es una parte fundamental para desarrollar juegos y entender los conceptos de posicionamiento más básicos. Pygame ofrece muchas funciones para crear fácilmente líneas, rectángulos, círculos y otras formas geométricas. Esto te ayudará también a conocer de que forma se muestran las cosas en la ventana. En este capítulo, veremos como funcionan las líneas de Pygame y cómo puedes usarlas en tus proyectos.

La función draw.line() de Pygame

Pygame proporciona la función pygame.draw.line() para dibujar líneas. Esta función requiere que se especifique el punto inicial, el final de la línea y el color de esta. Esto lo haremos pasando tres argumentos.

Para poder referenciar al lugar donde hay que mostrar esta línea (en la ventana), hay que guardar la ventana en una variable. Gracias a esto, podremos utilizar funciones y métodos con ella en el código.
Yo la voy a llamar ventana, así de fácil.

# Importamos Pygame
import pygame

# Inicializa Pygame
pygame.init()

# Configuración de la ventana de juego
ventana = pygame.display.set_mode((700, 500))
pygame.display.set_caption("Game master")

icono = pygame.image.load("gold-mine.png")
pygame.display.set_icon(icono)

# Bucle para mantener el juego en marcha
while True:
    for evento in pygame.event.get():
        if evento.type == pygame.QUIT:
            pygame.quit()
            exit()

Ya tenemos la ventana en una variable. Ahora, la podremos utilizar para cualquier argumento que requiera de dicha ventana. Por ejemplo, al dibujar una línea, hay que especificar como primer argumento, el lugar donde se va a dibujar dicha línea. Aquí tienes un ejemplo:

# Dibuja una línea azul
pygame.draw.line(ventana, (0, 0, 255), (50, 50), (200, 200))

Coloca este código después de la línea 12, después del establecimiento del icono, pero antes del bucle principal. Realmente, no hay un orden concreto para los elementos, excepto con el bucle. Antes de este, puedes poner lo que quieras prácticamente en el orden que quieras. Sin embargo, si lo quieres hacer bien, hazlo siguiendo mi orden. Es importante dejar cada cosa en su sección de código para no tener un código como digo yo, desfragmentado (ya sé que desfragmentado se utiliza para referirse a los datos desperdigados por varias secciones del disco duro, pero es un buen símil para aplicarlo al código).

En resumen, un orden es fundamental para escribir un código limpio. Los videojuegos tienen mucho código y es imprescindible.

Coloca todos los elementos, siempre antes del bucle principal. Siempre que no te pida lo contrario. Con el tiempo aprenderás que cosas se deben ir actualizando y cuales no.

Si ejecutamos esto, veremos la ventana en negro, sin la línea:

Es aquí donde entra en juego la parte de actualización del capítulo anterior. Si el juego no tiene ningún sistema de actualización, se queda con una imagen estática del primer frame (F de FPS (Frames Per Second)). Entonces, la línea no llega ni a mostrarse en la ventana debido a que no tiene nada que la actualice. Esto se soluciona rápido en Pygame añadiendo esta línea:

# Actualización de la ventana de juego
pygame.display.update()

La línea del update(), va a estar casi siempre dentro del bucle del juego, ya que nos va a servir para ir actualizando cosas. Sin embargo, si solo vas mostrar la línea como en este caso y esta no va a hacer nada más que mostrarse, se puede quedar fuera. Si pones esta línea dentro del bucle for, funcionará también.

Aparece la línea, apenas visible por el color de fondo, pero aparece, que es lo que queríamos.

Ahora, cambia la línea del update() y ponla dentro del bucle while del juego. No dentro del for, a nivel de indentación con el while.
Lo puedes poner después de la última línea:

# Bucle para mantener el juego en marcha
while True:
    for evento in pygame.event.get():
        if evento.type == pygame.QUIT:
            pygame.quit()
            exit()
            
    # Actualización de la ventana de juego
    pygame.display.update()

Ahora ejecuta. Verás el mismo resultado. Sin embargo, ten en cuenta, que esta es la zona donde lo vamos a colocar a partir de ahora. Así nos aseguraremos de que todo se actualiza y anima correctamente. Ahora es una nueva parte del bucle de juego, la cuál, tendrás que escribir siempre.

Ancho de línea

Se puede modificar el ancho de las línea con el argumento opcional width. Después de las tuplas, ponemos una coma y un valor en píxeles del ancho de línea que queremos. Por ejemplo, 7.

pygame.draw.line(ventana, (0, 0, 255), (50, 50), (200, 200), 7)

Esto nos da una línea mucho más ancha.

Estableciendo un color

Para establecer un color a la línea, utilizamos la primera tupla. En esta, se ponen los valores RGB. El primer valor para el color rojo (Red), el segundo para el verde (Green) y el tercero para el azul (Blue).

Con PowerToys de Microsoft u otras herramientas parecidas, puedes buscar el color exacto que quieras y obtendrás los valores RGB.

Una vez seleccionado el color que desees, te aparecerá un listado con tres opciones. Te interesa la segunda (RGB).

Ahora, solo hay que modificar la tupla con estos nuevos valores:

pygame.draw.line(ventana, (240, 55, 69), (50, 50), (200, 200), 7)

Posicionamiento de la línea

La línea, no tiene una longitud especificada. En realidad, sus longitud se basa en las dos tuplas que indican donde empieza y donde acaba.

Cada una de estas tuplas, tienen primero la posición en la ventana en coordenadas X (horizontal) e Y (vertical).
La primera de las tuplas es para indicar donde empieza la línea. La segunda donde acaba. Con esto, hacemos que la línea tome la longitud necesaria para ir del punto A (tupla inicial), al punto B (tupla final). Entonces, con (50, 50) indicamos el punto de partida en la posición 50 píxeles en X y 50 píxeles en Y.
Con (200, 200) lo mismo, pero del otro extremo de la línea.

pygame.draw.line(ventana, (240, 55, 69), (50, 50), (200, 200), 7)

Vamos a tratar de dejar una línea horizontal que llegue desde la posición 100 a la posición 600 en X y luego, en Y, en 250 en ambos valores. De esta forma, dejamos verticalmente la línea recta.

pygame.draw.line(ventana, (240, 55, 69), (100, 250), (600, 250), 7)

Parámetros de line

Veamos con mayor profundidad la función line(). Leer el código interno de Pygame, nos va a ayudar a hacer cosas fuera de los tutoriales y a ver todas sus posibilidades reales. Aquí tienes su código interno y el total de parámetros posibles:

def line(
    surface: Surface,
    color: ColorValue,
    start_pos: Coordinate,
    end_pos: Coordinate,
    width: int = 1,
)

• surface: Surface: Es el objeto de tipo Surface en el que se dibujará la línea. Una superficie en Pygame es básicamente una ventana, una imagen o una región de dibujo donde se pueden representar los gráficos.
• color: ColorValue: Representa el color de la línea que se va a dibujar. Puede ser especificado de diferentes maneras, como una tupla de tres valores enteros que representan los componentes RGB (rojo, verde y azul), una tupla de cuatro valores enteros que también incluye el componente alfa para la transparencia, o mediante el uso de constantes de color predefinidas en Pygame.
• start_pos: Coordinate: Es la posición inicial de la línea, especificada como una tupla de dos valores enteros que representan las coordenadas (x, y) en la superficie donde comenzará la línea.
• end_pos: Coordinate: Es la posición final de la línea, también especificada como una tupla de dos valores enteros que representan las coordenadas (x, y) en la superficie donde terminará la línea.
• width: int = 1 (opcional): Es el ancho de la línea en píxeles. Por defecto, se establece en 1 píxel, pero se puede ajustar a un valor mayor para dibujar líneas más gruesas.

Código de ejemplo

Como último ejemplo voy a poner los argumentos por separado en variables, para que puedas ver todos los argumentos bien separados.

# Color de la línea (rojo)
color = (255, 0, 0)

# Posición inicial de la línea
start_pos = (100, 100)

# Posición final de la línea
end_pos = (500, 400)

# Ancho de la línea
width = 3

# Dibujar la línea en la superficie de la ventana
pygame.draw.line(ventana, color, start_pos, end_pos, width)

Esta es otra forma de definir los parámetros, pero no se suele utilizar si no es para añadir muchos elementos que puedan utilizarlos repetidamente, ya que como puedes ver, extienden mucho el código. Lo he puesto esta vez, para que vayáis desglosando de forma más "masticada" el código.

Quedan diversas formas geométricas por ver. Esto será en los dos próximos capítulos.

La parte más importante, ya la has aprendido en este capítulo, que era la de saber mostrar y posicionar ciertos elementos como una línea en la ventana. Los otros elementos son lo mismo, pero con diferentes parámetros.

Dejo el código completo con una línea, por si a alguien le ha costado seguir el hilo de los fragmentos de código:

# Importamos Pygame
import pygame

# Inicializa Pygame
pygame.init()

# Configuración de la ventana de juego
ventana = pygame.display.set_mode((600, 350))
pygame.display.set_caption("Game master")

icono = pygame.image.load("gold-mine.png")
pygame.display.set_icon(icono)

# Dibuja una línea azul
pygame.draw.line(ventana, (0, 0, 255), (50, 50), (200, 200))

# Actualización de la ventana de juego
pygame.display.update()

# Bucle para mantener el juego en marcha
while True:
    for evento in pygame.event.get():
        if evento.type == pygame.QUIT:
            pygame.quit()
            exit()

Ejercicios para practicar con Pygame

No voy a poner ejercicios en todos los capítulos, pero siempre que vea que puedes practicar algo sin complicarte durante horas, lo pondré.

Quiero que intentes hacer un cuadrado a partir líneas de 100x100 píxeles y que salga centrado en la mitad del lienzo (pantalla). Además, que tenga un ancho de línea de 10 píxeles. El color es libre.

Quiero que sea algo como esto. Si no te sale igual, no pasa nada. Inténtalo y aprende a mejorar con la solución.

Pista 1: Para crear un cuadrado a partir de líneas, necesitarás 4 en total.

Pista 2: fíjate, para calcular el centro, en lo que mide la ventana de alto y ancho. Luego, ten en cuenta que el cuadrado ocupa un espacio de 100 píxeles.

Inténtalo, pero tampoco te frustres si no lo consigues. Solo ves y mira la solución. Ya me contarás si te ha costado mucho en los comentarios.

La solución la tienes aquí: proyecto 1: Crear un cuadrado con 4 líneas.