libgdx Android Studio alatt LibGdx alapú program létrehozása, meglévő projekt importálása, képek mozgatása Készítette: Lukácsi Roland Frissítette: Hajdu Richárd Karádi Gábor Kiglics Norbert Verkman István
Tartalom 1 Bevezetés... 2 2 Projekt importálása az Android Studioba... 3 3 Megvalósítás... 4 3.1 Kirajzolás... 4 3.2 Irányítás... 9
1 Bevezetés Az alábbiakban egy egyszerű Adroid alapú applikációt fogunk készíteni a libgdx segítségével. Nem kisebb feladat vár ránk, mint egy pálcikaember mozgatása ide-oda a képernyőn a kijelző nyomogatásával. A program készítését lépésről lépésre fogjuk bemutatni.
2 Projekt importálása az Android Studioba LibGdx alapú projekt létrehozásáról A libgdx letöltésének telepítési lépéseinek bemutatása című dokumentumban esik szó, ezzel ez a dokumentum külön nem foglalkozik. Amennyiben már elsajátítottuk a libgdx projekt létrehozásának csínját-bínját, akkor az első lépés, hogy importáljuk a frissen létrehozott Gradle projektünket. Ehhez kattintsunk a File menüpontra, majd az Import Projekt pontra. Keressük meg a projektünk mappáját, jelen esetben test, majd jelöljük ki a build.gradle fájlt, aztán kattintsunk az OK gombra. 1. ábra Importálás Ha mindent helyesen csináltunk, akkor az Android Studio kis idő múlva beimportálja a projektet.
3 Megvalósítás 3.1 Kirajzolás Adott tehát egy üres Projekt. Keressük meg a core mappán belül a fő osztályt, ami jelen esetben NewGame néven szerepel. Amikor a Gradle generál egy új projektet, ez az osztály egy ApplicationAdapter típusú osztály lesz, ami a mi kis küldetésünknek tökéletesen megfelel. 2. ábra Üres projekt Töröljünk ki minden felesleges sort, maradjon csak egy üres create() és render() függvény a képen látható módon. Annyit azért érdemes tudni, hogy a create() függvény egyszer fut csak le az osztály meghívásakor, míg a render() függvény folyamatosan fut, egy véget nem érő ciklus, ha úgy tetszik. Először is szükségünk lesz egy képre, amit majd mozgathatunk. Töltsünk le egy tetszőlegeset az Internetről. Itt mindenki kiélheti a fantáziáját, mi egy egyszerű pálcika embert fogunk használni. 3. ábra Pálcikaember
Tipp: Ha a kép valamilyen háttérrel rendelkezik, még ha fehér is, akkor is meg fog jelenni a figuránk körül. Ezért érdemes valamilyen képszerkesztő programmal eltüntetni a hátteret. A Gimp erre a célra tökéletesen megfelel. Ha megvan a kép, helyezzük azt az android/assets mappába a képen látható módon. Jelen esetben stickman.png nevű fájl tartalmazza a nagy tettekre hivatott pálcika emberkénket. 4. ábra Források Következő lépésben hozzunk létre hősünknek egy textúrát 5. ábra Textúra Rajzoltassunk ki a fehér hátteret. 6. ábra Háttér
A Gdx.gl.glClearColor() függvény red, green, blue, alpha értékeket vár 0 és 1 között. Ha mindent paramétert beállítunk egyesre (1,1,1,1) és lefuttatjuk, akkor csak fehér hátteret kapunk. 7. ábra Teszt 1 Tipp: Minden apró módosítást nem érdemes valós eszközön tesztelni, teszteljünk desktop módban olyan változtatásoknál, amik nem érintik a valós eszközön való működést, összességében sok időt spórolhatunk ezzel. Hozzunk létre egy Sprite objektumot, hogy könnyebben kezelhessük a textúránkat. 8. ábra Sprite A Sprite egyébként egy nagyon hasznos dolog. Méretet, elfordulási szöget, kép orientációt, pozíciót és sok egyéb dolgot művelhetünk vele.
Állítsunk is be a pálcika emberünk kezdeti értékeit. 9. ábra Paraméterek A width és height értékek lesznek a pálcikaemberünk szélessége és magassága. A szélesség jelen esetben a képernyő szélességének fele, a magasság pedig a figura szélességének kétszerese. A figurát a képernyő bal alsó sarkában helyezzük el, ezért a 0,0 paraméterek a setposition-nél.
Elérkezett az idő, hogy kirajzoljuk a figuránkat, de ehhez létre kell hoznunk egy SpriteBatch nevű objektumot. Egyébiránt mindent, amit ki szeretnénk rajzolni, a SpriteBatch.begin() és SpriteBach.end() függvények közé kell, hogy kerüljön. Futtatva a programot, a következőt látjuk: 10. ábra SpriteBatch 11. ábra Teszt 2
Bizony megveregethetjük a vállunkat. Mérföldkőhöz érkeztünk, ott pihen a figura az alsó sarokban az elvárásainknak megfelelően, már csak mozgásra kell bírni. Lássunk hozzá. 3.2 Irányítás Először is kezelni kell az interakciókat valahogy. Szerencsére a libgdx ilyen osztállyal is szolgál: az InputProcessor névre hallgató osztály tökéletesen megfelel a célnak. Nem hozunk létre új osztályt, inkább a New Game osztályon belül implementáljuk. Előfordulhat, hogy a studio valamit nem talál. Fel fogja ajánlani, hogy importáljuk a megfelelő csomagot, és hívjuk meg a szükséges metódusokat. 12. ábra Függvények Számunkra jelen példa esetében ezek közül a touchdown() és touchdragged() metódusok érdekesek. Valósítsuk meg, hogy hősünk oda ugráljon a képernyőn, ahova bökünk!
Először is állítsuk be az InputProcessort: Majd kezeljük az érintést: 13. ábra InputProcessor 14. ábra Irányítás 1 Hogy mi szükség az y változó bevezetésére mikor van nekünk egy screeny paraméterünk is? A fejlesztők valamilyen kifacsart humorérzéktől vezérelve úgy gondolták vicces lesz invertálni az Y koordináta lekért értékeit, így egy 800 magas kijelző aljára bökve 800, tetejére bökve 0 értéket kapunk, ami nem túl jó, ezért vonjuk ki a magasságból a lekért értéket így korrekt értékeket kapunk. Ha futtatjuk a programot, láthatjuk, hogy az megfelelően működik, csupán két probléma van: egyrészt az, hogy ha végighúzzuk a képernyőn az ujjunkat, akkor nem a megfelelően reagál, valamint a figura kicsit jobbra föl csúszik a bökéshez képest. Utóbbi azért van, mert a figura orientációja a bal alsó sarkában helyezkedik el. Ez a középpont pedig nem a figura mértani középpontja. Oldjuk meg a problémát úgy hogy a képet tartalmazó sprite méreteinek a felét kivonjuk a bökés pozíciójából.
15. ábra Irányítás 2 Ugyanezeket a sorokat bemásolva a touchdragged() függvénybe a másik problémánk is megoldódik egy csapásra, és immár ide-oda húzogathatjuk karakterünket. 16. ábra Irányítás 3 Futtassuk le! Ha mindent jól csináltunk, a program megfelelően fog működni.