Introduksjon til XNA på Windows Phone 7

Windows Phone 7 er det nyeste mobiloperativsystemet fra Microsoft. I en tidligere veiledning dekket jeg plattformen, utviklingsverktøyene og lærte deg hvordan du bygger et program ved hjelp av Silverlight, en av de to tilgjengelige metodene for å lage programmer på Windows Phone 7. I denne artikkelen lærer du om den andre metoden for å lage apper på WP7, XNA.

Hva er XNA?

XNA er et utviklingsramme laget av Microsoft, som innkapsler teknologiske detaljer med lavt nivå involvert i å lage et spill, og lar deg konsentrere deg om hva som gjør spillet morsomt. XNA Framework kjører på toppen av .NET Framework, Microsofts standardutviklingsplattform, og består av et bibliotek med verktøy og kode som lar utviklere raskt lage spill for Windows, XBox 360 og Windows Phone 7.

XNA Framework har utviklet seg gjennom årene, og inkluderer nå støtte for lyd og videoavspilling, Xbox Live-multispillerfunksjoner, Xbox 360-avatarer og mer. Viktigst for dine formål, gjør det enkelt å tegne på skjermen på enheten du jobber med.

Lag ditt prosjekt

I denne opplæringen skal du bygge et enkelt program som heter Bouncing Balls. Skjermen vil begynne å bli tom. Når du berører skjermen, legges en ny ball med tilfeldig hastighet og farge til samlingen av hoppende baller. Hvis du klikker på skjermen igjen, vil en annen ball bli lagt til. Denne applikasjonen bør ta mindre enn 30 minutter å opprette.

For å starte, åpne Microsoft Visual Studio 2010 Express for Windows Phone. Når du er åpen, klikker du koblingen "Ny prosjekt ..." i venstre sidefelt. I dialogboksen som dukker opp, velg "XNA Game Studio 4" i venstre kolonne og kontroller at "Windows Phone Game (4.0)" -elementet er valgt. Deretter gi prosjektet et navn. For denne opplæringen anbefaler jeg at du ringer prosjektet ditt "BouncingBalls." Bekreft at "Opprett katalog for løsning" er merket av. Hvis du har gjort alt dette, vil dialogen din komme til å ligne min (med mindre muligheter, mest sannsynlig):

Klikk på "OK" for å opprette ditt nye prosjekt. Visual Studio lager alle nødvendige filer i den angitte katalogen din og åpner Game1.cs for deg.

Importerer nødvendige ressurser

For dette prosjektet bruker du sprites til å tegne ballene på skjermen. Som sådan må du importere et bilde inn i prosjektet for å kunne brukes som ballsprite. Last ned følgende bilde ved å høyreklikke og lagre det et sted som er praktisk. Det er en enkel hvit sirkel i 512 px diameter som jeg opprettet i Photoshop, og filen kan også bli funnet i prosjekteksempelkoden som er tilgjengelig med denne opplæringen.

I Visual Studio, finn løsningsoppdageren i høyre sidefelt. Se etter en liste element som heter BouncingBallsContent (Content) og høyreklikk på den. Fra kontekstmenyen som vises, svinger du over "Legg til" og velg "Eksisterende element ..." Bla til Ball.png-filen og legg den til i prosjektet. Din løsningsutforsker skal nå se ut som følgende:

Forstå spillflowen

Når du bruker XNA-rammen, har alle spillene du lager, samme grunnstrøm. Først er en forekomst av ditt spillobjekt konstruert. Som standard heter Visual Studio din spillfil Game1.cs og spillklassen Game1.

Når spillet ditt er laget, kalles Initialize-metoden. Initialize gir deg mulighet til å laste opp nødvendige tjenester og annet ikke-grafisk relatert innhold. Deretter kalles LoadContent-metoden. LoadContent er hvor du laster inn grafikkinnholdet du trenger for spillet ditt for å tegne seg selv. Endelig startes en uendelig sløyfe der spillets Oppdaterings- og Tegn-metoder kalles i rekkefølge til spillet ditt avsluttes.

Sett spillet til FullScreen

På Windows Phone 7 har du muligheten til å angi at spillet skal kjøre i fullskjermmodus. Dette gjemmer telefonens statusdisplay og gir deg mer plass til å jobbe med. Som sådan er det tilrådelig at de fleste spillene kjøres i fullskjermmodus.

For å aktivere full skjerm, finn spillerklassens konstruktør og plasser markøren inne i den. Du skal angi en egenskap på grafikkenhetsadministratoren som forteller at spillet ditt skal kjøre i fullskjermmodus. Endre konstruktøren slik at den ser ut som følgende:

 offentlig Game1 () graphics = new GraphicsDeviceManager (this); graphics.IsFullScreen = true; Content.RootDirectory = "Innhold"; // Rammefrekvensen er 30 fps som standard for Windows Phone. TargetElapsedTime = TimeSpan.FromTicks (333333); // Pre-autoscale innstillinger. graphics.PreferredBackBufferWidth = 480; graphics.PreferredBackBufferHeight = 800;  

