3. diel - 3D bludisko v XNA - Editor máp

V dnešnom diele si urobíme editor máp pre naše 3D bludisko. Editor nebude v XNA, ale jednoducho vo Windows Forms. To je z toho dôvodu, že nás u editore nezaujíma rýchlosť vykresľovania, ale vyžadujeme dialógy a ďalšie klikátka, ktoré by boli v XNA zbytočne pracné.

Návrh formulárov

Založme si teda nový projekt, Windows Forms aplikáciu. Pomenujte ho "EditorBludiste". Ako tomu bolo doteraz, stále je predpokladom, že viete základy .Net a teda aj Windows Forms, ak nie, pozrite sa do sekcie Okenné aplikácie v C#.

Zo začiatku si vytvoríme potrebné formuláre aplikácie, bude mať dva.

Formulár editora

Formulári nastavíme Text na "Editor bludisko" a StartPosition na CenterScreen. Premenujeme ho z Form1 na FormEditor. Vložíme do neho MenuStrip, pomenovaný jednoducho menuStrip. Naklikáte doň 2 položky: Mapa a O programe. Do Mapa ešte vložíme 3 položky: Nová, Načítať a Uložiť. Vzniknuté MenuItemy premenujeme tak, aby nemali v názve diakritiku. Do O programe vložíme stejnojmnenný item O programe.

Form trochu roztiahneme a umiestnime na neho Panel (pomenujeme ho mapaPanel). Ten roztiahneme po celom formu, len dole necháme pruh voľného miesta. Nastavíme mu všetky 4 Anchor a AutoScroll na True. Do ľavého horného rohu panela vložíme PictureBox pomenovaný "mapaPictureBox". Dôležité je, aby bol PictureBox naozaj v Paneli a nie len na ňom. Na PictureBox budeme vykresľovať našu mapu, Panel nám potom umožní mapou posúvať v prípade, keď sa nezmestí do okna.

Do dolného voľného pruhu vo formu vložíme doľava Label typPolickaLabel s textom "Typ políčka" a ComboBox typPolickaComboBox s Itemy: "Múr", "Štart", "Cieľ", "Prázdno". Obom kontrolkám nastavíme Anchor na Left Bottom. Do pruhu vložíme ešte doprava Label hranaLabel s textom "Dĺžka hrany" a Archor na Bottom Right. Vedľa neho pridáme NumericUpDown s názvom hranaNumericUpdown. Tým sa bude nastavovať dĺžka hrany mapy, budeme teda môcť mapu zväčšovať či zmenšovať. NumericUpDown nastavíme tiež Anchor na Bottom Right, Minimum na 8 a Value na 32.

Mali by ste dospieť k podobnému výsledku:

Formulár pre novú mapu

Druhým formulárom je dialóg pre vytvorenie novej mapy. Je veľmi jednoduchý, obsahuje len zadanie rozmerov mapy a tlačidlo vytvoriť.

Pridáme si k projektu teda ďalší formulár (pravým na projekt v Solution Exploreru -> Add -> New Item -> Windows Form) a pomenujeme ho FormNovaMapa.cs. Nastavíme mu Text na "Nová mapa", position na CenterScreen a zakážeme zmenu jeho veľkosti nastavením FormBorderStyle na FixedDialog. Do formu vložíme 2 labely pomenované sirkaLabel a vyskaLabel. Texty labelov sú vám asi jasné, budú "Šírka" a "Výška". Pre hodnoty si pridáme 2x NumericUpDown, pomenované sirkaNumericUpDown a vyskaNumericUpDown. Minimum nastavíme oboma na 8. Formulár dokončíme pridaním tlačidla pomenovaného vytvoritButton s textom Vytvoriť.

Form by mal vyzerať asi takto:

Mapa

Tým máme formuláre hotové. Ako vieme, logika aplikácie do formulára nepatrí. Preto si najprv vytvoríme triedu Mapa, ktorá bude reprezentovať hernú mapu a obsluhovať všetko potrebné. Až potom s ňou budeme vo formu pracovať.

Pridajme si teda k projektu triedu Mapa.cs a pridajme jej modifikátor public.

public class Mapa
{

}

Trieda bude spravovať políčka mapy, ktoré sú v pamäti reprezentované ako dvojrozmerné pole intů. Tento atribút dáme triede ako verejný:

public int[,] policka;

