Introducere în XNA pe Windows Phone 7

Windows Phone 7 este cel mai recent sistem de operare mobil de la Microsoft. Într-un tutorial anterior, am acoperit platforma, instrumentele de dezvoltare și am învățat cum să construiți o aplicație utilizând Silverlight, una dintre cele două metode disponibile pentru crearea de aplicații pe Windows Phone 7. În acest articol, veți afla despre a doua metodă pentru crearea de aplicații pe WP7, XNA.

Ce este XNA?

XNA este un cadru de dezvoltare creat de Microsoft, care încorporează detalii tehnologice de nivel scăzut implicate în crearea unui joc și vă permite să vă concentrați asupra a ceea ce face distracția jocului. XNA Framework rulează pe platforma .NET Framework, platforma Microsoft de dezvoltare standard și constă dintr-o bibliotecă de instrumente și cod care permite dezvoltatorilor să creeze rapid jocuri pentru Windows, XBox 360 și Windows Phone 7.

XNA Framework a evoluat de-a lungul anilor și include acum suport pentru redare audio și video, caracteristici Xbox Live multi-player, avatare Xbox 360 și multe altele. Cel mai important pentru scopurile dvs., este ușor de a desena pe ecranul dispozitivului cu care lucrați.

Creați-vă proiectul

În acest tutorial, veți construi o aplicație simplă numită Bouncing Balls. Ecranul va începe să fie necompletat. Când atingeți ecranul, o nouă minge cu o viteză aleatorie și culoare se adaugă colecției de bile viguroase. Dacă atingeți din nou pe ecran o altă minge va fi adăugată. Această aplicație ar trebui să dureze mai puțin de 30 de minute pentru a crea.

Pentru a începe, deschideți Microsoft Visual Studio 2010 Express pentru Windows Phone. După deschidere, faceți clic pe linkul "Proiect nou ..." din bara laterală din stânga. În caseta de dialog care apare, alegeți "XNA Game Studio 4" în coloana din stânga și asigurați-vă că este selectat elementul "Windows Phone Game (4.0)". Apoi, dați proiectului numele. Pentru acest tutorial, vă recomandăm să sunați la proiectul "BouncingBalls". Confirmați că caseta de selectare "Creare director pentru soluție" este selectată. Dacă ați făcut toate acestea, dialogul dvs. va apărea similar cu cel al meu (cu mai puține opțiuni, cel mai probabil):

Faceți clic pe "OK" pentru a vă crea noul proiect. Visual Studio va crea toate fișierele necesare în directorul specificat și va deschide Game1.cs pentru dvs..

Importarea resurselor necesare

Pentru acest proiect, veți folosi sprite pentru a desena bilele de pe ecran. Ca atare, trebuie să importați o imagine în proiect pentru a fi utilizată ca sprite. Descărcați următoarea imagine făcând clic dreapta și salvați-o undeva convenabilă. Este un cerc alb simplu de 512 pixeli pe care l-am creat în Photoshop, iar fișierul poate fi găsit și în proba de cod a proiectului disponibilă cu acest tutorial.

În Visual Studio, găsiți soluția Explorer în bara laterală dreaptă. Căutați un element de listă numit BouncingBallsContent (Conținut) și faceți clic dreapta pe el. Din meniul contextual care apare, treceți cu mouse-ul peste "Adăugați" și selectați "Element existent ..." Răsfoiți fișierul Ball.png și adăugați-l în proiect. Exploratorul dvs. de soluții ar trebui să pară acum:

Înțelegerea fluxului jocurilor

Când utilizați cadrul XNA, toate jocurile pe care le creați au același flux de bază. Mai întâi, este construită o instanță a obiectului dvs. de joc. În mod implicit, Visual Studio numește fișierul dvs. de joc Game1.cs și clasa de joc Game1.

