Graficación

1. Graficación M.C. Juan Carlos Olivares Rojas

2. Agenda • Diseño de juegos con DirectX. • OpenGL. • Java3D.

3. Introducción • Los sistemas de graficación se basan a través de primitivas de dibujo en pantalla en 2D. Dichas primitivas generalmente son el punto, la línea, figuras geométricas como el rectángulo, la elipse, etc. • A pesar de basarse en elementos en 2D se pueden crear figuras 3D cambiando las perspectivas y definiendo volumen a las figuras.

4. Introducción • Con la utilización de estas APIs básicas para el manejo de elementos gráficos, en la pantalla se pueden construir sistemas para realizar gráficos, videojuegos, elementos gráficos del sistema operativo, etc. • Las APIs de graficación en la gran mayoría de los casos dependen del lenguaje de programación utilizado para programarlas.

5. Introducción • En este curso describiremos las APIs básicas para el manejo de gráficos en Java. • La clase más básica es la Graphics, la cual tiene métodos que nos permiten dibujar sobre un lienzo Canvas. • Generalmente se utilizan dentro del método paint() de un Applet o de una aplicación gráfica.

6. Introducción • Los métodos repaint() y update son variantes del método paint(). • El método repaint() se utiliza cuando se desea volver a dibujar la pantalla (lo cual es muy frecuente en los sistemas gráficos multitarea) y dibuja toda la pantalla. El método update() sólo actualiza una región de la pantalla. Muy utilizado en componentes gráficos como botones o listas desplegables.

7. Introducción • La clase Graphics se encuentra dentro del paquete java.awt.*; • El método drawString() permite dibujar una cadena de texto en la pantalla. • El método drawLine() dibuja una línea en la pantalla. El método drawRectangle() permite dibujar un rectángulo en pantalla.

8. Introducción • El método drawOval permite definir óvalos y circulos. El método drawImage() permite mostrar imágenes en pantallas. • El método clearRect() permite borrar un área de la pantalla. El método copyArea() copia un área de memoria. Esto se utiliza en los métodos de recorte (clip). • Métodos como drawPolygon y drawPolyline() permiten definir figuras más elaboradas.

9. Introducción • Los métodos que inician con fill, como fillOval(), fillRect(), etc., realizan las mismas figuras pero pintan el relleno de las figuras. • Otros elementos a considerar para el manejo de gráficos son el color y las fuentes (tipos de letras). Java define clases para manipular estos objetos gráficos de manera amplia.

10. Introducción • Los métodos getFont(), setFont(), getColor() y setColor() permiten manipular fuentes y colores. • La clases Font y Color se encuentran definidas también en java.awt.* • El método translate() de Graphics() permite cambiar el punto de referencia que de manera predeterminada es 0,0 para esquina superior izquierda.

11. Introducción • La clase Color define el modelo de color a emplear, cuenta con algunas constantes para cada tipo de color como orange, yellow, darkgray, etc. El color está dado por tres valores uno para el rojo, otro para el verde y otro para el azul. • Se cuentan además con métodos para manipular los atributos de la clase.

12. Introducción • La clase Font permite el manejo de fuentes en pantalla. El constructor de esta clase recibe tres argumentos: el nombre de la fuente, el estilo de la fuente y el tamaño. • El estilo de la fuente está definido por tres constantes PLAIN (normal), BOLD (negrita) e ITALIC (cursiva). Se cuenta además con métodos auxiliares para manipular los atributos de la clase.

13. Introducción • Una fuente no es otra cosa que una colección de imágenes que representan los caracteres de un sistema. • Se cuenta además con la clase FontMetrics que define algunas métricas de la fuente: altura, bajada, la subida, la interlínea, etc.

14. Introducción • También se pueden dibujar figuras 3D muy sencillas con métodos como draw3DRect y fill3DRect que dan profundidad a las imágenes.

15. Introducción • Se puede obtener el contexto gráfico de una imagen y manipularla como si fuera un objeto Graphics. Ejemplo: Font letra = Font.getFont(Font.FACE_MONOSPACE, Font.SIZE_SMALL, Font.STYLE_PLAIN); Image logo = Image.createImage(letra.stringWidth(“Hi!”)) Graphics gr = logo.getGraphics(); …

16. Introducción • En otro tipo de aplicaciones como en el caso de las aplicaciones para dispositivos móviles, también se pueden manipular gráficos de formas muy similares. • El 80% de los programas de aplicación de J2ME (Java 2 Micro Edition) son juegos. • Se sigue manipulando la clase Canvas con sus respectivos métodos y algunas variantes.

