Color de fondo, paleta de colores y formas geométricas

En este segundo capítulo haremos muy buenos avances en el curso. Aprenderás a añadir un color de fondo en la ventana de Pygame, como especificar una paleta de colores y como dibujar unas cuantas formas geométricas.

Empezamos con un archivo con el siguiente código:

# importación de paquetes
import pygame
import sys

# Inicialización de Pygame
pygame.init()

# Creación de la pantalla
PANTALLA = pygame.display.set_mode((500, 400))

# Especificación de título
pygame.display.set_caption('Mi primer juego :D')

# Bucle de ejecución
while True:
for event in pygame.event.get():
	if event.type == pygame.QUIT:
		pygame.quit()
		sys.exit()

Crear una paleta de colores para Pygame

Los colores los vamos a especificar en Pygame con colores RGB. Pero antes de ir al código, te voy a dar una orientación sobre los colores hexadecimales que también los vamos a usar.
En la imagen puedes ver como se escriben los colores básicos en base 16 (hexadecimal).

Si no te interesa la teoría sobre los colores hexadecimales y RGB, sáltate los tres siguientes párrafos.

Entenderlos es muy fácil, todos los colores tienen seis dígitos con caracteres que van del "0" al "9" y de las letras "A" a la "F" (0123456789ABCDEF).
De los colores básicos tenemos el rojo (R de red), el verde (G de green) y el azul (B de blue) formando el famoso RGB.
En estos seis dígitos, reservamos dos para cada uno de esos tres colores, los dos primeros para el rojo, los dos siguientes para el verde y los dos últimos para el azul. #RRGGBB.

Todos los colores en su valor mínimo (#000000) forman el color negro (ausencia de color). Todos en su máximo valor (#FFFFFF) forman el color blanco (todos los colores juntos).
La mezcla básica entre rojo puro (#FF0000) y verde puro (#00FF00) nos da como resultado el color secundario amarillo (#FFFF00). La mezcla entre el primario verde (#00FF00) y el primario azul (#0000FF) nos da como resultado el color cian (#00FFFF) y finalmente, la mezcla entre el primario rojo (#FF0000) y el primario azul (#0000FF) nos da como resultado el color magenta (#FF00FF).

Los colores RGB funcionan de la misma forma, pero en lugar de tener esos seis dígitos, utilizan tres números del 0 al 255. Cada uno de estos números para representar los tres colores primarios.

Estos son los colores que vamos a utilizar en Pygame.

Por suerte, hay muchas aplicaciones web, móviles y de escritorio para obtener el número hexadecimal de un color y no tenemos que memorizar ninguno.

Aquí tienes el programa gratuito que utilizo en el vídeo: Roselt color picker de la Microsoft store.
También te recomiendo este sitio web si no quieres instalar ningún programa o empleas otro sistema operativo: www.htmlcolorcodes.com

Como ejemplo, voy a añadir una paleta con algunos colores, tú puedes añadir todos los que vayas a necesitar en tu juego.

Crear una paleta de colores en Pygame

# Especificación de la paleta de colores
BLANCO = (255, 255, 255)
NEGRO = (0, 0, 0)
ROJO = (255, 0, 0)
VERDE = (0, 255, 0)
AZUL = (0, 0, 255)
HC74225 = (199, 66, 37)
H61CD35 = (97, 205, 53)

Fondo de la pantalla de juego

Empecemos dándole un primer uso a la paleta de colores añadiendo un color de fondo:

PANTALLA.fill(ROJO)

Con esto ya estaría, pero para que se pueda mostrar todo lo que aparezca en pantalla, tenemos que añadir al bucle del juego (el que vimos en el capítulo anterior) un update, anidado al while. La última línea es la que tienes que añadir.

while True:
for event in pygame.event.get():
	if event.type == pygame.QUIT:
		pygame.quit()
		pygame.sys.exit()
pygame.display.update()

Si ejecutamos, ahora debería salir el fondo rojo o el que hayas puesto.

Resultado:

Formas geométricas en Pygame

Vayamos ya con las formas geométricas de Pygame.

¿Cómo dibujar un rectángulo en Pygame?

Empecemos añadiendo antes del bucle y después del fondo un rectángulo. Si no sabes bien donde colocarlo, en el vídeo lo puedes ver.

Para dibujar un rectángulo en Pygame debes hacerlo con pygame.draw.rect().

pygame.draw.rect(PANTALLA, ROJO, (100,50,100,50))

El primer argumento es para indicar donde se va a mostrar el rectángulo (en la pantalla), el siguiente para indicar el color (Atención, si tienes fondo rojo, no vas a ver un rectángulo rojo, es de lógica, pero si no caes...). El tercer argumento es para indicar la posición en x e y de la pantalla donde aparecerá el rectángulo y las dimensiones en píxeles.

Resultado:

¿Cómo dibujar una línea en Pygame?

Vamos a dibujar una línea, para ello, lo hacemos con pygame.draw.line().

pygame.draw.line(PANTALLA, VERDE, (100,104),(199,104), 1)

El resultado es una línea de 1 píxel de grosor que puedes ver en la imagen, debajo del rectángulo rojo:

En los argumentos de la línea tenemos que especificar donde aparecerá (Lo indicamos con PANTALLA), en qué color (VERDE en mi caso). La primera tupla especifica donde empieza la línea en x e y, ahí sitúa el punto de inicio de la línea (100,104) y con la segunda tupla (199,104), le indicamos hasta qué punto en x e y tiene que dibujar la línea. Finalmente, el último argumento es para especificar el grosor de la línea (1 en el código).

¿Cómo dibujar un círculo en Pygame?

Para dibujar un círculo, vamos a especificar una tupla con dos números, y dos números más fuera de ella.
El número 122 especifica la posición x y el 250 la y. El valor 20 representa el radio y el último número (0) se utiliza para especificar la cantidad de vacío que tiene el círculo.

pygame.draw.circle(PANTALLA, NEGRO, (122, 250), 20, 0)

¿Cómo dibujar una elipse en Pygame?

Para una elipse, tenemos que especificar cuatro valores en una tupla. 275 corresponde al valor de posición en x. 200 al valor en y. Y los otros dos, el tamaño en x e y. El último valor de fuera de la tupla es opcional. Indica la cantidad de vacío que se le aplica.

pygame.draw.ellipse(PANTALLA, H61CD35, (275, 200, 40, 80), 10)

¿Qué es la superposición?

Básicamente, la superposición es el hecho de tener dos o más objetos uno encima de otro, en capas.

En el clásico de la imagen, tenemos el fondo. Encima de este, se colocan los arbustos, montañas, nubes...
Por encima de estos, encontramos al protagonista, los enemigos, los bloques, las tuberías, etc.
Pues bien, todos estos elementos se encuentran superpuestos en diferentes capas.

¿Cómo dibujar un polígono o forma libre en Pygame?

Importante, este lo podemos dibujar en la misma línea indicando todos los puntos. El problema es que estas formas pueden tener muchos, por lo que es más fácil de ver y de editar si creas una tupla aparte para incluir todos los valores en ella y luego la utilizas de argumento en la creación de la forma.

# Forma libre ()
puntos = [(100,300), (100,100), (150,100)]

pygame.draw.polygon(PANTALLA,(0,150,255), puntos, 8)

Te dejo una captura para que veas como quedan todas estas formas:

Este es el resultado del código anterior: