2. diel - Vloženie obsahu MonoGame hry

V minulej lekcii, Štruktúra MonoGame hry , sme si vysvetlili štruktúru MonoGame hry a ako funguje herné slučka. Dnes sa pozrieme na obsah. Ako vieme z minula, do obsahu patrí sprity, zvuky a hudba.

Nastavenie veľkosti okna

Minule sme vlastne ani neskúsili našu hru spustiť, keď to urobíme, zobrazí sa nám modré okno o veľkosti 800x480 pixelov. Túto veľkosť si teraz upravíme. Do triedy si pridáme verejné premenné sirkaOkna a vyskaOkna. Verejné preto, že ich budú neskôr používať ďalšie komponenty hry. Šírku nastavíme na 1280 a výšku na 720. Toto je asi najnižšie rozlíšenie, pre ktoré má zmysel hru vytvárať (ak nerobíme retro hru), iné vyzerajú na veľkých monitoroch škaredo. Všimnite si, že je pomer strán 16: 9, môžeme použiť aj variant 16:10, teda 1280x800. Sprity pre tento kurz mám však pripravené pre 1. variant. Pre pomer strán 4: 3 už nemá zmysel hry vytvárať, také displeje už nie sú rozšírené. Nový kód bude v triede vyzerať takto:

public int sirkaOkna = 1280, vyskaOkna = 720;

Samozrejme si nezabúdajte písať do zdrojáky komentáre, ja ich tu uvádzať príliš nebudem kvôli úspore miesta, ale v priložených súboroch na konci článku budú obsiahnuté. Projekt bude už väčšieho rázu, tak aby sme sa v ňom časom stále vyznali.

Teraz sa presuňme do metódy Initialize() a nastavme nové hodnoty inštanciu graphics. Tá má na sebe vlastnosti PreferredBackBufferWidth a PreferredBackBufferHeight, to sú rozmery okna hry. Ďalej nastavíme IsFullScreen na false. Nakoniec všetko potvrdíme metódou ApplyChanges(). Kód píšeme nad riadok s base.Initialize();. výsledok:

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

Hru si skúsime spustiť a vidíme, že všetko funguje. Môžete si prepnúť fullscreen na true, ale uvidíte, že spustenie a ukončenie hry je pomalší a preto by nás to pri vývoji zdržiavalo. Keďže nemáme zatiaľ v celoobrazovkovom režime ako hru ukončiť, urobíme to klávesovou skratkou Alt + F4.

Pridávanie obsahu

Teraz sa zameriame na okno Solution Exploreru. To vyzerá nejako takto:

Vidíme štruktúru projektu, ktorú sme si už vysvetľovali. V Content otvoríme MonoGame Content Pipeline Tool dvojklikom na súbor Content.mgcb:

Tu vidíme projekt Content, do ktorého budeme vkladať multimediálny obsah našej hry. Teraz si vytvoríme 3 zložky - Fonty/, Sprity/, a Zvuky/. Zložku vytvoríme pravým kliknutím na Content -> Add -> New Folder. Zložky nám umožní jednoduchšiu orientáciu v obsahu.

Teraz si prosím stiahnite archív pod článkom, ktorý obsahuje prvú sprity a zvuky k Robotrisu. Archív obsahuje hudbu Zardax od autora StainLessSteel z komunity CSDB. Jedná sa o osembitové hudbu, ktorá našej hre dodá atmosféru arkád. Ďalej ide o tiež 8bitový zvuk, ktorý použijeme pri zmiznutie radu, stiahol som ho na http://www.freesound.org/. Ešte tu máme 3 sprity - pozadie s kockami, pozadia levelu s robotom a mraky. Kocky som upravil z nižšieho rozlíšenia a pochádzajú z hry Supaplex. Pozadie levelu sme napáchali s sczdavosem v Photoshope. Sprite s mrakmi je odniekiaľ stiahnutý, jeho prednosť je v tom, že mrakov môžeme dať niekoľko vedľa seba, pretože na seba textúra nadväzuje. Ako posledný tu máme font Blox, stiahnutý myslím z http://www.dafont.com. Úžasne zapadá do atmosféry našej arkády.

Všimnite si, že súborom dávam prefixy pozadi_, spr_, zvuk_, font_ a hudba_. Je to dobrý zvyk, ktorý zvýši prehľadnosť až obsahu bude viac. Súbory si uložíme niekam k priečinku s projektom. Až na font možno súbory jednoducho pretiahnuť myšou z Prieskumníka do nami nachystaných zložiek v MonoGame Pipeline Tool. Pri pridávaní ešte vyskočí okno ako sa má súbor pridať, tu stačí potvrdiť a súbor sa nám skopíruje priamo do zložky Content/. Teraz čo s fontom? Klikneme na súbor pravým tlačidlom a zvolíme Nainštalovať. Potom klikneme pravým tlačidlom na priečinok Fonty v MonoGame Pipeline Tool a pridáme nový SpriteFont (Add -> New Item, ten pomenujeme font_blox a zvolíme typ SpriteFont Description (.spritefont) v nasledujúcom dialógu:

Váš Solution Explorer by mal teraz vyzerať takto:

Štruktúra SpriteFontu

Otvoríme súbor s fontom pravým kliknutím a výberom Open. Ako vidíme, súbor .spritefont je XML, ktoré vyzerá nejako 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>

Podľa tohto XML MonoGame potom prejde jednotlivé písmená fontu a vytvorí pre nich sprity. MonoGame nemá žiadny renderovací nástroj pre vektorová písma, vždy musíme písmo previesť na sprity, našťastie to urobí za nás, takže nám to nevadí.

V súbore sa zameriame na tag <FontName>, ktorý prepíšeme na meno písma Blox (to nájdeme keď súbor s fontom, ten čo ste stiahli, otvoríme, Windows nám meno ukáže, v našom prípade je meno "Blox (BRK)". Riadok bude vyzerať:

<FontName>Blox (BRK)</FontName>

Ďalej nastavíme veľkosť a to na 50 bodov:

<Size>50</Size>

Pretože tento font (ako väčšina iných, takto ozdobných fontov) nemá znaky pre slovenskú diakritiku, tým pre nás nastavenie končí. Budeme si to pamätať a nebudeme fontom font_blox vypisovať žiadne iné znaky ako anglickej abecedy, inak by hra spadla s chybou. Pretože budeme chcieť ešte verziu tohto písma s menšou veľkosťou, pridáme ďalšie SpriteFont úplne rovnako, ako font_blox. Bude sa volať font_blox_maly. Opäť nastavíme meno fontu na "Blox (BRK)" a veľkosť tentoraz na 30 bodov.

Česká diakritika vo SpriteFontu

Na nadpisy je font úplne skvelý, v dlhších textoch by nám však diakritika a ďalšie špeciálne znaky chýbali. Preto pridáme nejaké obyčajnejšie písmo, zvolil som neproporcionálne "Courier New". Pridajme teda 3. SpriteFont do zložky Fonty/, nazvime ho font_courier_new a nastavme mu v jeho XML súboru meno na "Courier New" a veľkosť na 15 bodov. Teraz sa presuňme na koniec XML súboru a prepisy tag <End> v definícii regiónov písma na hodnotu 390:

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

Regióny nám umožňujú nastaviť aké znaky sa z fontu prevedú na sprity. Teraz sme rozsah zvýšili tak, že zahŕňa aj slovenskú diakritiku. Máme pridanej všetko, čo sme potrebovali, nabudúce si v lekcii Kreslíme a píšeme v MonoGame ukážeme, ako sa s obsahom pracuje v hre a konečne aj niečo uvidíme a budeme počuť

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.