LIBGDX TextureAtlas

De MediaWiki
Ir a la navegación Ir a la búsqueda

UNIDADE 3: TextureAtlas

Introdución

Nota: Esta explicación está relacionada cos gráficos.




Información da wiki: https://github.com/libgdx/libgdx/wiki/Texture-packer

Información da clase TextureAtlas: http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/g2d/TextureAtlas.html.

Cando cargamos os gráficos do noso xogo estamos accedendo a disco por cada un deles. Existe unha forma máis óptima de carga que consiste en cargar todos os gráficos de vez.


Para facelo o proceso é o seguinte:

  • Primeiro temos que deixar nun cartafol todos os gráficos que queiramos xuntar.
  • Cun programa externo ou cunha ferramenta de Libgdx indicámoslle onde se atopan os gráficos a xuntar (o cartafol) e cal vai ser o cartafol de saída. Esta ferramenta ten, entre os seus parámetros, o ancho e alto do arquivo de saída, pudendo dar como resultado máis dun arquivo de saída. O resultado de executar esta ferramenta serán dous arquivos:
Un arquivo gráfico onde estean todos os gráficos xuntos.
Un arquivo de texto cunha extensión .atlas (se pode editar) onde estean recollidas as coordenadas de cada un dos gráficos 'soltos' e o seu nome para poder referencialo (coincide có nome individual, o que tiña antes de xuntalo).
  • Dende Libgdx, unha vez cargado o atlas, podemos referenciar cada un dos gráficos utilizando unha clase TextureRegion en vez da clase Textura utilizada ata o de agora.

Ferramenta para crear o Atlas

  • No mercado existen varias ferramentas que fan o que necesitamos, como por exemplo:
http://www.codeandweb.com/texturepacker/download
http://renderhjs.net/shoebox/
  • TexturePacker: Ferramenta do propio Libgdx que ven dentro dun paquete de aplicacións.

Neste manual vou explicar a ferramenta do Libgdx.

Dende terminal / consola

Necesitamos instalar un conxunto de ferramentas que veñen nun paquete de nome GDX-TOOLS.

O proceso para instalalo é moi simple grazas a Gradle e a súa forma de tratar as dependencias.



Tamén podemos descargalo directamente cando xeramos o proxecto coa ferramenta de xeración de proxectos, marcando la opción GDX-TOOLS.

Graficamente


Podemos descargar a ferramenta dende este enlace: https://code.google.com/p/libgdx-texturepacker-gui/

Proceso para crear o Atlas

Dende consola / terminal


  • Debemos crear unha clase de nome XerarGraficos có método main no proxecto Desktop.
LIBGDX UD3 TextureAtlas 7.JPG


  • Escribiremos este código:
 1 import com.badlogic.gdx.tools.texturepacker.TexturePacker;
 2 
 3 public class XerarGraficos {
 4 
 5 	public static void main(String[] args) {
 6 		// TODO Auto-generated method stub
 7 
 8 		TexturePacker.process("C:\\temporal\\in", "C:\\temporal\\out", "packimaxes");
 9 	}
10 
11 }

O método process leva tres parámetros. O cartafol onde están os gráficos a xuntar, o cartafol onde vai xerar o atlas, e o nome do atlas e arquivo gráfico xerado.

Importante: Necesitamos poñer a dobre barra xa que é un caracter de escape.

  • Executamos a clase e teremos de saída o atlas.
Exemplo de saída do arquivo gráfico
LIBGDX UD3 TextureAtlas 8.png


Exemplo de saída do arquivo .atlas
 1 packimaxes.png
 2 size: 435,126
 3 format: RGBA8888
 4 filter: Nearest,Nearest
 5 repeat: none
 6 LIBGDX_itin1_alien
 7   rotate: false
 8   xy: 56, 3
 9   size: 26, 22
10   orig: 26, 22
11   offset: 0, 0
12   index: -1
13 LIBGDX_itin1_alien_dead
14   rotate: false
15   xy: 322, 49
16   size: 26, 22
17   orig: 26, 22
18   offset: 0, 0
19   index: -1

Fixarse como o único que ten este arquivo son o conxunta de nomes que tiñan os arquivos gráficos individuais e a súa posición e tamaño.

Graficamente

Executaremos a ferramenta previamente descargada.

LIBGDX UD3 TextureAtlas 9.jpg

Só debemos de seguir os pasos indicados:

  • Crear un novo pack.
  • Escoller o cartafol onde están os gráficos a empaquetar (input).
  • Escoller o cartafol de saída (output).
  • Premer o botón Pack´em all.


Dará como resultado o mesmo que a opción de consola explicada anteriormente.

Uso do Atlas

Temos que copiar os dous arquivos xerados ó cartafol assets da versión Android.

O proceso de carga do atlas será:

  • Definir as clases que imos utilizar.
Para o caso do atlas vai ser a clase TextureAtlas.
Para o caso dos gráficos individuais vai ser a clase TextureRegion.
1 	private static TextureAtlas texturas_todas;
2 	public static TextureRegion textureAlien;   
3 	public static TextureRegion textureNave;
  • Cargamos o atlas e as textureregion:
1 		texturas_todas = new TextureAtlas("packimaxes.atlas");
2 
3 		textureAlien = texturas_todas.findRegion("LIBGDX_itin1_alien");
4 		textureNave = texturas_todas.findRegion("LIBGDX_itin1_nave");
Nota: Fixarse como para referenciar as rexións non necesitamos escribir a extensión dos arquivos, só o seu nome (no exemplo: LIBGDX_itin1_alien)
  • Agora as debuxamos como sempre:
 1 	@Override
 2 	public void render () {
 3 		Gdx.gl.glClearColor(1, 0, 0, 1);
 4 		Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
 5 		batch.begin();
 6 		batch.draw(textureAlien, 0, 0);
 7 		batch.draw(textureNave, 100, 100);
 8 		batch.end();
 9 		
10 	}
  • Liberamos o atlas, as textureregion non fai falla.
Nota: Lembrar que se estades a desenvolver o xogo do manual, a liberación das texturas (neste caso do atlas) se fai no método liberarTexturas da clase AssetsXogo.
1 	@Override
2 	public void dispose(){
3 		if (texturas_todas!=null)
4 			texturas_todas.dispose();
5 	}

Exemplo de código

Deberedes de cambiar a clase co que inician as diferentes plataformas pola seguinte:

Un exemplo completo baseado no xogo desenvolto.

  • Descargade e descomprimide o arquivo seguinte. Copialo ó cartafol assets do proxecto Android.

Media:LIBGDX_textureAtlas.zip

  • Crear unha nova clase.

Código da clase TextureAtlasCarga
Obxectivo: amosar como utilizar un Atlas

 1 package com.plategaxogo2davanz.angel;
 2 
 3 import com.badlogic.gdx.ApplicationAdapter;
 4 import com.badlogic.gdx.Gdx;
 5 import com.badlogic.gdx.graphics.GL20;
 6 import com.badlogic.gdx.graphics.g2d.SpriteBatch;
 7 import com.badlogic.gdx.graphics.g2d.TextureAtlas;
 8 import com.badlogic.gdx.graphics.g2d.TextureRegion;
 9 
10 public class TextureAtlasCarga extends ApplicationAdapter {
11 	SpriteBatch batch;
12 	
13 	private static TextureAtlas texturas_todas;
14 	public static TextureRegion textureAlien;   
15 	public static TextureRegion textureNave;
16 	    
17         @Override
18 	public void create () {
19 		batch = new SpriteBatch();
20 		
21 		texturas_todas = new TextureAtlas("packimaxes.atlas");
22 
23 		textureAlien = texturas_todas.findRegion("LIBGDX_itin1_alien");
24 		textureNave = texturas_todas.findRegion("LIBGDX_itin1_nave");
25 		
26 		
27 	}
28 
29 	@Override
30 	public void render () {
31 		Gdx.gl.glClearColor(1, 0, 0, 1);
32 		Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
33 		batch.begin();
34 		batch.draw(textureAlien, 0, 0);
35 		batch.draw(textureNave, 100, 100);
36 		batch.end();
37 		
38 	}
39 
40 	@Override
41 	public void dispose(){
42 		if (texturas_todas!=null)
43 			texturas_todas.dispose();
44 	}
45 }


TAREFA OPTATIVA A FACER






TAREFA OPTATIVA A FACER: Modifica a clase AssetsXogo para cargar os gráficos do xogo utilizando un atlas.
Nota:

  • Lembra borrar do cartafol assets todos os gráficos que estean no atlas xa que non os vas necesitar.
  • Lembra modificar ó método dispose para liberar o atlas.




-- Ángel D. Fernández González -- (2015).