INTRODUCCI
This presentation is the property of its rightful owner.
Sponsored Links
1 / 28

INTRODUCCI Ó N A LOS GR Á FICOS 2D PowerPoint PPT Presentation


  • 76 Views
  • Uploaded on
  • Presentation posted in: General

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 ”

Download Presentation

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Introducci n a los gr ficos 2d

INTRODUCCIÓN A LOS

GRÁFICOS

2D

Por Leandro Barbagallo


Por qu 2d

Por qué 2D ?

  • Es más fácil de aprender que 3D.

  • Resultados más rápidos.

  • Permite enfocarse más en el gameplay.


Introducci n a los gr ficos 2d

PARTAMOS

DESDE

CERO

!


Pixel

Pixel

  • Proviene de picture element,“elemento de imagen”

  • Es la menor unidad en la que se descompone una imagen digital.


Bitmap

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


Profundidad de color bpp

Profundidad de color (bpp)

  • bpp ( bits per pixel)

  • combinaciones de colores = 2 bpp


Introducci n a los gr ficos 2d

1 bpp - Monocromo

1 byte = 8 pixeles

Byte

1

0


8 bpp color indexado

8 bpp – Color indexado

1 byte = 1 píxel

0-255

Byte

16

16

Paleta de Colores


Introducci n a los gr ficos 2d

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


Introducci n a los gr ficos 2d

¿ ?

Todo muy lindo… pero…

¿ Qué tiene que ver esto

con los juegos 2D ?


Sprites

SPRITES !

  • Sprite = bitmap + datos asociados.

  • Son todos los objetos que interactúan en escena.

Datos:

Posición, Dirección, Angulo, Vidas, etc.


Introducci n a los gr ficos 2d

Animación de sprites

  • Se logra repitiendo una secuencia de bitmaps

1

Frames

8


Introducci n a los gr ficos 2d

Transparencia por Colorkey

  • Evita que los sprites se vean rectangulares.

  • Se ignora el color especificado.

Colorkey:

RGB (255,0,255)


Introducci n a los gr ficos 2d

Transparencia por Máscara

  • Se antepone un bitmap para indicar los píxeles transparentes.


Bitmaps vs vectores

Bitmaps vs Vectores

Vector

Instrucciones matemáticas para describir curvas y líneas.

Bitmap

Matriz de píxeles

Vector

Bitmap


Introducci n a los gr ficos 2d

¿ ?

¿ Qué más puedohacer con estos sprites?


Introducci n a los gr ficos 2d

Transformaciones !

  • A los sprites se les aplica transformaciones.

  • Las tres mas usadas son:

Flipping

Rotation

Scaling


Introducci n a los gr ficos 2d

Normal

Normal

Normal

45 °

H Flip

50%

150%

180 °

V Flip

Flipping

Rotation

Scaling


Introducci n a los gr ficos 2d

Alpha blending

Es el grado de opacidad de un objeto con respecto al fondo.

25 %

100 %

50 %

75 %


Introducci n a los gr ficos 2d

Implementaciones del alpha blending

por pixel

por bitmap


Introducci n a los gr ficos 2d

¿ ?

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


Introducci n a los gr ficos 2d

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


Introducci n a los gr ficos 2d

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


Introducci n a los gr ficos 2d

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


Introducci n a los gr ficos 2d

¿ ?

OK ...

Y ahora quiero empezar a hacer un juego,

¿ Con qué empiezo ?


Introducci n a los gr ficos 2d

SDK ’s

Directx

DirectX

Director

Blitzbasic

SDL

OpenGL

OpenGL

Allegro

Darkbasic

Flash

GameMaker

Java


Introducci n a los gr ficos 2d

¿ 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.


Introducci n a los gr ficos 2d

FIN !

¿ Preguntas ?

¿ Comentarios ?


  • Login