Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Python / Introducción a los Gráficos en Pygame

Introducción a los Gráficos en Pygame

Autor Jesús Tepec jueves, octubre 1, 2015

Antes de programar un videojuego, es necesario saber:

  • Cómo representar figuras en la pantalla
  • Cómo se manejan las coordenadas
  • Cómo crear colores, etc.

Entonces comencemos dibujando nuestro primer escenario y para hacerlo antes debemos saber cuáles son las figuras básicas, en una biblioteca gráfica 2D.

La biblioteca Pygame

Pygame es una biblioteca gráfica para Python con funciones que nos facilitan:

  • Dibujar figuras
  • Mostrar imágenes de mapas de bits
  • Realizar animaciones
  • Interactuar con el teclado, ratón y joystick
  • Reproducir sonidos
  • Detectar colisiones
  • Entre otras

En esta ocasión solo revisaremos como dibujar en pygame, más adelante revisaremos algunos otros temas.
Si necesitas saber cómo instalar la librería puedes ver el siguiente enlace. http://tpec05.blogspot.mx/2015/08/preparando-entorno-de-desarrollo-de.html
Si lo que necesitas es una introducción a la programación con Python puedes ver. http://tpec05.blogspot.mx/2015/09/programando-piedra-papel-o-tijeras-en.html
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.

 1 #Introducción a los gráficos en python
 2 #Dibujando escenario
 3  
 4 import pygame
 5 import random
 6   
 7 NEGRO = (0, 0, 0)
 8 ROJO = (255, 0, 0)
 9 CAFE = (90, 50, 15)
10 
11 pygame.init()
12 Dimensiones = (400, 500)
13 Pantalla = pygame.display.set_mode(Dimensiones)
14 pygame.display.set_caption("Introducción a los Gráficos")
15  
16 Terminar = False
17 #Se define para poder gestionar cada cuando se ejecuta un fotograma
18 reloj = pygame.time.Clock()
19  
20 while not Terminar:
21     #---Manejo de eventos
22     for Evento in pygame.event.get():
23        if Evento.type == pygame.QUIT:
24             Terminar = True
25     #---La lógica del juego
26 	
27 
28     #---Código de dibujo----
29     Pantalla.fill(NEGRO)
30     #--Todos los dibujos van después de esta línea
31 
32     #--Todos los dibujos van antes de esta línea
33     pygame.display.flip()
34     reloj.tick(20)  # Limitamos a 20 fotogramas por segundo
35 pygame.quit()

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

Introducción al dibujo

Ahora veamos como dibujar figuras básicas como círculos, cuadrados (rectángulos), elipses, líneas, polígonos con ‘n’ lados y como dibujar texto. La variable Pantalla será el lienzo donde dibujaremos cada una de la figuras, por lo tanto cada una de las funciones siguientes reciben como primer parámetro la variable Pantalla.

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)

python line

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, VERDE, [150, 50, 400, 400], 0)

rectangle py

Círculo: a esta función se le indica con una lista de dos elemento 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, VERDE, [150, 50, 400, 400], 0)

juego py

graficos python

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, VERDE, [150, 50, 400, 400], 0, math.pi, 2)

arc game

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, VERDE, [[350, 10],[ 20, 400], [680, 400]], 0)

poligono 3

polygon python

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, VERDE, [50, 50, 600, 400], 0)

ellipse

Texto: Si queremos dibujar texto es un tanto diferente a dibujar figuras, primero hay que inicializar la funciones de fuente, después sea crea una variables 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. 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])

text python game

El sistema de coordenadas utilizado puede entenderse con la siguiente figura.

XY pygame

Poniendo en práctica la teoría

Con lo descrito anteriormente seremos capaces de hacer dibujos como los que se muestran a continuación.

game pygame

pygame escenario

Para conseguir los dibujos anteriores 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 y al final dejo un vídeo demostrativo de como funciona el programa.

