sábado, 11 de diciembre de 2010

Programando con Pygame: Cargando una Imagen

Hola a todos.

En la entrada anterior creamos una ventana con python y pygame. Ahora lo que haremos es cargar una imagen (Sprite) en nuestra ventana creada en la entrada anterior.

Para realizar esto primero tendremos que hacer una imagen de una pelota. Les recomiendo que utilicen Gimp para poder realizar los gráficos que utilizaremos en el juego. Gimp es un editor de gráficos muy potente similar a Adobe Photoshop, pero la ventaja que tiene Gimp es que es de codigo abierto. Bueno en este tutorial no hablaremos a fondo de Gimp porque estamos hablando especificamente de Python y Pygame. Pero hay muchos tutoriales buenos de Gimp para los que queiren aprender mas sobre este editor de gráficos.

Bueno yo con mi poca experiencia en Gimp hice esta pelota para poder cargarla dentro de la ventana de nuestro juego.

Para poder realizar esto, utilizare el archivo de la entrada anterior, que yo lo guarde como ventana.py. Los vuelvo a escribir al programa para que lo puedan ver.

# -*- coding: cp1252 -*-
# Importación de modulos o librerias

import pygame
from pygame.locals import *
import sys

# Definición de constantes
WIDTH = 500
HEIGHT = 500

# Programa principal
def main():
pygame.init()
pygame.display.set_caption("Mi primera ventana")
screen = pygame.display.set_mode((WIDTH, HEIGHT), 0, 32)

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

if __name__ == "__main__":
main()
Una vez que tenemos el programa cargaremos nuestra imagen de la pelota con el siguiente código:
# Definicion de la constante del color de fondo de la ventana
WHITE = (255, 255, 255)

# Agregando la imagen de la pelota
pelota = pygame.image.load("pelota.jpg")
pelotarect = pelota.get.rect()

# Estableciendo parametros para que la pelota se pueda ver todo el tiempo
screen.fill(WHITE)
screen.blit(pelota, pelotarect)


pygame.display.flip()
Bueno, expliquemos cada linea de este codigo.

En la primera linea WHITE = (255, 255, 255), lo que hacemos es definir una constante, que significa el color que vamos a utilizar de fondo para nuestra venta na, en este caso el blanco.

En la segunda línea pelota = pygame.image.load("pelota.jpg"), lo que hacemos es cargar nuestra imagen de la pelota que creeamos anteriormente.
En la tercera línea pelotarect = pelota.get_rect(), lo que hacemos es obtener el rect de la imagen que por defecto nos devuelve (0, 0), es decir que nuestra imagen sera cargada en la parte superior izquierda de nuestra pantalla.

En la cuarta línea screen.fill(WHITE), lo que hacemos es rellenar con el color blanco nuestra ventana.

En la quinta línea screen.blit(pelota, pelotarect) lo que hacemos es cargar la pelota en nuestra pantalla. blit en español podriamos decir que es como parpadear, luego veremos en que lugar exactamente la pondremos a ésta línea de codigo.

En la última línea pygame.display.flip(), lo que hace pygame es refrescar nuestra pantalla.

Ahora lo que voy a hacer es poner todo el código con el que solamente creabamos la pantalla con el código que cargamos nuestra imagen. El codigo que carga la imagen aparecera con un comentario que dice nueva línea para que puedan ver en que lugares vamos a poner todas las lineas de código antes mencionadas.

# -*- coding: cp1252 -*-


# Importación de modulos o librerias
import pygame
from pygame.locals import *

import sys

# Definición de constantes
WIDTH = 500
HEIGHT = 500
# Definicion de la constante del color de fondo de la ventana
WHITE = (255, 255, 255) # nueva línea

def main():
pygame.init()
pygame.display.set_caption("Mi primera ventana")
screen = pygame.display.set_mode((WIDTH, HEIGHT), 0, 32)

# Agregando la imagen de la pelota
pelota = pygame.image.load("pelota.jpg") # nueva línea
pelotarect = pelota.get_rect() # nueva línea

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

# Estableciendo parametros para que la pelota se pueda ver todo el tiempo
screen.fill(WHITE) # nueva línea
screen.blit(pelota, pelotarect) # nueva línea
pygame.display.flip() # nueva línea

if __name__ == "__main__":
main()
Finalmente al ejecutar el código que hemos creado, podremos ver nuestra imgen o sprite cargado en nuestra ventana.

Durante el desarrollo de este ejemplo, realizamos nuestro ejemplo directamente dentro del programa principal la carga de nuestra imagen o sprite. Lo más adecuado en el desarrollo de videojuegos es separar los objetos de nuestro juego, es decir seria mas sencillos manejarlos dentro de una clase llamada Pelota, que crearlos directamente en el programa principal, ya que si se desea agregar alguna nueva funcionalidad a nuestra pelota en estos momentos como moverla o hacerla rotar, se nos haría mas dificil la tarea. En la siguiente entrada crearemos cada uno de nuestros objetos del juego o sprites, separandolos por clases.

Hasta entonces me despido para poder estar armando la siguiente entrada ya que agregaremos algunos sprites mas en nuestra ventana.

Att. Pablo