Legg inn Sprite-tekstur

Den neste tingen vi trenger å gjøre er å laste balltekstur som vil bli brukt til alle ballene i spillet. Fordi vi ikke vil laste inn tekstur igjen og igjen, skal vi lagre den som et offentlig felt i vårt spill.

Det første du må gjøre er å opprette et nytt offentlig felt i Game1-klassen. På toppen av klassedisisjonen din, i nærheten av de forhåndsdefinerte feltene, legger du til en erklæring for et Texture2D-objekt slik at feltdelen din ser ut som følgende:

 GraphicsDeviceManager grafikk; SpriteBatch spriteBatch; Texture2D ballTexture; 

Nå må du faktisk få tekstur lastet. Finn din Game1-klasse LoadContent og sett inn følgende setning:

 ballTexture = Content.Load("Ball"); 

Opprette ballklassen

Din søknad skal inneholde en rekke baller som vises og beveger seg rundt på skjermen. Som sådan er det fornuftig å skape en ny klasse som inneholder informasjon om en ball. Først høyreklikk på prosjektets navn i Solution Explorer, svever over "Add" og klikk "Class ..." Navngi klassen Ball.cs.

Boldklassen må lagre følgende informasjon om ballen:

  • det inneholdende spillobjektet
  • farge
  • tekstur
  • øverste venstre plassering
  • hastighet
  • radius
  • skala mellom sprite størrelse og faktisk radius

Som sådan må vi opprette felt i Ball-klassen for hver av disse elementene. På toppen av ballklassen din, legg til følgende kode:

 Game1 spill; Farge farge; Texture2D tekstur; Vector2 topLeft; Vector2 hastighet; float radius; float skala; 

Nå må du kontrollere at hver enkelt av disse elementene blir initialisert når en ball er opprettet. Du må opprette en konstruktør som tar de riktige parameterne. Skalfeltet er avledet fra radius og teksturstørrelse, slik at det ikke behøver å bli overført til konstruktøren. Legg til følgende i ballklassen din:

 Offentlig Ball (Fargefarge, Texture2D-struktur, Vector2-senter, Vector2-hastighet, flyteradio) this.game = game; this.color = color; this.texture = tekstur; this.topLeft = ny Vector2 (center.X - radius, center.Y - radius); this.velocity = hastighet; this.radius = radius; CalculateScale ();  

Du vil legge merke til at hver av parameterne er tilordnet et forekomstfelt. Deretter kalles en ny metode kalt CalculateScale. Denne metoden beregner skalaen mellom ønsket radius og den faktiske spritstørrelsen for en bestemt forekomst av en ball. Legg til følgende i ballklassen din:

 privat tomrom CalculateScale () float width = (float) texture.Bounds.Width; this.scale = (this.radius * 2) / width;  

Det er to siste ting som må skje med hver eneste ball. En ball må kunne tegne seg og oppdatere seg selv. La oss begynne med tegning. Lag Draw-metoden i ballklassen din på følgende måte:

 offentlig ugyldig tegning (SpriteBatch-batch) batch.Begin (); batch.Traw (tekstur, topLeft, null, farge, 0f, Vector2.Zero, skala, SpriteEffects.None, 0f); batch.End ();  

Du ser i koden ovenfor at Draw-metoden er bestått en SpriteBatch-objekt. Denne SpriteBatch brukes til å tegne sprite for ballen. Du begynner å tegne med SpriteBatch ved å ringe Start og slutte å tegne med callind End. I midten bruker du Draw-metoden på SpriteBatch-objektet for å faktisk tegne ballen.

SpriteBatch.Draw-metoden tar en rekke parametre, men de viktigste er tekstur, topplengde, farge og skala:

  • tekstur er Texture2D som vil bli tegnet med denne samtalen
  • topLeft er posisjonen til sprite i grafikk enheten
  • fargen er fargen til å tynne sprite
  • skala er faktoren for å skalere sprite

Nå, la oss håndtere oppdateringer. Legg til følgende to metoder til din Ball-klasse:

 offentlig ugyldig oppdatering () BounceBall (); topLeft + = hastighet;  privat void BounceBall () Vector2 newTopLeft = topLeft + hastighet; flyte til venstre, høyre, topp, bunn; venstre = newTopLeft.X; høyre = newTopLeft.X + (radius * 2); toppen = newTopLeft.Y; bunn = newTopLeft.Y + (radius * 2); hvis (topp < 0 || bottom > game.GraphicsDevice.Viewport.Height) hastighet.Y * = -1;  hvis (venstre < 0 || right > game.GraphicsDevice.Viewport.Width) hastighet.X * = -1;  

