Intro PyGame Capitulo 1

Curso de: Programacion de Juegos con PyGame Por: Ricardo D. Quiroga – L2Radamanthys → [email protected]

Programación de Juegos con PyGame

Capitulo 1: Nociones Básicas

1

mailto:[email protected]


IntroducionLa mayoría de las personas que han pasado por áreas relacionados con la

programación, se han preguntado alguna vez: ¿Cómo se hace un video juego?, ¿Qué tienen que saber? ¿Por donde empezar? y muchas preguntas más. Muchos han intentado hacerlo sin resultado alguno, otros en cambio han podido crear sus primeros juegos con un poco de esfuerzo, pero aun así siempre quedan preguntas pendientes por responder y bastante por aprender.

En este tutorial pretendemos ayudarlos a resolver varias de sus dudas sobre el desarrollo de juegos. Para comenzar en el desarrollo de video juegos es preferible hacerlo con proyectos pequeños, con el fin de ser capaces de cumplir las metas que nos fijamos, nunca pensar en proyectos extremadamente grandes que se nos escapen de las manos, ya que lo mas probable es que nunca los terminemos, lo cual nos llevará a la frustración. Es común que las personas que comienzan en el área de desarrollo de juegos comiencen programando algunos remakes como tetriz, space invader, etc.

Aunque muchos querrían empesar armando algunos juegos 3D tipo Need For Speed, Doon, PES, Diablo, LineageII, etc. A quien se le allá ocurrido esa idea les aviso de antemano que intentar hacer algo así es una tarea Titanica y solo los llevaría a la frustración Es mas estos juegos son realizados por grandes equipos de programadores, sonidistas, grafistas, etc. Aquí les doy algunos números:

Se invierte el doble de dinero en desarrollo de juegos con realización al Cine, el desarrollo de un juego en 3D es un negocio serio, Puede tomar de 2 a 3 años completar un juego como los anteriormente mencionados lo que supone un costo de 8 a 10 millones de US$ lo que supone que se devén vender + de 200.000 solo para pagar los costos y un dato importante pocos juegos logran vender mas de 100.000 aun así a no desesperar.

Hay varias Razones por la cual este curso esta basado en el desarrollo de juegos en 2D y no así en 3D aunque la moda en estos días sea la de desarrollarlos en 3D en seguida pasare a listar las razones por las cuales este curso esta dedicado al desarrollo de juegos en 2D.

Diferencias entre 3D y 2DMuchos se preguntaran por que este tema, bueno la razón es sencilla, este curso solo

abarcara la parte de programación de juegos en 2D, esto no es por cuestiones de que prefiera los juegos en 2D, lo que pasa es que es mas sencillo aprender primero a manejarse en un entorno 2D y luego recién pasar a una Api 3D, la mayoría de los conceptos son similares en cuanto a cuestiones de coliciones, IA, etc. bien comencemos:

En primer lugar las API 3D se basan en polígonos, Estos polígonos están formados por vértices con coordenadas en 3D. Lo que hacemos (o lo que hace la API), es “proyectar” estos polígonos sobre un plano (la pantalla, o más concretamente, un trozo de la pantalla al que se llama “viewport”).

Cuando esos polígonos los dibujamos en pantalla, además tenemos la opción de rellenarlos con una imagen, a la que llamamos “textura”. Este proceso se llama “rasterización”. Entonces, para hacer una aplicación 2D en una librería 3D, bastaría con usar una proyección ortogonal.

2



Eso es completamente correcto para las librerías 3D, que se basan en el proceso de “proyección + rasterización”. Sin embargo, al usar una librería 2D como SDL, esos conceptos sencillamente no existen.

Nota: digo SDL ya que pygame es una implementacion elegante al estilo Python de las librerías de SDL ya que existen otras implementaciones de SDL en Python pero terminan obligando a los programadores a escribir código al estilo C/C++ y por ende la programación de juegos termina siendo algo engorrosa.

Para entender cómo es la filosofía de la programación clásica 2D, hay que pensar cómo eran los ordenadores de hace 15 años. En esa época las tarjetas aceleradoras no existían (o costaban una pasta (demasiado diría para esos pequeños procesadores)), y todo este proceso de “proyección + rasterización” tenía que hacerse mediante software. Y en aquella época, los procesadores no eran especialmente rápidos, especialmente en operaciones en punto flotante.

