Grafică 2D în XNA Game Studio 2.0 / 3.0
In acest laborator, vom considera un sistem care este utilizat pentru a crea jocuri de bidimensionale, vorbesc despre retragerea doua imagini tridimensionale ale XNA, luați în considerare problemele de coordonate compositing, stabilind dimensiunile ecranului de joc și să lucreze în moduri cu ferestre pe tot ecranul.
Sistem de coordonate
Jocurile bidimensionale utilizează un sistem de coordonate bidimensional. În Fig. 2.1. puteți vedea sistemul obișnuit de coordonate și obiectul descris în acest sistem.
Fig. 2.1. Sistemul de coordonate tradițional
În acest sistem de coordonate, originea este localizată în colțul din stânga jos al sistemului - aici este punctul 0,0. Coordonatele de-a lungul axei X cresc de la stânga la dreapta, de-a lungul axei Y de jos în sus.
La dezvoltarea jocurilor pe calculator, se folosește sistemul de coordonate al ecranului. Principala diferență dintre acest sistem și cea tradițională este că originea este situată în colțul din stânga sus al ecranului. Coordonatele de-a lungul axei X cresc de la stânga la dreapta, dar axa Y se întoarce cu susul în jos - coordonatele cresc de sus în jos. În Fig. 2.2. puteți vedea acest sistem de coordonate în care este desenat același triunghi.
Fig. 2.2. Sistem de coordonate de ecran
Limitele sistemului de coordonate de ecran sunt fie limitele zonei de joc a ferestrei - în modul de funcționare a ferestrei, fie - rezoluția ecranului în modul ecran. De exemplu, dacă în modul fereastră avem o dimensiune a ferestrei egală cu 800x600 pixeli, atunci aceste numere reprezintă limitele sistemului de coordonate.
Creați un nou proiect standard de joc numit P2_1. Panoul Solution Explorer scholknem Faceți clic dreapta conținut folder și din meniul contextual, selectați Add (element existent. Fereastra implicită Windows pentru lucrul cu fișiere. Am găsit cu ajutorul unui fișier grafic și adăugați la proiect. Ca urmare, panoul Solution Explorer ar trebui să arate , după cum se arată în figura 2.4.
Fig. 2.4. Imagine adăugată la proiect
Listing 2.1. Variabile pentru lucrul cu imaginea
Metoda Begin () a obiectului spriteBatch pregătește dispozitivul grafic pentru ieșirea imaginii. Metoda Draw a aceluiași obiect ia ca parametru o variabilă de tipul Texture2D (MySprite), o variabilă de tip Vector2 (poziție) și o culoare, conform căreia nuanța nu va fi schimbată. În acest caz, aceasta este o culoare albă - aceasta înseamnă că culorile imaginii vor rămâne neschimbate. Metoda End () completează procedura de ieșire - imaginile sunt afișate.
Metoda Draw a clasei de bază nu este utilizată în acest caz pentru afișarea imaginilor. Vom lua în considerare rolul său în producția imaginilor de mai jos.
Dacă executați programul, obținem această imagine (Figura 2.5.):
Fig. 2.5. Imaginea afișată pe ecranul jocului
Luați în considerare o abordare care vă permite să simplificați abordarea imaginilor de ieșire utilizând metoda descrisă mai sus.
Dezvoltarea unei clase pentru stocarea informațiilor grafice
Creați un nou proiect standard denumit P2_2. Adăugați la proiect imaginea pe care am creat-o mai sus (P2_1.png).
Acum gândiți-vă ce ar trebui să fie clasa pentru prezentarea obiectului jocului. Acum avem nevoie de o clasă a cărei obiect poate stoca textura spritelui și informații despre poziția sa pe ecran. Dacă este necesar, această listă poate fi extinsă - cu - ambele proprietăți - și metode. Dar vom lucra la un astfel de proiect într-una din următoarele sesiuni. Să ne limităm la cele două proprietăți de mai sus.
Faceți clic pe pictograma proiectului P2_2 din panoul Soluție Explorer și selectați Adăugați (Class.) Va apărea fereastra Add New Item, în care va fi evidențiat șablonul de clasă gol (Figura 2.6.).
Fig. 2.6. Adăugați o nouă clasă la proiect
Denumiți noua clasă - lăsați-o să fie spriteClass și faceți clic pe butonul Adăugați. O nouă clasă goală va fi adăugată la proiect. Acesta este modul în care proiectul nostru se ocupă de toate acțiunile enumerate (figura 2.7.).
Fig. 2.7. Aspectul ferestrei proiectului după adăugarea unei noi clase
Modificăm codul de clasă spriteClass după cum urmează.
În al doilea rând, vom crea proprietățile clasei necesare.
În al treilea rând, construim un constructor de clase care va inițializa aceste proprietăți.
Acesta este modul în care codul de clasă se ocupă de toate modificările (a se vedea Listing 2.4.):
Deasupra am considerat rezultatul unei imagini rectangulare care a ocupat întreaga zonă a fișierului grafic. Nu am avut nevoie de setări suplimentare pentru afișarea unei astfel de imagini. În practică, nu este foarte convenabil să folosiți o mulțime de fișiere separate care stochează imagini. În plus, nu toate imaginile sunt dreptunghiuri. Aici vom avea nevoie, în primul rând - mai avansate decât Paint, instrumentul de desenare și în al doilea rând - o tehnică puțin diferită pentru afișarea imaginilor. Anterior, pentru a afișa imaginea, am nevoie de textura și coordonatele imaginii în fereastra jocului. Acum avem nevoie de coordonatele poziției imaginii de care avem nevoie în fișierul grafic.
Fig. 2.8. Crearea de imagini în Adobe Photoshop
Aici am creat trei imagini - aceste imagini în clasele următoare vor fi utile pentru crearea unei versiuni proprii a jocului clasic Pong.
Fig. 2.9. Definiți coordonatele sprite în fișierul grafic
În mod similar, știm coordonatele din colțul din dreapta jos al imaginii. În cazul nostru, acesta este (35, 97). Pentru lucrările viitoare avem nevoie de cunoașterea coordonatelor punctului superior stâng al dreptunghiului care leagă sprite, precum și de lățimea și înălțimea acestuia. În cazul nostru, lățimea este de 17 pixeli (35-18), înălțimea - 88 pixeli (97 - 9). Ca rezultat, obținem următorii parametri ai dreptunghiului în care sprite este închis:
- X: 18
- Y: 9
- Lățime: 17
- Înălțime: 88
Mai jos, avem nevoie de aceste date.
Acum încărcați imaginea în proiect și continuați să lucrați. După cum vă amintiți, am creat un șablon de componentă de joc de mai sus, care este potrivit pentru afișarea pe ecran. Acum vom termina acest șablon. În lista 2.8. puteți vedea codul modificat al componentei de joc
Listing 2.8. Codul modificat pentru componenta de joc
Luați în considerare modificările aduse componentei.
Am adăugat trei variabile - sprTexture, sprRectangle, sprPosition - pentru a stoca textura, un dreptunghi care arată coordonatele sprite în textura și poziția ieșirii sprite pe ecran.
Apoi, am modificat constructorul de clase prin adăugarea următoarelor variabile în lista parametrilor trecuți:
- ref Texture2D newTexture - transfer textur. Parametrul este trecut prin referință, adică obiectul nu primește o copie a texturii, ci doar o referință la aceasta - aceasta salvează resursele sistemului.
- Rectangle newRectangle - un dreptunghi care specifică coordonatele sprite din imagine.
- Vector2 newPosition - poziția sprite pe ecranul jocului.
În corpul constructorului, inițializăm proprietățile corespunzătoare clasei cu parametrii parcurși.
Apoi, modificăm codul pentru metoda Draw. Aici avem cea mai dificilă parte a modificării. Lucrul este că, în jocul pentru care suntem creați o componentă, avem deja toate instrumentele de ieșire a imaginilor. Prin urmare, este foarte rezonabil să folosiți un obiect existent, cum ar fi SpriteBatch, pentru al folosi pentru a afișa o imagine pe ecran. Pentru a face o dată creat de SpriteBatch accesibil tuturor componentelor jocului, există o tehnică specială. Există un astfel de lucru ca serviciile de jocuri care sunt disponibile pentru toate componentele. Mai întâi, adăugăm un obiect SpriteBatch creat în clasa Game1 în lista serviciilor de jocuri (vom examina mai jos), apoi putem extrage acest obiect în componenta jocului. Facem acest lucru - următoarea comandă creează un nou obiect sprBatch care conține o referință la obiectul original SpriteBatch, care a fost anterior adăugat la lista de resurse pentru jocuri din clasa Game1.
SpriteBatch sprBatch = (SpriteBatch) Game.Services.GetService (tipof (SpriteBatch));
sprBatch.Draw (sprTexture, sprPosition, sprRectangle, Color.White);
Deasupra ieșim sprite pe ecran apelând mai întâi metoda Begin () a obiectului SpriteBatch, apoi apelând metoda Draw (), apoi metoda End (), care termină ieșirea. Aici nu numim aceste metode. Faptul este că aceste metode vor fi numite în metoda Draw (), care numește jocul principal (obiect de tipul Game1). Au fost făcute unele modificări la codul pentru clasa Game1, pe care îl vom lua acum în considerare. În lista 2.9. puteți vedea acest cod.
Listing 2.9. Codul jocului1
Pentru început, am adăugat noi variabile, dintre care unul (ca spriteComp) servește la stocarea unui obiect spriteComp, iar cel de-al doilea (ca Texture2D) servește la stocarea texturii. Deoarece textura contine mai multe sprite, este posibil ca variabila Texture2D sa fie necesara atunci cand se creeaza mai multe obiecte, deci are sens sa creati aceasta variabila o data pentru a incarca imaginea in ea si ao folosi.
În metoda LoadContent (), în mod normal, creăm un obiect de tip SpriteBatch și, folosind serviciul Services.AddService (typeof (SpriteBatch), spriteBatch); adăugați obiectul SpriteBatch în lista serviciilor de jocuri. După această comandă, spriteBatch poate fi apelat în componentele jocului și le poate emite imaginile.
În continuare, în această metodă, încărcăm textura cu imaginile în variabila textură și sunăm metoda CreateNewObject (); Am creat această metodă noi înșine - o folosim pentru a crea un obiect gameObject.
gameObject = SpriteComp nou (această textură ref, nou dreptunghi (18,9,17,88), Vector2 nou (100,150));
La crearea obiectului, vom trece spriteComp obiectul constructorului clasei de joc (acest lucru), o trimitere la textura, obiectul Dreptunghi - act de faptul că suntem creați un nou obiect al dreptunghiului, care este inițializată cu valorile coordonatele texturii dorite în fișierul nostru spiriduș, modificarea calculată anterior. Așa cum am trecut la constructorul noului tip de obiect Vector2, care conține coordonatele sprite pentru a afișa ecranul de joc.
În metoda CreateNewObject (), am plasat o altă comandă - Components.Add (gameObject); Cu ajutorul acestuia, adăugăm un obiect nou creat la lista componentelor de joc. Aceasta este o comandă foarte importantă - mulțumită acesteia atunci când execută comanda base.Draw (gameTime); metoda de tragere a componentei noastre de joc va fi procesată și vor fi afișate imaginile pe care le afișează.
În metoda Draw () din clasa Game1, folosim următorul cod:
Comanda spriteBatch.Begin (); pregătește un dispozitiv grafic pentru ieșirea imaginilor, apoi trimite imagini - la un apel la base.Draw (gameTime), sunt procesate metodele corespunzătoare componentelor de joc moștenite de la DrawableGameComponent. Permiteți-mi să vă reamintesc că în metoda Draw () a componentei spriteComp există doar un apel la metoda Draw () a obiectului SpriteBatch, fără apeluri Begin () și End (). Ca urmare, după ce componenta afișează imaginea, ieșirea este terminată de comanda End () a obiectului spriteBatch din metoda Draw () din clasa Game1 și imaginea apare pe ecran.
Un astfel de mecanism de operare vă permite să creați mai multe componente, să le adăugați la lista componentelor jocului și nu le pasă de afișarea fiecăruia în metoda Game1 Draw (). După ce componenta este adăugată la lista componentelor de joc, afișarea reprezentării grafice este efectuată automat. Puteți spune că metoda base.Draw (gameTime); "Scanează" toate componentele înregistrate și le afișează pe ecran.
Aceasta este abordarea cea mai convenabil de utilizat atunci când se dezvoltă jocuri reale.
Acesta este modul în care ecranul jocului se ocupă de afișarea imaginii în acesta (figura 2.10).
Fig. 2.10. Ecran de jocuri după ieșirea componentelor
Aici am luat în considerare diferite abordări ale imaginilor de ieșire. Totuși, puteți observa că ieșirea imaginii care este asociată cu obiectul jocului este doar una dintre sarcinile pe care trebuie să le rezolvați atunci când dezvoltați jocul. Alte sarcini - de exemplu - mutarea unui obiect, verificarea dacă un obiect a întâmpinat alte obiecte - de asemenea, puteți rezolva folosind abordări diferite. Se poate observa că cea mai complexă abordare din punctul de vedere al implementării - dezvoltarea unei componente separate de jocuri, este în același timp cea mai convenabilă pentru realizarea diferitelor posibilități ale obiectului de joc. Mai târziu, prin îmbunătățirea funcționalității obiectelor de joc, vom folosi această abordare.
Luați în considerare rezultatul mai multor imagini din fereastra jocului. Așa cum am spus, folosind componentele jocului înregistrate moștenite de la DrawableGameComponent, ieșirea este automatizată. Cu toate acestea, aceasta nu înseamnă că nu este nevoie să utilizați metode de ieșire mai simple.
De exemplu, luați în considerare ieșirea unei imagini de fundal într-un proiect deja creat P2_3. Deasupra, am creat imagini pe care le puteți utiliza pentru a crea propria versiune a jocului Pong. În mod similar, creați o imagine care va servi ca fundal pentru joc. Ecranul de joc standard are o rezoluție de 800x600 pixeli. Creați o imagine cu această dimensiune (denumiți-o background.png), încărcați-o în proiect. Pentru a face acest lucru, adăugați o nouă variabilă la clasă
După aceasta, în metoda LoadContent (), încărcați imaginea în această variabilă cu comanda
Acum vom afișa imaginea folosind metoda Draw () a obiectului spriteBatch.
spriteBatch.Draw (backTexture, nou dreptunghi (0, 0, 800, 600), Color.White);
Puneți această comandă între Begin () și End () înainte de comanda base.Draw (gameTime);
Ca urmare, fereastra de joc va dobândi acest formular (Figura 2.11.).
Fig. 2.11. Fereastra de ieșire a jocului după adăugarea unui fundal
După cum puteți vedea, sprite-ul obiectului de joc este afișat în partea superioară a imaginii de fundal.
NOTĂ- Abordarea care necesită ordinea ieșirii imaginilor pentru a controla suprapunerea lor nu este foarte convenabilă. Cu toate acestea, XNA Framework oferă instrumente speciale pentru configurarea locației relative a obiectelor. În special, atunci când trimiteți un sprite, puteți specifica "adâncimea" pe care se află.
Întrebările dvs.
Trimiteți-le prietenilor: