Presentación de PowerPoint

Taller Central
9. Videojuegos 2D.
Contenidos




Primeros Pasos.
Gráficos 2D.
Escenarios 2D
Rendering.
Pixel
 Picture element.
 Es la menor unidad que se
compone una imagen digital.
Bitmap
Gráficos vectoriales v/s matriciales
Gráficos vectoriales v/s matriciales
Sprite
 Sprite = Bitmap + datos asociados.
 Cualquier objeto que aparece en nuestro
videojuego.
 Puede ser estático o dinámico.
 Entre los datos podemos encontrar: posición
2d (x,y), tamaño (ancho, largo), dirección,
ángulo, etc.
Sprite: Transformaciones
Animación de Sprites
 Se logra repitiendo la secuencia.
 Se le denomina Frame a una de las imágenes que forman parte de la
animación.
 El número de frames dibujados en un periodo de tiempo se le llama frame
rate, esto es la velocidad de la animación del sprite.
Animación de Sprites
 La totalidad de frames que
determinan a un personaje se
denomina sprite sheet, el cual
generalmente está en un solo archivo
(imagen) .
Transparencia por ColorKey
 Utilizando un color de transparencia se evita que los sprites se vean
rectangulares.
 Por lo general se utiliza el color magenta, rgb (255, 0, 255), ya que es poco
probable que se encuentre en una imagen.
 Nota: hoy en día si se trabaja con archivos «png» se puede utilizar el canal alpha.
Alpha Blending
 Técnicas para crear transparencia en una imagen con respecto al fondo.
 Si bien en el formato «png» se cuenta con el canal alpha, las librerías
gráficas cuentan con esta función a nivel de hardware para así poder
cambiarlo de forma dinámica.
Screen Buffer
 Es el área de memoria de video, donde podemos dibujar algo que se verá
en pantalla
800 x 600 x 4 = 1.92 mb
Blitter
 Operación para transferir un sector de bytes (bitmap) de un sector de
memoria a otra, y es una forma de renderizar (dibujar) sprites en el screen
buffer.
 Ésta es una de las operaciones más criticas para el videojuego, ya que es la
operación más costosa y gracias a ella podemos armar la escena.
Blitter
Double Buffering
 La imagen no se pinta instantáneamente en la pantalla, sino que se hace
pixel por pixel, desde la esquina superior izquierda, y es tan rápido que el
ojo humano no lo percibe.
 El problema viene cuando se blitea en el screen buffer y al mismo tiempo
se está actualizando la imagen, produciéndose una sensación de
parpadeo, o superposición de imágenes.
 A este problema de parpadeo de pantalla se le denomina flickering.
Double Buffering
 Una solución es esperar que se pinte totalmente en pantalla y luego
realizar el blitter, secuencialmente.
 Para evitar totalmente el flickering, utilizamos la técnica de double
buffering, que consiste en tener 2 áreas de memoria en la ram. Una de
estas zonas se conoce como front-buffer, y corresponde a la que se
muestra actualmente en pantalla, y por otro lado tenemos a back-buffer,
que es donde dibujamos los objetos que formarán la escena.
 El truco es que las áreas de memoria para front-buffer y back-buffer se
van intercalando.
Double Buffering
Dirty Rectangles
 Para optimizar el double buffering, nos damos cuenta que muchas veces
hay sólo rectángulos en que cambia la imagen de un frame a otro, para
ello, se puede pintar sólo ese rectángulo en pantalla, lo que aumenta
considerablemente el rendimiento.
 Si los sprites que se están moviendo son muchos, no es recomendable
esta técnica, debido a que serían muchos los rectángulos que tendrían
que copiarse a la pantalla, y para ello sería mejor utilizar sólo double
buffering.
Background Utilizando 1 imagen
Background utilizando 1 imagen
Background utilizando un conjunto de imágenes
Más imágenes background en http://www.panelmonkey.org
Background utilizando un conjunto de imágenes
Paradox Mapping
 Se usan varios planos que se mueven a distintas velocidades, lo más
cercanos más rápido.
Paradox Mapping
Background: Problemas
 Si se diseñan videojuegos para dispositivos con recursos limitados, no es
recomendable utilizar background, debido a la memoria que éste utiliza
para la imagen, más aún si se desea utilizar backgrounds con capas.
 Si se desea interactuar con el «mundo»: pasar por debajo de un árbol, no
poder atravesar ríos, chocas con casas, recompensas ocultas, etc. No es
posible diseñarlo fácilmente utilizando sólo background, de hecho, no es
recomendable diseñarlo con backgrounds.
Tile Engine
 En el mundo virtual, los escenarios utilizan repetición de patrones: las
mismas casas, los mismos árboles, el mismo color de cielo, etc.
Tile Engine
 Tile: pequeña imagen que se repite para formar una más grande.
1
2
3
4
 TileSet: conjunto de tiles con lo que se forma una imagen.
1
2
Tile Engine
Tile Engine
 Layer: cada capa que conforma una parte visible o no del mapa.
Tile Engine
 Vistas isométricas: vista en perspectiva o lateral levantada =>
implementado con tiles, pero por niveles: piso, objetos y personajes. Pinto
cada nivel de atrás hacia adelante, partiendo por el piso y luego objetos y
personajes.
Videojuegos de Tablero
http://www.freewebs.com/cheoss/representacionTablero.html
Tile Engine
 Vistas isométricas.
Tile Engine : Herramienta
 Tile Studio
Collision Detection
 Conjunto de algoritmos matemáticos que nos permiten detectar
si 2 objetos están colisionando.
 Sin ellas podemos decir que NO puede existir un videojuego.
 El algoritmo varía dependiendo de la forma de los objetos, del
tipo de videojuego que se desarrolla y de la perfección que se
desee obtener.
 El algoritmo clásico es collisión box, y hoy en día se utiliza perpixel-collision.
Detección de Colisiones Entre Círculos
Detección de Colisiones Entre Círculos
Hay colisión
No hay colisión
Fuente: http://juank.black-byte.com/xna-colisiones-2d/
Hay colisión
Collision Box
Collision Box
Fuente: http://juank.black-byte.com/xna-colisiones-2d/
Colisiones por partes
Per-Pixel-Collision
 Es la detección de colisiones «perfecta»
(la más realista) para videojuegos 2D,
pero tiene la ventaja de ser «costosa».
 La detección de colisiones se realiza por la
superposición de los pixeles entre 2
sprites.
 Primero se realiza collision box, y de
haber colisión, se utiliza Per-PixelCollision.
 Para más información:
http://www.significant-bits.com/the-1-pixel-collision-box
Ahora «sólo» debemos aplicar
esto a nuestros videojuegos…