1 / 28

INTRODUCCI Ó N A LOS GR Á FICOS 2D

INTRODUCCI Ó N A LOS GR Á FICOS 2D. Por Leandro Barbagallo. Por qué 2D ?. Es más fácil de aprender que 3D. Resultados más rápidos. Permite enfocarse más en el gameplay. PARTAMOS DESDE CERO !. Pixel. Proviene de picture element, “ elemento de imagen ”

harry
Télécharger la présentation

INTRODUCCI Ó N A LOS GR Á FICOS 2D

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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 ?

More Related