Odată ce jocul este construit, se inițiază metoda Initialize. Initialize vă oferă o șansă de încărcare a serviciilor necesare și a oricărui conținut negraficat. Apoi, metoda LoadContent este apelată. LoadContent este locul unde încărcați conținutul grafic de care aveți nevoie pentru ca jocul dvs. să se deseneze. În cele din urmă, se lansează o buclă infinită unde metodele de actualizare și de desenare ale jocului sunt apelate succesiv până când jocul se oprește.

Setați jocul la FullScreen

Pe Windows Phone 7, aveți posibilitatea să setați jocul să ruleze în modul ecran complet. Aceasta ascunde afișajul de stare al telefonului și vă oferă mai mult spațiu de lucru. Ca atare, este recomandabil ca majoritatea jocurilor să fie difuzate în modul ecran complet.

Pentru a activa ecranul complet, găsiți constructorul clasei dvs. de joc și plasați cursorul în interiorul acestuia. Veți stabili o proprietate asupra managerului dvs. de dispozitive grafice, care vă permite să rulați jocul în modul ecran complet. Modificați constructorul astfel încât să pară următoarele:

 public Joc1 () graphics = new GraphicsDeviceManager (acest lucru); graphics.IsFullScreen = true; Content.RootDirectory = "Conținut"; // Rata cadrelor este de 30 fps în mod implicit pentru Windows Phone. TargetElapsedTime = TimeSpan.FromTicks (333333); // Setări pre-autoscale. graphics.PreferredBackBufferWidth = 480; graphics.PreferredBackBufferHeight = 800;  

Încărcați textura Sprite

Următorul lucru pe care trebuie să-l facem este să încărcăm textura mingii care va fi utilizată pentru toate bilele din joc. Pentru că nu vrem să încărcăm textura de nenumărate ori, noi o vom păstra ca un câmp public în jocul nostru.

Primul lucru pe care trebuie să-l faceți este să creați un nou domeniu public în clasa Game1. În partea de sus a definiției dvs. de clasă, aproape de câmpurile pregenerate, adăugați o declarație pentru un obiect Texture2D, astfel încât secțiunea câmpului să arate astfel:

 GraphicsDeviceManager; SpriteBatch spriteBatch; Texture2D ballTexture; 

Acum, trebuie să obțineți textura încărcată. Găsiți LoadContent din clasa Game1 și introduceți următoarea declarație:

 ballTexture = Content.Load("Minge"); 

Crearea clasei de mingi

Aplicația dvs. va conține un număr de bile care apar și se deplasează în jurul ecranului. Ca atare, este logic să creați o nouă clasă care să conțină informații despre o minge. Mai întâi, faceți clic pe numele proiectului în Solution Explorer, plasați cursorul pe "Adăugați" și faceți clic pe "Class ..." Denumiți clasa Ball.cs.

Clasa de bile trebuie să stocheze următoarele informații despre minge:

  • obiectul jocului care conține
  • culoare
  • textură
  • din stânga sus
  • viteză
  • rază
  • scară între dimensiunea sprite și raza reală

Ca atare, va trebui să creăm câmpuri în clasa Ball pentru fiecare dintre aceste elemente. În partea de sus a clasei dvs. Ball, adăugați următorul cod:

 Joc1; Culoare de culoare; Textura Texture2D; Vector2 topLeft; Viteza Vector2; raza raft; scară flotantă; 

Acum, trebuie să vă asigurați că fiecare dintre aceste elemente este inițializat atunci când este creată o minge. Trebuie să creați un constructor care să ia parametrii corespunzători. Câmpul scării este derivat din raza și mărimea texturii, astfel încât nu trebuie să fie transmisă constructorului. Adăugați următoarele la clasa dvs. Ball:

 minge publică (culoarea culorilor, textura Texture2D, centrul Vector2, viteza Vector2, raza flotorului) this.game = joc; this.color = culoare; this.texture = textură; this.topLeft = Vector2 nou (center.X - radius, center.Y - radius); this.velocity = viteza; thisradius = raza; CalculateScale ();  

