====== libGDX : Viewport i resolucions ======

Referències: [[jocs_libgdx]]

**libGDX és multiplataforma** i podrem compilar el mateix codi per a diferents dispositius. És un gran avantatge però **ens planteja un problema: la resolució de les pantalles pot ser diferent en cada dispositiu**.

De forma nadiua libGDX treballa en píxels, però no ho podem fer així si volem obtenir el mateix resultat en diferents dispositius. Necessitarem unes "coordenades virtuals" i que després es tradueixi a cada plataforma (i dispositiu) adientment.

Per a aquest propòsit disposem de 2 eines fonamentals: ''Viewport'' i ''OrtographicCamera''. En anteriors versions variava una mica la configuració d'aquests objectes. Ara, la ''OrtographicCamera'' ja va dintre del ''Viewport'', i això ens facilita la tasca.

Hi ha diferents [[https://libgdx.com/wiki/graphics/viewports|tipus de Viewports]]. Farem l'exemple bàsic amb ''FitViewport'', que manté la relació d'aspecte entre els diferents dispositius omplint amb fons negre les parts que excedeixin per tal d'acomplir aquesta relació d'aspecte.

\\

===== Configuració Viewport bàsica =====

El codi mínim que ens quedaria per a una aplicació amb ''FitViewport'' seria la següent, amb una configuració d'aspecte de 8x5 unitats d'amplada per alçada. Aquestes "unitats" les podríem considerar "metres", però és una "resolució virtual" que ens convé a nosaltres. En altres ocasions podrien ser kilòmetres, per exemple si mostréssim un mapa.

Al ser unitats divisibles caldrà emprar //floats//, i no //integers// com es podria fer servir pels píxels.

<file java Joc.java>
// Exemple amb ApplicationAdapter, però podria ser una Screen
public class Joc extends ApplicationAdapter {
    private SpriteBatch batch;
    public FitViewport viewport;

    @Override
    public void create() {
        batch = new SpriteBatch();
        viewport = new FitViewport(8, 5); // 8x5 unitats (amplada x alçada)
    }

    @Override
    public void render() {
        // pintem background de color
        ScreenUtils.clear(0.15f, 0.15f, 0.2f, 1f);
        // PUNT CLAU: ajustem càmera per traduir resolucions quan pintem
        viewport.apply();
        batch.setProjectionMatrix(viewport.getCamera().combined);
        // pintem!
        batch.begin();
        //...
        batch.end();
    }

    // SUPER IMPORTANT, sense resize no funciona el Viewport
    // és un error típic oblidar aquest mètode, esteu avisats
    @Override
    public void resize(int width, int height) {
        viewport.update(width, height, true);
    }

    @Override
    public void dispose() {
        batch.dispose();
        font.dispose();
    }
}
</file>

==== Desktop ====

Si volem que la pantalla de l'aplicació Desktop coincideixi amb la relació d'aspecte definit al joc, convindrà redefinir-la a l'arxiu ''Lwjgl3Launcher.java'':

<file java Lwjgl3Launcher.java>
public class Lwjgl3Launcher {
    // ...
    private static Lwjgl3ApplicationConfiguration getDefaultConfiguration() {
        // ...
        
        // configurem 800x500 px però podria ser altra resolució que compleixi amb la relació d'aspecte
        configuration.setWindowedMode(800, 500);
        // ...
    }
}
</file>

\\

===== Dibuixem! =====

Definicions:
  * ''SpriteBatch'': "pinzell" que dibuixa sobre la pantalla.
  * ''Texture'': imatge.
  * ''TextureRegion'': imatge retallada.
  * ''Sprite'': objecte que conté la ''Texture'' i les coordenades per renderitzar.

Dibuixarem un cercle a la posició (2,2) de les nostres "coordenades virtuals". Ho farà el ''batch'' a cada iteració a la funció ''render()''.

El ''batch'' necessitarà una ''Texture'' per poder renderitzar la forma dibuixada. La podem crear així:

<code java>
public class Joc extends ApplicationAdapter {
    // ...
    
    // Texture és l'objecte adequat per a pintar al batch
    // es pot crear a partir d'imatges o de formes dibuixades
    Texture pilotaTexture;

    @Override
    public void create() {
        // ...
        
        // Creem la Texture de la pilota (format en pixels! , de moment)
        Pixmap pilotaPixmap = new Pixmap(100,100,Pixmap.Format.RGBA8888);
        pilotaPixmap.setColor(Color.RED);
        pilotaPixmap.fillCircle(50,50,50); // posx, posy, radi
        pilotaTexture = new Texture(pilotaPixmap);
    }
    
    public void render() {
        // ... background, projection matrix, etc.
        
        // pintem!
        batch.begin();
        // Tant fa l'amplada i alçada en píxels que tingui la Texture
        // A pintar la redefinim (textura, posx, posy, amplada, alçada)
        batch.draw(pilotaTexture,2f,2f,1f,1f);
        batch.end();
    }

    // ...
}
</code>

\\

===== Movem l'objecte =====

Per moure l'objecte haurem de definir les posicions x i y, i també la velocitat a la que volem moure l'objecte.

Recordem que el loop típic dels jocs consisteix en:
  - Inputs: processar controls de l'usuari (joystick, tecles, etc.)
  - Calcular objectes
  - Pintar objectes

<code java>
public class Joc extends ApplicationAdapter {
    // ...

    // les dades mínimes son posició i velocitat de la pilota
    float posx, posy, velx, vely;

    @Override
    public void create() {
        // ...

        posx = posy = 0f;
        velx = vely = 1f; // velocitat d'1 m/s
    }

    @Override
    public void render() {
        // 1- INPUTS (controls usuari)...

        // 2- CALCULEM
        // primera prova: increment 0.01mts per iteració
        posx += 0.01;

        // 3- PINTEM
        // projecció p
        batch.begin();
        batch.draw(pilotaTexture,posx,posy,1f,1f);
        batch.end();
    }

}
</code>

Si proves el codi veuràs que la pilota avança poc a poc.

Però no hem fet servir la velocitat real ''velx''. Prova de canviar el 0.01 per ''velx'':
<code java>
posx += velx;
</code>

Què succeeix?

Si ho feu així veureu que la pilota no avança a 1 m/s, sinó que avança 1 metre per iteració. I els ajustos habituals solen ser de 30 FPS, per tant, la velocitat que ara estem executant és de 30 m/s !!!

Perquè la pilota avanci a 1 m/s de veritat (hauria de trigar 8 segons en travessar la pantalla) hauríem de fer el següent:

<code java>
    public void render() {
        // 1- INPUTS (controls usuari)...

        // 2- CALCULEM
        float delta = Gdx.graphics.getDeltaTime();
        posx += velx * delta;
        
        // ...
    }
</code>