2. díl - Vložení obsahu XNA hry

C# .NET XNA game studio Robotris Vložení obsahu XNA hry

V minulém dílu seriálu tutoriálů jsme si vysvětlili strukturu XNA 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 seriál 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 to metody Initialize() a nastavme nové hodnoty instanci graphics. Ta má na sobě vlastnosti PreferredBackBuf­ferWidth a PreferredBackBuf­ferHeight, 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:

XNA Solution Explorer

Vidíme 2 projekty o kterých jsme si již říkali, hru Robotris a obsah hry RobotrisContent. V RobotrisContent si nyní vytvoříme 3 složky - Fonty, Sprity, a Zvuky. Složku vytvoříme pravým kliknutím na RobotrisContent -> 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 jednouše přetahnout myší z Windows Exploreru do námi nachystaných složek v Solution Exploreru. 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 SolutionExploreru a přídáme nový SpriteFont (Add -> New Item -> SpriteFont, ten pojmenujeme font_blox v následujícím dialogu:

XNA Sprite Font

Váš Solution Explorer by měl nyní vypadat takto:

XNA Sprite Font

Struktura SpriteFontu

Otevřela se nám nová záložka se sprite fontem. 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>Segoe UI Mono</FontName>

    <!--
    Size is a float value, measured in points. Modify this value to change
    the size of the font.
    -->
    <Size>14</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 XNA poté projede jednotlivá písmena fontu a vytvoří pro ně sprity. XNA 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 ukážeme, jak se s obsahem pracuje ve hře a konečně také něco uvidíme a uslyšíme :)


 

Stáhnout

Staženo 874x (7.72 MB)
Aplikace je včetně zdrojových kódů v jazyce C#

 

  Aktivity (1)

Článek pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Jak se ti líbí článek?
Celkem (6 hlasů) :
4.833334.833334.833334.833334.83333


 


Miniatura
Předchozí článek
Struktura XNA hry
Miniatura
Všechny články v sekci
Od nuly k tetrisu v XNA game studio
Miniatura
Následující článek
Kreslíme a píšeme v XNA

 

 

Komentáře
Zobrazit starší komentáře (16)

Avatar
idosperk
Člen
Avatar
idosperk:

Ne to nemusíte ale on nainstalovaný je

 
Odpovědět 11.6.2013 19:24
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na idosperk
David Čápka:

Kdyby byl, tak to nepíše :)

Odpovědět 11.6.2013 19:25
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
idosperk
Člen
Avatar
idosperk:

a je nejaky jiny zpusob jak ho nainstalovat nez přes prave tlačítko - nainstalovat?

 
Odpovědět 11.6.2013 19:28
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na idosperk
David Čápka:

Zkopírovat do složky Fonts ve složce s Windows.

Odpovědět 11.6.2013 19:31
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na idosperk
David Čápka:

Možná bude nutný restart VS.

Odpovědět 11.6.2013 19:31
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
idosperk
Člen
Avatar
idosperk:

už to jede pomohl restart díky :D

 
Odpovědět 11.6.2013 19:33
Avatar
Superstar
Neregistrovaný
Avatar
Superstar:

Mám takový menší problém, protože když to zkusím pustit, tak mi vyskočí toto:

http://screenshot.cz/D7S56/

Moje grafika je AMD Radeon X1950, ovladače jsou nejnovější, direcX mám takový, takže nevím kde je chyba :(

 
Odpovědět 6.11.2013 20:46
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Superstar
David Čápka:

V properties projektu přepni mezi Rich a HiDef.

Odpovědět 19.11.2013 12:03
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
abushrek
Člen
Avatar
abushrek:

Zdarec chtěl bych se zeptat... Neměla by být šířka a výška konstanta, aby nešla měnit za běhu programu?

 
Odpovědět 11.6.2015 16:49
Avatar
vodacek
Redaktor
Avatar
Odpovídá na abushrek
vodacek:

to je z hlediska funkce programu úplně fuk, hlavně by se měly tydle hodnoty nastavovat podle reálného rozlišení, to se najde v GraphicsDevice­.Viewport

 
Odpovědět 11.6.2015 17:03
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 26. Zobrazit vše