Veți observa că fiecare dintre parametri este atribuit unui câmp instanță. Apoi se numește o nouă metodă numită CalculateScale. Această metodă calculează scala între raza dorită și dimensiunea efectivă a sprite pentru o anumită situație a unei mingi. Adăugați următoarele la clasa dvs. Ball:

 void privat CalculateScale () float width = (float) texture.Bounds.Width; this.scale = (this.radius * 2) / lățime;  

Există două ultimele elemente care trebuie să se întâmple cu fiecare minge. O minge trebuie să fie capabilă să se deseneze și să se actualizeze singură. Să începem cu desenul. Creați metoda Draw în clasa Ball după cum urmează:

 public void Draw (pachetul SpriteBatch) batch.Begin (); batch.Draw (textură, topLeft, null, culoare, 0f, Vector2.Zero, scală, SpriteEffects.None, 0f); batch.End ();  

Veți vedea în codul de mai sus că metoda Draw este trecută cu un obiect SpriteBatch. Acest SpriteBatch este folosit pentru a desena sprite pentru minge. Începeți să desenați cu SpriteBatch apelând Begin și opriți desenul apelând End. În mijloc, utilizați metoda Draw pe obiectul SpriteBatch pentru a trage mingea.

Metoda SpriteBatch.Draw are un număr de parametri, dar cele mai importante sunt textura, topLeft, culoarea și scara:

  • textura este Texture2D care va fi desenată cu acest apel
  • topLeft este poziția sprite în dispozitivul grafic
  • culoarea este culoarea pentru a tenta sprite
  • Scala este factorul prin care se scala sprite

Acum, să ne ocupăm de actualizări. Adăugați următoarele două metode la clasa dvs. Ball:

 public void Actualizare () BounceBall (); topLeft + = viteza;  void privat BounceBall () Vector2 newTopLeft = topLeft + viteza; plutiți la stânga, la dreapta, sus, jos; left = newTopLeft.X; dreapta = newTopLeft.X + (raza * 2); top = newTopLeft.Y; bottom = newTopLeft.Y + (raza * 2); dacă (partea de sus < 0 || bottom > game.GraphicsDevice.Viewport.Height) velocity.Y * = -1;  dacă (stânga < 0 || right > game.GraphicsDevice.Viewport.Width) velocity.X * = -1;  

După cum puteți vedea, metoda de actualizare este destul de simplă. Acesta delegă la metoda BounceBall care se ocupă de actualizarea vitezei și apoi actualizează stânga sus variabilă prin combinarea acesteia cu viteza mingii. Metoda BounceBall pare puțin complicată, însă este într-adevăr destul de simplă. Mai întâi, calculați ce limite de vârf, de jos, dreapta și stânga ale mingii după un pas de viteză. Apoi, verificați dacă aceste limite noi se află în afara zonei vizibile a telefonului. Dacă partea superioară sau cea inferioară se află în afara zonei vizibile, veți inversa direcția vitezei Y. Dacă fie în dreapta sau în stânga va fi în afara zonei vizibile, veți inversa direcția vitezei X. Aceasta este ceea ce face mingea sări de fapt.

În acest moment, aveți o clasă de Ball completă și putem începe să le adăugăm la clasa Game1.

Depozitarea bilelor

Veți stoca bilele pentru joc în interiorul clasei Game1. Deschideți Game1.cs și adăugați un câmp nou după cum urmează:

 IList bile = lista nouă(); 

Această instrucțiune creează și instantează un container pentru Bilele care vor fi desenate pe ecran.

Manipularea evenimentelor touch și crearea de mingi

Ultima parte a acestei aplicații este de a permite utilizatorilor să creeze bile prin atingerea ecranului. Acest lucru trebuie să se întâmple în bucla de actualizare a jocului. Găsiți metoda de actualizare pentru clasa Game1 și introduceți în ea următoarele instrucțiuni:

 HandleTouches (); UpdateBalls (); 

În cadrul metodei Actualizare, creați cele două metode noi, HandleTouches și UpdateBalls. UpdateBalls ar trebui să arate după cum urmează:

 private void UpdateBalls () foreach (minge de minge în minge) ball.Update ();  

