XNA pentru incepatori desen sprites, animații și rulează

Buna ziua dragi utilizatori ai portalului GcUp.Ru! În acest articol vă voi spune cum să atragă un sprite și să facă animație în XNA GAMESTUDIO pentru el. precum și să vă prezint mișcarea sprite în spațiul bidimensional. Toate codul de mai jos este verificat și funcționează perfect în versiunea 3.1. Dar, de asemenea, ar trebui să funcționeze în alte versiuni (3.0 și 4.0, în detrimentul 2.0 nu sunt sigur). Înainte de a explora această lecție, vă recomandăm să citiți primul meu articol. ca această lecție este o continuare a acesteia, ceea ce înseamnă că veți avea nevoie de cunoștințele pe care ai primit de la primul articol.

Deci, dacă aveți toate cele de mai sus, apoi începe!

Partea 1: Trasarea unei sprite.

În primul rând, trebuie să înțelegem ce este un sprite. Sprite - este un obiect (imagine), într-un joc 2D. Personajul tău, inamicul, lemnul obișnuit sau platformă - toate acestea este un sprite. Chiar și fundal, pe care ne-am tras in articolul precedent, va fi un fel de sprite.

Ie după cum probabil ați ghicit, iar principiul sprite desen este similar cu principiul desen fundal. Dar, în acest articol vom îmbunătăți sprite de redare și de a crea o nouă clasă.

Dar există un alt punct important pe care aș dori să abordeze în această secțiune a articolului. Pentru fiecare sprite, vom stabili poziția pe ecran. Pentru a face acest lucru, există două modalități (deși, probabil, sunt mai multe, dar numai doua sunt folosite cel mai des). Puteți specifica pur și simplu poziția colțul din stânga sus al sprite, și puteți desena un dreptunghi care acoperă complet întregul sprite și a stabilit coordonatele sale. Ie se pare că nu contează în cazul în care un dreptunghi pentru a muta follow sprite.
Fiecare mod are argumente pro și contra. Se specifică unghiul poziției sprite este mai ușor și mai practic pentru a specifica un dreptunghi. În acest articol vom vorbi despre aceste două moduri de a specifica coordonatele. Pentru a începe a face cu mai simplă metodă (sprite unghi de coordonate de referință), și apoi se trece la metode mai complexe (crearea dreptunghiului).

Crearea unei clase de a desena o sprite:

Pentru a începe, să creeze un nou proiect (cum se face acest lucru sunt descrise în detaliu în articolul meu anterior) și numesc DrawSprite.

Acum faceți clic dreapta pe numele proiectului (în Solution Explorer) și selectați Add -> Articol nou -> Class.

Să-l numim sprite.

După crearea clasei noastre este după cum urmează:

? 200 '200px': '' + (this.scrollHeight + 5) + 'px'); „> using System;
folosind System.Collections.Generic;
folosind System.Linq;
folosind System.Text;

După cum știți, acest lucru este clasa standard pentru proiectul privind limbajul de programare C #. și anume XNA aici spațiile de nume. Din moment ce nu-i amintesc pe de rost (și, probabil, nimeni nu programator nu le amintesc), le vom adăuga la „merge de-a lungul.“ De exemplu, am creat o variabilă pentru textura (un Texture2D. Dacă cineva își amintește), iar compilatorul se plânge că nu există nici un spațiu de nume (așa cum scrie numele său). A fost apoi că am făcut-o și a spus.

Deci, acum să ne amintim cum am adaugat trecutul nostru în joc.

Am creat o variabilă pentru texturile texturi încărcate ele însele în LoadContent metoda () și le-a atras în metoda Draw (). Ie pentru a crea o clasă separată, și în ea trage o sprite (sau, mai degrabă, se ocupe de sprite și ne trage în Game1), trebuie să-l creați (în noua noastră clasă) variabilă, de a crea o metodă pentru a încărca texturi (cum ar fi metoda de LoadContent () ) și de a crea o metodă pentru desen texturi (cum ar fi Draw () metoda).

Acum puteți începe să editați noua clasă. După cum știți, codul de clasă întreg este scris într-un bloc (între paranteze) clasa. Prin urmare, imediat după:

este creat variabil, proiectantul este gata. Acum vom proceda pentru a încărca imaginea. Să creeze metoda LoadContent () imediat după constructor. În parametrii săi trebuie să scrie două obiecte. Un obiect este o ContentManager de clasă (de altfel, aici, de asemenea, îi lipsește spațiul de nume, adăugați-l), iar a doua clasa String. Prima ne permite să apelați metoda de încărcare. pentru a încărca imaginea, iar a doua va permite să se stabilească calea către imaginea. Și așa, iată cum arată LoadContent metoda ().

? 200 '200px': '' + (this.scrollHeight + 5) + 'px'); „> void LoadContent publice (ContentManager de conținut, String textura)
<
spriteTexture = Content.Load(Texture);
>

După cum puteți vedea, sprite este încărcat precum și fundal. Abia acum în clasa Game1 trebuie doar să introduceți conținutul cuvânt și calea spre textura. Restul este deja scris.

Deci, acum vom trece la următoarea (și ultima) metoda - tragerea la sorți (). Singurul parametru care trebuie să fie trecut la ea, spriteBatch. Acum rămâne doar să atragă modul în care sprite știm (la fel cum am desenat fundal). Singurul lucru este că nu trebuie să apelați metode spriteBatch.Begin () și spriteBatch.End (). pentru că nu pentru a apela aceste metode pentru fiecare sprite separat, noi le vom numi o dată (clasa Game1). Și așa, aici, se pare că metoda noastră de tragerea la sorți ().

? 200 '200px': '' + (this.scrollHeight + 5) + 'px'); „>
public void Draw (SpriteBatch spriteBatch)
<
spriteBatch.Draw (spriteTexture Color.White.);
>