Así que es lógico que al programar una aplicación en 2D, se hiciese mediante un sistema en el que las proyecciones y rasterizaciones no existan, y todos los cálculos sean únicamente operaciones enteras, que los procesadores pueden realizar mucho más rápido.

Herramientas Necesarias

Para poder crear un juego en 2D ademas de tener la idea de cómo funcionara el mismo se necesitan algunas herramientas para su desarrollo:

Lenguaje de Programación

Se puede programar juegos en casi cualquier lenguaje, aunque El lenguaje por excelencia en la programación de juegos siempre ha sido C/C++ pero C/C++ plantea una gran dificultad de ser aprendido por los programadores, ademas de que la mayoría de las cosas las tendríamos que hacer a mano de ahí viene a nuestra Ayuda Python quien ademas de ser fácil de aprender nos solucionara una gran cantidad de problemas que con C/C++ hubiéramos querido tirar todo por la ventana. Por ejemplo aprender lo necesario de Python para programar si no sabemos nada acerca de programación nos tomaría a lo sumo 2 semana, en cambio aprender C/C++ de primera fácilmente nos tomaría como mmínimo 3 meses....

Editor de Texto

Sera donde escribiremos nuestro código fuente por ejemplo en windows tenemos por defecto nuestro aburrido Notepad, aunque podemos bajarnos algunos mas avansados como el Notepad++, Scite, en Linux tenemos varios VIN, Nano, gedit, yo recomendaría Geany o Eric.

3



(Vista del Editor Notepad++)

(Vista del Editor Geany)

API Gráfica

4



Esta es un conjunto de Bibliotecas (librerías) que nos permiten manipular imágenes, las mas conocidas Son:

• OpenGL (Multiplataforma) • SDL (Multiplataforma)• Allegro (Multiplataforma)• DirectX, Direct3D (windows)

DirectX es un API desarrollada por MS el uso de esta api es un poco engorroso, ademas de la falta de documentación sobre la misma, otro inconveniente es que todo lo que programemos solo podrá correr en MS windows

OpenGL es una API desarrollada especialmente para el desarrollo de aplicaciones 3D aunque se la podría usar para desarrollo de juegos 2D pero a mi opinión eso seria usar un cañón para matar una mosca (por si les interesen usen COCOS que hace eso), Multiplataforma por lo que nuestro código podrá ser importado a cualquier SO como Linux, Mac OS, windows

SDL (Simple Direct-Medial Layer) Es una Api para realizar operaciones de dibujo 2D, en este Curso usaremos una adaptacion de SDL a Python PyGame. Al igual que OpenGL SDL es Multiplataforma

Conceptos Básicos de Programación 2DUna librería gráfica 2D se basa en el concepto de SUPERFICIES, y de operaciones

entre superficies. Una superficie no es más que un espacio en memoria donde guardar una imagen, y las operaciones que se realizan entre superficies, son copias de trozos de una superficie origen sobre una superficie destino. Un ejemplo que los usuarios de windows Conocerán es: el Paint.

Al cargar el paint, el lienzo representaría una superficie. Puede tener una imagen cargada desde un archivo, puede estar en blanco, etc... Ahora imaginad que ejecutamos 2 paints. Cada uno con su lienzo. Eso representa 2 superficies en memoria. Podemos tener una superficie vacía (blanca), y otra con una imagen cargada del archivo.

La operación básica entre superficies, sería hacer un “Copy-Paste”. Seleccionar una región en la superficie A, y copiarla sobre algún lugar en la superficie B. Esta operación es a la que se llama “Blit”, y es la más importante en cualquier librería 2D.

5



Al igual que en Paint (los usuarios de MS Windows lo devén conocer muy bien), al hacer un Blit, lo que había en la superficie destino en la región que sobrescribimos se pierde para siempre. Al copiar sobre esa posición machacamos los datos anteriores. Esto es importante si tenemos, por ejemplo, un personaje moviéndose sobre un escenario.

