XNA Programiranje Igara | Tutorijal #11 | Igra Memorije - Prvi Deo

[Uni]

Ako nemate barem osnovno znanje o C#-u ili ikakvo znanje o programiranju, preporučio bih vam da pročitate moj mali "kurs" napisan o tome koji je dostupan baš na ovom forumu potpuno besplatno. Sastoji se iz samo 13 kratkih tutorijala, koji će vam omogućiti da rešavate razne logičke probleme, a velika većina ovog kursa se takođe bazira na samim osnovama. Sve što je potrebno jeste da u polje "pretraga" unesete pojam #xna-gwid što će vam pokazati sve objavljene tutorijale, među kojima će se naći i ovaj tutorijal.

**Predlog** Kod čitajte na AXE Light temi, pošto ova opcija za kod koristi baš tamne boje, mada ću se truditi da je što manje koristim

Šta ćemo danas obraditi?
U prethodnom tutorijalu smo naučili kako da napravimo veoma jednostavnu igru u kojoj se na nasumičnim mestima pojavljuju kvadrati. Tada smo naučili kako povećavati rezultat, kako proveriti interakcije među objektima, kako generisati nasumične pozicije i dodeljivati boje objektima. Danas, umesto da koristimo MonoGame, koristićemo "čitsokrvnu" verziju C#-a sa isključivo standardnim bibliotekama, za kreiranje igre memorije. Ako ste spremni, hajde da počnemo!

Na samom početku treba kreirati projekat. Danas ćemo koristiti Windows Forms šablon, koji je namenjen za kreiranje uobičajenog aplikativnog softvera, koji ne proverava za unos svake milisekunde, što će nam danas biti od pomoći. Pokrenimo Microsoft Visual Studio, idimo na New Project, zatim odaberimo iz sekcije C#, Windows Forms Application i imenujmo projekat "Memorija". Za lokaciju odaberite vašu željenu lokaciju i pritisnite Create.

Kreiranje Elemenata
Primetićete da se projekat razlikuje od MonoGame projekta koji smo juče kreirali, pogotovo jer ima grafički korisnički interfejs. U ovakvom programiranju, svi elementi predstavljaju komponente. Komponente dodajemo iz sekcije Toolbox (levo od praznog prostora) i prevlačimo ih u prazan prostor koji deluje kao program. Svaka komponenta ime svoje jedinstvene karakteristike smeštene u tabu Properties, ispod Solution Explorer-a. Ovo mogu biti ime, veličina fonta, tip fonta, boja... U našem slučaju želimo da selektujemo formu (prozor) jednim klikom i zatim u Properties tabu pronađemo polje size. Unesimo zatim 550, 550 i pritisnimo enter.
Da bismo dobili tabelu sa poljima, otvorimo Toolbox panel i u polje "search" unesemo "TableLayoutPanel", čiju komponentu pritisnemo dva puta. Da bismo izašli iz Toolbox-a pritisnemo ponovo Toolbox ili bilo koje polje praznog prostora aplikacije. Primetićemo da je kreirana tabela 2x2 u gornjem levom uglu aplikacije. Svako polje tabele će sadržati sliku koju joj dodelimo. Pošto želimo da tabela prekrije celu igru, pritisnemo je jednom, a zatim u tabu Properties pronađemo polje Dock u koje unesemo F što će je podesiti na Fill. Takođe, pošto ne želimo da nam tabela deluje bezlično, pronađemo polje BackColor gde možemo uneti boju po izboru, za šta sam ja odabrao "Crimson". Poslednja karakteristika koju želimo da promenimo jeste CellBorderStyle koji označava stil oboda ćelije. Možete eksperimentisati sa raznim stilovima, ali ako želite da dobijete iste rezultate kao ja, unestie InsetDouble.

Sada ćemo se vratiti u pregled Forme. Videćete malu strelicu na gornjem obodu tabele, koja nam omogućava da još malo menjamo izgled forme (slika levo). Pritisnućemo strelicu, a zatim selektovati Edit Rows and Columns... što će izbaciti novi prozor. Dva puta odaberimo Add, a zatim u polju Size type svake ćelije selektujemo Percent i unesemo 25 (sve ćelije čine 100%, što je 4x25%). Sada umesto Columns, u meniju Show biramo Rows i obavljamo iste zadatke. Kada je sve gotovo, pritisnemo OK.

Potrebno je uneti slike. Tehnički ovo nisu slike već simboli fonta Wingdings, ali će u našem slučaju obaviti posao. Label je druga komponenta koju koristimo i služi za prikazivanje teksta. Da bismo "prikačili" tekst tabeli, selektujemo tabelu (jedan klik) i iz Toolbox-a pretražimo Label i dva puta ga pritisnemo. Ponov ćemo izmeniti neke karakteristike label-a. Pre svega polje AutoSize podesimo na False (želimo font fiksirane veličine), a Dock promenimo ponovo u Fill. Kako bi sav tekst bio centriran, tj. kako bi slike bile centrirane, promenimo polje TextAlign u MiddleCenter. Naredna karakteristika koju menjamo jeste font, pri polju font pritisnimo znak + i odaberimo Name i promenimo u Wingdings, polje Size promenimo u 72 i Bold promenimo u true. Primetićete da vidimo samo slovo l, što ne želimo već želimo da vidimo simbole, tako da ćemo GdiCharSet promeniti u 2. Kako bi tekst bio bele boje, polje ForeColor menjamo u White, a takođe polje Text menjamo u u (simbol romba). Pošto su sva polja osim jednog prazna, karakter ćemo kopirati i nalepiti u svaku ćeliju (ćeliju u kojoj lepimo selektujemo jednim klikom).

