Efecto de Camera con Pygame
January 24, 2008Nunca pensé que sería tan dificil terminar el artículo de Hacking Hotmail. Hasta ahorita lo sigo haciendo y no lo publicaré hasta tener resultados. Pero para no dejarlos a Uds, lectores sin nada en especial, hoy vamos a publicar algo sobre Pygame.
Muchos habrán notado en juegos tipo Mario Bros o juegos de Fútbol (Antiguos, de la época del SNES o el NES) que podemos avanzar en un escenario y luego retroceder por si necesitamos algo. A esto, tengo entendido que se le llama el Efecto Camera. (Si me equivoco, corríganme).
Básicamente para lograr este efecto necesitamos un Bitmap grande y un personaje que nos servirá de punto de referencia. Ya que no soy buen dibujante, he usado un dibujo muy mal hecho de un campo de fútbol de 720x240 pixeles, y como jugador… a Oliver Atom.
Si hacemos esto en una pantalla de 1024x768 pixeles, no se notaría el cambio, asi que por eso vamos a realizar la experiencia en una ventana de 320x240 píxeles.
El código usado para esto es:
import pygame
from pygame.locals import *pygame.init()
#cargamos primero las imagenes
campo = pygame.image.load(’campo.bmp’)
oliver = pygame.image.load(’player.bmp’)
oliver_r = oliver.get_rect()oliver_r.left = 120
oliver_r.top = 45oliver_tl = oliver_r.left
oliver_tt = oliver_r.topclock = pygame.time.Clock()
screen = pygame.display.set_mode((320,240))
n = 0
campo_x = 0
campo_y = 0while n <> 1:
screen.blit(campo, (campo_x,campo_y))
screen.blit(oliver, (oliver_tl, oliver_tt))
pygame.display.flip()clock.tick(40)
pygame.event.pump()
tecla_pres = pygame.key.get_pressed()if tecla_pres[K_LEFT]:
oliver_r.left = oliver_r.left - 5
oliver_tl = oliver_tl - 5if oliver_tl < 10:
if oliver_r.left > 10:
oliver_r.left = oliver_r.left - 5
oliver_tl = 10
campo_x = campo_x + oliver_tl
else:
oliver_tl = 10
oliver_r.left = 10if tecla_pres[K_RIGHT]:
oliver_r.left = oliver_r.left + 5
oliver_tl = oliver_tl + 5if oliver_r.left > 240:
if oliver_r.left < 720:
campo_x = 240 - oliver_r.left
oliver_tl = 230
else:
oliver_tl = 230
oliver_r.left = 710if tecla_pres[K_UP]:
oliver_r.top = oliver_r.top - 5
oliver_tt = oliver_tt - 5if oliver_tt < 20:
oliver_tt = 20if tecla_pres[K_DOWN]:
oliver_r.top = oliver_r.top + 5
oliver_tt = oliver_tt + 5if oliver_tt > 190:
oliver_tt = 190for event in pygame.event.get():
if event.type == QUIT:
n = 1
if event.type == KEYDOWN:
if event.key == K_ESCAPE:
n = 1
if event.key == K_p:
print “Valor Campo_x: “, campo_x
print “Valores de Oliver - Camara:”
print “Left: “, oliver_r.left
print “Top: “, oliver_r.top
print “Valores de Oliver - Pantalla:”
print “Left: “, oliver_tl
print “Top: “, oliver_tt
Vamos a explicar paso a paso que es lo que hacemos. Si no usas Pygame o no la tienes, puedes encontrar información en su sitio oficial.
Primero iniciamos Pygame y antes de iniciar la pantalla cargamos todas las imágenes, en este caso, las del campo de fútbol y a Oliver. Lo haremos antes para evitar retrasos al cargar un bitmap de 720x240 píxeles, que puede ser algo pesado en algunas máquinas.
La variable oliver_r es la ubicación de nuestro Oliver en todo el campo de 720x240 pixeles. Este valor lo usaremos para saber en que parte está y si debemos redibujar el lugar.
A la vez, creamos dos variables oliver_tl y oliver_tt (Oliver True Left y Oliver True Top, respectivamente) que indicarán la posición del jugador en la pantalla de 320x240 píxeles. Una cosa es el escenario completo que no vemos y otra es el escenario que puede ver el jugador.
Campo_x y Campo_y son variables que indican la ubicación de la cámara en pantalla, es decir que nos permitirán redibujar el terreno conforme el jugador avanze o retroceda.
También seteamos el reloj o Clock para que la velocidad sea la misma en todas las máquinas, ya que de no hacerlo si ejecutamos esto en una Core 2 Duo, Oliver correrá a la velocidad de la luz.
Una vez hecho esto leemos el teclado y dependiendo de las teclas pulsadas tomamos las acciones respectivas.
- Tecla Flecha Arriba: Debido a que el bitmap original tiene 240 píxeles, igual que la ventana, simplemente moveremos a Oliver hacia arriba, sin cambiar la cámara, deteniendo su movimiento antes de que salga del campo de fútbol, ya que si sale no habría nada que dibujar.
- Tecla Flecha Abajo: Igual que en la anterior, la cámara no cambia y detendremos su movimiento antes de escapar del campo de juego.
- Tecla Flecha Izquierda: Llevamos a Oliver un poco más a la izquierda en un valor de -5 unidades. Luego vemos si Oliver está apunto de llegar al borde de la pantalla, de ser así, comprobamos que no se va a salir del bitmap original. Si no se ha salido aún, hacemos que la cámara se desplaze hacia la izquierda, sumándole al valor de la cámara, el valor negativo de la caminata de Oliver. Si vemos que se quiere salir… simplemente lo detenemos para que no lo haga.
- Tecla Flecha Derecha: Igual que la anterior, llevamos a Oliver a la Derecha en un valor de +5 unidades. Si Oliver está por llegar al borde, simplemente revisamos si está por salir del bitmap original, de ser así, no lo dejamos moverse más. Si todavía no sale del bitmap original, hacemos que la cámara se desplaze hacia la derecha.
- Tecla ‘P’: Imprime información de depuración, como la ubicación de Oliver en pantalla como en cámara y los valores de campo_x y campo_y
Mencionemos que siempre restamos valores a campo_x, porque si fuera positivo, se ignoraría una parte de la pantalla (La cantidad en píxeles dada por campo_x) y se dibujaría para un lado de la pantalla, mostrando la imagen recortada. Si lo hacemos negativo o 0, se empezará a dibujar antes de donde se puede ver en la ventana y dará el efecto de que nos desplazamos.
El código es libre y puede ser usado para lo que se quiera, inclusive sin mencionar al autor. La imagen del campo de fútbol la hice yo y está sujeta a los mismos términos que el código. La imagen de Oliver Atom la encontré en una búsqueda en Google y se usa amparada el ‘Fair Use’.
Puedes bajar el código y todas las imágenes aquí.
Si hubiera algún error en el código o si tienen alguna sugerencia, les invito a que la dejen en los comentarios.