Som du kan se, er oppdateringsmetoden ganske enkel. Den delegerer til BounceBall-metoden som håndterer oppdatering av hastigheten, og oppdaterer deretter øverst til venstre variabel ved å kombinere den med ballens hastighet. BounceBall-metoden ser litt komplisert ut, men det er egentlig ganske enkelt. Først beregner du hva den nye topp-, bunn-, høyre- og venstregrensen av ballen etter et hastighetstrinn. Deretter sjekker du for å se om disse nye grensene er utenfor det synlige området på telefonen. Hvis enten topp eller bunn ligger utenfor det synlige området, reverserer du Y-hastighetsretningen. Hvis enten høyre eller venstre vil være utenfor det synlige området, reverserer du X-hastighetsretningen. Dette er det som gjør at ballen faktisk spretter.

På dette punktet har du en komplett Ball-klasse, og vi kan begynne å legge dem til Game1-klassen.

Lagring av ballene

Du lagrer kulene for spillet ditt inne i Game1-klassen din. Åpne Game1.cs og legg til et nytt felt som følger:

 IList baller = ny liste(); 

Denne setningen oppretter og instanser en beholder for ballene som skal tegnes på skjermen.

Håndtering Trykk på hendelser og opprette baller

Den siste delen av dette programmet er å la brukerne lage baller ved å trykke på skjermen. Dette må skje i spillets oppdateringssløyfe. Finn oppdateringsmetoden for Game1-klassen din og sett inn følgende setninger i den:

 HandleTouches (); UpdateBalls (); 

Under oppdateringsmetoden lager du de to nye metodene, HandleTouches og UpdateBalls. UpdateBalls bør se ut som følgende:

 private void UpdateBalls () foreach (Ball ball i baller) ball.Update ();  

Denne metoden er enkel. Den iterates over hver ball i Game1-klassens liste over baller og kaller sin oppdateringsmetode. Hvis du husker fra tidligere, vil Ball.Update () Metode endrer bare ballens posisjon. Den neste metoden er litt mer kompleks. Din HandleTouches-metoden skal se ut som følgende:

 Private void HandleTouches () TouchCollection touches = TouchPanel.GetState (); hvis (! berører && berører.Count> 0) touching = true; Tilfeldig tilfeldig = Ny Tilfeldig (DateTime.Now.Millisecond); Farge ballColor = ny Color (random.Next (255), random.Next (255), random.Next (255)); Vector2 hastighet = ny Vector2 ((random.NextDouble ()> .5? -1: 1) * random.Next (9), (random.NextDouble ()> .5? -1: 1) * random.Next (9 )) + Vector2.UnitX + Vector2.UnitY; Vector2 center = ny Vector2 ((float) graphics.GraphicsDevice.Viewport.Width / 2, (float) graphics.GraphicsDevice.Viewport.Height / 2); float radius = 25f * (float) random.NextDouble () + 5f; balls.Add (ny ball (dette ballet ball, ballTexture, senter, hastighet, radius));  annet hvis (berører.Count == 0) berører = false;  

Ser du det rørende variabel der inne? Det lagrer om skjermen ble rørt på siste passering gjennom Update. Dette sikrer at en langvarig berøring ikke lager flere baller. Du må opprette det som et felt i Game1-klassen, så bla opp til feltene dine og legg det til som følger:

bool berører = false;

Nå, la oss gå gjennom resten av metoden. Først henter du samlingen av berøringer som for øyeblikket skjer på TouchPanel, i dette tilfellet skjermen på telefonen. Hvis det kommer berøringer og skjermen ikke ble berørt på siste pass, så initierer du en rekke variabler knyttet til den nye Ball. Variablene initialiseres ved hjelp av en forekomst av tilfeldig klassen. Du har en tilfeldig farge, tilfeldig hastighet og en tilfeldig radius. Bollen vil alltid starte sentrert på telefonens skjerm.

Tegning av ballene

Det siste du må gjøre er å fortelle ballene å tegne seg på skjermen. Sjekk Draw-metoden i Game1-klassen din til følgende:

 beskyttet overstyring ugyldig tegning (GameTime gameTime) GraphicsDevice.Clear (Color.White); foreach (Ball ball i baller) ball.Draw (spriteBatch);  base.Draw (gameTime);  

Her stiller du bare fargen på skjermen til Hvit og instruerer deretter hvert Ball-objekt å tegne seg selv på skjermen.

Etterbehandling

På dette punktet har du et fullt funksjonelt spill. Ballklassen inkapsulerer informasjon om hver ball som vil sprette rundt skjermen, og Game1-klassen håndterer inngang og styrer samlingen av Ball-objekter. Hit F5 for å bygge og kjøre løsningen på Windows Phone 7-simulatoren. Du ser en blank hvit skjerm. Trykk (eller klikk) på Windows Phone 7-simulatoren, og en ny ball vil vises. Fortsett å klikke til du er fornøyd med antall baller på skjermen. Du kan når som helst lukke simulatoren. Hvis alt fungerer som det skal, vil du ende opp med noe som følger:

Jeg håper du likte opplæringen. Dette riper bare overflaten av å skrive XNA-spill til Windows Phone 7. Hvis du er interessert i å lære mer, anbefaler jeg følgende:

  • Charles Petzolds Windows Phone 7 Book
  • XNA Game Studio 4.0 prøver for Windows Phone
  • XNA Community Forums