Logika Igre
Kada imamo spremne sve potrebne elemente, želimo da se u igri nešto dešava. U Solution Explorer-u pritisnemo desni klik na Form1.cs pa View Code. Za početak, vršimo inicijalizaciju par prekopotrebnih elemenata. To čine jedan Random, kao i lista znakova koje želimo da koristimo tokom igre. Pomoću promenljive tipa Random, nasumično ćemo kasnije generisati pozicije znakova izvučenih iz liste. Takođe da bismo znali koja slika je prva kliknuta, a koja druga, trebaće nam i dve promenljive tipa Label, samo radi skladištenja. Da biste to učinili, pratite sledeći kod pre linije public Form1() :

Random rand = new Random();

List<string> simboli = new List<string>()
{
     "u","u","h","h","l","l","r","r",
     "q","q","w","w","t","t","o","o"
};

Label prvaKliknuta, drugaKliknuta;

WTF? U listi simbola navedeni su svi znakovi po dva puta, to je zato što će se svaki javiti na dva mesta. Radi efikasnosti, ne želimo da program proverava koji simbol je isti, pa koristimo dva "različita" simbola pri dodeli.

Na red dolazi prva funkcija ovog kursa. Kao što smo već objašnjavali, metode ili funkcije su skupovi koda koji se izvršavaju pri pozivanju same metode redom. Ovo znači da ako želimo da ponovimo neki blok koda, možemo jednostavno uneti naziv bloka kome kod pripada u jednoj liniji, umesto pisanja desetina ili stotina linija više puta. Funkcije deklarišemo, kao i ulaznu tačku Console aplikacija navodeći njihov povratni tip (u ovom slučaju bez povratne vrednosti, void). Unesite sledeći kod nakon bloka public Form1() :

private void DodeliIkonePoljima()
{
       Label tekst;
       int nasumicniBroj;

       for (int i = 0; i < tableLayoutPanel1.Controls.Count; i++)
       {
           tekst = (Label)tableLayoutPanel1.Controls[i];

           nasumicniBroj = rand.Next(0, simboli.Count);
           tekst.Text = simboli[nasumicniBroj];

           simboli.RemoveAt(nasumicniBroj);
       }
}

Prvo što radimo u metodi jeste deklaracija nove tekstualne komponente, tipa Label koju zovemo tekst. Ona služi za skladištenje simbola koji želimo da dodelimo polju. Druga deklarisana promenljiva jeste nasumični borj kojoj dodeljujemo nasumičnu vrednost, a služi nam za odabir nekog od karaktera za dodeljivanje ćeliji. Pozivamo for petlju, koja počinje prvom ćelijom, a završava se poslednjom ćelijom koja pripada tabeli. U svakoj iteraciji, promenljivoj tekst dajemo trenutnu vrednost polja (početni simbol), a zatim iz liste "vadimo" nasumičan simbol putem indeksa. Dobijeni simbol vraćamo u ćeliju, tako što komponentu Text promenljive tipa Label menjamo u element liste simboli sa indeksom nsumični broj. Kako bismo bili sigurni da se nijedan simbol ne ponavlja više od dva puta, dodeljeni simbol uklanjamo iz liste, korišćenjem metode RemoveAt i navođenjem njenog indeksa. Ako pokrenete igru, videćete da se ništa nije promenilo, to je zato što se funkcije moraju pozvati naknadno u tački ulaza (public Form1()), tako da ostaje samo dodavanje ove linije koda u blok public Form1():

DodeliIkonePoljima();

Sada možete pokrenuti vašu igru, pritiskom dugmeta F5 ili pritiskom na Run. Videćete tabelarni prikaz ispunjen sa 8 različitih simbola, koji se ponavljaju na po 2 mesta.

Spojler: CEO KOD

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace Memorija
{
    public partial class Form1 : Form
    {
        Random rand = new Random();

        List<string> simboli = new List<string>()
        {
            "u","u","h","h","l","l","r","r",
            "q","q","w","w","t","t","o","o"
        };

        Label prvaKliknuta, drugaKliknuta;

        public Form1()
        {
            InitializeComponent();
            DodeliIkonePoljima();
        }

        private void DodeliIkonePoljima()
        {
            Label tekst;
            int nasumicniBroj;

            for (int i = 0; i < tableLayoutPanel1.Controls.Count; i++)
            {
                tekst = (Label)tableLayoutPanel1.Controls[i];

                nasumicniBroj = rand.Next(0, simboli.Count);
                tekst.Text = simboli[nasumicniBroj];

                simboli.RemoveAt(nasumicniBroj);
            }
        }
    }
}

Šta dalje?
U današnjem tutorijalu, objasnili smo funkcije elemenata Windows Forms-a, koje smo ukombinovali sa kolekcijama, kao i nasumičnim brojevima. Trenutno imamo prilično jednostavan i dobar korisnički interfejs, koji možete menjati po vašoj volji. U sledećem tutorijalu, dovršićemo logiku same igre i umetnuti prozor sa čestitkom nakon pronalaženja svih parova. Ako neki deo koda ili objašnjenja smatrate nejasnim, slobodno pitajte u komentaru a komuna i ja ćemo pomoći.