A libgdx letöltésének, telepítési lépéseinek bemutatása, projekt létrehozása, első libgdx alkalmazás elkészítése képernyőképekkel, magyarázatokkal. libgdx alapok, első alkalmazás Android játékfejlesztés Kovács Ákos, Lukácsi Roland
Tartalom 1. Ismertető, áttekintés... 2 2. Letöltés... 2 3. Projekt létrehozása... 3 4. Az elkészült projekt importálása a fejlesztői környezetbe... 4 5. Első libgdx alkalmazásom... 7 6. Áttekintés, első lépések... 7 7. A programkód... 10 8. Program futtatása... 13 9. Források... 15
1. Ismertető, áttekintés A libgdx egy több platformon használható játékfejlesztési keretrendszer. Keretrendszer, tehát egy adott környezetben használt legfontosabb, leggyakrabban alkalmazott hasznos eszközök gyűjteménye. Mindezeket készen bocsájtja a fejlesztők rendelkezésére. Fő célja a Windows és Android alkalmazások közötti különbségek elmosása. Megjegyzés: A dokumentum elkészülte óta, megjelenhetett újabb verzió, amely okozhat apróbb eltéréseket a jelenlegi dokumentumhoz képest. 2. Letöltés A keretrendszer weboldala a http://libgdx.badlogicgames.com címen érhető el. Letöltése két módon történhet. 1. A honlap felső menüjében található zip letöltésével és az adott projekt mappájába történő másolással.(old Style Builds) 1. ábra Old Style build 2. A Gradle alapú telepítés nagyban megkönnyíti a fejlesztők dolgát, hiszen egy jar fájl (gdx-setup.jar) letöltése után az így birtokunkba kerülő alkalmazásban megadhatjuk a létrehozni kívánt projektünk adatait. A továbbiakban az erre a lehetőségre épülő további lépések kerülnek tárgyalásra.
2. ábra Gradle 3. Projekt létrehozása A jar fájl futtatása után az alábbi képernyőt láthatjuk. 3. ábra Projekt létrehozása 1. Itt meg kell adnunk a projekt nevét, a csomagot, a létrehozás helyét. Mindezeket tetszőlegesen választhatjuk meg. Továbbá meg kell adnunk a letöltött Android SDK helyét és ki kell választani a használni kívánt libgdx verziót. A nightlies nem stabil, a név beszédes, hiszen éjszakánként kiadott, az aktuális stabil verzióhoz képest hibajavításokat tartalmazó verziók elnevezése. Mindezek beállítása után a Generate gombra kattintva elkezdődik a projekt létrehozása, amely a projekt függőségeinek ezzel egyidejű letöltése miatt (a Gradle nagy előnye) a folyamat több percig is eltarthat.
4. ábra Projekt létrehozása 2. 4. Az elkészült projekt importálása a fejlesztői környezetbe A korábban létrehozott projekt használatához szükség van egy új komponens telepítésére az ADT-hez. Ezt az ADT-ben a Help - Install New Software alatt tehetjük meg. A bővítmény letöltéséhez a http://dist.springsource.com/release/tools/gradle repot kell megadni (5. ábra). Ezután megtörténik az elérhető komponensek keresése. A listában megjelenő mindkét bővítménycsoportot telepíteni kell, ez kiválasztásukkal és a Next -re való kattintással tehető meg. (6. ábra) A telepítés után a fejlesztői környezetet újra kell indítani. 5. ábra Új repo importálása a bővítménytelepítéshez
6. ábra Telepítendő komponensek kiválasztása 7. ábra A bővítmény telepítése Mindezek után az importálási lehetősek között már látható lesz a Gradle projekt importálási lehetőség. A projekt mappa tallózása után a Build modell re való kattintás után érhetőek el az adott mappában lévő projektek. Az ezek után megjelenő találati listában jelöljük ki az összes lehetőséget, majd a Next-re kattintva kezdhetjük meg az importálást.
8. ábra File - Import 9. ábra Importálási mód kiválasztása A sikeres projekt importálás után a Package Explorerben már elérhetőek lesznek az importált libgdx projektek, köztük az Android projekt, amelynek felépítése hasonló a korábbiakban használt standard projekthez.
5. Első libgdx alkalmazásom 10. ábra Sikeres importálás, a projekt használható Egy egyszerű alkalmazást fogunk létrehozni Hello World kiíratásával és egy földgömb kirajzolásával, a projektet MyFirstApp néven hoztam létre értelemszerűen az utasítások ehhez igazodnak, ez Önökénél eltérő lehet. Az alkalmazás a következőképpen fog kinézni: 6. Áttekintés, első lépések 11. ábra Hello World! Miután létrehoztuk és beimportáltuk a projektet az Eclipsebe, vessünk egy pillantást a könyvtárainkra:
- Három fő könyvtárunk van a MyFirstApp, a MyFirstAppandroid és a MyFirstApp-desktop ez utóbbival most nem foglalkozunk. - Az alkalmazás készítése során főleg a MyFirstApp/src könyvtárban fogunk dolgozni, maga programkód itt kerül megírásra - A MyFirstApp-andorid könyvtárban az android platformon való futtatáshoz szükséges fájlok helyezkednek el - Az MyFirstApp-andorid/assets mappában helyezkednek el a programhoz szükséges (általában) médiafájlok: képek, hangok, betűtípusok stb. 12. ábra Könyvtárszerkezet - Az MyFirstApp-andorid/res mappában (resources) láthatjuk, hogy 3 drawable mappa helyezkedik el a különböző pixelsűrűségű eszközök miatt, a mappákban elhelyezett képek közül a program automatikusan kiválasztja az eszköznek megfelelő pixelsűrűségű képet. Hdpi: magas pixelsűrűség, mdpi: közepes pixelsűrűség, ldpi: alacsony pixelsűrűség 1. Nyissuk meg a MainActivity.java fájlt: 13. ábra MainActivity.java Az első dolgunk, hogy a cfg.usegl20 = false (alapértelmezett) értéket átírjuk true-ra a képen látható módon, ez azért fontos, mert az alapértelmezett 1.0-ás OpenGl verzió csak az olyan felbontású képeket fogadja el, amelyek méretei 2 hatványai pl.: 16x16, 32x32, 128x128, stb., az OpenGl 2.0 már akármilyen méretű képet képes kezelni. 2. Állítsuk be az alkalmazás ikonját, ehhez szükségünk van 3 különböző felbontású ikonra a drawable mappákba. Ha ez megvan, akkor csak helyezzük el őket a megfelelő mappába, példánkban fa_launcher.
14. ábra Drawable mappák 3. Nyissuk meg a res/androidmanifest.xml fájlt és kattintsunk az application fülre. Az Icon sorban kattintsunk a Browse gombra aztán a Resource Chooser ablakban válasszuk ki a használni kívánt ikont (jelen esetben fa_launcher) majd OK.
15. ábra Android Manifest fájl Állítsuk be milyen szöveg, cím szerepeljen az ikon alatt, vagyis az alkalmazás nevét, jelen esetben ez MyFirstApp. Ehhez nyissuk meg a res/values/string.xml fájlt. Az app_name (String)-hez tartozó Value értéket írjuk át MyFirstApp-ra, majd mentsünk. 7. A programkód 16. ábra Strings.xml fájl Nyissuk meg a MyFirtstApp.java fájlt és oda írjuk a programkódot.
package com.me.myfirstapp; import com.badlogic.gdx.applicationlistener; import com.badlogic.gdx.gdx; import com.badlogic.gdx.graphics.color; import com.badlogic.gdx.graphics.gl20; import com.badlogic.gdx.graphics.texture; import com.badlogic.gdx.graphics.g2d.bitmapfont; import com.badlogic.gdx.graphics.g2d.sprite; import com.badlogic.gdx.graphics.g2d.spritebatch; public class MyFirstApp implements ApplicationListener { private float w, h; private BitmapFont font; //Betűtípus private SpriteBatch batch; //Kirajzoláshoz szükséges private Texture texture; //Textúra ebbe töltjük be a képet private Sprite world; //Ezt rajzoljuk ki, ebbe töltjük a texturát private String str = "Hello World!!!"; //Kiírandó szöveg @Override public void create() { // A kijelző szélességének és magasságának lekérése w = Gdx.graphics.getWidth(); h = Gdx.graphics.getHeight(); } batch = new SpriteBatch(); // Font létrehozása font = new BitmapFont(); font.setscale(2f); font.setcolor(color.orange); // Földgömb létrehozása texture = new Texture(Gdx.files.internal("data/world.jpg")); world = new Sprite(texture); // Méret beállítás a képernyő szélessége alapján world.setsize(w/2, w/2); // Pozíció, a sprite origója a bal alsó sarokban van ezért kell a // sprite szélességének és magasságának felét kivonni, hogy a kép // középre kerüljön world.setposition(w/2-world.getwidth()/2, h/2-world.getheight()/2);
@Override public void dispose() { texture.dispose(); batch.dispose(); font.dispose(); } @Override //Ez a fő szál public void render() { //Fekete háttér beállítása Gdx.gl.glClearColor(0, 0, 0, 1); Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT); } //A kirajzolás mindig begin és end utasítások közé kerül batch.begin(); //Földgömb kirajzolása world.draw(batch); //String kirajzolása, a string hosszának fele kivonásra került hogy a //szöveg középen legyen //font.draw(batch,string,x,y); font.draw(batch, str, (w/2)- (font.getbounds(str).width/2), h/10*9); batch.end(); @Override public void resize(int width, int height) { } @Override public void pause() { } } @Override public void resume() { }
8. Program futtatása 1. Állítsuk az eszközt (amelyen futtatni szeretnénk a programot) hibakereső módba, ez eszközönként eltérő, de általában Beállítások -> Programok -> Fejlesztés -> USB-hibakeresés engedélyezése. Szükség lehet az USB driver telepítésére ehhez itt az útmutató: http://developer.android.com/sdk/winusb.html 2. Csatlakoztassuk a készüléket a számítógéphez. 3. Futtassuk a következőképp: Jobb klikk a MyFirstApp-android mappára, majd Run As -> Android Applications menüpontok kiválasztása. 17. ábra Futtatás mint Válasszuk ki az eszközt a listából, majd kattintsunk az OK gombra. 18. ábra Eszköz kiválasztása Ha mindent jól csináltunk és a fordító nem talál hibát, akkor a képen látható vagy ahhoz hasonló konzol üzenetsorozatot kapunk.
Látható hogy miután az alkalmazás feltelepül, egyből el is indul. Telepítés után az alkalmazásunk ikonja: 19. ábra Konzol üzenetek 20. ábra Alkalmazás ikonja
Tipp: A fejlesztés során a kisebb módosítások tesztelését érdemes Desktop módban futtatni, mivel így jóval gyorsabb. Annyi a teendőnk, hogy a MyFrstApp-desktop/src/<package>/Main.java fájlban a useopengl20 = false értéket állítsuk true-ra, továbbá az eszközünknek megfelelő felbontást írjuk be a width és height értékek helyére. Ezután futtassuk a következőképp: Jobb klikk a MyFirstApp-desktop mappára majd Run As -> Java application, a felugró ablakban pedig válasszuk ki a Main elemet. 9. Források 21. ábra Futtatás desktop módban Ikonok: Földgömb: http://i.dailymail.co.uk/i/pix/2012/12/07/article-2244450-0824e6ec000005dc-334_634x632.jpg