bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc

Camí:
jocs_libgdx

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
jocs_libgdx [2024/04/12 10:06]
enric_mieza_sanchez [Definicions] 		jocs_libgdx [2026/03/06 00:03] (actual)
enric_mieza_sanchez [Viewports i resolucions]
Línia 3: Línia 3:
  
 En aquest article utilitzarem una llibreria específica, libGDX per realitzar el joc. Aquesta té molts avantatges, sobretot que permet compilar en diverses plataformes (Android, Desktop, iOS, HTML). A més, ens permetrà utilitzar recursos gràfics específics que ens facilitaran operacions complexes en 2D i 3D amb acceleració OpenGL. En aquest article utilitzarem una llibreria específica, libGDX per realitzar el joc. Aquesta té molts avantatges, sobretot que permet compilar en diverses plataformes (Android, Desktop, iOS, HTML). A més, ens permetrà utilitzar recursos gràfics específics que ens facilitaran operacions complexes en 2D i 3D amb acceleració OpenGL.
- +{{ libgdx.png?250 }}
 {{tag> #FpInfor #Dam #DamMp08 #DamMp08Uf3 #DamMp08Uf03 jocs games}} {{tag> #FpInfor #Dam #DamMp08 #DamMp08Uf3 #DamMp08Uf03 jocs games}}
  
  
 Enllaços: Enllaços:
-  - [[libGDX Comunicacions]] en aquesta wiki. +  - [[https://libgdx.com/wiki/|Documentació libGDX]]. 
-  - [[https://github.com/libgdx/libgdx/wiki|Documentació libGDX]]. +  - [[https://libgdx.com/wiki/start/project-generation|Descàrrega eina per iniciar projectes]]. 
-  - [[https://libgdx.com/dev/project_generation/|Descàrrega eina per iniciar projectes]]. +  - [[https://libgdx.com/wiki/start/a-simple-game|Tutorial joc Drop]]. 
-  - [[https://libgdx.com/dev/simple_game/#the-game|Tutorial joc Drop]].+  - [[libGDX Stage]] per a objectes de la llibreria Scene2D (en aquesta wiki). 
 +  - [[libGDX Comunicacions]] per a crides HTTP i websockets (en aquesta wiki).
  
 \\ \\
Línia 19: Línia 19:
 Necessites tenir instal·lat Android Studio. Necessites tenir instal·lat Android Studio.
  
-Crea el projecte amb l'[[https://libgdx.com/dev/project_generation/|eina per iniciar projectes libGDX]].+Crea el projecte amb l'[[https://libgdx.com/wiki/start/project-generation|eina per iniciar projectes libGDX]].
  
-==== Troubleshooting ==== 
-Si t'apareix l'[[https://stackoverflow.com/questions/70340427/unable-to-find-method-void-org-apache-commons-compress-archivers-zip-zipfile|error relacionat amb la llibreria ZIP]] tens 2 opcions: 
-  - Eliminar la compilació de la plataforma iOS. 
-  - Editar ''android/build.gradle'' i ajustar les llibreries:<file text android/build.gradle> 
-buildToolsVersion "33.0.0" 
-</file> 
- 
-\\ 
  
 ===== Definicions ===== ===== Definicions =====
Línia 34: Línia 26:
   * ''Game'': classe principal del joc, contenidor de pantalles.   * ''Game'': classe principal del joc, contenidor de pantalles.
   * ''Screen'': hi encapsulem una pantalla (game over, presentació, etc.), nivell, minijoc. Cadascuna és independent de l'altra.   * ''Screen'': hi encapsulem una pantalla (game over, presentació, etc.), nivell, minijoc. Cadascuna és independent de l'altra.
 +  * ''OrtographicCamera'': objecte per traduir coordenades. Pot servir per adaptar tamanys de pantalla o per projectar en 2D una imatge 3D.
   * ''SpriteBatch'': objecte per pintar //sprites// (imatges, animacions).   * ''SpriteBatch'': objecte per pintar //sprites// (imatges, animacions).
   * ''ShapeRenderer'': objecte per pintar formes geomètriques (cercles, el·lipses, rectangles, triangles, etc.   * ''ShapeRenderer'': objecte per pintar formes geomètriques (cercles, el·lipses, rectangles, triangles, etc.
Línia 42: Línia 35:
   * ''Actor'': objecte tipus //widget//, que pot ser alhora un element gràfic i una entrada de dades. Exemples: Button, Dialog, TextInputListener, etc.   * ''Actor'': objecte tipus //widget//, que pot ser alhora un element gràfic i una entrada de dades. Exemples: Button, Dialog, TextInputListener, etc.
   * ''Stage'': objecte per renderitzar ''Actors''.   * ''Stage'': objecte per renderitzar ''Actors''.
-  * ''OrtographicCamera'': objecte per traduir coordenades. Pot servir per adaptar tamanys de pantalla o per projectar en 2D una imatge 3D.+  * ''Skin'': conjunt de imatges i fonts per renderitzar ''Actors''. Imprescindible si es vol emprar ''Actor'' i ''Stage''.
  
 \\ \\
Línia 77: Línia 70:
   - **Android**: si obres el projecte amb Android Studio per defecte podràs executar en Android.   - **Android**: si obres el projecte amb Android Studio per defecte podràs executar en Android.
   - **Desktop** (java app, Windows o Linux): afegeix una nova configuració<code>RUN -> Edit configurations -> Add (+) -> Application</code>   - **Desktop** (java app, Windows o Linux): afegeix una nova configuració<code>RUN -> Edit configurations -> Add (+) -> Application</code>
-    - Selecciona Module: ''myapp.desktop.main''+    - Selecciona Module: ''myapp.lwjgl3.main''
     - Selecciona Main Class: ''DesktopLauncher''     - Selecciona Main Class: ''DesktopLauncher''
   - [[https://medium.com/@bschulte19e/deploying-your-libgdx-game-to-ios-in-2019-8d3796410d82|iOS: segueix aquestes instruccions]]. Requereix tenir un Mac, XCode i Android Studio amb RovoVM plugin   - [[https://medium.com/@bschulte19e/deploying-your-libgdx-game-to-ios-in-2019-8d3796410d82|iOS: segueix aquestes instruccions]]. Requereix tenir un Mac, XCode i Android Studio amb RovoVM plugin
-    - [[https://stackoverflow.com/questions/55670168/unable-to-select-ios-simulator-via-robovm-intellij-idea-plugin-on-android-studio|Segons diu aquí]], el simulador no s'activa, i cal descarregar la darrera versió de RoboVM d'[[http://robovm.mobidevelop.com/downloads/snapshots/idea/|aquí]] + 
-    - El darrer punt del tutorial diu q cal modificar ''ios.iml'' cada cop que executem. [[https://github.com/MobiVM/robovm/issues/242#issuecomment-519321280|Aquí]] hi ha una solució automatitzada.+\\ 
 + 
 +===== Viewports, resolucions i límits de la pantalla ===== 
 + 
 +El codi que fem a libGDX és multiplataforma, fet que té obvis avantatges, però que se'ns complica la gestió degut a les diferents resolucions que poden tenir les diverses plataformes i els diversos dispositius. 
 + 
 +**Ves a l'article [[libGDX Viewport]] i fes l'exercici proposat.** 
 + 
 +Hi treballaràs les resolucions de pantalla i els principis per moure objectes bàsics de forma adequada dins la pantalla. En particular veuràs com fer rebotar pilotes a les parets.
  
 \\ \\
Línia 219: Línia 220:
 // TextureRegion ens permet retallar un fragment de la Texture // TextureRegion ens permet retallar un fragment de la Texture
 // retallem el fragment de background des de la posició del personatge (posx, posy) // retallem el fragment de background des de la posició del personatge (posx, posy)
-bgRegion.setRegion(posx,posy,game.SCR_WIDTH,game.SCR_HEIGHT);+bgRegion.setRegion( (int)posx, (int)posy, 
 +                    (int)game.SCR_WIDTH, (int)game.SCR_HEIGHT );
  
 // (2) PINTAR // (2) PINTAR
Línia 230: Línia 232:
 game.batch.end(); game.batch.end();
 </code> </code>
 +
 +<WRAP important>
 +ULL amb la funció [[https://javadoc.io/doc/com.badlogicgames.gdx/gdx/1.4.0/com/badlogic/gdx/graphics/g2d/TextureRegion.html|TextureRegion.setRegion]] ja que té 2 variants que no son iguals:
 +  * ''TextureRegion.setRegion(int x, int y, int width, int height)'': retalla en píxels i coordenades estàndard.
 +  * ''TextureRegion.setRegion(float u, float v, float u2, float v2)'': retalla en base a u,v que son coordenades de textura, normalment entre 0 i 1.
 +
 +Només que un dels paràmetres sigui un ''float'' el compilador emprarà la 2a funció (u,v) amb resultats força inesperats.
 +</WRAP>
  
 {{ietiwalk.gif}} {{ietiwalk.gif}}
Línia 246: Línia 256:
  
 De la **llibreria Math** destaquem: De la **llibreria Math** destaquem:
-  * [[https://libgdx.badlogicgames.com/ci/nightlies/docs/api/com/badlogic/gdx/math/Vector2.html|Vector2]] ens permetrà representar un vector, que té una component X i una component Y. Val la pena parar atenció als mètodes per calcular l'angle ''angleDeg()'' i ''angleRad()''. +  * [[https://javadoc.io/doc/com.badlogicgames.gdx/gdx/latest/com/badlogic/gdx/math/Vector2.html|Vector2]] ens permetrà representar un vector, que té una component X i una component Y. Val la pena parar atenció als mètodes per calcular l'angle ''angleDeg()'' i ''angleRad()''. 
-  * [[https://libgdx.badlogicgames.com/ci/nightlies/docs/api/com/badlogic/gdx/math/Rectangle.html|Rectangle]] compost per posició (X i Y) i amplada i alçada. Al tutorial Drop s'utilitza també per veure les col·lisions (entre el cubell i les gotes) amb el mètode ''intersects(Rectangle)''. Té altres mètodes útils com ''contains'' per saber si un objecte està dins d'un altre. +  * [[https://javadoc.io/doc/com.badlogicgames.gdx/gdx/latest/com/badlogic/gdx/math/Rectangle.html|Rectangle]] compost per posició (X i Y) i amplada i alçada. Al tutorial Drop s'utilitza també per veure les col·lisions (entre el cubell i les gotes) amb el mètode ''intersects(Rectangle)''. Té altres mètodes útils com ''contains'' per saber si un objecte està dins d'un altre. 
-  * [[https://libgdx.badlogicgames.com/ci/nightlies/docs/api/com/badlogic/gdx/math/Circle.html|Circle]] ens anirà molt bé per a les pilotes, ja que té posició (X i Y) i radi. També ens permetrà calcular col·lisions amb altres objectes amb els mètodes ''intersect'' i ''contains''.+  * [[https://javadoc.io/doc/com.badlogicgames.gdx/gdx/latest/com/badlogic/gdx/math/Circle.html|Circle]] ens anirà molt bé per a les pilotes, ja que té posició (X i Y) i radi. També ens permetrà calcular col·lisions amb altres objectes amb els mètodes ''intersect'' i ''contains''.
  
 I a la **llibreria Graphics** destaquem: I a la **llibreria Graphics** destaquem:
-  * [[https://libgdx.badlogicgames.com/ci/nightlies/docs/api/com/badlogic/gdx/graphics/g2d/Batch.html|Batch]] és l'objecte que pinta imatges (Textures) amb el mètode ''draw'' (sobrecarregat amb diverses versions, mira la documentació). +  * [[https://javadoc.io/doc/com.badlogicgames.gdx/gdx/latest/com/badlogic/gdx/graphics/g2d/Batch.html|Batch]] és l'objecte que pinta imatges (Textures) amb el mètode ''draw'' (sobrecarregat amb diverses versions, mira la documentació). 
-    * El //batch// només pinta [[https://libgdx.badlogicgames.com/ci/nightlies/docs/api/com/badlogic/gdx/graphics/Texture.html|Textures]] (imatges) sobre la pantalla. Si volem pintar formes de colors necessitarem l'objecte Pixmap. +    * El //batch// només pinta [[https://javadoc.io/doc/com.badlogicgames.gdx/gdx/latest/com/badlogic/gdx/graphics/Texture.html|Textures]] (imatges) sobre la pantalla. Si volem pintar formes de colors necessitarem l'objecte Pixmap. 
-  * [[https://libgdx.badlogicgames.com/ci/nightlies/docs/api/com/badlogic/gdx/graphics/Pixmap.html|Pixmap]] a mode de //canvas// o "lienzo", ens permet crear imatges a partir de formes geomètriques (línia, cercle, rectangle, píxel, etc.)+  * [[https://javadoc.io/doc/com.badlogicgames.gdx/gdx/latest/com/badlogic/gdx/graphics/Pixmap.html|Pixmap]] a mode de //canvas// o "lienzo", ens permet crear imatges a partir de formes geomètriques (línia, cercle, rectangle, píxel, etc.)
  
  
Línia 281: Línia 291:
 \\ \\
  
-===== Pilotes rebotant ===== 
-Molts jocs es basen en fer rebotar pilotes per la pantalla. Us passo algunes estratègies típiques per aconseguir-ho. 
- 
-{{Pilota-rebots.png}} 
- 
-Ull! Segons aquesta imatge l'origen de coordenades està a dalt a l'esquerra. Això sol ser així en la majoria de llibreries gràfiques. libGDX, en canvi, té l'origen a baix a l'esquerra, que resulta més intuïtiu ja que està més d'acord amb els clàssics eixos de coordenades cartesians. 
- 
-Com pots veure a la imatge, rebotar una pilota és fàcil si tens les coordenades (pos_x i pos_y) de la posició, i la trajectòria la emmagatzemes com una velocitat descomposada en component X i component Y (vel_x i vel_y , per exemple). 
- 
-Quan la pilota arriba al límit inferior o superior, només cal invertir el signe de la velocitat Y si la trajectòria semblarà exactament un rebot. 
  
 ==== Exercici ==== ==== Exercici ====
Línia 310: Línia 310:
 \\ \\
  
-===== Controls Touchscreen ===== +===== Controls - Inputs ===== 
-Els controls d'entrada al joc poden ser molts: +Els controls d'entrada al joc poden ser diversos: 
-  * Teclat (només per versions Desktop) +  * Teclat (per versions Desktop) 
-  * Pantalla+  * Pantalla (touch)
   * Acceleròmetre   * Acceleròmetre
   * Brúixola/Giròscop   * Brúixola/Giròscop
  
-Convé llegir la [[https://libgdx.com/wiki/input/polling|documentació dels controls en libGDX]].+Hi ha 2 estratègies importants per gestionar els //inputs//: 
 +  * [[https://libgdx.com/wiki/input/polling|Polling]]: durant el ''render'' podem decidir "sondejar" l'estat del dispositius. 
 +  * [[https://libgdx.com/wiki/input/event-handling|Events]]: quan es dispara un event (touchDown, keyUp, etc.) es crida a una //callback//. 
 + 
 + 
 +Per saber les tecles que s'han premut consulta els [[https://javadoc.io/doc/com.badlogicgames.gdx/gdx/latest/com/badlogic/gdx/Input.Keys.html|Key Code]].
  
  
Línia 383: Línia 388:
 \\ \\
  
-===== Ortographic Camera ===== 
-Tal i com explica el tutorial del Drop Game, la ''OrtographicCamera'' ens facilitarà la traducció entre les coordenades que hem definit pel joc (o "coordenades virtuals") i les coordenades reals del dispositiu (//device//), que poden tenir dimensions diferents. A més, al treballar amb una llibreria multiplataforma, voldrem fer un sol joc a la carpeta ''core/'', i el codi de les carpetes de les plataformes (''android/'', ''ios/'', ''html/'') haurà de ser fix (no hem de repetir el joc a cada plataforma). 
- 
-Les operacions que realitzarà la càmera seran: 
-  Coordenades virtuals -> project -> Coordenades reals (//device//) 
-  Coordenades virtuals <- unproject <- Coordenades reals (//device//) 
- 
-Posant que volem una pantalla de 800x480 
- 
-<file java DesktopLauncher.java> 
-public class DesktopLauncher { 
-    public static void main (String[] arg) { 
-        Lwjgl3ApplicationConfiguration config = new Lwjgl3ApplicationConfiguration(); 
-        config.setWindowedMode(480, 800); 
-</file> 
- 
-A l'arxiu de ''Game'' o ''Screen'': 
- 
-<code java> 
-public final int GAME_WIDTH = 800; 
-public final int GAME_HEIGHT = 480; 
- 
-public void create() { 
-        camera = new OrthographicCamera(); 
-        camera.setToOrtho(false, GAME_WIDTH, GAME_HEIGHT); 
-         
-        //... 
-} 
-</code> 
- 
-Per fer que el ''SpritBatch'' tradueixi automàticament en totes les accions de dibuix, el configurarem a l'inici del ''render()'':  
- 
-<code java> 
-public void render() { 
-        camera.update(); 
-        spriteBatch.setProjectionMatrix(camera.combined); 
-         
-        //... 
-} 
-</code> 
- 
-Si estem capturant entrades de la pantalla, caldrà la operació contrària: ''unproject()'' 
- 
-<code java> 
-protected int virtual_joystick_control() { 
-    // iterar per multitouch 
-    // cada "i" és un possible "touch" d'un dit a la pantalla 
-    for(int i=0;i<10;i++) 
-    if (Gdx.input.isTouched(i)) { 
-        Vector3 touchPos = new Vector3(); 
-        touchPos.set(Gdx.input.getX(i), Gdx.input.getY(i), 0); 
-        // traducció de coordenades reals (depen del dispositiu) a 800x480 
-        game.camera.unproject(touchPos); 
-        // les dades convertides s'enregistren a la mateixa variable touchPos 
-        //... 
-</code> 
- 
-\\ 
  
 ===== Actors, Scenes i Skins ===== ===== Actors, Scenes i Skins =====
jocs_libgdx.1712916365.txt.gz · Darrera modificació: 2024/04/12 10:06 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