miercuri, 16 mai 2012

Tutorialul 2: Încărcarea unei imagini și mișcarea lui.

Notă: Resursele pentru acest proiect veți găsi la sfârșitul postului. Veți avea nevoie de aceasta imagine pentru tutorialul acesta.

    Ok, începem tutorialul nr. 2. Deschide proiectul creat din tutorialul 1 și am promis că voi lămuri toate acele 5 metode. Pentru ca să înțelegeți mai bine cum lucrează uitați-vă la următoarea imagine:
     Prima metodă pe care o vedeți în fișierul Game1.cs este Initialize(), aceasta este folosită pentru inițializarea sau instanțierea obiectelor pe care le vom folosi în jocul nostru.
A doua metodă este LoadContent(), această metodă este folosită pentru încărcarea în memorie a tuturor imaginilor, sunetelor și altele.
A treia metodă este Update(), această metodă e cea în care voi veți sta cel mai mult timp pentru a face ca în jocul vostru să se întîmple o acțiune, adică aici se află cea mai mare parte din toată logica jocului.
A patra metodă e Draw(), aici noi îi arătăm ce să desene nouă în jocul nostru și în ce poziție să fie.
A cincea metodă e UnloadContent(), această metodă se activează atunci când noi ieșim din joc, după idee dacă voi ați încărcat totul ce vă trebuie în LoadContent(), atunci voi nu aveți nevoie de acest UnloadContent(), dar dacă să spunem ați pus în Update să încarce o imagine sau un sunet sau altceva, atunci acesta va trebui de descărcat în metoda UnloadContent().

Notă: Metodele Initialize() și LoadContent() se apelează doar la începutul Jocului, adică doar atunci când abia se pornește.

      Observați în imaginea de mai sus că Update() și Draw() se află într-un loop, acel loop nu este făcut degeaba acolo. În engleză el este numit "Game loop". Ce este un Game loop?
Un Game loop este o buclă care se repetă de 60 de ori pe secundă între metoda Draw() și Update(). Adică jocul se deseană de 60 de ori pe secundă și modifică ceva în joc, dacă ați scris ceva în metoda Update(). Acest Game loop nu poate fi închis atîta timp cât voi singur nu-l veți închide sau pînă când PC-ul vostru nu va avea BSOD. :)

     OK, v-am dat puțină teorie, acum trecem la practică. În clasa Game1 declarăm 2 variabile:

              Texture2D textura;
      Vector2 pozitie;

Texture2D este folosit pentru încărcarea imaginilor în dînsul și desenarea acesteia în joc.
Vector2 este folosit pentru poziționarea imaginii pe ecranul jocului.
Înainte ca să încărcăm imaginea în textura noastră, noi va trebui mai întâi s-o includem în proiectul nostru. Pentru aceasta facem în felul următor:

Click drept pe Proiectul care are in paranteze scris (Content) și după aceea Add>Existing Item. După aceea luăm imaginea link la care am pus la începutul postului.

Mai departe ne ducem în metoda LoadContent() și scrim următoarea:

            textura = Content.Load<Texture2D>("testpants");

Test Pants


Ok, ce se întîmplă aici? Aici noi încărcăm imaginea noastră în textura. Pentru aceasta noi am apelat metoda care se află în Content, am scris ce tip de lucru dorim să încărcăm <Texture2D> și denumirea acelui lucru "testpants". Observați că nu am scris extensia imaginii aici, de aceasta nu este nevoie din cauză că XNA automat știe tipul acelui fișier și ne ușurează viața prin aceea că doar trebuie să scrim denumirea fișierului.
     Notă: Faceți click o dată pe imaginea încărcată și observați mai joc Proprietățile acesteia. Atunci când încărcați un lucru din content, trebuie să fiți foarte atent la numele din "Asset Name", deoarece că XNA citește lucrurile din content prin intermediul acelui "Asset Name" și când încărcați, trebuie să scriți denumirea asset-ului.

Ok, acum ne ridicăm puțin mai sus la metoda Initialize() și scrim următoarea:
           
                                  pozitie = new Vector2(0, 0);

Aici noi am instanțiat variabila nostră pozitie și am scris că poziția inițială a X = 0 și Y = 0.
Ok acum noi ne ducem în metoda Draw() și scrim următoarea:

              spriteBatch.Begin();
         spriteBatch.Draw(textura, pozitie, Color.White);
         spriteBatch.End();

Ce facem noi aici și ce-i cu spriteBatch-ul ăsta, vă întrebați voi. spriteBatch este un obiect al clasei SpriteBatch, dacă mai pe scurt de lămurit, atunci spriteBatch este folosit pentru aceea ca să transmitem card-ului nostru grafic informația pe care acela trebuie s-o prelucreze și să afișeze pe ecran, adică să ne afișeze imaginea noastră, care a fost încărcată în textura noastră.
Notă: Dacă doriți o lămurire mai voluminoasă vă recomand să accesați acest link.

    După ce am scris toate acestea apăsăm F5 și vedem ce s-a primit.

 Observăm că s-e afișează imaginea în joc. Jocul nostru oricum încă nu seamănă la un joc din cauză că noi nu facem nici o acțiune aici. Pentru aceasta ne ducem în metoda Update() și scrim:

             if (Keyboard.GetState().IsKeyDown(Keys.Up))
            {
                pozitie.Y -= 4f;
            }
       if (Keyboard.GetState().IsKeyDown(Keys.Down))
            {
                pozitie.Y += 4f;
            }
       if (Keyboard.GetState().IsKeyDown(Keys.Left))
            {
                pozitie.X -= 4f;
            }
       if (Keyboard.GetState().IsKeyDown(Keys.Right))
            {
                pozitie.X += 4f;
            }

pozitie.X = MathHelper.Clamp(pozitie.X,

                                     0, 
GraphicsDevice.Viewport.Width - textura.Width);


pozitie.Y = MathHelper.Clamp(pozitie.Y,
                                     0, 
GraphicsDevice.Viewport.Height - textura.Height);
 

Aici noi am scris cod pentru modificare poziției imaginii noastre, dacă noi apăsăm pe una din tastele Sus, Jos, Stânga, Dreapta de pe tastatură, iar cu ajutorul la MathHelper.Clamp(), noi nu-i dăm voie imaginii noastre să iese înafara ecranului din joc.

OK, acum apăsăm F5 și încercăm să mișcăm imaginea noastră pe ecran.
Ura! Totul lucrează așa cum am scris în metoda Update().
Pentru a înțelege mai bine ce-i cu Keyboard și Keys recomand să accesați aceste link-uri:
LINK Keyboard
LINK Keys

Dacă ceva nu a mers la voi așa cum trebuie sau aveți erori și nu înțelegeți de ce, v-am aruncat AICI link la proiectul care l-am făcut în tutorialul acesta.

În următorul tutorial vom adăuga inamici și vom face Coliziune dintre personajul nostru și inamic.