Wiki: /* Introdución */

2016-01-07T15:12:56Z

Introdución

Wiki: Página creada con «UNIDADE 3: TextureAtlas ===Introdución=== Nota: Esta explicación está [http://manuais.iessanclemente.net/index.php?t...»

2015-12-09T22:16:59Z

Página creada con «UNIDADE 3: TextureAtlas ===Introdución=== Nota: Esta explicación está [http://manuais.iessanclemente.net/index.php?t...»

Página nueva

UNIDADE 3: TextureAtlas

===Introdución===

Nota: Esta explicación está [http://manuais.iessanclemente.net/index.php?title=LIBGDX_Os_graficos 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 [http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/g2d/TextureRegion.html 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.

<gallery caption="Instalación da ferramenta TexturePacker" widths="200" heights="200px" perrow="3">
Image:LIBGDX_UD3_TextureAtlas_1.jpg| Editamos o arquivo build.gradle do '''proxecto principal'''.
Image:LIBGDX_UD3_TextureAtlas_2.jpg| Engadimos na '''sección Desktop''' esta liña: '''compile "com.badlogicgames.gdx:gdx-tools:$gdxVersion"'''
Image:LIBGDX_UD3_TextureAtlas_3.jpg| Marcamos có botón dereito o '''proxecto principal''' e escollemos as opcioóns de '''Gradle''' => '''Refresh Dependencies'''.
Image:LIBGDX_UD3_TextureAtlas_4.jpg| Unha vez feito se nos informa de que o jar coas ferramentas xa foi descargado.
Image:LIBGDX_UD3_TextureAtlas_6.jpg| Marcamos có botón dereito o '''proxecto Desktop''' e escollemos as opcioóns de '''Gradle''' => '''Refresh Dependencies'''.
</gallery>

Tamén podemos descargalo directamente cando xeramos o proxecto coa [http://informatica.iessanclemente.net/manuais/index.php/LIBGDX_Instalaci%C3%B3n_do_framework_LIBGDX 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.

[[Imagen:LIBGDX_UD3_TextureAtlas_7.JPG|300px|center]]
 

* Escribiremos este código:

<syntaxhighlight lang="java" line enclose="div" highlight="9" >

import com.badlogic.gdx.tools.texturepacker.TexturePacker;

public class XerarGraficos {

public static void main(String[] args) {
// TODO Auto-generated method stub

TexturePacker.process("C:\\temporal\\in", "C:\\temporal\\out", "packimaxes");
}

}

</syntaxhighlight>

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.

<center>Exemplo de saída do arquivo gráfico</center>
[[Imagen:LIBGDX_UD3_TextureAtlas_8.png | 300px | center]]

<center>Exemplo de saída do arquivo .atlas</center>
<syntaxhighlight lang="java" line enclose="div" highlight="6,13" >
packimaxes.png
size: 435,126
format: RGBA8888
filter: Nearest,Nearest
repeat: none
LIBGDX_itin1_alien
rotate: false
xy: 56, 3
size: 26, 22
orig: 26, 22
offset: 0, 0
index: -1
LIBGDX_itin1_alien_dead
rotate: false
xy: 322, 49
size: 26, 22
orig: 26, 22
offset: 0, 0
index: -1

</syntaxhighlight>

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.

[[Imagen:LIBGDX_UD3_TextureAtlas_9.jpg | 500px | center]]

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 [http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/g2d/TextureAtlas.html clase TextureAtlas].
::Para o caso dos gráficos individuais vai ser a [http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/g2d/TextureRegion.html clase TextureRegion].

::<syntaxhighlight lang="java" line enclose="div" highlight="" >
private static TextureAtlas texturas_todas;
public static TextureRegion textureAlien;
public static TextureRegion textureNave;

</syntaxhighlight>

* Cargamos o atlas e as textureregion:
::<syntaxhighlight lang="java" line enclose="div" highlight="" >
texturas_todas = new TextureAtlas("packimaxes.atlas");

textureAlien = texturas_todas.findRegion("LIBGDX_itin1_alien");
textureNave = texturas_todas.findRegion("LIBGDX_itin1_nave");

</syntaxhighlight>

::'''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:
::<syntaxhighlight lang="java" line enclose="div" highlight="6,7" >
@Override
public void render () {
Gdx.gl.glClearColor(1, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch.begin();
batch.draw(textureAlien, 0, 0);
batch.draw(textureNave, 100, 100);
batch.end();

}
</syntaxhighlight>

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

::<syntaxhighlight lang="java" line enclose="div" highlight="" >
@Override
public void dispose(){
if (texturas_todas!=null)
texturas_todas.dispose();
}
</syntaxhighlight>

==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'''
<syntaxhighlight lang="java" line enclose="div" highlight="" >
package com.plategaxogo2davanz.angel;

import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.graphics.g2d.TextureAtlas;
import com.badlogic.gdx.graphics.g2d.TextureRegion;

public class TextureAtlasCarga extends ApplicationAdapter {
SpriteBatch batch;

private static TextureAtlas texturas_todas;
public static TextureRegion textureAlien;
public static TextureRegion textureNave;

@Override
public void create () {
batch = new SpriteBatch();

texturas_todas = new TextureAtlas("packimaxes.atlas");

textureAlien = texturas_todas.findRegion("LIBGDX_itin1_alien");
textureNave = texturas_todas.findRegion("LIBGDX_itin1_nave");

}

@Override
public void render () {
Gdx.gl.glClearColor(1, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch.begin();
batch.draw(textureAlien, 0, 0);
batch.draw(textureNave, 100, 100);
batch.end();

}

@Override
public void dispose(){
if (texturas_todas!=null)
texturas_todas.dispose();
}
}
</syntaxhighlight>

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

-----

 -- [[Usuario:angelfg|Ángel D. Fernández González]] -- (2015).

← Revisión anterior		Revisión del 15:12 7 ene 2016
Línea 3:		Línea 3:
	===Introdución===		===Introdución===

−	<b><u>Nota:</u></b> Esta explicación está [http://~~manuais~~.~~iessanclemente~~.~~net~~/index.php?title=LIBGDX_Os_graficos relacionada cos gráficos].	+	<b><u>Nota:</u></b> Esta explicación está [http://wiki.cifprodolfoucha.es/index.php?title=LIBGDX_Os_graficos relacionada cos gráficos].

LIBGDX TextureAtlas - Historial de revisiones

Wiki: /* Introdución */

Wiki: Página creada con «UNIDADE 3: TextureAtlas ===Introdución=== Nota: Esta explicación está [http://manuais.iessanclemente.net/index.php?t...»