17. Introducción • En el caso de aplicaciones móviles se sigue manejando la clase Graphics pero dentro de otro paquete: javax.microedition.midlet.* y javax.microedition.lcdui.*, dependiendo del tipo de aplicación desarrollada. • Las clases están dentro de diferentes Frameworks, por lo que en aplicaciones de J2SE no se pueden mezclar y confundir.

18. Introducción • Las aplicaciones gráficas para móviles se manejan muy parecido a lo que son aplicaciones convencionales, sólo es necesario extender la clase MIDlet. • La clase MIDlet tiene los métodos de startApp(), pauseApp() y destroyApp(). Para manipulación de gráficos se cuenta con el método paint() y variantes.

19. Introducción • Existen algunas APIs especiales para el manejo de gráficos en dispositivos móviles como los definidos por Nokia (com.nokia.mid.ui) que contiene clases como DirectGraphics. • También se pueden manejar otro tipos de elementos como multimedia, sprites, etc. También se cuenta con la clase Graphic3D para gráficas en 3D.

20. DirectX • La forma estándar de dibujar en el sistema operativo Windows es a través del GDI (Graphic Device Interface) que forma un anexo a la API Win32 y Win64. • Actualmente se utiliza GDI+ que es una versión simplificada de la API ampliamente utilizada por .Net, se debe de utilizar el nombre de espacio System.Drawing.

21. DirectX • Algunas de las clases con las que se cuenta en este namespace son: BitMap, Brush, Brushes, Font, FontFamily, Graphics, Icon, Image, Pen y Pens, Region, SolidBrush; Enumeraciones como: FontStyle, Estructuras como: Color, Point, PointF, Rectangle, RectangleF, Size y SizeF. • Tambien se sobreescribe el método OnPaint() para dibujar.

22. DirectX. • DirectX es un conjunto de componentes creados por Microsoft para el manejo de gráficos y sonidos de altas prestaciones utilizado en sistemas gráficos robustos como lo son videojuegos y algunas herramientas de autoría. • Se tiene acceso directo al conjunto de instrucciones del microprocesador como MMX, SSE, SSE2, 3DNow de AMD, etc.

23. DirectX • Se puede manejar más fácilmente esta API con el uso de algunas extensiones, tal es el caso de .Net Framework en donde se manejan clases de envolturas denominadas MDX (Managed DirectX). • Se debe incluir el espacio de nombres microsoft.DirectX. Direct3D.

24. DirectX • Algunas clases útiles son Device, CustomVertex, Render, etc. • DirectX es la base para la mayoría de los juegos desarrollados en Windows. Por este motivo, Microsoft ha diseñado un framework denominado XNA para la programación de videojuegos.

25. OpenGL • Fue diseñada por SGI en 1992, es la librería de gráficos más utilizada para el procesamiento de imágenes en 3D. • Se utiliza en todo tipo de arquitecturas, desde Windows, Unix, Mac OS X hasta consolas de videojuegos como PS3.

26. OpenGL • Existen diversas APIs pero la más estructuradas son con respecto a lenguajes como C. • Las funciones generalmente comienzan con el prefijo gl. Ejemplo: glClear(), glMatrixMode(), glTranslatef(), glFrustum(), glBegin(), glColor3f(), glVertex3f(), glEnd().

27. OpenGL • Existen extensiones de terceros para poder realizar algunos cálculos especiales, por ejemplo, para ciertas tarjetas de video 3D se cuentan con funciones especiales. • Actualmente la librería está cobrando un costo módico por hacer uso de ella en productos comerciales.

28. Java3D • Es una API para procesamiento digital de imágenes en 3D en lenguaje java, la cual basa su funcionamiento en OpenGL o DirectX. • Se deriva del paquete javax.media.j3d.* También se utilizan las clases java.awt.*, y javax.vecmath.*

29. Java3D • A continuación se describen de manera muy generalizada algunas clases del framework de Java3D: • Transform3D: Permite definir transformaciones de figuras 3D. • Canvas3D: Es el elemento que nos permite dibujar en pantalla las figuras geométricas.

30. Java3D • BranchGroup: nos permite definir un escenario compuesto de la agrupación de varios elementos en pantalla. • GraphicsConfiguration permite definir y obtener las características de la imagen. • TransformGroup: permite definir un grupo de figuras 3D que modificarán su comportamiento como si fueran una unidad.

31. ¿Preguntas?