După cum puteți vedea, al doilea argument (după spriteTexture), nu sunt înregistrate. Acest lucru se face, deoarece coordonatele nu ne-am cerut.
Și așa, acum ne întoarcem la problema, pe care am descris la început. Acum vom folosi o metodă simplă, și specificați coordonatele colțul din stânga sus al sprite. În acest scop, imediat după linia

? 200 '200px': '' + (this.scrollHeight + 5) + 'px'); „> Texture2D publice spriteTexture;

(La începutul clasei)

Scriem «Vector2» și adăugați spațiul de nume necesar. Doar scrie numele poziției:

? 200 '200px': '' + (this.scrollHeight + 5) + 'px'); „> Vector2 publice spritePosition;

Și acum, în metoda Draw () pentru a scrie al doilea argument.

Asta e metoda de tragerea la sorți acum arata ca ().

? 200 '200px': '' + (this.scrollHeight + 5) + 'px'); „> public void Draw (SpriteBatch spriteBatch)
<
spriteBatch.Draw (spriteTexture, spritePosition, Color.White);
>

Și aici este modul în care întreaga clasă noastre:

? 200 '200px': '' + (this.scrollHeight + 5) + 'px'); „> using System;
folosind System.Collections.Generic;
folosind System.Linq;
folosind System.Text;
folosind Microsoft.Xna.Framework.Graphics;
folosind Microsoft.Xna.Framework.Content;
folosind Microsoft.Xna.Framework;

Spațiu de nume DrawSprite
<
Sprites clasa
<
Texture2D spriteTexture publice;
Vector2 spritePosition publice;

void LoadContent publice (ContentManager de conținut, String textura)
<
spriteTexture = Content.Load(Texture);
>

public void Draw (SpriteBatch spriteBatch)
<
spriteBatch.Draw (spriteTexture, spritePosition, Color.White);
>
>
>

Editarea unei clase Game1:

Așa că acum să editați clasa Game1 în funcție de clasa de Sprites.

Pentru a începe, să creeze un Sprites clasă de obiecte. Noi o numim eroul.

Acum Game1 constructor inițializa obiect:

? 200 '200px': '' + (this.scrollHeight + 5) + 'px'); „> = erou noi Sprites ();

După aceea LoadContent () metoda de încărcare a imaginii. dosar pre-conținut, creați un dosar Texturile și adăugați imaginea erou (toate descrise în primul meu articol) (l-am numit inactiv). Și astfel, în LoadContent metoda (), scrie:

Astfel, am numit metoda «LoadContent» din clasa Sprites și atribuind-l argumentele.

Ei bine, suntem pe „linia de sosire.“ Rămâne de a merge la metoda Draw () și numesc spriteBatch.Begin (). hero.Draw și spriteBatch.End (). După cum ați înțeles, hero.Draw vom fi chemat de la Sprites de clasă. și anume este necesar să se înregistreze doar un singur argument - spriteBatch (restul este înregistrat în clasa sprite). Aici este metoda Draw (clasa Game1).

? 200 '200px': '' + (this.scrollHeight + 5) + 'px'); „> suprascrie protejate void Draw (GameTime GameTime)
<
GraphicsDevice.Clear (Color.CornflowerBlue);

spriteBatch.Begin ();
hero.Draw (spriteBatch);
spriteBatch.End ();

// TODO: Adauga codul de desen aici

Acum să ruleze jocul (F5), și să vedem ce am plecat. Am primit această imagine:

Totul funcționează bine, dar trebuie să modificați codul. Din moment ce nu a specificat locația în mod explicit, compilatorul stabilit coordonatele standard pentru colțul din stânga sus al sprite. Aceste coordonate standard sunt zero. Ați putea întreba de ce sprite este extras din partea de sus? Este foarte simplu. La urma urmei, coordonatele sunt inversate în grafica pe calculator. Și dacă în coordonatei planul de matematica arată astfel:

Ceva pe ecran, așa cum am spus, coordonatele sunt inversate, adică, sistemul de coordonate are originea în colțul din stânga sus:

Aceasta înseamnă că coordonatele (0, 0) (X și Y) vor fi în colțul din stânga sus.

Acum să schimbe codul nostru, și scrie coordonatele. Fiecare diviziune a scalei coordonatei este egală cu un pixel. Ie Dacă aveți o dimensiune a ecranului de 600x600 pixeli, 300x300 este punctul de mijloc al ecranului.

Deci, să atragă un spiriduș în centrul ecranului. În primul rând, să redimensiona fereastra de joc (acest lucru este descris în detaliu în primul meu articol). Pentru a face acest lucru în constructorul clasei Game1 înscriu și:

? 200 '200px': '' + (this.scrollHeight + 5) + 'px'); „> graphics.PreferredBackBufferHeight = 600; // latimea ecranului
graphics.PreferredBackBufferWidth = 600; // Înălțimea ecranului

Tot ce putem defini acum coordonatele. Metoda Inițializare (), de tip:

? 200 '200px': '' + (this.scrollHeight + 5) + 'px'); „> hero.spritePosition = new Vector2 (300, 300);

Astfel, inițializat spritePosition obiect și atribuiți-l la valorile coordonatelor 300 din axele X și Y.

Acum să rula jocul. Am primit acest lucru:

După cum puteți vedea, sprite este tras nu chiar în centrul ecranului, dar puteți fi siguri că este tras exact colțul din stânga sus (în cazul în care acesta este transparent), în centru. Astfel, este posibil de a experimenta și de a crea un personaj exact în centrul ecranului de joc. Și astfel, cu asta, voi încheia această parte a articolului. In continuare suntem cu voi va înțelege cum să creați animația sprite.