Pre lepšiu manipuláciu pridáme vlastnosti pre prístup k šírke a výške mapy. U viacrozmerných polí sa na veľkosti (dimenzie) pýtame pomocou parametrizované metódy GetLength ():

 public int Sirka
{
    get { return policka.GetLength(0); }
}

public int Vyska
{
    get { return policka.GetLength(1); }
}

Triede vytvoríme jednoduchý konštruktor, ktorý založí novú mapu (inicializuje premennú policka). VC # sa môžeme spoľahnúť na to, že sú v poli samé nuly (tie označujú v hre prázd políčko).

public Mapa(int sirka, int vyska)
{
    policka = new int[sirka, vyska];
}

Dátovú štruktúru s mapou teda trieda už ovláda dobre. Teraz ostáva implementovať 3 veci: uloženie mapy do súboru, načítanie mapy zo súboru a vykreslenie mapy na Graphics nejaké komponenty.

Uloženie

Mapa bude uložená v textovom súbore, jednotlivé hodnoty budú oddelené čiarkou, riadok v poli zodpovedá riadku v súbore. Súbor s mapou teda vyzerá napr. Takto:

0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0
0,0,0,1,1,0,0,0,0,1,1,1,0,0,0,0
0,0,1,1,0,0,0,0,0,0,0,1,1,0,0,0
0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0
0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0
0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0
0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0
0,0,1,1,0,0,0,0,0,0,0,0,1,0,0,0
0,0,0,1,1,0,0,0,0,0,0,1,1,0,0,0
0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

Pridajme si metódu Uloz (), ako parameter jej dáme cestu k súboru, kam sa má mapa vytvoriť. Ukážme si kompletný kód metódy a vzápätí si ho popíšme:

public void Uloz(string cesta)
{
    using (StreamWriter sw = new StreamWriter(cesta))
    {
        for (int j = 0; j < Vyska; j++)
        {
            // vytvoření pole z řádku
            int[] radek = new int[Sirka];
            for (int i = 0; i < Sirka; i++)
                radek[i] = policka[i, j];
            // spojení pole do řetězce pomocí separátorů
            string spojenyRadek = String.Join(",", radek);
            // zapsání řetězce
            sw.WriteLine(spojenyRadek);
        }
        sw.Flush();
    }
}

V using bloku si vytvoríme inštanciu StreamWriter nasmerovanú na príslušnú cestu. For cyklom prejdeme riadky poľa policka a každý riadok si prekopíruje do pomocného jednorozmerného poľa. Budeme používať práve cyklus for, keďže nám riadiaca premenná bude zároveň slúžiť ako index do nášho poľa policka. Tieto polia pomocou funkcie Join () prevedieme na textový reťazec, kde sú prvky z poľa oddelené čiarkou. Nie je už nič jednoduchšie, než vzniknutý riadok zapísať do súboru. Nakoniec zavoláme metódu Flush () pre vyprázdnenie bufferu a máme uložené.

Načítanie

Pridajme si metódu načíta (), tiež bude mať parameter s cestou k súboru a bude vyzerať takto:

public void Nacti(string cesta)
{
    string[] radky = File.ReadAllLines(cesta);
    for (int j = 0; j < radky.Length; j++)
    {
        // rozbití řádku podle separátoru
        string[] radek = radky[j].Split(',');
        // založení nového pole pro mapu podle délky 1. řádku
        if (j == 0)
            policka = new int[radek.Length, radky.Length];
        // naparsování hodnot v řádku
        for (int i = 0; i < radek.Length; i++)
            policka[i, j] = int.Parse(radek[i]);
    }
}

Pre pohodlnejšiu manipuláciu s riadkami si ich načítame všetky naraz. Urobíme to pomocou statickej metódy ReadAllLines () na triede File.

Jednotlivé riadky proiterujeme opäť for cyklom. Každý riadok si metódou Split () rozbijeme podľa čiarky na pole podreťazcov, obsahujúce dané hodnoty. Ak sme v prvej iterácii cyklu, tak pole policka inicializujeme. Nemohli sme to urobiť skôr, keďže ešte len tu poznáme počet políčok na riadku, teda šírku mapy. Nakoniec v každom behu cykle prevedieme rozbitý riadok postupne na čísla a dosadíme ich na príslušné miesta v poli policka. Máme hotovo.

Vykreslenie a dokončenie editora si necháme na nabudúce.

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