Share
Windows Phone 7 is het nieuwste mobiele besturingssysteem van Microsoft. In een vorige zelfstudie heb ik het platform en de ontwikkeltools besproken en heb je geleerd hoe je een toepassing kunt bouwen met Silverlight, een van de twee beschikbare methoden voor het maken van apps op Windows Phone 7. In dit artikel leer je over de tweede methode voor het maken van apps op WP7, XNA.
XNA is een door Microsoft ontwikkeld ontwikkelingsraamwerk dat technologische details van een laag niveau bevat die een rol spelen bij het maken van een game en waarmee je je kunt concentreren op wat het spel leuk maakt. Het XNA Framework wordt uitgevoerd bovenop .NET Framework, het standaard ontwikkelingsplatform van Microsoft, en bestaat uit een bibliotheek met hulpprogramma's en code waarmee ontwikkelaars snel games voor Windows, XBox 360 en Windows Phone 7 kunnen maken..
Het XNA Framework is in de loop der jaren geëvolueerd en biedt nu ondersteuning voor het afspelen van audio en video, Xbox Live-functies voor meerdere spelers, Xbox 360 avatars en meer. Het belangrijkste voor uw doeleinden is dat u gemakkelijk kunt tekenen op het scherm van het apparaat waarmee u werkt.
In deze zelfstudie gaat u een eenvoudige toepassing bouwen met de naam Bouncing Balls. Het scherm zal leeg beginnen. Wanneer je het scherm aanraakt, wordt een nieuwe bal met een willekeurige snelheid en kleur toegevoegd aan de verzameling stuiterende ballen. Als je op het scherm tikt, wordt er weer een bal toegevoegd. Het duurt minder dan 30 minuten om deze app te maken.
Open om te beginnen Microsoft Visual Studio 2010 Express voor Windows Phone. Klik na het openen op de link "Nieuw project ..." in de linkerzijbalk. In het dialoogvenster dat verschijnt, kiest u "XNA Game Studio 4" in de linkerkolom en zorgt u ervoor dat het item "Windows Phone Game (4.0)" is geselecteerd. Geef vervolgens uw project een naam. Voor deze zelfstudie raad ik aan om uw project "BouncingBalls" te bellen. Controleer of het aankruisvak 'Map maken voor oplossing' is ingeschakeld. Als je dit allemaal hebt gedaan, verschijnt je dialoogvenster vergelijkbaar met het mijne (met waarschijnlijk minder opties):
Klik op "OK" om uw nieuwe project aan te maken. Visual Studio maakt alle vereiste bestanden in uw opgegeven map en opent Game1.cs voor u.
Voor dit project gebruik je sprites om de ballen op het scherm te tekenen. Als zodanig moet u een afbeelding in het project importeren om te gebruiken als de balsprite. Download de volgende afbeelding door met de rechtermuisknop te klikken en het ergens te bewaren. Het is een eenvoudige witte cirkel met een diameter van 512px die ik heb gemaakt in Photoshop en het bestand is ook te vinden in de voorbeeldcode van het project die beschikbaar is in deze zelfstudie.
Zoek in Visual Studio de Solution Explorer in de rechterzijbalk. Zoek naar een lijstitem genaamd BouncingBallsContent (Content) en klik er met de rechtermuisknop op. In het contextmenu dat verschijnt, zweef je over "Toevoegen" en selecteer je "Bestaand item ..." Blader naar het Ball.png-bestand en voeg het toe aan je project. Uw oplossingsverkenner zou er nu als volgt uit moeten zien:
Wanneer u het XNA-framework gebruikt, hebben alle games die u maakt dezelfde basisflow. Eerst wordt een instantie van uw spelobject geconstrueerd. Visual Studio benoemt standaard uw game-bestand Game1.cs en uw gameklasse Game1.
Zodra je game is geconstrueerd, wordt de methode Initialize aangeroepen. Initialiseren geeft u de kans om de vereiste services en alle niet-grafische gerelateerde inhoud te laden. Vervolgens wordt de methode LoadContent aangeroepen. In LoadContent laad je de grafische content die je nodig hebt om zelf te tekenen. Ten slotte wordt een oneindige lus gestart waarbij de Update- en Draw-methoden van je spel opeenvolgend worden aangeroepen totdat je game wordt afgesloten.
Op Windows Phone 7 kunt u instellen dat uw spel op volledig scherm wordt uitgevoerd. Dit verbergt de statusweergave van de telefoon en geeft u meer ruimte om mee te werken. Als zodanig is het aan te raden dat de meeste spellen op volledig scherm worden uitgevoerd.
Om volledig scherm in te schakelen, zoek je de constructor van je gameklasse en plaats je de cursor erin. Je gaat een eigenschap instellen op de beheerder van je grafische apparaat die aangeeft dat je spel in de modus Volledig scherm moet worden uitgevoerd. Wijzig de constructor zodat deze er als volgt uitziet:
public Game1 () graphics = new GraphicsDeviceManager (this); graphics.IsFullScreen = true; Content.RootDirectory = "Inhoud"; // Beeldsnelheid is standaard 30 fps voor Windows Phone. TargetElapsedTime = TimeSpan.FromTicks (333333); // Pre-autoscale instellingen. graphics.PreferredBackBufferWidth = 480; graphics.PreferredBackBufferHeight = 800;
Het volgende dat we moeten doen, is de balstructuur laden die wordt gebruikt voor alle ballen in het spel. Omdat we de textuur niet steeds opnieuw willen laden, gaan we deze als een openbaar veld opslaan in onze game.
Het eerste dat u hoeft te doen is een nieuw openbaar veld maken in de klasse Game1. Voeg aan de bovenkant van uw klassendefinitie, in de buurt van de vooraf gegenereerde velden, een verklaring toe voor een Texture2D-object, zodat uw veldsectie er als volgt uitziet:
Grafische afbeeldingen GraphicsDeviceManager; SpriteBatch spriteBatch; Texture2D ballTexture;
Nu moet je de textuur daadwerkelijk laden. Vind de LoadContent van je Game1-klasse en voeg de volgende verklaring in:
ballTexture = Content.Load("Bal");
Je applicatie zal een aantal ballen bevatten die verschijnen en bewegen over het scherm. Als zodanig is het logisch om een nieuwe klasse te maken die informatie over een bal bevat. Klik eerst met de rechtermuisknop op de naam van uw project in de Solution Explorer, plaats de muisaanwijzer op 'Toevoegen' en klik op 'Klasse ...' Geef de klas de naam Ball.cs.
De ballenklasse moet de volgende informatie over de bal opslaan:
Als zodanig moeten we velden in de klasse Ball maken voor elk van deze items. Voeg de volgende code toe aan de bovenkant van uw Ball-klasse:
Game1-spel; Kleur kleur; Texture2D-textuur; Vector2 topLeft; Vector2 snelheid; zweefradius; vlotter schaal;
Nu moet je ervoor zorgen dat elk van deze items wordt geïnitialiseerd wanneer een bal wordt gemaakt. U moet een constructor maken die de juiste parameters gebruikt. Het schaalveld is afgeleid van de straal en de textuurgrootte, dus dat hoeft niet te worden doorgegeven aan de constructor. Voeg het volgende toe aan je ballklasse:
openbare bal (kleurkleur, texture2D texture, vector2 center, vector2 velocity, float radius) this.game = game; this.color = kleur; this.texture = texture; this.topLeft = new Vector2 (center.X - radius, center.Y - radius); this.velocity = velocity; this.radius = radius; CalculateScale ();
U zult merken dat elk van de parameters is toegewezen aan een exemplaarveld. Vervolgens wordt een nieuwe methode genaamd CalculateScale genoemd. Deze methode berekent de schaal tussen de gewenste radius en de werkelijke sprite-afmeting voor een bepaald exemplaar van een bal. Voeg het volgende toe aan je ballklasse:
private void CalculateScale () float width = (float) texture.Bounds.Width; this.scale = (this.radius * 2) / width;
Er zijn twee laatste items die bij elke bal moeten gebeuren. Een bal moet zichzelf kunnen tekenen en updaten. Laten we beginnen met tekenen. Maak de Draw-methode in uw klasse Ball als volgt:
public void Draw (SpriteBatch-batch) batch.Begin (); batch.Traw (texture, topLeft, null, color, 0f, Vector2.Zero, scale, SpriteEffects.None, 0f); batch.End ();
In de bovenstaande code ziet u dat de Draw-methode een SpriteBatch-object is doorgegeven. Deze SpriteBatch wordt gebruikt om de sprite voor de bal te tekenen. Je begint te tekenen met de SpriteBatch door Begin te bellen en te stoppen met tekenen door callind End. In het midden, gebruikt u de Draw-methode op het SpriteBatch-object om de bal daadwerkelijk te tekenen.
De methode SpriteBatch.Draw heeft een aantal parameters, maar de belangrijkste zijn texture, topLeft, kleur en schaal:
Laten we nu updates afhandelen. Voeg de volgende twee methoden toe aan je ballklasse:
openbare nietige update () BounceBall (); topLeft + = velocity; private void BounceBall () Vector2 newTopLeft = topLeft + velocity; zweven links, rechts, boven, onder; links = newTopLeft.X; right = newTopLeft.X + (radius * 2); top = newTopLeft.Y; bottom = newTopLeft.Y + (radius * 2); als (bovenaan < 0 || bottom > game.GraphicsDevice.Viewport.Height) velocity.Y * = -1; if (links < 0 || right > game.GraphicsDevice.Viewport.Width) velocity.X * = -1;
Zoals je kunt zien, is de Update-methode vrij eenvoudig. Het delegeert naar de BounceBall-methode die de actualisering van de velocity uitvoert en werkt het linksboven variabel door het te combineren met de snelheid van de bal. De BounceBall-methode ziet er een beetje ingewikkeld uit, maar het is echt vrij eenvoudig. Eerst bereken je wat de nieuwe hoogste, laagste, rechter en linker grenzen van de bal na een snelheidsstap zijn. Vervolgens controleert u of deze nieuwe grenzen zich buiten het zichtbare gedeelte van de telefoon bevinden. Als een van de boven- of onderkant buiten het zichtbare gebied valt, keert u de Y-richting om. Als links of rechts buiten het zichtbare gebied staan, keert u de X-snelheidsrichting om. Dit is wat de bal daadwerkelijk doet stuiteren.
Op dit punt heb je een complete Ball-klasse en kunnen we beginnen ze toe te voegen aan de Game1-klasse.
Je bewaart de ballen voor je spel in je Game1-klasse. Open Game1.cs en voeg als volgt een nieuw veld toe:
IListballen = nieuwe lijst ();
Deze instructie maakt en maakt een container voor de ballen die op het scherm wordt getekend.
Het laatste deel van deze applicatie is om gebruikers ballen te laten maken door op het scherm te tikken. Dit moet gebeuren in de updatelus van het spel. Zoek de updatemethode voor je Game1-klasse en voeg de volgende instructies erin toe:
HandleTouches (); UpdateBalls ();
Maak onder de updatemethode de twee nieuwe methoden, HandleTouches en UpdateBalls. UpdateBalls moeten er als volgt uitzien:
private void UpdateBalls () foreach (Ball ball in balls) ball.Update ();
Deze methode is eenvoudig. Het itereert over elke bal in de lijst van de klasse Game1 ballen en roept zijn Update-methode aan. Als je het eerder onthouden, de Ball.Update () methode verandert gewoon de positie van de bal. De volgende methode is iets complexer. Uw HandleTouches-methode moet er als volgt uitzien:
private void HandleTouches () TouchCollection raakt = TouchPanel.GetState () aan; if (! touching && touches.Count> 0) touching = true; Willekeurig willekeurig = nieuw Willekeurig (DateTime.Now.Millisecond); Color ballColor = new Color (random.Next (255), random.Next (255), random.Next (255)); Vector2 velocity = new Vector2 ((random.NextDouble ()> .5? -1: 1) * random.Next (9), (random.NextDouble ()> .5? -1: 1) * random.Next (9 )) + Vector2.UnitX + Vector2.UnitY; Vector2 center = nieuwe Vector2 ((float) graphics.GraphicsDevice.Viewport.Width / 2, (float) graphics.GraphicsDevice.Viewport.Height / 2); zweefradius = 25f * (zwevend) willekeurig. Volgende dubbel () + 5f; balls.Add (nieuwe Ball (this, ballColor, ballTexture, center, velocity, radius)); else if (touches.Count == 0) touching = false;
Zie je dat aandoenlijk variabele daarbinnen? Dat slaat op of het scherm werd aangeraakt bij de laatste passage via Update. Dit zorgt ervoor dat een langdurige aanraking geen meerdere ballen creëert. U moet dat als een veld in de klasse Game1 maken, dus scrol omhoog naar uw velden en voeg het als volgt toe:
bool aanraken = false;
Laten we nu de rest van de methode doornemen. Eerst haalt u de verzameling aanrakingen op die momenteel op het TouchPanel plaatsvinden, in dit geval het scherm van de telefoon. Als er aanraken voorkomen en het scherm niet werd aangeraakt bij de laatste passage, initialiseert u een verscheidenheid aan variabelen die betrekking hebben op de nieuwe bal. De variabelen worden geïnitialiseerd met behulp van een exemplaar van de klasse Random. Je hebt een willekeurige kleur, willekeurige snelheid en een willekeurige straal. De bal begint altijd gecentreerd op het scherm van de telefoon.
Het laatste dat je moet doen is de ballen vertellen om zichzelf op het scherm te tekenen. Controleer de Draw-methode in je Game1-klasse op het volgende:
beschermde override void Draw (GameTime gameTime) GraphicsDevice.Clear (Color.White); foreach (Ball ball in balls) ball.Draw (spriteBatch); base.Draw (gameTime);
Hier stel je gewoon de kleur van het scherm in op wit en geef je vervolgens elk object Ball de opdracht om zichzelf op het scherm te tekenen.
Op dit punt heb je een volledig functioneel spel. De klasse Ball kapselt informatie in over elke bal die rond het scherm kaatst en de klasse Game1 verwerkt de invoer en beheert de verzameling Ball-objecten. Druk op F5 om uw oplossing te bouwen en uit te voeren met de Windows Phone 7-simulator. Je ziet een leeg wit scherm. Tik (of klik) op de Windows Phone 7-simulator en een nieuwe bal verschijnt. Blijf klikken tot je tevreden bent met het aantal ballen op het scherm. U kunt de simulator op elk moment sluiten. Als alles goed werkt, krijg je uiteindelijk het volgende:
Ik hoop dat je de tutorial leuk vond. Dit schraapte net het oppervlak van het schrijven van XNA-games voor Windows Phone 7. Als u meer wilt weten, raad ik u het volgende aan:
Accentsconagua