Download
slide1 n.
Skip this Video
Loading SlideShow in 5 Seconds..
INTRODUCCI Ó N A LOS GR Á FICOS 2D PowerPoint Presentation
Download Presentation
INTRODUCCI Ó N A LOS GR Á FICOS 2D

INTRODUCCI Ó N A LOS GR Á FICOS 2D

180 Views Download Presentation
Download Presentation

INTRODUCCI Ó N A LOS GR Á FICOS 2D

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. INTRODUCCIÓN A LOS GRÁFICOS 2D Por Leandro Barbagallo

  2. Por qué 2D ? • Es más fácil de aprender que 3D. • Resultados más rápidos. • Permite enfocarse más en el gameplay.

  3. PARTAMOS DESDE CERO !

  4. Pixel • Proviene de picture element,“elemento de imagen” • Es la menor unidad en la que se descompone una imagen digital.

  5. Bitmap • Es un conjunto de píxels ordenados en forma de grilla, formando una imagen. • Tienen ancho, alto y formato. 30 píxels 20 píxels = 20 x 30 = 600 píxels

  6. Profundidad de color (bpp) • bpp ( bits per pixel) • combinaciones de colores = 2 bpp

  7. 1 bpp - Monocromo 1 byte = 8 pixeles Byte 1 0

  8. 8 bpp – Color indexado 1 byte = 1 píxel 0-255 Byte 16 16 Paleta de Colores

  9. 24-32 bpp - Color real Blue (Alpha) Red Green Byte Byte Byte Byte 3 ó 4 bytes = 1 píxel Canales R 0 255 G 0 255 B 0 255

  10. ¿ ? Todo muy lindo… pero… ¿ Qué tiene que ver esto con los juegos 2D ?

  11. SPRITES ! • Sprite = bitmap + datos asociados. • Son todos los objetos que interactúan en escena. Datos: Posición, Dirección, Angulo, Vidas, etc.

  12. Animación de sprites • Se logra repitiendo una secuencia de bitmaps 1 Frames 8

  13. Transparencia por Colorkey • Evita que los sprites se vean rectangulares. • Se ignora el color especificado. Colorkey: RGB (255,0,255)

  14. Transparencia por Máscara • Se antepone un bitmap para indicar los píxeles transparentes.

  15. Bitmaps vs Vectores Vector Instrucciones matemáticas para describir curvas y líneas. Bitmap Matriz de píxeles Vector Bitmap

  16. ¿ ? ¿ Qué más puedohacer con estos sprites?

  17. Transformaciones ! • A los sprites se les aplica transformaciones. • Las tres mas usadas son: Flipping Rotation Scaling

  18. Normal Normal Normal 45 ° H Flip 50% 150% 180 ° V Flip Flipping Rotation Scaling

  19. Alpha blending Es el grado de opacidad de un objeto con respecto al fondo. 25 % 100 % 50 % 75 %

  20. Implementaciones del alpha blending por pixel por bitmap

  21. ¿ ? • ¿ Dónde y cómo muestro todos estos sprites ?

  22. Screen Buffer ! • Es el segmento de memoria que se ve en pantalla. • También se lo llama screen surface. Coordenadas 2D pantalla X (0,0) 600 px Y (799,599) 800 px 800 x 600 x 4 = 1.9mb

  23. Realiza la transformación de los sprites. Copia los sprites al screen buffer o a cualquier otro buffer. Blitter sprites BLITTER Imágenes screen buffer

  24. Evitando flickering • Flickering es el parpadeo de pantalla. • Se produce cuando se “blitea” en el screen buffer mientras la pantalla se esta actualizando. • Las dos técnicas más usadas para evitar esto son: PageFlipping PageFlipping DoubleBuffering BackBuffer Page 1 Blit punteroa pantalla swap PrimaryBuffer Page 2 Pantalla

  25. ¿ ? OK ... Y ahora quiero empezar a hacer un juego, ¿ Con qué empiezo ?

  26. SDK ’s Directx DirectX Director Blitzbasic SDL OpenGL OpenGL Allegro Darkbasic Flash GameMaker Java

  27. ¿ Cuál me conviene ? Hay dos charlas que les pueden responder esa pregunta… • Desarrollo de juegos con recursos limitados Por Juan Linietsky Mañana 20:00 hs.

  28. FIN ! ¿ Preguntas ? ¿ Comentarios ?