Al dibujar el personaje destruimos esa región del escenario, así que si el personaje se mueve, tendremos que volver a dibujar de nuevo el escenario por cada fotograma. También de esto sacamos que el orden en que hagamos los blits importa, y mucho. Si algo tiene que quedar por encima, tiene que ser lo último que bliteemos.

No interesa si manchamos la superficie destino ya que tenemos intacto el original. Pero bien solo hemos estado bliteando imágenes sobre otras ahora como mostramos esto sobre pantalla.

Flipping

Vale, ahora tenemos una imagen que hemos compuesto sobre el Buffer Primario (nuestra famosa superficie destino en la imagen). Ya tenemos todo listo para que se muestre en el monitor. ¿Como hacemos para “actualizar” el monitor?

Tenemos 3 formas de hacerlo paso a explicarlas:

Dibujar Directamente Sobre Pantalla

La primera forma es ir dibujando todos los elementos sobre pantalla pero con ello tenemos un problema el cual es que al ejecutar nuestro juegos veremos un molesto parpadeo esto sucede ya que mientras intentamos dibujar sobre pantalla esta se re-dibuja produciendo retraso en el refresco vertical mejor conocido como VSINC.

Doble Buffer

El segundo método es copiar todas la imágenes sobre una superficie y recién dibujar sobre la tarjeta gráfica así evitando ese molesto parpadeo, este metodo se denomina Doble

6



Buffer y produce un efecto suavizando la imagen. Por suerte SDL (Nosotros usaremos PyGame que es una librería que trabaja con SDL) nos resuelve este problema.

Dirty Rectangles (Rectángulos Sucios)

Esta técnica es una forma de optimizar la técnica de Double Buffering constantemente estamos volcando el contenido completo de una zona de memoria a otra, pero puede haber ocasiones donde no este sucediendo ningún cambio en pantalla, o tal vez solo haya cambiado una pequeña parte de esta. Es aquí donde aparece la técnica, Dirty Rectangles (rectángulos sucios) y su funcionamiento es bastante simple. Copiaremos a la Video RAM solo las áreas de la pantalla que han cambiado, por lo tanto, cada vez que algún sprite cambie su posición, copiaremos a la memoria de video el área de un rectángulo que rodee al sprite (incluyendo el área donde se encontraba antes) y la colocaremos justo en las mismas coordenadas en la Video RAM. Pero no siempre es recomendable utilizar esta técnica, ya que podemos tener demasiados sprites moviéndose por la pantalla, y ya no sería óptimo estar copiando cada rectángulo a la Video RAM, ya que sería lo mismo que copiar la pantalla completa, en un caso así conviene solo usar la técnica Double Buffering.

Estructura básica que deveria tener un JuegoInicializacionCiclo de juego:

Entradas (teclado, mouse, joistick)Procesamiento de eventosSalidas (gráficos, sonidos)

Finalizacion

7



Pixel

El elemento mas básico en la programación gráfica es el pixel, es decir un elemento de una imagen que representa la unidad mínima que esta puede contener, básicamente lo podríamos definir como un simple punto que forma parte de una imagen definida que tiene asociado un color.

La imagen que aquí vemos esta formada por un arreglo de pixel en forma de matriz, grilla o cuadricula la cual se conoce como mapa de bits.

8



BITMAP (Mapa de Bits)

Un Bitmap básicamente es una cuadricula de pixeles que tiene atributos como ancho y alto (la cual se mide en numero de pixeles) y tiene asociado algún formato ya sea bmp, png, jpg, gif, etc. La diferencia entre los formatos se da por algunos parámetros tales como calidad y tamaño de archivo, por ejemplo si queremos mantener tamaño/calidad, los formato que se ajustan son png y jpg, pero acarrean un problema, ya que usan algoritmos de conprecion trabajar directamente con ellos consume mucho recursos por lo que se debe hacer una conversión a un formato mas simple da el caso del bmp, tif, etc.

BPP (Bits por Pixel)

Otra características de las imágenes es la profundidad de colores. (números de bits que se usan para representar un color en particular), el numero de bits que podemos utilizar es de 1, 8, 16, 24, 32 siendo 32 bits la mas alta resolución posible.

El numero de combinaciones posibles se calcula de la siguiente forma:

CANTIDAD DE COLORES = 2BPP

