Ve čtvrtém díle našeho seriálu o programování her pro Windows Phone se podíváme na XNA Framework a konečně si zkusíme vytvořit první projekt, tak s chutí do toho.
Jak jsme si už řekli, hry pro Windows Phone 7 se nejčastěji vyvíjí pomocí XNA Frameworku. V dnešním díle si přiblížíme jeho hlavní principy a postupně se pustíme do programování jedné hry. Z hlediska návrhu bude poměrně jednoduchá, budeme si na ní chtít hlavně ukázat specifické vlastnosti této mobilní platformy. Budeme průběžně střídat kousky praktického programování s výkladem teorie. Naším výsledkem bude opravdu funkční, i když poměrně triviální hra; tu si potom bude moci každý vylepšit po svém.
Úvod do XNA Frameworku
O XNA Frameworku toho v češtině bylo sepsáno už poměrně dost, především o jeho základech, nemělo by tedy asi cenu v tomto seriálu znovu vše opakovat. Zmíníme zde určitě vše důležité. Pokud si ale budete chtít rozšířit svoje obzory, budete si moci projít i tyto další materiály (například při čekání na další díl tohoto seriálu).
Pro server CzechGamer.com jsme spolu se Štěpánem Pazderkou napsali začátkem roku čtrnáctidílný seriál o vývoji her, který pokrýval především úplné základy programování v XNA. Byl adresovaný běžné veřejnosti a hráčům počítačových her, takže jsme se v některých částech raději nepouštěli moc do hluboké teorie. Zajímavých informací tam ale bylo i tak zmíněno určitě dost. Pokud si je projdete, budete si moci zkusit vytvořit jednoduchou 3D hru, nebo 2D hru s vesmírnou raketkou. Také se dozvíte něco o game designu, nebo o základech 3D grafiky.
Programování her, především pro počítače, jsem se také pokusil přiblížit v desetidílné sérii videí na serveru YouTube. Postupně tam byla zmíněna základní teorie XNA, nebo tam bylo také ukázáno, jak dělat animace, nebo používat herní komponenty. První díl si můžete pustit rovnou tady:
Seznam dalších zdrojů, odkud se dá naučit XNA, je udržován v tomto příspěvku na našem fóru. Najdete tam odkazy na další zajímavé návody a tutoriály. Vývoj pro Windows Phone jsem například krátce zmínil také v tomto článku na Živě.cz. Pokud zatím s programování začínáte a rádi byste se naučili základy jazyka C# (pokud vám například zatím přijde většina těchto návodů náročná), docela zajímavá je knížka Programujeme hry v jazyce C# od Petra Roudenského a Mokhtara M Khoshida. Jestli se naopak v základech XNA už pohybujete dobře a chtěli byste se naučit například něco pokročilého z 3D grafiky, můžete si zkusit projít krátký seriál na vbnet.cz (je sice psaný pro Visual Basic a pro starší verzi XNA, ale je v něm poměrně dost informací), nebo se podívat na velice zajímavou knížku XNA 3.0 Game Programming Recipes od Riemera Grootjanse (psaná v angličtině).
Herní smyčka
XNA Framework je sada knihoven určená pro jednodušší tvorbu her. Je postavený nad technologií DirectX, vykreslování je akcelerováno grafickým čipem. Jeho cílem je odstínit vývojáře od nízkoúrovňových problémů jednotlivých platforem, aby mohli stejným způsobem programovat pro počítače, herní konzole nebo telefony. Obsahuje i další užitečné funkce, jako například pro práci s hudbou, komunikaci po síti, nebo pro různé výpočty s vektory a maticemi. XNA běží nad .NET Frameworkem, programuje se v něm tedy v některém s “managed” jazyků, jako například v C# nebo ve Visual Basicu.NET. K dispozici je zde, podobně jako například v Javě, takzvaný Garbage Collector, neboli automatická správa paměti. Nemusíme se tedy tolik starat o každý zapomenutý ukazatel na objekt, jako to bylo například potřeba v jazyce C++ a čistém DirectX. Vývoj her je zde opravdu bezproblémový a pohodlný, především jednoduché 2D hry si zvládneme vytvořit opravdu za chvíli.
Máme zde k dispozici takzvanou herní smyčku – předpřipravenou sadu metod, do kterých nám následně stačí jen dosazovat kód. Jak se tyto metody volají můžeme dobře vidět na přiloženém obrázku. Jako úplně první se nám po spuštění hry zavolá její konstruktor Game1(). V tom si většinou nastavíme parametry zobrazení, jako například rozlišení hry, nebo jestli by měla běžet přes celou obrazovku. Hned poté se nám zavolá metoda Initialize(). V té bychom si měli připravit a nastavit všechny naše počáteční parametry hry, případně další její nastavení. Její funkčnost odpovídá víceméně zmiňovanému konstruktoru, tohle oddělení kódu je zde spíš pro přehlednost. Následně se nám zavolá metoda LoadContent(), tady bychom si měli do naší hry načíst veškeré potřebné obrázky, zvuky nebo modely. U většiny her by neměl být problém s tím, že si načteme úplně vše do paměti už na začátku.
Následně nám nastává samotná herní smyčka. Střídavě se nám volají dvě metody – Update() a Draw(), a to po celou následnou dobu hry (volají se 30x nebo až 60x za sekundu). V metodě Update() si vždy zaktualizujeme naši scénu. Neboli načteme si vstup od uživatele (například jeho kliknutí na displej) a provedeme nějakou změnu na herním plánu, například posuneme panáčka. V této metodě by měla být umístěna veškerá naše herní logika. Metoda Draw() už potom slouží jen k tomu, že projde proměnné naší hry, ve kterých máme uložené pozice a parametry objektů, a vykreslí je všechny na displej. V této metodě se už nic nepočítá, nic nemění; slouží nám opravdu jen k vykreslení objektů. Při ukončování hry se nám potom volá metoda UnloadContent(), tu zatím nejspíš potřebovat nebudeme.
Vše si teď ukážeme na příkladu, kde si zkusíme zobrazit obrázek na pozadí. Další informace o herní smyčce najdete v přiloženém videu:
Předpokládám, že už jste obeznámeni s prostředím Visual Studia, například že jste se podívali na první odkazované video. Založíme si nový projekt typu Windows Phone Game. Možná dostanete na výběr cílovou platformu, zde zvolíte Windows Phone 7.1 (budeme chtít vyvíjet hru pro nové Mango telefony). Objeví se nám okno se zdrojovým kódem, se základní šablonkou hry. Na začátku vidíme konstruktor Game1() a dále již zmiňované metody Initialize(), LoadContent() a podobně. Také je zde mnoho komentářů v angličtině, které nám znovu opakují, co bychom měli do které metody dopsat.
V některém z horních panelů bychom měli najít paletku s možností výběru, kam se má spouštěná hra nahrát. Nejspíš tam bude předvolená položka Windows Phone Emulator. Pokud už máme připojený k počítači vývojářsky odemčený telefon, můžeme si rovnou zvolit ten. Stisknutím klávesy F5 si náš projekt odzkoušíme zkompilovat a spustit, na zvoleném zařízení by se mělo po chvíli objevit modré okno. Pokud nám emulátor nebude fungovat, zkontrolujeme si ještě požadavky na počítač sepsané v prvním díle.
První pokus
Zkusíme si jednoduše vykreslit obrázek na pozadí. Vybereme si na disku soubor s jakýmkoliv obrázkem (nejspíš typu .jpg nebo .png) a přetáhneme si ho do paletky Solution Explorer, na položku Content (viz obrázek). Pokud zde na něj klikneme, v paletce Properties uvidíme položku Asset Name. To je název, pod kterým se na tento obrázek potom budeme odkazovat z kódu.
Nahoru do třídy Game1 (pod řádek SpriteBatch spriteBatch;) si vložíme deklaraci proměnné našeho pozadí:
Texture2D background;
V metodě LoadContent() si potom do této proměnné budeme chtít načíst daný obrázek. K tomu se využívá speciální funkcionalita XNA zvaná Content Pipeline, což je unifikovaný způsob, jak si do projektu načítat data. Stejným způsobem lze načíst do hry obrázek na počítači, Xboxu i telefonu. Ten se potom automaticky zkompiluje do interního formátu a zabalí do spustitelného souboru, o nic víc se nemusíme starat. Bohužel tato metoda na Windows Phone nebude vždy ideálně rychlá, v dalších dílech si ukážeme ještě další způsoby, jak se dají obrázky do hry načíst. Zatím nám ale bude stačit si vložit do metody LoadContent() tento řádek (“pozadi” je naše zadaná hodnota Asset Name):
background = Content.Load<Texture2D>("pozadi");
Obrázek už tedy máme ve hře načtený, budeme si ho tedy chtít vykreslit. To uděláme v metodě Draw()vložením těchto tří řádků:
spriteBatch.Begin(); spriteBatch.Draw(background, Vector2.Zero, Color.White); spriteBatch.End();
Pro vykreslování zde používáme objekt typu SpriteBatch. Mezi volání .Begin() a .End() vždy vkládáme náš vykreslovací kód. Veškeré objekty k vykreslení se takto “zapamatovávají” do určité vyrovnávací paměti, zavoláním .End() se pak odešlou všechny najednou na grafickou kartu. Vykreslování je potom mnohem rychlejší, než kdyby se tam objekty k vykreslení posílaly postupně jeden po druhém. Pomocí objektů typuSpriteBatch si můžeme vykreslovat například i text, vykreslované objekty si můžeme řadit podle určitých kritérií a podobně, je to docela silný nástroj.
Když si nyní zkusíme znovu zkompilovat a spustit naši hru stisknutím F5, měli bychom už vidět náš obrázek vykreslený. Ještě bude asi podivně otočený. Jak obrátit orientaci displeje, spustit hru na celou obrazovku nebo změnit její rozlišení, si ale povíme až v příštím díle.