Această metodă este simplă. Se repetă peste fiecare minge din Lista de jocuri a Game1 bile și îi solicită metoda de actualizare. Dacă vă amintiți mai devreme, Ball.Update () metoda schimbă pur și simplu poziția Ball. Următoarea metodă este puțin mai complexă. Metoda HandleTouches ar trebui să arate după cum urmează:

 private void HandleTouches () TouchCollection atinge = TouchPanel.GetState (); dacă (atingeți && touchs.Count> 0) touching = true; Aleatoriu aleatoriu = nouă aleatoare (DateTime.Now.Millisecundă); Culoare culoareColor = culoare nou (aleatoriu.Next (255), aleatoriu.Next (255), aleatoriu.Next (255)); Vector2 viteza = nou Vector2 ((random.NextDouble ()> .5? -1: 1) * random.Next (9), (random.NextDouble ()> .5? -1: 1) )) + Vector2.UnitX + Vector2.UnitY; Vector2 centru = nou Vector2 ((float) grafic.GraphicsDevice.Viewport.Width / 2, (float) graphics.GraphicsDevice.Viewport.Height / 2); float raza = 25f * (float) aleatoare.Despre dublu () + 5f; balls.Add (minge nouă (aceasta, BallColor, mingeaText, centru, viteză, rază));  altfel dacă (atinge.Count == 0) touching = false;  

Vezi asta emoționant variabilă acolo? Aceasta stochează dacă ecranul a fost atins pe ultima trecere prin Actualizare. Acest lucru asigură faptul că o atingere prelungită nu creează mai multe bile. Trebuie să creați acest câmp ca un câmp în clasa Game1, așa că defilați până la câmpurile dvs. și adăugați-l după cum urmează:

bool atinge = fals;

Acum, hai să trecem prin restul metodei. În primul rând, preluați colecția de atingeri care se întâmplă în prezent pe TouchPanel, în acest caz pe ecranul telefonului. Dacă există atingeri și ecranul nu a fost atins pe ultima trecere, inițializați o varietate de variabile referitoare la noua minge. Variabilele sunt inițializate cu ajutorul unei instanțe a clasei aleatoare. Aveți o culoare aleatorie, o viteză aleatorie și o rază aleatorie. Bara va începe întotdeauna centrat pe ecranul telefonului.

Desenarea bilelor

Ultimul lucru pe care trebuie să-l faceți este să spuneți bilelor să se deseneze pe ecran. Verificați metoda Draw în clasa Game1 la următoarele:

 protejat suprascrie void Draw (GameTime gameTime) GraphicsDevice.Clear (Color.White); foreach (minge de minge în bile) ball.Draw (spriteBatch);  base.Draw (gameTime);  

Aici, setați doar culoarea ecranului pe White și apoi instrucționând fiecare obiect Ball să se deseneze pe ecran.

Terminand

În acest moment aveți un joc complet funcțional. Clasa Ball încorporează informații despre fiecare minge care va sări în jurul ecranului, iar clasa Game1 se ocupă de introducerea și gestionarea colecției obiectelor Ball. Hit F5 pentru a construi și a rula soluția dvs. pe Windows Phone 7 simulator. Veți vedea un ecran alb alb. Atingeți (sau faceți clic pe) simulatorul Windows Phone 7 și o nouă minge va apărea. Continuați să faceți clic până când sunteți mulțumit de numărul de bile pe ecran. Puteți închide simulatorul în orice moment. Dacă totul funcționează corect, veți sfârși cu ceva de genul:

Sper că ți-a plăcut tutorialul. Acest lucru a zgâriat doar suprafața de a scrie jocuri XNA pentru Windows Phone 7. Dacă sunteți interesat să aflați mai multe, vă recomandăm următoarele:

  • Cartea Windows Phone 7 a lui Charles Petzold
  • XNA Game Studio 4.0 Probele pentru Windows Phone
  • XNA Community Forums
Cod