Python Mania

Tutorial Pygame 2: creando una ventana, cargar imagenes y moverlas

Posted on: marzo 25, 2010

En esta segunda parte del tutorial veremos los siguientes temas:

  • Como crear una ventana
  • El bucle principal de un videojuego (o como saber cuando hay que terminar el juego)
  • Usar una imagen como fondo
  • Mostrar una imagen y mover la imagen en la pantalla

A continuación la explicación completa

Paso 1: Creando una ventana

Primero Importamos los módulos y definimos dos variables globales (por metodología se suelen poner en mayúsculas) que son resolución de la pantalla del juego.

Luego hay que crear la ventana, para ello dentro de la función main() usamos pygame.display.set_mode y pygame.display.set_caption, que establecen el tamaño de la ventana y el titulo de esta respectivamente:

#!/usr/bin/env python
# -*- coding: utf-8 -*-

# Escrito por Daniel Fuentes B.
# Licencia: X11/MIT license http://www.opensource.org/licenses/mit-license.php
# http://pythonmania.wordpress.com/2010/03/25/tutorial-pygame-2-ventana-e-imagenes/

# ---------------------------
# Importacion de los módulos
# ---------------------------

import pygame
from pygame.locals import *

# -----------
# Constantes
# -----------

SCREEN_WIDTH = 640
SCREEN_HEIGHT = 480

# ------------------------------
# Clases y Funciones utilizadas
# ------------------------------


# ------------------------------
# Funcion principal del juego
# ------------------------------


def main():
    pygame.init()
    # creamos la ventana y le indicamos un titulo:
    screen = pygame.display.set_mode((SCREEN_WIDTH, SCREEN_HEIGHT))
    pygame.display.set_caption("tutorial pygame parte 2")


if __name__ == "__main__":
    main()

Ahora lo ejecutamos y sorpresa… se crea la ventana pero inmediatamente se cierra, eso ocurre porque no hemos definido el bucle o loop principal del juego

Paso 2: el bucle principal del juego

Los juegos generalmente ejecutan un bucle infinito (su bucle principal), lo cual permite que el juego continúe corriendo hasta la que se se cumpla una condición que lo termine (como por ejemplo que el jugador pierda todas sus vidas o se rinda), mas o menos lo que muestra este diagrama:

En nuestro caso el bucle principal se continuara ejecutando hasta que el jugador cierre el ventana (o sea que se quede esperando hasta que se haga click en le botón para cerrar la ventana). Entonces el código del paso anterior queda de la siguiente manera:

#!/usr/bin/env python
# -*- coding: utf-8 -*-

# Escrito por Daniel Fuentes B.
# Licencia: X11/MIT license http://www.opensource.org/licenses/mit-license.php
# http://pythonmania.wordpress.com/2010/03/25/tutorial-pygame-2-ventana-e-imagenes/

# ---------------------------
# Importacion de los módulos
# ---------------------------

import pygame
from pygame.locals import *
import sys

# -----------
# Constantes
# -----------

SCREEN_WIDTH = 640
SCREEN_HEIGHT = 480

# ------------------------------
# Clases y Funciones utilizadas
# ------------------------------


# ------------------------------
# Funcion principal del juego
# ------------------------------


def main():
    pygame.init()
    # creamos la ventana y le indicamos un titulo:
    screen = pygame.display.set_mode((SCREEN_WIDTH, SCREEN_HEIGHT))
    pygame.display.set_caption("tutorial pygame parte 2")

    # el bucle principal del juego
    while True:
        # Posibles entradas del teclado y mouse
        for event in pygame.event.get():
            if event.type == pygame.QUIT:
                sys.exit()


if __name__ == "__main__":
    main()

Lo que hace es simple, una vez dentro del bucle, recorre la lista que devuelve pygame.event.get() (es una lista con todos los eventos que registra pygame, como por ejemplo cuando uno presiona una tecla), si dentro de esa lista esta el evento pygame.QUIT (o sea cerrar la ventana) el programa ejecuta la orden sys.exit() (que termina la ejecución del programa y es parte del modulo sys, por eso lo importamos), en caso contrario (que aun no se produzca ese evento) seguirá esperando.

En loserjuegos esta la documentación de referencia de pygame traducida, entre ella la lista de los eventos

Paso 3: Cargando el fondo y una imagen

Primero para cargar las imágenes usamos pygame.image.load(), con ello se crea un objeto que contiene la superficie de la imagen (aun no la muestra). Luego de esto hay que indicar las posiciones de esta imagen, para lo cual se usa blit(imagen, (coordenada_x, coordenada_y))

Puedes pensar en la ventana de pygame como un plano en 2 ejes, con una pequeña diferencia: el origen (coordenadas 0,0) se encuentra en la esquina superior izquierda de la ventana. Por lo tanto en valor de las coordenadas en el eje x (horizontal) va aumentando (y es positivo) mientras se avanza a la derecha, mientras que en el eje y (vertical) el valor va aumentando (y es positivo) a medida que se avanza hacia abajo (o sea lo contrario de lo que se acostumbra, para el eje y)

Para que quede más claro, un esquema en que muestra en que posición cargaremos las imágenes (Nota: pygame siempre usa como referencia la esquina superior izquierda de las imágenes)

Ahora que ya sabemos sobre coordenadas, vamos a insertar un fondo y una imagen en nuestra ventana, usaremos las siguientes:

fondo.jpg (hacer clic para agrandar)

tux.png (hacer clic para agrandar)

Vamos con el código:

#!/usr/bin/env python
# -*- coding: utf-8 -*-

# Escrito por Daniel Fuentes B.
# Licencia: X11/MIT license http://www.opensource.org/licenses/mit-license.php
# http://pythonmania.wordpress.com/2010/03/25/tutorial-pygame-2-ventana-e-imagenes/

# ---------------------------
# Importacion de los módulos
# ---------------------------

import pygame
from pygame.locals import *
import sys

# -----------
# Constantes
# -----------

SCREEN_WIDTH = 640
SCREEN_HEIGHT = 480

# ------------------------------
# Clases y Funciones utilizadas
# ------------------------------


# ------------------------------
# Funcion principal del juego
# ------------------------------


def main():
    pygame.init()
    # creamos la ventana y le indicamos un titulo:
    screen = pygame.display.set_mode((SCREEN_WIDTH, SCREEN_HEIGHT))
    pygame.display.set_caption("tutorial pygame parte 2")

    # cargamos el fondo y una imagen (se crea objetos "Surface")
    fondo = pygame.image.load("fondo.jpg").convert()
    tux = pygame.image.load("tux.png").convert_alpha()

    # Indicamos la posicion de las "Surface" sobre la ventana
    screen.blit(fondo, (0, 0))
    screen.blit(tux, (550, 200))
    # se muestran lo cambios en pantalla
    pygame.display.flip()

    # el bucle principal del juego
    while True:
        # Posibles entradas del teclado y mouse
        for event in pygame.event.get():
            if event.type == pygame.QUIT:
                sys.exit()


if __name__ == "__main__":
    main()

Si se fijan al cargar el fondo se uso fondo = pygame.image.load(“fondo.jpg”).convert() mientras que para la imagen de tux se uso tux = pygame.image.load(“tux.png”).convert_alpha(). Esto se debe a que el fondo no necesita tener un color trasparente (un canal alpha) ya que es la imagen que esta bajo todas las demás, en cambio el sprite de nuestro pingüino si necesita tener un color trasparente (que convenientemente ya esta definido en el png ;), lo hice a propósito cuando lo cree) o de lo contrario al cargar la imagen del pingüino se vería un feo rectángulo a su alrededor

Si quieren saber más sobre sprites, resoluciones y similares les recomiendo que lean este articulo sobre los conceptos básicos para programar un videojuego (pongan ojo en la parte de los sprites)

Luego se hizo screen.blit(fondo, (0, 0)) y screen.blit(tux, (550, 200)), con esto se le indica que cargue la imagen del fondo justo en la coordenada (0,0) para que cubra toda la pantalla (cualquier otro valor hubiera dejado el fondo desplazado) y en el caso de tux se le indica que lo cargue a la derecha

Paso 4: Moviendo la imagen

Ahora vamos a hacer que tux se mueva a la izquierda, para ello, simplemente a su posición en el eje x le vamos a restar -1 en cada ciclo del bucle principal. Para ello modificamos el código para que quede de la siguiente manera:

#!/usr/bin/env python
# -*- coding: utf-8 -*-

# Escrito por Daniel Fuentes B.
# Licencia: X11/MIT license http://www.opensource.org/licenses/mit-license.php
# http://pythonmania.wordpress.com/2010/03/25/tutorial-pygame-2-ventana-e-imagenes/

# ---------------------------
# Importacion de los módulos
# ---------------------------

import pygame
from pygame.locals import *
import sys

# -----------
# Constantes
# -----------

SCREEN_WIDTH = 640
SCREEN_HEIGHT = 480

# ------------------------------
# Clases y Funciones utilizadas
# ------------------------------


# ------------------------------
# Funcion principal del juego
# ------------------------------


def main():
    pygame.init()
    # creamos la ventana y le indicamos un titulo:
    screen = pygame.display.set_mode((SCREEN_WIDTH, SCREEN_HEIGHT))
    pygame.display.set_caption("tutorial pygame parte 2")

    # cargamos el fondo y una imagen (se crea objetos "Surface")
    fondo = pygame.image.load("fondo.jpg").convert()
    tux = pygame.image.load("tux.png").convert_alpha()

    tux_pos_x = 550
    tux_pos_y = 200

    # Indicamos la posicion de las "Surface" sobre la ventana
    screen.blit(tux, (tux_pos_x, tux_pos_y))
    screen.blit(fondo, (0, 0))
    # se muestran lo cambios en pantalla
    pygame.display.flip()

    # el bucle principal del juego
    while True:
        # le restamos 1 a la coordenada x de tux
        # asi se mueve un poquito a la izquierda
        tux_pos_x = tux_pos_x - 1
        screen.blit(tux, (tux_pos_x, tux_pos_y))
        # se muestran lo cambios en pantalla
        pygame.display.flip()

        # Posibles entradas del teclado y mouse
        for event in pygame.event.get():
            if event.type == pygame.QUIT:
                sys.exit()


if __name__ == "__main__":
    main()

y el resultado fue un fallo gigantesco:

Explicación: lo que paso es que se nos olvido borrar al pingüino de la pantalla antes de moverlo a su nueva posición, por lo que veremos en realidad un “rastro” del movimiento mientras dibujamos continuamente al pingüino en nuevas posiciones. Además nunca le pusimos limite al movimiento del pingüino, por lo que una vez que alcanzo el borde de la pantalla, siguió moviéndose hacia la izquierda hacia el infinito y mas allá…

Paso 5 (final): Refrescando/borrando la pantalla

La solución mas fácil para borrar el “rastro” que se deja al moverse, es simplemente redibujar toda la pantalla (fondo incluido) en cada ciclo del juego, por lo tanto dentro del while, después de actualizar la posición del pingüino, se redibuja tota la pantalla usando blit() y pygame.display.flip()

#!/usr/bin/env python
# -*- coding: utf-8 -*-

# Escrito por Daniel Fuentes B.
# Licencia: X11/MIT license http://www.opensource.org/licenses/mit-license.php
# http://pythonmania.wordpress.com/2010/03/25/tutorial-pygame-2-ventana-e-imagenes/

# ---------------------------
# Importacion de los módulos
# ---------------------------

import pygame
from pygame.locals import *
import sys

# -----------
# Constantes
# -----------

SCREEN_WIDTH = 640
SCREEN_HEIGHT = 480

# ------------------------------
# Clases y Funciones utilizadas
# ------------------------------


# ------------------------------
# Funcion principal del juego
# ------------------------------


