bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc

Camí: • libgdx_viewport • jocs_libgdx
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 20:16]
enric_mieza_sanchez [Dibuixem!] 		libgdx_viewport [2026/03/06 00:05] (actual)
enric_mieza_sanchez [Configuració Viewport bàsica]
Línia 35: 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);
 +        
         // PUNT CLAU: ajustem càmera per traduir resolucions quan pintem         // 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 amb "coordenades virtuals"...
         batch.end();         batch.end();
     }     }
Línia 54: Línia 56:
     public void dispose() {     public void dispose() {
         batch.dispose();         batch.dispose();
-        font.dispose(); 
     }     }
 } }
Línia 152: Línia 153:
     @Override     @Override
     public void render() {     public void render() {
-        // 1- INPUTS (controls usuari)+        // 1- INPUTS (controls usuari)...
  
         // 2- CALCULEM         // 2- CALCULEM
         // primera prova: increment 0.01mts per iteració         // primera prova: increment 0.01mts per iteració
-        posx += 0.01;+        posx = posx + 0.01;
  
         // 3- PINTEM         // 3- PINTEM
-        // projecció p+        // projecció viewport, background, etc...
         batch.begin();         batch.begin();
-        batch.draw(pilotaTexture,posx,posy,1f,1f);+        batch.draw(pilotaTexture,posx,posy,1f,1f); // tamany pilota = 1x1
         batch.end();         batch.end();
     }     }
Línia 170: Línia 171:
 Si proves el codi veuràs que la pilota avança poc a poc. 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''. Què succeeix?+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> 
 + 
 +\\ 
 + 
 +===== Rebots ===== 
 + 
 +Per poder fer rebotar la pilota a les parets, caldrà tenir descomposta la velocitat en les components X i Y : ''posx'' i ''posy''. Per fer els rebots: 
 +  * Canviem el signe (multiplicar per -1) de ''velx'' quan arribem als extrems laterals. 
 +  * Canviem el signe (multiplicar per -1) de ''vely'' quan arribem al "sostre" o el "terra". 
 + 
 +ULL: aquest gràfic té la coordenada Y invertida (moltes interfícies gràfiques tenen l'origen (0,0) a l'extrem superior esquerra, però libGDX ho té a l'extrem inferior esquerre): 
 + 
 +{{Pilota-rebots.png}} 
  
-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 !!!+<WRAP todo> 
 +Fes els següents exercicis: 
 +  - Actualitza també el valor de ''vely'' perquè la pilota es mogui per tota la pantalla. 
 +  - Implementa els rebots: introdueix codi per controlar els límits i inverteix el signe de les velocitats x i y com s'ha explicat. 
 +  - Rebota bé en els límits? Fes els ajustos adequats perquè reboti de forma correcta.
  
-Perquè la pilota avançi a 1 m/s de veritat (hauria de trigar 8 segons en travessar la pantalla) hauríem de fer el següent:+Potser t'interessarà saber que l'objecte ''Viewport'' té diversos mètodes per conèixer la resolució real de la pantalla i altre dades, en particular les que ens interessen per saber l'amplada i alçada de la pantalla en termes de "coordenades virtuals": 
 +  viewport.getWorldWidth() 
 +  viewport.getWorldHeight()
  
 +</WRAP>
  
libgdx_viewport.1772741764.txt.gz · Darrera modificació: 2026/03/05 20:16 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