Několik posledních měsíců si hraji a vytvářím logickou hru pro mobily a kapesní počítače. Protože si myslím, že téma piškvorek, sudoku nebo tetrisu je už docela otřepané, po pár zábavných experimentech s posouváním rozstříhaných papírků po stole jsem vymyslel nový koncept. I když inspirace asi vzdáleně vyšla například ze stolní hry Tajemnice labyrintu nebo některých flashových her, ve výsledku jsem vlastně vymyslel nová pravidla.

Hra ještě není úplně dokončená, půjde spouštět na zařízeních s Windows Mobile, těch s dotykovým displejem i obyčejných smartphonech, stejně tak jako na počítači (i když se zjednodušenou grafikou optimalizovanou pro mobily). Podrobná pravidla pak popíšu do konečné verze, bude tam i tutoriál. Zjednodušeně řečeno, je to hra pro tři hráče, úkolem je naplnit svojí barvou co nejvíce cest. Buňky se můžou přidávat i otáčet (podle určitých pravidel), můžou se i odbouchnout, když se vlijí dvě barvy do sebe, hráči se dokáží i zneškodnit. Půjde hrát proti “počítači” i přes síť.

Letos jsem ji také využil jako zápočtový program do letního semestru programování, teď jsem ještě dopisoval dokumentaci. Tu sem celou posílat nebudu (stejně byste tam našli jenom nudně popsané algoritmy), ale můžu se podělit o úvodní část, jak jsem vybíral technologii a implementoval vykreslování. Bylo to psané opravdu ve stručnosti, i tak mi to totiž vyšel celý dokument asi na 9 stran.

Na pár fotek z vývoje a tak se také můžete podívat v mojí galerii Picasa.

Výběr technologie

První jsem vybíral jazyk a technologii. Pro vývoj pro Pocket PC existuje několik možností, jak toto řešit. Mobilní Javu (J2ME) jsem zavrhl jako první, ta se hodí pro běžné jednoduché telefony, na zařízeních s Windows Mobile ale nemá takovou podporu (nemusí být na všech zařízeních), je pomalá a nejde v ní vytvořit vše. Další možností bylo programovat v nativním C++, které je rychlé a dá se v něm udělat prakticky cokoliv. V dnešní době se v něm ale běžné mobilní aplikace většinou nepíší, kvůli zbytečně složitému vývoji.

Protože už sám několik let programuji v jazyce C#, vybral jsem si mobilní .NET Compact Framework. Protože používá řízený kód, může být většinou pomalejší, chtěl jsem ale programovat deskovou hru, tak mi to nevadilo. Nakonec jsem zvolil jeho starší verzi 2.0, protože ta může být nainstalována i na starších Pocket PC 2003 first edition a v nových systémech bývá už integrovaná. Navíc jsem nepotřeboval využívat posledních vychytávek jako je LINQ, mobilní WCF apod.

Pro samotné vykreslování hry jsem měl také několik možností. Existuje postarší Game API (GAPI), dokonce mobilní DirectDraw a DirectX (Direct3D Mobile), stejně tak i nějaká napůl pochybná implementace OpenGL. Bohužel v dnešní době vývoj pro Windows Mobile rozhodně není tak růžový jako např. pro iPhone, většina těchto technologií je už poměrně zastaralá, špatně zdokumentovaná nebo se známými problémy (např. chybné chování při příchozím hovoru apod.). Snad v budoucnu přijde mobilní verze XNA.

Já jsem také nepotřeboval žádné složité animace ani průhlednosti, tak jsem nakonec použil základní technologii – mobilní implementaci ořezaného GDI+. Ale ani to nebylo úplně pohodlné, oproti velkému .NET Frameworku v něm totiž chybí téměř celý namespace System.Drawing.Drawing2D, .Imaging apod. Nepodporuje kreslení cest, poloprůhlednost nebo barevné přechody, navíc některé věci kreslí jinak (například lomené čáry). Často jsem si tak musel některé metody psát úplně sám.

Rozlišení a DPI

Mobilní zařízení jsou specifická i dalšími způsoby. Existuje mnoho různých rozlišení displeje, například čtvercové 240x240 (SQVGA), dlouhé na výšku jako např. 240x400 (WQVGA) apod. Jsou ale také různé velikosti DPI (počet bodů na palec, nejčastější jsou 96 a 192 DPI) a displej může být otočen i na šířku, takže existuje např. i 800x480 (WVGA landscape). V poslední době je móda dělat všechny nabídky dostatečně velké, aby se PDA dala ovládat jen prsty. Proto jsem si hlídal i toto, a aby hra pokud možno vypadala na všech reálných zařízeních stejně. Pro správnou velikost buněk na začátku zinicializuji objekt jejich vlastností na násobek velikosti základního 96 DPI. Grafika menu a pozadí se potom načte ze dvou možností – obrázků optimalizovaných pro QVGA (do 96 DPI) nebo VGA.

Problém kešování a implementace přímého vykreslování

Samotné vykreslování jsem psal v podstatě nadvakrát. Mobilní zařízení mají omezené prostředky, hlavně slabý procesorový výkon a málo operační paměti. Nejdřív jsem to navrhl tak, že každá buňka si pamatuje svoji malou předpočítanou bitmapu. Když se zavolá překreslení, již spočítané bitmapy se jen přenesou na plochu a znovu se jimi nezabývá. Tím mělo být zaručeno například rychlé posouvání okna při změně pohledu. Buňky mimo vykreslovací oblast svoji bitmapu zapomínají, aby se uvolnila paměť. Celkové zatížení paměti mělo být cca snesitelných 6 MB.

Bohužel se toto řešení nakonec neukázalo jako ideální. Procesorová režie s načítáním mnoha malých bitmap (kde se navíc musela využívat 1bitová průhlednost) byla nakonec větší, než kdyby se vykreslovalo vždy vše najednou, takže např. posouvání okna rychlé vůbec nebylo. Další problém byl (možná jako nějaké omezení .NET CF 2.0), že i když v zařízení ještě nějaká paměť byla, ve velkých rozlišeních to už bylo docela na hraně a občas padalo na nedostatek paměti. Zkoušel jsem i dvojité kešování, kdy se nepamatovaly jednotlivé bitmapy buněk, ale byla jen jedna bitmapa pro všechny viditelné na plánu, ale výsledek byl podobný.

Nakonec se jako nejrychlejší ukázalo při každém překreslení vykreslit vše od začátku, odpadly s tím také problémy, jako například, kterým buňkám přepočítávat bitmapu při změně plánu. Sice jsem si pro buňky mohl dovolit jen základní vektorovou grafiku, aby to procesor stíhal, ale to ani nevadilo.

Ve výsledku Form1 předá v přepsané metodě OnPaint() podřízené třídě Game objekt Graphics, která zde vykreslí pozadí. Ta ho pak opět postupně předá všem aktuálně viditelným buňkám. Každá se do této bitmapy vykreslí, jak potřebuje. Nakonec se tam dokreslí herní menu, označení posledních tahů hráčů apod. Ve třídě Form1 ještě využívám jednoho drobného kešování, že vše vykresluji do předem naalokované bitmapy velikosti okna, kterou pak jen „překlopím“ na displej (aby to neblikalo, obdoba doublebufferingu ve velkém .NETu). Pozadí navíc oproti buňkám vykresluji s menším posunutím, takže při posouvání okna vzniká zajímavý efekt.