01 #Introducción a los grafico en python
02 #Dibujando escenario
03 
04 import pygame
05 import random
06 
07 AZULNOCHE = (9, 35, 67)
08 VERDEPASTO = (17, 99, 67)
09 VERDE = (10, 255, 10)
10 BLANCO = (222, 224, 200)
11 GRIS = (186, 186, 177)
12 GrisCastillo = (158, 158, 158)
13 NEGRO = (2, 3, 3)
14 ROJO = (255, 0, 0)
15 CAFE = (90, 50, 15)
16 
17 Centro = []
18 for i in range(15):
19     Centro.append([random.randrange(50, 390), random.randrange(0, 200)])
20 
21 pygame.init()
22 Dimensiones = (400, 500)
23 Pantalla = pygame.display.set_mode(Dimensiones)
24 pygame.display.set_caption("Escenario")
25 
26 Terminar = False
27 reloj = pygame.time.Clock()
28 
29 while not Terminar:
30     for Evento in pygame.event.get():
31         if Evento.type == pygame.QUIT:
32             Terminar = True
33     #manejo de eventos
34     #La lógica del juego
35     #Codigo de dibujo
36     Pantalla.fill((255, 255, 255))
37 
38     pygame.draw.rect(Pantalla, AZULNOCHE, [0, 0, 400, 300], 0)
39     pygame.draw.rect(Pantalla, VERDEPASTO, [0, 300, 400, 300], 0)
40     pygame.draw.circle(Pantalla, BLANCO, [25, 25], 20, 0)
41     pygame.draw.circle(Pantalla, GRIS, [15, 15], 4, 1)
42     pygame.draw.circle(Pantalla, GRIS, [36, 24], 3, 1)
43     pygame.draw.circle(Pantalla, GRIS, [24, 35], 5, 1)
44     for y in range(0, 195, 7):
45         for x in range(0, 398, 4):
46             pygame.draw.line(Pantalla, VERDE, [x, 310 + y], [x + 2, 305 + y], 1)
47     for i in range(6):
48         c = (random.randrange(50, 390), random.randrange(0, 200))
49         r = random.randrange(0, 4)
50         pygame.draw.circle(Pantalla, BLANCO, c, r, 0)
51     #---Castillo---
52     for x in range(0, 70, 20):
53         pygame.draw.rect(Pantalla, GrisCastillo, [290 + x, 220, 10, 10])
54         pygame.draw.rect(Pantalla, NEGRO, [290 + x, 220, 10, 10], 1)
55     pygame.draw.rect(Pantalla, GrisCastillo, [250, 200, 40, 105], 0)
56     pygame.draw.rect(Pantalla, NEGRO, [250, 200, 40, 105], 2)
57     pygame.draw.rect(Pantalla, NEGRO, [262, 210, 16, 16], 0)
58     pygame.draw.rect(Pantalla, GrisCastillo, [290, 230, 70, 75], 0)
59     pygame.draw.rect(Pantalla, NEGRO, [290, 230, 70, 75], 2)
60     pygame.draw.rect(Pantalla, GrisCastillo, [360, 200, 40, 105], 0)
61     pygame.draw.rect(Pantalla, NEGRO, [360, 200, 40, 105], 2)
62     pygame.draw.rect(Pantalla, NEGRO, [372, 210, 16, 16], 0)
63     pygame.draw.polygon(Pantalla, NEGRO, [[248, 200], [270, 178], [292, 200]])
64     pygame.draw.polygon(Pantalla, NEGRO, [[358, 200], [380, 178], [402, 200]])
65     pygame.draw.circle(Pantalla, CAFE, [325, 270], 15, 0)
66     pygame.draw.circle(Pantalla, NEGRO, [325, 270], 15, 2)
67     pygame.draw.rect(Pantalla, CAFE, [310, 270, 30, 30], 0)
68     pygame.draw.rect(Pantalla, NEGRO, [310, 270, 30, 30], 1)
69     pygame.draw.circle(Pantalla, CAFE, [325, 270], 13, 0)
70     #fuente
71     Fuente = pygame.font.Font(None, 25)
72     Texto = Fuente.render("Castle of Tepec", True, ROJO)
73     Pantalla.blit(Texto, [250, 10])
74     pygame.display.flip()
75     reloj.tick(20)
76 pygame.quit()

Vídeo demostrativo

 

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: Jesús Tepec

Ingeniero en Computación, entusiasta y asesor de programación, laboro como programador de sistemas web, aunque mi área favorita es la visión artificial.

También Te Podría Interesar

Creación de GUI con Matlab GUIDE

Creación de GUI con Matlab GUIDE

En este videotutorial se vera la creación de Interfaces Gráficas de Usuario (GUI) utilizando MatLab GUIDE herramienta vi...

Crea patrón de desbloqueo para tus app java

Crea patrón de desbloqueo para tus app java

El patrón de desbloqueo es una medida de seguridad que tienen algunos teléfonos inteligentes para evitar el acceso al di...

Crea un servicio web REST con PHP y MYSQL

Crea un servicio web REST con PHP y MYSQL

Servicio Web Un servicio web (en inglés, Web Service o Web services) es una tecnología que utiliza un conjunto de protoc...

Animaciones básicas con Pygame

Animaciones básicas con Pygame

En tutoriales pasados creábamos demasiadas líneas de código en el mismo lugar para dibujar en la pantalla, cosa que nos...

Mapas en HTML5 – Uniendo todo – Parte 6

Mapas en HTML5 – Uniendo todo – Parte 6

Última parte del tutorial “Mapas interactivos HTML5”, vamos uniendo todo todo el código. En la parte 5 de es...

Procedimientos almacenados en MySQL con Megan Fox

Procedimientos almacenados en MySQL con Megan Fox

Los procedimientos almacenados en MySQL son similares a los procedimientos de otros lenguajes de programación en el sent...

1 comentario en “Introducción a los Gráficos en Pygame”

  1. Gaspar Castillo dice:

    Muchas gracias por el aporte, muy bueno para los que iniciamos en esta aventura de aprender este lenguaje. Saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Comparte lo que sabes

Categorias

Últimas entradas

PHPUnit es un framework que se utiliza para escribir tests en PHP, Netbeans nos permite configurarlo y usarlo fácilmente...

Una Prueba Unitaria, es una forma de comprobar que nuestro código, hace lo que se supone debe hacer; es decir, se asegur...

La prueba del camino básico, es una prueba de “caja blanca” que consiste en verificar el código de nuestros...

Si quieres cambiar el nombre de tus atributos sin tener que reescribir código java por X o Y razón, GSON te permite reno...

Android Bolivia

Bandera en Alto