Cuando utilizamos 8 bits para mostrar un pixel tenemos 256 colores posibles pero no se representa usando las intensidades RGB (ver mas abajo) sino mediante una paleta de colores (un arreglo que contiene 256 colores ), aunque ya no se use esto casi uno de los usos mas comunes era el de aplicar distintas paletas a una sola imagen obteníamos distintas imágenes ejemplo: si poníamos rojo para el jugador 1 y azul para el jugador 2 tenias dos sprites diferentes sin tener que almacenar 2 veses la misma imagen.

9



Actualmente los formatos que mas se usan son el de 16 y 32 bits , El color se representa normalmente en el formato RGB = (Red, Green, Blue) aunque algunos formatos imágenes tienen un parámetro extra el caso de los png RGBA = (Red, Green, Blue, Alpha) (véase Color-Key), todas las componentes que forman un color se empaquetan en un entero, el orden depende de la arquitectura que estemos usando RGB (Big Endian) o BGR (Little Endian).

Resolución de Pantalla

Anteriormente mencionamos que las imágenes tienen un ancho y un alto dado en pixel a esto se llama resolución, la resolución no se aplica a la imagen solamente sino también a la pantalla, las resoluciones mas estándares son:

• 320x200• 320x240• 640x480• 800*600• 1024*768• 1152x864• etc.

La resolución de pantalla en un juego es de gran importancia y depende del tamaño de sprites que estemos usando, el escenario, y ademas una cosa importante a mayor resolución y ,mayor cantidad de bits por pixel nuestra maquina necesitara mas recursos para trabajar ademas tendremos que ver que la resolución sea soportada por nuestro monitor, etc.

Algunos modos conocidos:

Ancho x Alto x BPP320x200x8 (nuestro tan querido modo 13h (si alguno jugo con un family game (consola de 8 bits, o si son mas retro un Atari :P) alguna ves debe conocerlo))320x240x8 (modo x)640x480x16 (la configuración de la SNES y GENESIS (otro lindo recuerdo)800x600x32 (800 pixeles de ancho x 600 pixeles de alto a 32 bits por pixel) etc.

Por ejemplo supongamos que estamos trabajando con el siguiente modo de video, 800x600x32 y queremos conocer cuando memoria ocupa una imagen con las mismas dimensiones que la resolución seleccionada, entonces el tamaño que ocupará será de:

Tamaño = 800 x 600 x 4(1 byte = 8 bits) = 1.920.000 bytes = 1.83 Mb

En los primeros juegos que aparecieron para PC, se utilizaban resoluciones muy bajas como 320x200 (también conocido como modo 13h) o 320x240 (modo x) y a 8 bits por pixel, o sea como ya sabemos disponíamos de un máximo de 256 colores.

A medida que pasaron los años se empezaron a utilizar resoluciones de 640x480 o 800x600 y a profundidades de color más altas, de 16 o 32 bits, todo esto gracias a que aumentaron las capacidades de las tarjetas de video.

10



Hoy en día, en la mayoría de los juegos tenemos la posibilidad de elegir el modo de video que mejor se adapte a nuestro equipo. Existen algunos casos típicos, como cuando queremos tener el mejor rendimiento en nuestro video juego, bajamos la resolución al mínimo o a una resolución intermedia. Al contrario, cuando disponemos de un buen equipo y una buena tarjeta de video, lo más probable es que seleccionemos un modo de video más alto, para disfrutar de unos gráficos de mejor calidad.

SpriteUn sprite (no me gusta usar su posible traducion 'Duende') es cualquier objecto que

aparece en nuestro juego aunque normalmente nos referimos a las imágenes de los personajes, los sprites pueden ser estaticos (los tiles del mapa) o dinámicos (un personaje de nuestro juego). Normalmente un sprite trae consigo un conjunto de atributos los mas comunes, imagen y posición en pantalla.

Transparencia: Color-Key

Cuando mostramos una imagen en pantalla sabemos que siempre se vera como una rectángulo pero sabemos que tiene dentro representado un objecto o personaje, al dibujar esta imagen queremos ver solamente la forma representada, para ello debemos elegir algún color transparente, pintar con ese color las zonas que no queremos que se dibujen en pantalla y luego dibujar la imagen ignorando dicho color.

Normalmente utilizamos el color magenta, (su valor en RGB es (255, 0, 255)) como color de transparencia ya que es muy poco probable que se encuentre en nuestra imagen.

Pero no solo usar un color como el magenta es la solución para no ver una imagen en su forma original, también podemos hacer uso de las propiedades del formato gráfico PNG (Portable Network Graphics), ya que este formato guarda un canal alpha con las partes transparentes de la imagen.

Transparencias: Máscara

Existe otro método para ignorar un color en una imagen, el uso de una máscara que se antepone al Bitmap original, es decir, debemos tener otro Bitmap que indica cuales son los pixeles transparentes. El color que indica la transparencia es el negro, y el color blanco la figura que queremos mostrar. Por lo tanto, al dibujar la imagen, recorreremos cada pixel de la máscara, y si este color es blanco, mostraremos el pixel del Bitmap original que se

11



encuentra en esa posición.

TransformacionesCuando dibujamos un sprite en pantalla, tenemos la posibilidad de aplicar algunas

transformaciones, las más usadas son las siguientes:

Transformaciones: Translacion

Esta es la transformación más simple, corresponde a cambiar la posición del sprite para luego dibujarla en otro lugar de la pantalla, dando el efecto de movimiento, sin duda lo más usado en cualquier video juego Y se resume en asignar una nueva posición a las coordenadas (x, y) del sprite.

Por ejemplo si las variables x e y son las coordenadas de la esquina superior izquierda del sprite, y vx, vy las velocidades en cada eje, con una simple suma en cada componente cambiaremos la posición del sprite.

x = x + dxy = y + dy

Transformaciones: Rotación

Otra transformación típica, que consiste en girar el sprite un número determinado de grados. Se usa para mostrar objetos vistos desde otro ángulo, por ejemplo en el video juego Micro Machines, cuando doblamos cambiamos el ángulo del auto y luego este cambio lo vemos reflejado en la pantalla gracias a la rotación.

Transformaciones: Scaling

Otra transformación muy usada en algunos video juegos, consiste en escalar una imagen, es decir, cambiar su tamaño, normalmente proporcional.

12



En la imagen anterior nos damos cuenta que al aumentar su tamaño, se produce un efecto no deseado en los bordes de la imagen, conocido como aliasing, es decir, las líneas o curvas que forman los bordes de la imagen se ven discontinuas (en forma de escalera). Para esto existe una solución, el antialiasing, una técnica que permite suavizar todos los bordes y así disminuir el efecto de escalera. En toda API gráfica encontraremos una función que realice esta tarea.

Transformaciones: Flipping

El flipping es un tipo de transformación especial para realizar algunos efectos. Básicamente existen dos tipos, Vertical Flip que corresponde al efecto que se produce cuando se refleja un objeto en el agua y Horizontal Flip que corresponde al reflejo de un objeto en un espejo. Con la siguiente imagen quedará mucho más claro.

Alpha blending

Es una técnica para crear transparencia en la imagen, para ello se agrega un cuarto canal (Alpha) esta técnica se puede aplicar a un Bitmap completo o solo a un grupo de pixeles.

13



Sistema de coordenadas 2D Es importante saber que cuando dibujamos algo en pantalla, siempre tendremos que informar la posición en la cual dibujaremos el objeto. Por defecto la posición de un objeto se encuentra en la esquina superior izquierda, pero algunos prefieren usar como punto de anclaje el centro, y en general puede ser cualquier otro punto.

Calcular el centro del punto es tan simple como sumar a la posición x, la mitad del ancho del objeto y a la posición y, la mitad de la altura del objeto.

Nosotros estamos acostumbrados a trabajar en el cuadrante I del plano cartesiano, donde las coordenadas del eje "x" crecen hacia la derecha y las coordenadas del eje "y" crecen hacia arriba, pero al trabajar con gráficos en el computador, esto es relativamente distinto, ya que el eje y se invierte, es decir, ahora el mundo está al revés, las coordenadas en el eje "y" crecerán hacia abajo.

En la siguiente imagen podemos ver el plano cartesiano en su forma normal versus el plano cartesiano utilizado en la programación gráfica.

Sistema de coordenadas Cartesianas

14



Sistema de coordenadas utilizado en la Programación Gráfica

Como vemos las api gráficas solo muestra el primer cuadrante solo que rotado 180 grado, ademas algo importante a tener en cuenta es que para las coordenadas de los objectos solo se puede utilizar valores enteros.

Sincronización en los video juegosLo ideal en cualquier video juego, es que todos los objetos se muevan a la misma

velocidad, independiente de la velocidad del computador donde se ejecute. Si no nos preocupamos por esto, y ejecutamos nuestro video juego en un computador antiguo, por ejemplo, en un Pentium de 200 Mhz, probablemente el video juego se vea muy lento, en cambio si lo ejecutamos en un computador con un procesador de última generación se verá tan rápido que será imposible jugar.Para solucionar este problema, disponemos de dos métodos.

Sincronización por Framerate

El primer método, consiste en sincronizar el framerate, también conocido como FPS o Frames per Second (Cuadros por segundo). Al hablar de FPS, nos referimos a la frecuencia con que se ejecuta el ciclo principal de un video juego en un segundo. A mayor cantidad de FPS obtendremos una mayor fluidez en las animaciones.

En el cine se considera que una velocidad de 24 FPS es suficiente para que el ojo humano perciba una animación fluida, pero en los video juegos esta cantidad es demasiado baja. Valores adecuados son sobre 60 o 100 FPS.

15



El método es bastante sencillo, y lo primero que debemos hacer cuando comienza el ciclo del video juego, es obtener el tiempo transcurrido hasta ese momento, que normalmente se mide en milisegundos. Luego procesamos lo relacionado al video juego, ya sea entrada, IA, lógica del juego, detección de colisiones, dibujo de gráficos, etc. y antes de terminar el ciclo, creamos otro loop en el cual vamos obteniendo el tiempo transcurrido hasta ese momento, calculamos la diferencia de tiempo y verificamos si es menor a los FPS que buscamos. De esta forma cada vez que ejecutemos el programa en una máquina diferente, el programa esperará el tiempo adecuado para obtener los FPS.

Utilizando este método, en computadores más rápidos se verá más fluido, pero si lo ejecutamos en una máquina con un procesador mucho más antiguo del que usamos para desarrollarlo, lo más probable es que se vea bastante lento.

Claro, no todo podía ser perfecto, pero es por eso que los video juegos piden algunos requerimientos mínimos.

Sincronización por Tiempo

El segundo método consiste en sincronizar en base al tiempo. En este método no importa el framerate que posea el video juego, pero aun así los objetos se moverán a la misma velocidad en todas las máquinas.

Este método se usa bastante en video juegos 3D, ya que el framerate varía mucho en cada ciclo, dependiendo de la cantidad de objetos que se deban renderizar. Pero este método también tiene su desventaja, a pesar de que los objetos se mueven siempre a la misma velocidad, en un computador más lento, el desplazamiento no se verá fluidamente. Esto se aprecia en el ejemplo que ya vimos, en el caso extremo de demorarse 1 segundo cada ciclo, cada vez que se deba mover un objeto, este aparecerá 5 pixeles más a la derecha, produciéndose un salto muy notorio.

En computadores aun más lentos, se comenzará a ver un parpadeo en el desplazamiento de los objetos. Pero como ya dijimos nuestro video juego siempre tendrá unos requerimientos mínimos y tendremos que seleccionar el método que más nos acomode. Pero claramente el primer método, Sincronización por framerate, es el más simple y el más extendido.

Resumen

Hemos aprendido varios conceptos, que nos ayudarán a comprender mejor la programación gráfica que se usa en los video juegos 2D.

Todos estos conceptos se pueden aplicar a cualquier biblioteca gráfica, muchas de las cosas que vimos ya vienen implementadas, como por ejemplo setear un modo de video, obtener un color, realizar operaciones de blitting, efectos de alpha blending, usar transparencias por color keys, transformaciones como rotación, escalado, traslación, page flipping, etc., por lo tanto no será necesario que escribamos código para esto, pero conviene conocer su funcionamiento.

16


Intro PyGame Capitulo 1

Technology

Transcript of Intro PyGame Capitulo 1