def main():
    pygame.init()
    # creamos la ventana y le indicamos un titulo:
    screen = pygame.display.set_mode((SCREEN_WIDTH, SCREEN_HEIGHT))
    pygame.display.set_caption("tutorial pygame parte 2")

    # cargamos el fondo y una imagen (se crea objetos "Surface")
    fondo = pygame.image.load("fondo.jpg").convert()
    tux = pygame.image.load("tux.png").convert_alpha()

    tux_pos_x = 550
    tux_pos_y = 200

    # Indicamos la posicion de las "Surface" sobre la ventana
    screen.blit(tux, (tux_pos_x, tux_pos_y))
    screen.blit(fondo, (0, 0))
    # se muestran lo cambios en pantalla
    pygame.display.flip()

    # el bucle principal del juego
    while True:
        # le restamos 1 a la coordenada x de tux y comprobamos
        # que no alcance el borde de la pantalla
        tux_pos_x = tux_pos_x - 1
        if tux_pos_x < 1:
            tux_pos_x = 550

        # Redibujamos todos los elementos de la pantalla
        screen.blit(fondo, (0, 0))
        screen.blit(tux, (tux_pos_x, tux_pos_y))
        # se muestran lo cambios en pantalla
        pygame.display.flip()

        # Posibles entradas del teclado y mouse
        for event in pygame.event.get():
            if event.type == pygame.QUIT:
                sys.exit()


if __name__ == "__main__":
    main()

Además después de actualizar la tux_pos_x se coloco un if, de tal manera de que si esa posición es 0 o negativa (o sea esta fuera de la pantalla), la tux_pos_x tome un valor de 550 (550 + 90px que mide de ancho la imagen de tux = 640 px, o sea que la imagen se muestre al borde derecho de la pantalla)

Bueno eso es todo por ahora, pueden descargar todos estos ejemplos desde aquí (o buscarlo en el repositorio de github).

En el próximo tutorial explicaremos como controlar el movimiento de una imagen (con el teclado), colisiones y reproducir algunos sonidos. Pueden encontrar esta segunda parte aquí

Saludos.

About these ads
Etiquetas: ,

15 comentarios to "Tutorial Pygame 2: creando una ventana, cargar imagenes y moverlas"

[...] Tutorial Pygame 2: creando una ventana e imagenes actualizar [...]

[...] Tutoriales Tutorial Pygame 2: creando una ventana, cargar imagenes y moverlas [...]

me sale algo como esto:

cannot blit to opengl surfaces

que puede ser??
osea no hice exactamente lo mismo pero lo hice muy parecido para poder agregar una imagen a un pequeño juego que tengo

[...] mayor parte de este código la explicamos en la segunda parte del tutorial. Lo nuevo es que en vez de usar una imagen de fondo, utilizamos un color para rellenar [...]

las imagenes donde tienen que estar guardadas?? por que a mi no me las carga

en carpeta personal las coloque y funciona

Emilio .. las imagenes tines que ponerlas en la misma carpeta donde esta tu programa(o juego) que estas haciendo. De otra manera no reconocera la imagen y saldrá error

Emm, cuando inicio la ventana aparece y se cierra inmediatamente a pesar de que puse bien los codigos:

import sys

SCREEN_WIDHT = 640
SCREEN_HEIGHT = 480

def main():
pygame.init()
screen = pygame.display.set_mode((SCREEN_WIDHT, SCREEN_HEIGHT))
pygame.display.set_caption(“Protocolox”)

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

if “__Protocolox__” == “__main__”:
main()

main()

Me puedes ayudar?

if “__Protocolox__” == “__main__”:
no es correcto, lo correcto es
if __name__ == “__main__”

¿por que en mi codigo, tux parte de la parte derecha ala izquierda y repite el proceso una y otra vez?

import pygame, sys, os
from pygame.locals import*
pygame.init()
p=pygame.display.set_mode((500,500))
pygame.display.set_caption(‘imagen’)
i=pygame.image.load(‘imagen.jpg’).convert()
tux=pygame.image.load(‘tux.png’).convert_alpha()
tux_x=500
tux_y=400
p.blit(i,(0,0))
p.blit(tux,(tux_x,tux_y))
pygame.display.flip()

while True:
tux_x=tux_x-1
p.blit(tux,(500,tux_y))
pygame.display.flip()
if tux_x<1:
tux_x=500

p.blit(i,(0,0))
p.blit(tux,(tux_x,tux_y))
pygame.display.flip()

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

if __name__ == '__main__':
main()

???????? no le entendiiiii!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

porfavor dime que interfaz utilizaste

me confundi, porfa q entorno de desarrollo utilizaste

muy buen tutorial che!!… me re sirve para seguir aprendiendo =D

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

Únete a otros 31 seguidores

A %d blogueros les gusta esto: