Wiki: Página creada con «UNDIDADE 2: Os gráficos Os gráficos que imos usar no desenvolvemento de xogos 2D van ser texturas asociadas a gráficos jpg ou bmp....»

2015-12-09T22:10:00Z

Página creada con «UNDIDADE 2: Os gráficos Os gráficos que imos usar no desenvolvemento de xogos 2D van ser texturas asociadas a gráficos jpg ou bmp....»

Página nueva

UNDIDADE 2: Os gráficos 

Os gráficos que imos usar no desenvolvemento de xogos 2D van ser texturas asociadas a gráficos jpg ou bmp.

Unha [http://es.wikipedia.org/wiki/Textura_%28gr%C3%A1ficos_por_computadora%29 textura] é un gráfico bi-dimensional cunha forma rectangular ou cadrada que vai imitar o aspecto dos obxectos. Ven ser a pel exterior dun elemento real. Dito gráfico vai ser empregado para 'cubrir' a superficie dun obxecto virtual.

Nota: Como [http://informatica.iessanclemente.net/manuais/index.php/LIBGDX_Actualizaci%C3%B3n_dos_proxectos_a_outra_versi%C3%B3n_do_Framework comentamos nun punto anterior] o framework tiña soporte para OPEN GL 1.X. Se utilizamos dita versión de open gl, os gráficos tiñan que ter un tamaño potencia de 2 (2,4,8,16,32,64,...) no seu ancho e alto.

Nota: Para poder referenciar as texturas dende calquera clase do xogo e debido a que cando saímos da aplicación sen pechar (no caso da versión Android) o contexto gráfico se perde (é dicir, as referencias a todos os recursos gráficos que teñamos xa non valen cando volvemos á aplicación) imos cargar ditas texturas dende unha clase separada na que todas as texturas son de clase (Static).

==O programa GIMP==

Á hora de andar con gráficos, editalos, cambiar a cor de transparencia, converter formatos...podemos utilizar diferentes editores gráficos.

O alumno pode usar calquera que xa teña instalado no seu computador, xa que normalmente en todos imos atopar o que imos facer neste curso.

*O programa que podedes descargar é o '''gimp''': http://www.gimp.org.es/

*[http://www.hachemuda.com/video-tutoriales-gimp/ Neste enlace] tedes un videotutorial, pero na rede podedes atopar multitude de artigos sobre o manexo do programa.

==As cores==

Cando debuxamos un gráfico, a textura ten información de que cor ten que ter cada pixel que se vai
debuxar.

Esta información segue un modelo de cores. Nos imos a centrarnos no modelo RGB (Red Green
Blue). Existen outros modelos coma YUV ou CMYK.

Con estas tres cores básicas (vermello, verde e azul) podemos ter calquera cor, mesturándoos na
proporción correcta.

Por exemplo:

[[Image:LIBGDX_UD2_6_graficos_1.jpg|thumb|center|400px|Información obtida do libro [http://www.apress.com/9781430239871 Beginning Android 4 Games]]]

Ditos cores se especifican coa combinación de tres: RED – GREEN – BLUE.

Cada cor básico pode expresarse cun número flotante entre 0.0 – 1.0 (sendo 1 a intensidade máis grande e 0 a máis pequena).

Tamén podemos codificar cada cor cun byte con valor entre 0 a 255.

Dependendo das diferentes opcións podemos ter:
*Codificación RGB de 32 bits: ten 12 bytes por cada pixel (32 bits por cor (ó ser flotante) = 4 bytes x 3 cores=12 bytes). As intensidades poden varias entre 0.0 e 1.0.
*Codificación RGB de 24 bits: ten 3 ou 4 bytes (se ten alfa, visto despois) por cada pixel (8 bits por cor = 1 bytes x 3 cores=3 bytes). As intensidades poden varias entre 0 e 255. A orde dos compoñentes pode ser RGB ou BGR. Se coñece coma RGB888 ou BGR888.
*Codificación RGB de 16 bits: ten 2 bytes por cada pixel. Red e blue teñen unha intensidade que varía entre 0 e 31 (5 bits x 2 = 10 bits) e o verde unha intensidade entre 0 e 63 (6 bits). A orde pode ser RGB ou BGR e se coñece coma RGB565 ou BGR565.

'''O normal e que traballemos co formato RGB888.'''

==Formato das imaxes==

Á hora de gardar as imaxes temos multitude de formatos gráficos.
Dous dos máis coñecidos son: '''[http://es.wikipedia.org/wiki/JPEG JPEG]''' e '''[http://es.wikipedia.org/wiki/PNG PNG]'''.

*JPEG é un formato que perde calidade con respecto a imaxe orixinal.
*PNG non perde calidade e é idéntica a imaxe orixinal.

Sempre que utilicemos unha imaxe que non requira transparencias (visto a continuación) nin unha calidade excesiva deberemos elixir jpg xa que ten un gran nivel de compresión.

===A compoñente Alfa: Nivel de transparencia.===

A compoñente alfa e un valor que indica o nivel de transparencia dunha imaxe.
Normalmente ó superpoñer unha imaxe sobre outra a imaxe superior 'tapa' a inferior. Pero no caso de gráficos como
personaxes en movemento, queremos que só se superpoña a imaxe do personaxe.

O problema ven que cando definimos un personaxe este se define cun rectángulo:

[[Imagen:LIBGDX_UD2_6_graficos_2.jpg|400px|center|thumb|Información obtida do libro 'Beginning Android 4 Games']]

O poñer enriba do fondo a imaxe do personaxe pasaría isto:

[[Imagen:LIBGDX_UD2_6_graficos_3.jpg|400px|center|thumb|Imaxes superposta. A cor branca aparece arredor do gráfico.]]

Grazas o '''compoñente alfa''' podemos establecer que unha determinada cor sexa transparente (o que se
coñece como alfa).

Así, no caso anterior de formato gráfico, podemos falar de RGBA8888 (e as súas variantes). Con isto estamos a dicir que a compoñente alfa está composto por un valor que vai dende 0 (totalmente transparente) a 255 (totalmente opaco).

Se facemos que a cor branca sexa transparente teremos isto:
[[Imagen:LIBGDX_UD2_6_graficos_4.jpg|400px|center|thumb|Imaxes superposta. A cor branca ten un nivel de transparencia a 0.]]

IMPORTANTE: Se a imaxe necesita transparencias non podemos gardala en formato JPG xa que non o soporta. Utilizaremos o formato PNG.

Vídeo de como facer un fondo transparente en GIMP: https://www.youtube.com/watch?v=m-7j6bP94fg

Tamén podemos dándolle a cor un nivel de transparencia, como amosa a seguinte imaxe:
[[Imagen:LIBGDX_UD2_6_graficos_5.jpg|400px|center|thumb|Cambiando unha cor a transparente]]

==Carga de gráficos có framework LIBGDX==

Para utilizar gráficos nun xogo necesitamos facer:

*Necesitamos unha referencia ó arquivo físico onde se atopa a textura (arquivo png/jpg).
*Crear a textura a partires de dita referencia.
*Usar dito gráfico no xogo.
*Liberar o gráfico da memoria do dispositivo cando xa non se utilice.

===Referencia ós gráficos===

Para ter unha referencia os gráficos imos utilizar a [http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/files/FileHandle.html clase FileHandle].

Representa un arquivo, cartafol no sistema de arquivos, Android SD Card ou cartafol Assets de Android.

No enlace anterior existen multitude de métodos para o manexo de arquivos.
Neste manual só imos empregalo para referenciar os gráficos que van conformar as texturas.

Dentro da '''clase Gdx''':

*[http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/Files.html#internal%28java.lang.String%29 Gdx.files.internal]: é unha referencia ó '''cartafol assets''' de Android, onde todos os demais proxectos apuntan.

'''Exemplo de código para obter unha referencia a un arquivo gráfico:'''
<syntaxhighlight lang="java" line enclose="div">

FileHandle imageFileHandle = Gdx.files.internal("nomegrafico.jpg"); // Pode ser un png

</syntaxhighlight>

Podemos utilizar rutas relativas ó cartafol assets. Así, si dentro de dito cartafol teño outro chamado graficos poderei facer referencia a un gráfico dentro do cartafol desta forma:

'''Exemplo de código para obter unha referencia a un arquivo gráfico nun cartafol en assets:'''
<syntaxhighlight lang="java" line enclose="div">

FileHandle imageFileHandle = Gdx.files.internal("graficos/nomegrafico.jpg"); // Pode ser un png

</syntaxhighlight>

En assets podemos crear unha estrutura de cartafol como o facemos no explorador de arquivos do S.O.

===Carga das texturas===
Para cargar os gráficos necesitamos un obxecto da clase [http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/Texture.html Texture].

Métodos máis importantes:

::*'''[http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/Texture.html#Texture%28com.badlogic.gdx.files.FileHandle%29 constructor: Texture(FileHandle file)]'''
:::Crea unha instancia da clase Texture.
:::*file: Recibe como parámetro un obxecto da clase FileHandle que ven ser unha referencia ó arquivo físico (bmp/jpg) da textura.
::*[http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/Texture.html#getHeight%28%29 Método int getHeight()]
:::Obtén a altura da textura en pixeles.
::*[http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/Texture.html#getWidth%28%29 Método int getWidth()]
:::Obtén a anchura da textura en pixeles.

'''Exemplo de carga dunha textura:'''
<syntaxhighlight lang="java" line enclose="div">
FileHandle imageFileHandle = Gdx.files.internal("nomegrafico.jpg"); // Pode ser un bmp
Texture textura;
textura = new Texture(imageFileHandle);
</syntaxhighlight>

===Liberación da memoria das texturas===

:*Método [http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/Texture.html#dispose%28%29 dispose()]
::Libera a memoria.

'''Exemplo de liberación de memoria:'''
<syntaxhighlight lang="java" line enclose="div">
textura.dispose();
</syntaxhighlight>

==Localización dos gráficos no noso xogo==

===Localización física===
Fisicamente os gráficos van estar gardados no '''cartafol assets''' do proxecto Android.

Imos crear un cartafol dentro do mesmo de nome 'GRAFICOS' onde gardaremos os gráficos do xogo.
Tedes a liberdade de estruturar dito cartafol como queirades, así poderíamos poñer os inimigos noutro cartafol dentro de GRAFICOS (GRAFICOS/INIMIGOS) etc....

Descargade agora esta imaxe e dádelle de nome 'LIBGDX_itin1_alien.png' e gardala no cartafol anterior (assets/GRAFICOS):

[[Imagen:LIBGDX_itin1_alien.png|center|border]]
<center>Nota: Gráfico obtido de http://opengameart.org/users/rrodi411</center>

Nota: Se descargades a imaxe no cartafol assets doutra das plataformas (por exemplo desktop) é necesario '''refrescar''' o cartafol assets da plataforma android para que o teña en conta.

Nota: A imaxe ten extensión png por ter transparencias.

Teredes algo parecido a isto:

[[Imagen:LIBGDX_UD2_6_graficos_6.jpg|400px|center]]

===Localización lóxica===

Para cargar os gráficos imos utilizar unha clase que imos crear no paquete principal e que chamaremos '''AssetsXogo'''.

[[Imagen:LIBGDX_UD2_6_graficos_7.jpg|thumb|400px|center]]

Polo comentado anteriormente da perda do contexto gráfico cando saímos do xogo en Android, imos definir as texturas de clase (static) e imos crear dous métodos de clase: un para cargar as texturas e outro para liberalas.

Dependendo do xogo podemos ter varios arquivos Assets se que por exemplo, podemos cargar os gráficos en función do nivel do xogo, facendo unha división lóxica e creando un arquivo para o protagonista, outro para os inimigos,...

'''Exemplo de código para cargar e liberar unha textura'''
<syntaxhighlight lang="java" line enclose="div">
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.files.FileHandle;
import com.badlogic.gdx.graphics.Texture;

public class AssetsXogo {

public static Texture textureAlien;

/**
* MÃ©todo encargado de cargar todas as texturas
*/
public static void cargarTexturas(){
FileHandle imageFileHandle = Gdx.files.internal("GRAFICOS/LIBGDX_itin1_alien.png");
textureAlien = new Texture(imageFileHandle);
}

/**
* MÃ©todo encargado de liberar todas as texturas
*/
public static void liberarTexturas(){
textureAlien.dispose();
}
}
</syntaxhighlight>

==Carga dos gráficos==

Agora é necesario chamar a ditos métodos.
O lugar pode variar. Podemos liberar e cargar os recursos gráficos a medida que os necesitemos (por exemplo nun xogo con diferentes niveis) ou ben cargar os gráficos ó inicio do xogo e liberalos ó rematar.

Nos imos escoller a segunda opción.

Resumindo:
*No noso exemplo imos chamar a carga dos gráficos ó cargar o xogo e liberaremos os gráficos cando saiamos do xogo.
*Faremos que a referencia a ditos gráficos sexa en forma de variables de clase (static).

'''Clase MeuXogoGame'''
'''Explicación: Chama os métodos para cargar as texturas e liberalas'''
<syntaxhighlight lang="java" line enclose="div" highlight="12,20">
package com.plategaxogo2d.angel;

import com.badlogic.gdx.Game;
import com.plategaxogo2d.pantallas.PantallaXogo;

public class MeuXogoGame extends Game {

@Override
public void create() {
// TODO Auto-generated method stub

AssetsXogo.cargarTexturas();
setScreen(new PantallaXogo(this));
}

@Override
public void dispose(){
super.dispose();

AssetsXogo.liberarTexturas();
}
}
</syntaxhighlight>

'''Exercicio proposto:''' Copiar a clase '''UD2_2_RendererXogo''' (botón dereito, copiar e pegar) e darlle de nome '''UD2_3_RendererXogo'''. Fai que dita clase visualice o gráfico do alien gardado no cartafol assets/GRAFICOS cun tamaño de 15 unidades. Modificar a clase PantallaXogo para que chame a dita clase.

'''Solución:'''

'''Código da clase UD2_3_RendererXogo:'''
 Obxectivo: Cargar o gráfico do alien gardado en asssets/GRAFICOS.
<syntaxhighlight lang="java" line enclose="div" highlight="47">
/**
* Explica cales son os métodos que temos para mover a cámara.
* Carga un gráfico sinxelo no centro da pantalla
*/

package com.plategaxogo2d.renderer;

import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.InputProcessor;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.math.Vector3;
import com.plategaxogo2d.angel.AssetsXogo;
import com.plategaxogo2d.angel.Utiles;
import com.plategaxogo2d.modelo.Mundo;

public class UD2_3_RendererXogo implements InputProcessor {

private SpriteBatch spritebatch;

private OrthographicCamera camara2d;

private Vector3 temporal;

public UD2_3_RendererXogo() {
camara2d = new OrthographicCamera();
spritebatch = new SpriteBatch();

temporal = new Vector3();

Gdx.input.setInputProcessor(this);
}

/**
* Debuxa todos os elementos graficos da pantalla
*
* @param delta
* : tempo que pasa entre un frame e o seguinte.
*/
public void render(float delta) {
Gdx.gl.glClearColor(1, 1, 1, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

spritebatch.begin();
spritebatch.draw(AssetsXogo.textureAlien, temporal.x,temporal.y, 15, 15);
spritebatch.end();

}

public void resize(int width, int height) {

camara2d.setToOrtho(false, Mundo.TAMANO_MUNDO_ANCHO,
Mundo.TAMANO_MUNDO_ALTO);
camara2d.update();

spritebatch.setProjectionMatrix(camara2d.combined);

}

public void dispose() {

Gdx.input.setInputProcessor(null);
spritebatch.dispose();
}

@Override
public boolean keyDown(int keycode) {
// TODO Auto-generated method stub
return false;
}

@Override
public boolean keyUp(int keycode) {
// TODO Auto-generated method stub
return false;
}

@Override
public boolean keyTyped(char character) {
// TODO Auto-generated method stub
return false;
}

@Override
public boolean touchDown(int screenX, int screenY, int pointer, int button) {
// TODO Auto-generated method stub

temporal.set(screenX,screenY,0);
camara2d.unproject(temporal);

return false;
}

@Override
public boolean touchUp(int screenX, int screenY, int pointer, int button) {
// TODO Auto-generated method stub
return false;
}

@Override
public boolean touchDragged(int screenX, int screenY, int pointer) {
// TODO Auto-generated method stub
return false;
}

@Override
public boolean mouseMoved(int screenX, int screenY) {
// TODO Auto-generated method stub
return false;
}

@Override
public boolean scrolled(int amount) {
// TODO Auto-generated method stub
return false;
}
}
</syntaxhighlight>

Nota: Borramos a propiedade '''grafico''' (da clase Texture) xa que agora o cargamos dende AssetsXogo.

* Seguimos có noso proxecto. Modificamos a clase PantallaXogo para que volva a chamar á clase RendererXogo.

-----
'''TAREFA 2.3 A FACER:''' Esta parte está asociada á realización dunha tarefa.
-----

==Borrando a pantalla==

Como comentamos anteriormente nos xogos estamos a borrar e debuxar toda a pantalla continuamente no método render.

Para facelo utilizamos estas dúas ordes de OPEN GL:

<syntaxhighlight lang="java" line enclose="div">
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
</syntaxhighlight>

A primeira liña: [https://www.opengl.org/sdk/docs/man/html/glClearColor.xhtml glClearColor] especifica as cores que van ser usadas cando se limpa o buffer. Un buffer ven ser unha zona de memoria que vai ser 'levada' á GPU para pintar.
Dita cor é utilizada pola segunda liña, asinando ó buffer coas cores especificadas.

*'''Formato da función glClearColor''':
Leva catro parámetros: Red, Green, Blue, Alfa.

Xa explicamos estes datos [http://informatica.iessanclemente.net/manuais/index.php/LIBGDX_Os_graficos#As_cores anteriormente].

Sempre poñeremos dito código ó principio do método render:

'''Clase RendererXogo''' 
'''Obxectivo:''' Limpar a pantalla.
<syntaxhighlight lang="java" line enclose="div">
public void render(float delta){
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
}
</syntaxhighlight>

Nota: Esta vai ser a cor de fondo do noso xogo. Se dito xogo tivera un fondo gráfico que ocupara toda a pantalla non se vería ningunha cor loxicamente.

==Visualizando os gráficos==

Máis información [https://github.com/libgdx/libgdx/wiki/Spritebatch%2C-Textureregions%2C-and-Sprites neste enlace].

Xa vimos nos anteriores exemplos como amosar os gráficos.

Imos velo un pouco máis en profundidade...

[http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/g2d/SpriteBatch.html Clase SpriteBatch]: permite a visualización dun gráfico na pantalla.

Métodos máis importantes:
*'''[http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/g2d/SpriteBatch.html#begin%28%29 begin]-[http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/g2d/SpriteBatch.html#end%28%29 end]''': todo o que se debuxe entre estas dúas liñas será enviada á GPU (unidade de procesamento gráfico) dunha soa vez. Isto fai que o rendemento aumente.
*'''[http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/g2d/SpriteBatch.html#setProjectionMatrix%28com.badlogic.gdx.math.Matrix4%29 setProjectionMatrix(Matrix4 projection)]''': espera recibir a matriz combinada de proxección e modelado para debuxar os gráficos en función de ditos valores. Normalmente pasaremos como valor a matriz combinada da cámara (camara.combined).
*'''[http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/g2d/SpriteBatch.html#draw%28com.badlogic.gdx.graphics.Texture,%20float,%20float%29 Método draw''']: ten moitas variantes (está sobrecargado) e serve para debuxar unha textura.
*'''[http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/g2d/SpriteBatch.html#dispose%28%29 Método dispose]''': libera os recursos.
*'''[http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/g2d/SpriteBatch.html#setColor%28com.badlogic.gdx.graphics.Color%29 Método setColor]''': asina un tinte á textura.

Nota: Como xa comentamos anteriormente o debuxo de todas as nosas personaxes vaise facer no método render da clase que deriva de Game. No noso caso, dito método chama a un método render (definido por nos) da clase RendererXogo.

Para a utilización do SpriteBacth temos que seguir estes pasos:

#Definimos un obxecto da clase SpriteBatch e o instanciamos no método create.
#No método resize indicámoslle que o seu sistema de coordenadas sexa o definido na cámara. O que temos que ter claro neste momento e que estamos a debuxar puntos nos que se lles aplican operacións con matrices para 'colocalos' no seu sitio. Cando definimos a cámara, indicando un tamaño de viewport, estamos creando unha matriz (matriz de proxección) de tal forma que se aplicamos dita matriz a os puntos este se 'colocan' na posición adecuada. Isto o conseguimos coa seguinte liña: '''spritebatch.setProjectionMatrix(camaraortho.combined);''' Con esta orde estamos a indicar o spritebatch que lle aplique a todo o que debuxe as transformacións gardadas na cámara ortográfica. Nota: Isto temos que facelo sempre despois de chamar ó método update da cámara.
#No método render() borramos a pantalla en cada fotograma e facemos que todo o que se atope entre o begin e o end sexa enviado á vez a unidade gráfica para a súa visualización. Isto aumenta o rendemento xa que é moito mellor enviar un só gráfico que moitos á GPU (Graphics Process Unit).
#Dentro do begin-end do spritebacth chamamos ó método draw para debuxar as texturas.
#Cando rematamos (saímos da pantalla) liberamos os recursos. Chamamos ó '''método dispose'''.

Empecemos a velo na clase RendererXogo.

Neste caso imos utilizar o [http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/g2d/SpriteBatch.html#draw%28com.badlogic.gdx.graphics.Texture,%20float,%20float,%20float,%20float%29 método draw que leva 5 parámetros]: a textura, pos x, pos y, tam x, tam y.

Nota: Lembrar que estamos a traballar con unidades definidas no viewport de cámara, neste exemplo en 300x500 unidades.

'''Clase RendererXogo''' 
'''Obxectivo:''' Visualizar o alien utilizando o SpriteBatch.
<syntaxhighlight lang="java" line enclose="div" highlight="13,17,30-32,41,46">
package com.plategaxogo2d.renderer;

import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.plategaxogo2d.angel.AssetsXogo;
import com.plategaxogo2d.modelo.Mundo;

public class RendererXogo {

private OrthographicCamera camara2d;
private SpriteBatch spritebatch;

public RendererXogo() {
camara2d = new OrthographicCamera();
spritebatch = new SpriteBatch();
}

/**
* Debuxa todos os elementos graficos da pantalla
*
* @param delta
* : tempo que pasa entre un frame e o seguinte.
*/
public void render(float delta) {
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

spritebatch.begin();
spritebatch.draw(AssetsXogo.textureAlien, 100, 100, 15, 15);
spritebatch.end();

}

public void resize(int width, int height) {

camara2d.setToOrtho(false, Mundo.TAMANO_MUNDO_ANCHO, Mundo.TAMANO_MUNDO_ALTO);
camara2d.update();

spritebatch.setProjectionMatrix(camara2d.combined);

}

public void dispose() {
spritebatch.dispose();
}
}
</syntaxhighlight>

Nota: A clase SpriteBatch ten varios métodos que podemos usar, coma por exemplo setColor(Color tint) or setColor(r,g,b,a) que debuxa un tinte (tiñe) na textura coa cor indicada e co nivel de transparencia que indiquemos (a =alfa; se é igual a 1 é totalmente opaco e con 0 totalmente transparente).

Así se queremos cambiar a cor do alien podemos facelo:

'''Clase RendererXogo''' 
'''Obxectivo:''' Visualizar outro alien cun tinte diferente.
<syntaxhighlight lang="java" line enclose="div" highlight="6,8">
public void render(float delta) {
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

spritebatch.begin();
spritebatch.setColor(Color.YELLOW);
spritebatch.draw(AssetsXogo.textureAlien, 100, 100, 15, 15);
spritebatch.setColor(Color.BLUE);
spritebatch.draw(AssetsXogo.textureAlien, 200, 100, 15, 15);
spritebatch.end();
}
</syntaxhighlight>

==Facendo debuger dos gráficos==

Inicialmente, cando se desenvolve o xogo, podes non ter a disposición os gráficos (as texturas).
En LIBGDX podemos 'sustituir' ditos gráficos por figuras xeométricas para saber onde se atopan os gráficos ou facer probas.

Tamén pode servir para ver, unha vez temos os gráficos, problemas de detección de choques (interseccións) de gráficos.

A forma de ver ditos gráficos é moi parecido ó que fixemos có spritebatch anteriormente explicado.

 
 
[http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/glutils/ShapeRenderer.html Clase ShapeRenderer]: permite debuxar figuras xeométricas na pantalla.

Métodos máis importantes:

* [http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/glutils/ShapeRenderer.html#begin-com.badlogic.gdx.graphics.glutils.ShapeRenderer.ShapeType- begin] - [http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/glutils/ShapeRenderer.html#end-- end]: Todo o que se atopa entre estas dúas ordes será enviado á vez á tarxeta gráfica para a súa visualización.

**[http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/glutils/ShapeRenderer.html#begin-com.badlogic.gdx.graphics.glutils.ShapeRenderer.ShapeType- public void begin(ShapeRenderer.ShapeType type)]:
***[http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/glutils/ShapeRenderer.ShapeType.html parámetro type]: indica o tipo de recheo que vai usar. Os valores posibles son puntos, liñas ou recheo. Quere isto dicir que se indicamos recheo (Shatype.filled) a figura xeométrica que creemos estará rechea. O veremos cun exemplo.

* Múltiples métodos para debuxar diferentes figuras xeométricas, como por exemplo:
**[http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/glutils/ShapeRenderer.html#circle-float-float-float- circle(float x, float y, float radius)]: debuxa un círculo.
**[http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/glutils/ShapeRenderer.html#rect-float-float-float-float- rect(float x, float y, float width, float height)]: debuxa un rectángulo.

*[http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/glutils/ShapeRenderer.html#setColor-com.badlogic.gdx.graphics.Color- setColor(Color color)]: indica a cor das liñas, puntos ou recheo que se vai utilizar. Dito método está sobrecargado e se pode enviar a cor descomposta no seu compoñentes (rgba). Neste caso se fai uso de constantes xa definidas de cores, como por exemplo Color.BLACK.

*'''[http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/g2d/SpriteBatch.html#setProjectionMatrix%28com.badlogic.gdx.math.Matrix4%29 setProjectionMatrix(Matrix4 projection)]''': espera recibir a matriz combinada de proxección e modelado para debuxar os gráficos en función de ditos valores. Normalmente pasaremos como valor a matriz comninada da cámara (camara.combined).

 
 
O forma de utilizala é o seguinte:

* Definimos a propiedade e a instanciamos no constructor:

'''Clase RendererXogo''' 
'''Obxectivo:''' Definimos e instanciamos a clase que vai permitir ver os gráficos en forma de figuras xeométricas.
<syntaxhighlight lang="java" line enclose="div" highlight="1,10">
private ShapeRenderer shaperender;
.................

public RendererXogo() {

camara2d = new OrthographicCamera();
spritebatch = new SpriteBatch();
shaperender = new ShapeRenderer();
}

</syntaxhighlight>

 
* No método resize facemos que o sistema de coordenadas da cámara sexa o mesmo no ShapeRenderer (fixemos o mesmo na clase SpriteBatch).

'''Clase RendererXogo''' 
'''Obxectivo:''' Axustamos o sistema de coordenadas do shaperenderer.
<syntaxhighlight lang="java" line enclose="div" highlight="8">
public void resize(int width, int height) {

camara2d.setToOrtho(false, Mundo.TAMANO_MUNDO_ANCHO,
Mundo.TAMANO_MUNDO_ALTO);
camara2d.update();

spritebatch.setProjectionMatrix(camara2d.combined);
shaperender.setProjectionMatrix(camara2d.combined);
}
</syntaxhighlight>

 
* Creamos un método debugger que será chamado dende o método render e que vai ser o que debuxe os gráficos. Como exemplo imos debuxar a bolboreta Candela.

'''Clase RendererXogo''' 
'''Obxectivo:''' Creamos o método que vai debuxar. Usamos liñas e a cor será azul.
<syntaxhighlight lang="java" line enclose="div">
/**
* Debuxa os gráficos en forma de figuras xeométricas
*/
private void debugger(){

shaperender.begin(ShapeType.Line);
shaperender.setColor(Color.BLUE);
shaperender.rect(100,100,15,15);
shaperender.end();

}
</syntaxhighlight>

 
* Creamos unha propiedade boolean que vai indicar cando amosar o modo debugger e engadimos no método render á chamado ó método debugger.
:Nota: Normalmente este valor sería enviado cando creamos a instancia da clase PantallaXogo no método create da clase MeuXogoGame.

'''Clase RendererXogo''' 
'''Obxectivo:''' Chamamos ó método debugger en función da propiedade debugger.
<syntaxhighlight lang="java" line enclose="div" highlight="3,16-19">
public class RendererXogo {

private boolean debugger=true;

.................

public void render(float delta) {
Gdx.gl.glClearColor(1, 1, 1, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

spritebatch.begin();
debuxarCandela();
debuxarBolboretas();
spritebatch.end();

if (debugger){
debugger();
}
}
..................
</syntaxhighlight>

==Onde obter gráficos para o noso xogo==

Se estades a desenvolver un xogo necesitaredes gráficos (se non o sabedes facer vos) para o mesmo.

Se estades pensando vender o xogo ditos gráficos deberían ter unha licenza para usos comerciais.

Algúns dos sitios onde podedes atopar ditos gráficos son:

*[http://opengameart.org/ OPENGAMEART]
*[http://www.iconarchive.com/ ICONARCHIVE]

Nos dous sitios podedes buscar por gráficos con licenza para usos comerciais.

==Como obter gráficos simples==

Seguramente vos sucederá como a min. Cando buscades gráficos para os xogos atopades nas páxinas anteriores moitas posibilidades, pero resulta que tedes moitos gráficos dos atopados que non queredes engadir ó voso proxecto.

Por exemplo:

[[Imagen:LIBGDX_UD2_6_graficos_11.jpg|400px|center]]
<center>Imaxe obtida de http://opengameart.org/content/basic-2d-car-collection</center>

Nesta imaxe só nos interesa uns poucos dos gráficos para engadilos ó noso proxecto.

O único que temos que facer é cortar e pegar o que nos interese, pero tendo en conta que cando exportemos o gráfico teremos que desmarcar algunha das opcións por defecto.

Lembrar que como comentamos anteriormente, se necesitamos que o gráfico teña algunha cor transparente teremos que exportalo como png e se non é necesario como jpg.

Se o facemos có Gimp:

<gallery caption="Creando os gráficos có Gimp" widths="350" heights="300px" perrow="2">
Image:LIBGDX_UD2_6_graficos_12.jpg| Escollemos a ferramenta de selección e seleccionamos o gráfico que nos interese.
Image:LIBGDX_UD2_6_graficos_13.jpg| Escollemos a opción do menú de Gimp '''Edición => Copiar''' e despois escollemos no mesmo menú a opción '''Edición => Pegar como => Imagen Nueva'''.
Image:LIBGDX_UD2_6_graficos_14.jpg| Unha vez pegada teremos unha nova xanela coa imaxe. Teremos que ir a opción de menú '''Archivo => Exportar'''. Dependendo do tipo de imaxe (jpg / png) escolleremos unhas opcións ou outras.
Image:LIBGDX_UD2_6_graficos_15.jpg| Se é JPG '''teremos que desmarcar''' a opción que ven por defecto '''Optimizar'''.
Image:LIBGDX_UD2_6_graficos_16.jpg| Se é PNG deixaremos as opcións por defecto.
</gallery>

==Tarefas avanzadas==
 

-----
'''TAREFA AVANZADA OPTATIVA 1:''' Esta parte está asociada á [http://manuais.iessanclemente.net/index.php?title=LIBGDX_TextureAtlas realización dunha tarefa avanzada. Uso da Atlas.].
-----

-----
'''TAREFA AVANZADA OPTATIVA 2:''' Esta parte está asociada á [http://manuais.iessanclemente.net/index.php/LIBGDX_AssetManager realización dunha tarefa avanzada. Uso da clase AssetManager].
-----

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

@@ Línea 734: / Línea 734: @@
 -----
-'''TAREFA AVANZADA OPTATIVA 2:''' Esta parte está asociada á [http://mediawiki.cifprodolfoucha.es/index.php?title=LIBGDX_AssetManager realización dunha tarefa avanzada. Uso da clase AssetManager].
+'''TAREFA AVANZADA OPTATIVA 2:''' Esta parte está asociada á [http://wiki.cifprodolfoucha.es/index.php?title=LIBGDX_AssetManager realización dunha tarefa avanzada. Uso da clase AssetManager].
 -----

@@ Línea 729: / Línea 729: @@
 -----
-'''TAREFA AVANZADA OPTATIVA 1:''' Esta parte está asociada á [http://mediawiki.cifprodolfoucha.es/index.php?title=LIBGDX_TextureAtlas realización dunha tarefa avanzada. Uso da Atlas.].
+'''TAREFA AVANZADA OPTATIVA 1:''' Esta parte está asociada á [http://wiki.cifprodolfoucha.es/index.php?title=LIBGDX_TextureAtlas realización dunha tarefa avanzada. Uso da Atlas.].
 -----

← Revisión anterior		Revisión del 15:03 7 ene 2016
Línea 185:		Línea 185:
	<center>Nota: Gráfico obtido de http://opengameart.org/users/rrodi411</center>		<center>Nota: Gráfico obtido de http://opengameart.org/users/rrodi411</center>

−	<u><b>Nota:</b></u> Se descargades a imaxe no cartafol assets doutra das plataformas (por exemplo desktop) é necesario '''refrescar''' o cartafol assets da plataforma android para que o teña en conta.

	<u><b>Nota:</b></u> A imaxe ten extensión png por ter transparencias.		<u><b>Nota:</b></u> A imaxe ten extensión png por ter transparencias.

@@ Línea 730: / Línea 730: @@
 -----
-'''TAREFA AVANZADA OPTATIVA 1:''' Esta parte está asociada á [http://manuais.iessanclemente.net/index.php?title=LIBGDX_TextureAtlas realización dunha tarefa avanzada. Uso da Atlas.].
+'''TAREFA AVANZADA OPTATIVA 1:''' Esta parte está asociada á [http://mediawiki.cifprodolfoucha.es/index.php?title=LIBGDX_TextureAtlas realización dunha tarefa avanzada. Uso da Atlas.].
 -----
 -----
-'''TAREFA AVANZADA OPTATIVA 2:''' Esta parte está asociada á [http://manuais.iessanclemente.net/index.php/LIBGDX_AssetManager realización dunha tarefa avanzada. Uso da clase AssetManager].
+'''TAREFA AVANZADA OPTATIVA 2:''' Esta parte está asociada á [http://mediawiki.cifprodolfoucha.es/index.php?title=LIBGDX_AssetManager realización dunha tarefa avanzada. Uso da clase AssetManager].
 -----

LIBGDX Os graficos - Historial de revisiones

Wiki: /* O programa GIMP */

Wiki: /* Tarefas avanzadas */

Wiki: /* Tarefas avanzadas */

Wiki: /* Localización dos gráficos no noso xogo */

Wiki en 22:24 9 dic 2015

Wiki: Página creada con «UNDIDADE 2: Os gráficos Os gráficos que imos usar no desenvolvemento de xogos 2D van ser texturas asociadas a gráficos jpg ou bmp....»

@@ Línea 19: / Línea 19: @@
 *O programa que podedes descargar é o '''gimp''': http://www.gimp.org.es/
-*[http://www.hachemuda.com/video-tutoriales-gimp/ Neste enlace] tedes un videotutorial, pero na rede podedes atopar multitude de artigos sobre o manexo do programa.
+*[https://www.genbeta.com/web/11-webs-y-canales-de-youtube-para-aprender-gimp-desde-0-hasta-nivel-experto Neste enlace] tedes un listado de recursos para aprender o seu manexo, pero na rede podedes atopar multitude de artigos sobre o manexo do programa.
 ==As cores==