26/2/14

[Tutorial] Mostrar imágenes (libGDX)

Buenas gente!

En esta entrada vamos a ver con algo de detalle una de las maneras que nos ofrece libGDX para mostrar imágenes en nuestra aplicación.

Crear cámaras:


Si empezamos un proyecto desde 0, no se nos mostrarán las imágenes a menos que pongamos una cámara. Para ello tenemos que crear en nuestro código principal del proyecto name una variable de tipo OrthographicCamera.

En nuestro método create() crearemos al principio del todo dos variables que nos guarden el ancho y alto de la pantalla del juego, que necesitaremos para crear nuestra cámara:

Justo a continuación inicializamos nuestra cámara:

Como parámetros le hemos pasado el ancho y largo del juego que obtuvimos antes.

Cargar imágenes:


Ya que las resoluciones de pantalla varían de un móvil a otro, o en tabletas, etc. las imágenes que introduzcamos deben seguir unas determinadas normas para que se vean y adapten correctamente a todos los dispositivos.

En primer lugar tanto el ancho como el alto deben ser un número resultado de elevar 2. Por ejemplo: 8, 16, 32, 64, 128, 256, 512... Esto es algo realmente importante. Si intentas cargar una imagen con dimensiones incorrectas libGDX crasheará.

Las imágenes deberás ponerlas en la carpeta assets de tu proyecto name-android para poder cargarlas.

Para usar una imagen en tu código usaremos una variable de la clase Texture.

Inicializamos la imagen en nuestra función create() o en la función en la que vayamos a crear la imagen de la siguiente forma:

En “filepath” pondremos lde donde cargar nuestra imagen. En nuestro caso la imagen está guardada en una carpeta dentro del proyecto, pero existen muchas más formas de cargar imágenes. Por ejemplo, desde una tarjeta SD.

La estructura de nuestro “filepath” debe ser la siguiente:

La función Gdx.files.internal toma como carpeta principal la carpeta assets por lo que si cargamos una imagen de ahí tan solo tenemos que poner su nombre y extensión. Si tuviésemos carpetas dentro de assets ya si tendríamos que indicarle la dirección.

Es muy importante en la función dispose() colocar el código para que se liberen todas las variables de tipo Texture que creemos. Para ello ponemos en esta función:

Si queremos mostrar una imagen de un ancho o alto distinto a una base de dos, exiten muchas maneras de hacerlo. Una de ellas es crear un TextureRegion. En este le indicaremos dentro de nuestra imagen que región coger. Para ello creamos una nueva variable de tipo TextureRegion y la inicializamos, como siempre, en nuestra función create:


En esta inicialización le pasamos la imagen de la que tomaremos una región, las coordenadas w1 y h1 donde comenzará nuestra región y las coordenadas w2 y h2 donde acabará.

Agrupar imágenes: SpriteBatch:


Un SpriteBatch es una clase que agrupa todas las imágenes que quieres ser mostradas en pantalla y mas muestra todas a la vez en vez de cargarlas una a una, lo que mejora muchísimo el rendimiento y tiempo de carga.

Para poner uno en nuestro proyecto, al igual que con la imagen lo declaramos al principio:


Y lo inicializamos después de nuestra cámara en la función create():


Como con las imágenes, es muy importante que coloquemos en la función dispone el código para liberar la memoria que ocupa nuestra variable SpriteBatch. Para ello ponemos la siguiente línea dentro de la función dispose():


Renderizar las imágenes:


Para mostrar las imágenes en pantalla una vez declaradas en nuestro código, debemos irnos a la función render().

Lo primero que debemos hacer es eliminar todas las imágenes que hubiese en la pantalla para volver a pintar las nuevas:

Ahora decimos que comience el batch:

A continuación ponemos todas las imágenes (o regiones de imágenes) que queremos mandarle al batch para que las dibuje en una posición x e y determinada:

Y, tras todas esas imágenes terminamos el batch, que las pintará todas:


Notas:

  • Cada vez que modifiques o añadas una imagen, en Eclipse deberás de refrescar (F5) la carpeta assets para que se actualice.
  • La posición (0,0) al dibujar nuestra imagen se encuentra abajo a la izquierda de la pantalla mostrada. Esto es por la forma de trabajar de OpenGL.
  • Para agilizar nuestra aplicación podemos juntar varias imágenes en una sola y crear varias TextureRegion en esta imagen final.
  • Esta forma de cargar imágenes nos sirve para imágenes estáticas. Más adelante veremos como hacer animaciones (Con Sprites).
  • Más adelante usaremos la clase Stage, que trae ya integrada un SpriteBatch y una cámara, y nos permite tratar con elementos que cambian a lo largo del tiempo.

Referencias:



2 comentarios:

  1. ¿para que sirve la cámara? el objeto cam nunca lo volviste a usar, ¿acaso solo hay que crearlo y ya? por ejemplo, si comento esa linea de código ¿las imágenes dejaran de mostrarse?

    ResponderEliminar
    Respuestas
    1. El modo de cámara que utiliza especialmente en este blog le brinda una vista ortho a tus elementos, lo que quiere decir que los objetos vistos a tráves de la cámara se ven del mismo tamaño sin punto de perspectiva.

      Eliminar