Lekce 3 - Programujeme Android hru - Základní vestavěné třídy

v minulém díle, Programujeme Android hru - Stažení potřebného software, jsem slíbil, že dnešní díl nebude tak vyčerpávající a hlavně, že to už konečně bude o nějakém tom programování.

Dneska si ukážeme nějaké základní vestavěné metody a třídy v Libgdx, pohrajeme si trošku s barvami, povíme si něco o obrazovce a vypíšeme na ni text.

Spustíme si Eclipse s naším "tří-projektem"...

A rozklikneme si složku desktop a do třídy DesktopLauncher­.java si přidáme tři řádky s pojmenováním názvu a nastavením velikosti okna, ve kterém naše aplikace na počítači poběží.

Když po těchto úpravách naší aplikaci spustíme, tak vidíme že má náš nastavený název okna a odpovídající šířku a výšku, kterou jsme nastavili v poměru 800 px/500 px = 1,6.

Složku desktop a třídu DesktopLauncher­.java můžeme prozatím uzavřít a opustit. Rozklikneme si složku core a otevřeme si třídu WackyChicken.java, měla by vypadat nějak takhle:

Provedeme nějaké úpravy spočívající v tom, že odstraníme proměnné batch, img. V metodě create() odstraníme vše (oba dva řádky). V metodě render() ponecháme pouze řádky Gdx.gl.glClear­Color(0, 0, 0, 1) a Gdx.gl.glClear(GL20­.GL_COLOR_BUF­FER_BIT), přičemž ti bystří si povšimli, že jsem tu první jedničku změnil na nulu. Můžeme stisknout klávesovou zkratku ctrl+shift+O, aby nám po odstranění proměnných zmizeli nepotřebné importy - zatím toto není důležité, vrátím se k tomu později, když to nyní neuděláme Eclipse jen hodí warning hlášku.

Kdo nyní zkusil po této změně projekt spustit (spustil složku desktop), vidí, že zmizel obrázek a hlavně, že pozadí je celé černé, takže určitě pochopil, že to má na svědomí právě ta změna prvního čísla jedničky na nulu. Požadovanou barvu pozadí si můžeme namíchat pomocí prvních tří čísel, protože tato čísla představují jednotlivé složky RGB, přičemž jsou typu float (desetinného čísla) a mohou nabírat hodnot od nuly do jedné. Čtvrté číslo vyjadřuje průhlednost. Zkuste například nastavit první tři čísla na 1, 0.55f, 0.12f a měli byste dostat takovou nějakou oranžovou.

Pro naše účely si to zatím ponecháme černé a vyzkoušíme si základní metodu, která nám vypíše řetězec do konzole. Metoda si bere parametry ve formě dvou textových řetězců, přičemž první řetězec je jen název zprávy, kterou chceme zobrazit (tzv. tag). Druhý string je text, který chceme vypsat, přidejme si tedy do funkce create() metodu Gdx.app.log("Poz­drav", "ahoj") a spusťme desktop.

Vidíme, že metoda dělá to, co chceme - dole v Consoli se nám zobrazila naše zpráva. To se nám může hodit, když si například chceme zjistit obsah nějaké proměnné, chceme ho znát jen my jako vývojáři a nechceme tím obtěžovat uživatele naší aplikace. Sám jsem si tohle pojmenoval "vypsat si servisní údaje".

Dalšími základními důležitými metodami jsou Gdx.graphics.get­Width() a Gdx.graphics.get­Height(), neberou si žádné parametry a vrací celá čísla (int) šířku a výšku obrazovky. Zase přidáme do funkce create() a vyzkoušíme spuštěním desktopu:

Opět nám krásně funguje - obdrželi jsme hodnoty šířky 800 a výšky 500 a to je správně - jsou to ty hodnoty, které jsme před chvílí nastavili do části projektu desktop konkrétně do třídy DesktopLauncher­.java jako nastavení velikosti okna, ve kterém naše aplikace běží.

Představme si na chvíli, že toto okno je jakési "virtuální zařízení", na kterém naše appka běží. Schválně dávám do uvozovek, protože je to samozřejmě v podstatě jen Java aplikace. Mám na mysli virtuální zařízení jen z pohledu velikosti okna, velikost 800x500 nyní můžeme brát jako takovou konstantu - prostě máme k dispozici pouze tento obrazovkový prostor, víc nic a musíme se s tím nějak vypořádat.

Jde mi o to, nastínit vám problematiku různých displejů na rozličných androidích mobilech a tabletech. Naše hra si musí umět poradit, když velikost změníme například na 1920x1080 nebo 1024x768, říká se tomu virtualizace obrazovky. Už asi tušíte, že budeme postupovat tak, že nejdříve metodami getWidth() a getHeight() zjistíme skutečné fyzické rozměry velikosti obrazovky mobilu/tabletu a pak podle těchto zjištěných rozměrů obrazovky nastavíme naši virtuální obrazovku. Nebo jinak řečeno zmenšíme nebo zvětšíme naší grafiku použitou v naší hře.

Pojďme dále, vypišme si nějaký text nikoli do Console ale přímo na obrazovku. Stále jsme ve složce core a ve třídě WackyChicken.java, abychom mohli něco vypsat či vykreslit na obrazovku, budeme k tomu potřebovat nějaké objekty. Na začátek třídy deklarujeme její proměnné:

private BitmapFont font;
private SpriteBatch batcher;
private String ourText;

Nezapomeňme stisknout klávesovou zkratku ctrl+shift+O pro přidání importů, jinak by nám Eclipse házelo chybovou hlášku, že tyto třídy nezná. Už z názvu dokážete jistě určit, co třídy dělají, BitmapFont obsahuje písmo, SpriteBatch batch-dávku. Třída se stará o vykreslení jednoho (nebo více-dávky) nějakého obdélníkového grafického elementu no a String je obyčejný řetězec - v našem případě text, který chceme vypsat na obrazovku.

Ve funkci create() tyto proměnné "naplníme" konkrétním textem a konkrétními objekty:

ourText = "Toto je nas prvni text, ktery vypiseme na obrazovku.";
font = new BitmapFont();
batcher = new SpriteBatch();

Naplníme jsem dal úmyslně do uvozovek - seminář je určený i pro začátečníky, tak se tady nad tím pozastavím, pokročilí přeskočí. Co vím o Javě, tak když napíšeme klíčové slovo new, tak se nám v tzv. hromadě (část paměti) vytvoří nějaký konkrétní objekt, avšak do našich konkrétních proměnných font a batcher se tyto objekty neuloží, uloží se do nich pouze paměťové adresy těchto objektů, které se ve skutečnosti nachází v části paměti zvaná hromada.

Nenechte se tímhle odradit, pro naší tvorbu toto není moc podstatné, vyplyne to z poznatků dále a můžete si přečíst základy Javy v online učebnici, na kterou jsem odkazoval v prvním díle.

Do funkce render() přidáme:

batcher.begin();
batcher.setColor(1, 1, 1, 1);
font.draw(batcher, "string" ,0,450);
batcher.end();

Řádky opět hovoří samy za sebe - cokoli chcete po třídě SpriteBatcher vykreslit na obrazovku, musíte vložit mezi metody begin() a end(). Když to neuděláte, appka vám pravděpodobně bude padat. Metodu setColor taky nemusím již zmiňovat - je to stejný RGB princip, jako jsme dělali u pozadí. Metoda draw() předá naši proměnnou obsahující textový řetězec třídě SpriteBatcher konkrétnímu našemu objektu batcher a ten ji vykreslí na obrazovku. Čísla 0 a 450 jsou souřadnice počátku, odkud se má začít vykreslovat. Celý náš dnešní kód by měl vypadat nějak takhle:

Uložme si a zkusme spustit desktop...

Vidíme, že to funguje a to také bude pro dnešek vše.

Příště, Programujeme Android hru - Render, delta a FPS, na dnešek navážeme. Kompletní zdrojový kód je přiložen ke stažení.

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.