Lekce 2 - Vložení obsahu MonoGame hry

V minulé lekci, Struktura MonoGame hry, jsme si vysvětlili strukturu MonoGame hry a jak funguje herní smyčka.

Dnes se podíváme na obsah. Jak víme z minula, do obsahu patří sprity, zvuky a hudba.

Nastavení velikosti okna

Minule jsme vlastně ani nezkusili naši hru spustit, když to uděláme, zobrazí se nám modré okno o velikosti 800x480 pixelů. Tuto velikost si nyní upravíme. Do třídy si přidáme veřejné proměnné sirkaOkna a vyskaOkna. Veřejné proto, že je budou později používat další komponenty hry. Šířku nastavíme na 1280 a výšku na 720. Toto je asi nejnižší rozlišení, pro které má smysl hru vytvářet (pokud neděláme retro hru), jiné vypadají na velkých monitorech ošklivě. Všimněte si, že je poměr stran 16:9, můžeme použít i variantu 16:10, tedy 1280x800. Sprity pro tento kurz mám však připravené pro 1. variantu. Pro poměr stran 4:3 již nemá smysl hry vytvářet, takové displeje již nejsou rozšířené. Nový kód bude ve třídě vypadat takto:

public int sirkaOkna = 1280, vyskaOkna = 720;

Samozřejmě si nezapomínejte psát do zdrojáku komentáře, já je zde uvádět příliš nebudu kvůli úspoře místa, ale v přiložených souborech na konci článku budou obsaženy. Projekt bude již většího rázu, tak abychom se v něm časem stále vyznali.

Nyní se přesuňme do metody Initialize() a nastavme nové hodnoty instanci graphics. Ta má na sobě vlastnosti PreferredBackBufferWidth a PreferredBackBufferHeight, to jsou rozměry okna hry. Dále nastavíme IsFullScreen na false. Nakonec vše potvrdíme metodou ApplyChanges(). Kód píšeme nad řádek s base.Initialize();. Výsledek:

protected override void Initialize()
{
    // velikost okna
    graphics.PreferredBackBufferWidth = sirkaOkna;
    graphics.PreferredBackBufferHeight = vyskaOkna;
    graphics.IsFullScreen = false;
    graphics.ApplyChanges();
    base.Initialize();
}

Hru si zkusíme spustit a vidíme, že vše funguje. Můžete si přepnout fullscreen na true, ale uvidíte, že spuštění a ukončení hry je pomalejší a proto by nás to při vývoji zdržovalo. Jelikož nemáme zatím v celoobrazovkovém režimu jak hru ukončit, uděláme to klávesovou zkratkou Alt + F4.

Přidávání obsahu

Nyní se zaměříme na okno Solution Exploreru. To vypadá nějak takto:

Vidíme strukturu projektu, kterou jsme si již vysvětlovali. V Content otevřeme MonoGame Content Pipeline Tool dvojklikem na soubor Content.mgcb:

Zde vidíme projekt Content, do kterého budeme vkládat multimediální obsah naší hry. Nyní si vytvoříme 3 složky - Fonty/, Sprity/, a Zvuky/. Složku vytvoříme pravým kliknutím na Content -> Add -> New Folder. Složky nám umožní snadnější orientaci v obsahu.

Nyní si prosím stáhněte archiv pod článkem, který obsahuje první sprity a zvuky k Robotrisu. Archiv obsahuje hudbu Zardax od autora StainLessSteel z komunity CSDB . Jedná se o osmibitovou hudbu, která naší hře dodá atmosféru arkád. Dále jde o též 8bitový zvuk, který použijeme při zmizení řady, stáhl jsem ho na http://www.freesound.org/. Ještě tu máme 3 sprity - pozadí s kostkami, pozadí levelu s robotem a mraky. Kostky jsem upravil z nižšího rozlišení a pocházejí ze hry Supaplex. Pozadí levelu jsme napáchali s sczdavosem v Photoshopu. Sprite s mraky je odněkud stažený, jeho přednost je v tom, že mraků můžeme dát několik vedle sebe, protože na sebe textura navazuje. Jako poslední zde máme font Blox, stažený myslím z http://www.dafont.com. Úžasně zapadá do atmosféry naší arkády.

Všimněte si, že souborům dávám prefixy pozadi_, spr_, zvuk_, font_ a hudba_. Je to dobrý zvyk, který zvýší přehlednost až obsahu bude více. Soubory si uložíme někam ke složce s projektem. Až na font lze soubory jednoduše přetáhnout myší z Windows Exploreru do námi nachystaných složek v MonoGame Pipeline Tool. Při přidávání ještě vyskočí okno jak se má soubor přidat, zde stačí potvrdit a soubor se nám zkopíruje přímo do složky Content/. Nyní co s fontem? Klikneme na soubor pravým tlačítkem a zvolíme Nainstalovat. Poté klikneme pravým tlačítkem na složku Fonty v MonoGame Pipeline Tool a přidáme nový SpriteFont (Add -> New Item, ten pojmenujeme font_blox a zvolíme typ SpriteFont Description (.spritefont) v následujícím dialogu:

Váš Pipeline Tool by měl nyní vypadat takto:

Struktura SpriteFontu

Otevřeme soubor s fontem pravým kliknutím a výběrem Open. Jak vidíme, soubor .spritefont je XML, které vypadá nějak takto:

<?xml version="1.0" encoding="utf-8"?>
<!--
This file contains an xml description of a font, and will be read by the XNA
Framework Content Pipeline. Follow the comments to customize the appearance
of the font in your game, and to change the characters which are available to draw
with.
-->
<XnaContent xmlns:Graphics="Microsoft.Xna.Framework.Content.Pipeline.Graphics">
  <Asset Type="Graphics:FontDescription">

    <!--
    Modify this string to change the font that will be imported.
    -->
    <FontName>Arial</FontName>

    <!--
    Size is a float value, measured in points. Modify this value to change
    the size of the font.
    -->
    <Size>12</Size>

    <!--
    Spacing is a float value, measured in pixels. Modify this value to change
    the amount of spacing in between characters.
    -->
    <Spacing>0</Spacing>

    <!--
    UseKerning controls the layout of the font. If this value is true, kerning information
    will be used when placing characters.
    -->
    <UseKerning>true</UseKerning>

    <!--
    Style controls the style of the font. Valid entries are "Regular", "Bold", "Italic",
    and "Bold, Italic", and are case sensitive.
    -->
    <Style>Regular</Style>

    <!--
    If you uncomment this line, the default character will be substituted if you draw
    or measure text that contains characters which were not included in the font.
    -->
    <!-- <DefaultCharacter>*</DefaultCharacter> -->

    <!--
    CharacterRegions control what letters are available in the font. Every
    character from Start to End will be built and made available for drawing. The
    default range is from 32, (ASCII space), to 126, ('~'), covering the basic Latin
    character set. The characters are ordered according to the Unicode standard.
    See the documentation for more information.
    -->
    <CharacterRegions>
      <CharacterRegion>
        <Start>&#32;</Start>
        <End>&#126;</End>
      </CharacterRegion>
    </CharacterRegions>
  </Asset>
</XnaContent>

Podle tohoto XML MonoGame poté projede jednotlivá písmena fontu a vytvoří pro ně sprity. MonoGame nemá žádný renderovací nástroj pro vektorová písma, vždy musíme písmo převést na sprity, naštěstí to udělá za nás, takže nám to nevadí.

V souboru se zaměříme na tag <FontName>, který přepíšeme na jméno písma Blox (to nalezneme když soubor s fontem, ten co jste stáhli, otevřeme, Windows nám jméno ukáže, v našem případě je jméno "Blox (BRK)". Řádka bude vypadat:

<FontName>Blox (BRK)</FontName>

Dále nastavíme velikost a to na 50 bodů:

<Size>50</Size>

Protože tento font (jako většina jiných, takto ozdobných fontů) nemá znaky pro českou diakritiku, tím pro nás nastavení končí. Budeme si to pamatovat a nebudeme fontem font_blox vypisovat žádné jiné znaky než anglické abecedy, jinak by hra spadla s chybou. Protože budeme chtít ještě verzi tohoto písma s menší velikostí, přídáme další SpriteFont úplně stejně, jako font_blox. Bude se jmenovat font_blox_maly. Opět nastavíme jméno fontu na "Blox (BRK)" a velikost tentokrát na 30 bodů.

Česká diakritika ve SpriteFontu

Na nadpisy je font naprosto skvělý, v delších textech by nám však diakritika a další speciální znaky chyběly. Proto přidáme nějaké obyčejnější písmo, zvolil jsem neproporcionální "Courier New". Přidejme tedy 3. SpriteFont do složky Fonty/, nazvěme jej font_courier_new a nastavme mu v jeho XML souboru jméno na "Courier New" a velikost na 15 bodů. Nyní se přesuňme na konec XML souboru a přepišme tag <End> v definici regionů písma na hodnotu 390:

<CharacterRegions>
      <CharacterRegion>
        <Start>&#32;</Start>
        <End>&#390;</End>
      </CharacterRegion>
    </CharacterRegions>

Regiony nám umožňují nastavit jaké znaky se z fontu převedou na sprity. Nyní jsme rozsah zvýšili tak, že zahrnuje i českou diakritiku. Máme přidané vše, co jsme potřebovali.

Příště si v lekci Kreslíme a píšeme v MonoGame ukážeme, jak se s obsahem pracuje ve hře a konečně také něco uvidíme a uslyšíme

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š.