TOPlist

Vyvíjíme pro WP v XNA: Lokalizace a vykreslení písma (11. díl)

V dnešním díle našeho seriálu se podíváme na vykreslování textu a na to, jak hru lokalizovat do dalších jazyků. Také si ukážeme, co je nutné pro nahrání titulu do Marketplace.

Nejdřív se tedy pustíme do vykreslování písma. S textem budeme v XNA pracovat prakticky stejně, jako s obrázky. Zvolíme si druh písma a načteme si ho do projektu pomocí Content Pipeline. Na obrazovku si ho potom opět vykreslíme pomocí objektu spriteBatch. Tahle podobnost zde není náhodná, při kompilování do projektu se nám budou interně jednotlivé znaky abecedy převádět právě na obrázky o zvolené velikosti.

-

Klikneme si pravým tlačítkem na složku Content v paletce Solution Explorer a zvolíme si Add –> New Item… V otevřeném okně si vybereme nový soubor typu SpriteFont. Otevře se nám jeho zápis v XML. Zde mu budeme moci nastavit několik parametrů. Jako položku FontName si budeme moci zvolit název jakéhokoliv písma nainstalovaného v systému. Při kompilování nám ho potom XNA automaticky přenese do naší hry. Měli bychom si dát jen pozor na licenci některých fontů, ne u všech budeme mít povoleno je využívat v komerčních hrách. Spolu s XNA ale máme naštěstí přibaleno asi 15 druhů písma, u kterých se licence bát nemusíme, ty si můžeme ve svých projektech volně používat. My si zvolíme například font Motorwerk, o velikosti 20 bodů.

-

Na konci souboru s parametry našeho písma si můžeme všimnout tagu CharacterRegion. Zde je zadaný rozsah znaků, který se má zkompilovat do projektu. Tento implicitní rozsah obsahuje jen anglickou abecedu, pro použití češtiny si sem bude potřeba ještě některé hodnoty přidat. Buď si jako horní hranici zvolíme například hodnotu Ɔ, nebo si sem extra přidáme hodnoty všech českých znaků, například podle návodu na serveru vbnet.cz. Samozřejmě, aby se nám správně vykreslovaly všechny háčky a čárky, bude muset tyto znaky daný font také podporovat. To bude problém i našeho zvoleného písma Motorwerk. My si ho využijeme jen ale pro texty ve hře, pro ostatní prvky (položky menu apod.) si například využijeme písmo Calibri, tučné a kurzívou. Škoda, že XNA nemá přístup k nativním systémovým fontům Windows Phone, nemáme zde tedy k dispozici klasické telefonní písmo Segoe WP. Nejpodobnější je mu Segoe UI Mono. Další písma si můžeme stáhnout například ze stránek dafont.com.

Přepneme se nyní zpátky do třídy Game1 a vykreslíme si počet aktuálně využitelných schopností raketky a výši našeho aktuálního skóre. Do deklarací si přidáme proměnnou pro náš font:

SpriteFont scoreFont;

V metodě LoadContent() si do něj načteme náš připravený soubor s popisem písma:

scoreFont = Content.Load<SpriteFont>("SpriteFont1");

A v metodě Draw() si pomocí něho vykreslíme potřebné položky. Nejdřív celkové skóre. To budeme chtít mít umístěné v pravém horním rohu, zarovnané zprava:

// Vykreslení textu
string scoreText = "Body: " + score; float scoreWidth = scoreFont.MeasureString(scoreText).X; spriteBatch.DrawString(scoreFont, scoreText, new Vector2(GraphicsDevice.Viewport.Width - scoreWidth - 9f, -6f), Color.White);

Pro změření výšky nebo šířky daného písma zde využíváme metodu MeasureString(). Dále si budeme chtít vykreslit počet schopností raketky. Protože hodnota vyjádřená jen číslem by nevypadala moc pěkně, vykreslíme si za každou dostupnou schopnost jednu čárku. Pokud aktuálně nebudeme moci vystřelit nic, vykreslíme pomlčku. Text si umístíme do levého horního rohu:

StringBuilder sb = new StringBuilder();
for (int i = 0; i < availableBonuses; i++)
    sb.Append("|");
if (availableBonuses == 0)
    sb.Append("-");
spriteBatch.DrawString(scoreFont, "Schopnosti: " + sb.ToString(), new Vector2(5f, -6f), Color.White);

Pro skládání více textových řetězců za sebe zde využíváme objekt typu StringBuilder. Když si hru spustíme nyní, měly bychom vidět správně vykreslené obě položky.

Ohledně textu by stálo za to zmínit ještě jeden problém – a to, když bychom si chtěli lokalizovat naši hru do více jazyků. Tyto textové řetězce bychom si v tomto případě neměli zadávat natvrdo do kódu, ale měli bychom si je dynamicky načítat podle aktuálního jazyka. To si nyní odzkoušíme udělat, použijeme podobný postup, jako byl popsaný na českém MSDN vývojářském blogu.

- 

Do projektu si vložíme nový soubor typu Resources, nazveme si ho AppResources.resx. To bude soubor s výchozím jazykem pro všechny neznámé země, v našem případě tedy s angličtinou. Horní rozbalovací položku Access Modifier si změníme na Public. Do tabulky si doplníme položky scoreTex, skillsText a jejich překlady do angličtiny.

-

Dále si do projektu přidáme ještě druhý soubor typu Resources, pojmenujeme si ho AppResources.cs-CZ.resx. Kód země je zde důležité zapsat přesně, podle něho se potom v telefonu pozná, jaký se má použít jazyk. Kódy všech aktuálně dostupných zemí najdete například tady. Tento soubor si také označíme jako public a doplníme si do něj položky scoreText a skillsText, tentokrát s českým překladem.

-

Nyní naší hře vybereme výchozí jazykovou kulturu (tj. angličtinu). Klikneme si pravým tlačítkem myši na název projektu v paletce Solution Explorer, zvolíme Properties…, zde se přepneme na záložku Application a klikneme na tlačítko Assembly Information…. V otevřeném okně si v rozbalovacím seznamu Neutral language vybereme položku English (United States). Také si zde rovnou vyplníme název naší hry a jméno autora, pokud budeme chtít.

Poslední věc, která by nám měla stačit ke korektní lokalizaci, je drobná úprava .csproj souboru našeho projektu. Najdeme si složku se zdrojovými kódy našeho programu a otevřeme si soubor NázevNašehoProjektu.csproj, například pomocí poznámkového bloku. Najdeme si zde tag <SupportedCultures></SupportedCultures>. Na toto místo si doplníme češtinu (angličtinu sem psát už nemusíme, ta bude do našeho projektu zahrnuta vždy):

<SupportedCultures>cs-CZ</SupportedCultures> 

Nyní nám už bude stačit jen upravit si vykreslovací metodu Draw() ve třídě Game1, abychom si pevně zadané texty nahradili těmi z AppResources. Například takto:

string scoreText = AppResources.scoreText + " " + score;

Když si nyní hru zkusíme spustit na zařízení s nastavenou češtinou, zobrazí se nám texty správně v češtině. Také při náhrávání hry do Marketplace nám bude nabídnuto vložení popisu aplikace a obrázků v obou těchto jazycích. 

Když už jsme si otevřeli vlastnosti našeho projektu, můžeme si zde také ukázat další nastavení, se kterým si určitě budete chtít pohrát před nahrátím hry do Marketplace. Nejdůležitější je pro nás hned ta první záložka XNA Game Studio. Můžeme si zde nastavit ikonku hry, která se bude zobrazovat v herním hubu telefonu (64×64 pixelů), název hry a obrázek dlaždice připnuté na hlavní obrazovku (173×173 pixelů). To by mělo být ve Visual Studiu vše. Další obrázky se nám budou hodit při finálním nahrávání hry do Marketplace, konkrétně si bude potřeba vytvořit ikonky velikosti 99×99 a 200×200 pixelů, případně nějaký umělecký obrázek s tématem hry, velikosti 1000×800 pixelů.

-

Pro nahrátí finální hry do Marketplace si ji ještě budeme potřebovat zabalit do finálního XAP balíčku. To se dá udělat například tak, že si ve Visual Studiu jako způsob spuštění zvolíme v horní rozbalovací nabídce Release. Projekt si spustíme pomocí klávesy F5. Nyní se budeme moci podívat do složky našeho projektu \bin\Windows Phone\Release, kde se nám požadovaný XAP soubor objeví. Ten si pak nahrajeme přes webové rozhraní App Hubu do Marketplace a nic nám už nebude bránit tomu, abychom svoji hru nabídli ke stažení všem uživatelům Windows Phone zařízením po celém světě :)

-

V příštím díle se podíváme na to, jak přesně funguje na Windows Phone multitasking a přepínání aplikací, jak si můžeme řešit ve hře zvuky a hudbu a také si povíme několik závěrečných tipů a triků.

Autor článku Tomáš Slavíček
Tomáš Slavíček

Kapitoly článku