bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc

Camí: • libgdx_viewport
libgdx_viewport

Diferències

Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.

Enllaç a la visualització de la comparació

Ambdós costats versió prèvia Revisió prèvia
Següent revisió 		Revisió prèvia
libgdx_viewport [2026/03/05 19:12]
enric_mieza_sanchez 		libgdx_viewport [2026/03/05 23:04] (actual)
enric_mieza_sanchez [Movem l'objecte]
Línia 21: Línia 21:
 <file java Joc.java> <file java Joc.java>
 // Exemple amb ApplicationAdapter, però podria ser una Screen // Exemple amb ApplicationAdapter, però podria ser una Screen
-public class Pilotes extends ApplicationAdapter {+public class Joc extends ApplicationAdapter {
     private SpriteBatch batch;     private SpriteBatch batch;
     public FitViewport viewport;     public FitViewport viewport;
Línia 28: Línia 28:
     public void create() {     public void create() {
         batch = new SpriteBatch();         batch = new SpriteBatch();
-        // Definim una amplada de 8 i alçada de 5 "unitats" +        viewport = new FitViewport(8, 5); // 8x5 unitats (amplada x alçada)
-        viewport = new FitViewport(8, 5);+
     }     }
  
Línia 36: Línia 35:
         // pintem background de color         // pintem background de color
         ScreenUtils.clear(0.15f, 0.15f, 0.2f, 1f);         ScreenUtils.clear(0.15f, 0.15f, 0.2f, 1f);
-        // ajustem càmera per traduir resolucions+        // PUNT CLAU: ajustem càmera per traduir resolucions quan pintem
         viewport.apply();         viewport.apply();
         batch.setProjectionMatrix(viewport.getCamera().combined);         batch.setProjectionMatrix(viewport.getCamera().combined);
         // pintem!         // pintem!
         batch.begin();         batch.begin();
-        //...+        // ...instruccions de dibuix...
         batch.end();         batch.end();
     }     }
Línia 55: Línia 54:
     public void dispose() {     public void dispose() {
         batch.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> </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 = posx + 0.01;
 +
 +        // 3- PINTEM
 +        // projecció viewport, background, etc...
 +        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 = 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, segurament ni l'heu vist passar !!!
 +
 +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 = posx + velx * delta;
 +        
 +        // ...
 +    }
 +</code>
 +
 +<WRAP info>
 +**En termes físics**
 +
 +En termes de física, les sumes han de ser de la mateixa magnitud, és a dir, a la posició x [metres] no podem sumar-li una velocitat [m/s], sinó que cal sumar-li un desplaçament també en [metres].
 +
 +  posx = posx + velx;
 +
 +{{mdi>close-circle?color=red&size=22}} <del>[m] + [m/s]</del>
 +
 +Quant és el desplaçament que cal aplicar-li a posx? Doncs dependrà del temps que hagi passat. Podriem calcular-ho en base als FPS, però tenim una manera millor encara, demanar-li a libGDX que ens digui el temps que ha passat des del darrer ''render()''. Això ho fem amb la instrucció:<code>
 +float delta = Gdx.graphics.getDeltaTime();
 +</code>
 +
 +Ara podrem calcular el desplaçament:
 +  posx = posx + velx * delta;
 +
 +Que en magnituds serà:
 +
 +{{mdi>check-circle?color=green&size=22}} posx[m] + velx[m/s] * delta[s]  =>  [m] + [m/s] * [s] = [m]
 +
 +Ara sí!
 +</WRAP>
 +
  
libgdx_viewport.1772737966.txt.gz · Darrera modificació: 2026/03/05 19:12 per enric_mieza_sanchez

Eines de la pàgina

Excepte on es digui una altra cosa, el contingut d'aquest wiki està subjecte a la llicència següent: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki