Share
Windows Phone 7 è l'ultimo sistema operativo mobile di Microsoft. In un tutorial precedente, ho coperto la piattaforma, gli strumenti di sviluppo e ti ho insegnato come creare un'applicazione utilizzando Silverlight, uno dei due metodi disponibili per creare app su Windows Phone 7. In questo articolo, imparerai il secondo metodo per creare app su WP7, XNA.
XNA è un framework di sviluppo creato da Microsoft che racchiude dettagli tecnologici di basso livello coinvolti nella creazione di un gioco e consente di concentrarsi su ciò che rende il gioco divertente. XNA Framework è basato su .NET Framework, la piattaforma di sviluppo standard di Microsoft e consiste in una libreria di strumenti e codice che consente agli sviluppatori di creare rapidamente giochi per Windows, XBox 360 e Windows Phone 7.
Lo XNA Framework si è evoluto nel corso degli anni e ora include il supporto per la riproduzione audio e video, le funzionalità multi-player di Xbox Live, gli avatar di Xbox 360 e altro ancora. Soprattutto per i tuoi scopi, rende facile disegnare sullo schermo del dispositivo con cui stai lavorando.
In questo tutorial, costruirai una semplice applicazione chiamata Bouncing Balls. Lo schermo inizierà vuoto. Quando tocchi lo schermo, una nuova palla con una velocità e un colore casuali viene aggiunta alla raccolta di palle che rimbalzano. Se tocchi di nuovo sullo schermo, verrà aggiunta un'altra palla. Questa applicazione richiede meno di 30 minuti per la creazione.
Per iniziare, apri Microsoft Visual Studio 2010 Express per Windows Phone. Una volta aperto, fai clic sul link "Nuovo progetto ..." nella barra laterale sinistra. Nella finestra di dialogo che si apre, scegli "XNA Game Studio 4" nella colonna di sinistra e assicurati che l'elemento "Windows Phone Game (4.0)" sia selezionato. Quindi, dai un nome al tuo progetto. Per questo tutorial, ti consiglio di chiamare il tuo progetto "BouncingBalls". Verifica che la casella di controllo "Crea directory per soluzione" sia selezionata. Se hai fatto tutto questo, la tua finestra di dialogo apparirà simile alla mia (con meno opzioni, molto probabilmente):
Fai clic su "OK" per creare il tuo nuovo progetto. Visual Studio creerà tutti i file richiesti nella directory specificata e aprirà Game1.cs per te.
Per questo progetto, utilizzerai gli sprite per disegnare le palle sullo schermo. Di conseguenza, è necessario importare un'immagine nel progetto da utilizzare come sprite della palla. Scarica l'immagine seguente facendo clic con il pulsante destro del mouse e salvala in un punto conveniente. È un cerchio bianco con un diametro di 512px che ho creato in Photoshop e il file può anche essere trovato nel codice di esempio del progetto disponibile con questo tutorial.
In Visual Studio, trova Solution Explorer nella barra laterale destra. Cerca un elemento della lista chiamato BouncingBallsContent (Contenuto) e fai clic con il pulsante destro del mouse su di esso. Dal menu di scelta rapida che viene visualizzato, passa con il mouse su "Aggiungi" e seleziona "Articolo esistente ..." Passare al file Ball.png e aggiungerlo al progetto. Ora il tuo solution explorer dovrebbe essere simile al seguente:
Quando usi il framework XNA, tutti i giochi che hai creato hanno lo stesso flusso di base. Per prima cosa viene costruita un'istanza del tuo oggetto di gioco. Per impostazione predefinita, Visual Studio nomina il file di gioco Game1.cs e la tua classe di gioco Game1.
Una volta costruito il gioco, viene chiamato il metodo Initialize. Initialize ti dà la possibilità di caricare i servizi richiesti e qualsiasi contenuto non grafico. Successivamente, viene chiamato il metodo LoadContent. LoadContent è il luogo in cui si carica il contenuto grafico necessario per il proprio gioco. Infine, viene avviato un ciclo infinito in cui i metodi di aggiornamento e estrazione del gioco vengono chiamati in successione fino alla chiusura del gioco.
Su Windows Phone 7, hai la possibilità di impostare il gioco per l'esecuzione in modalità a schermo intero. Nasconde il display di stato del telefono e ti dà più spazio per lavorare. Pertanto, è consigliabile che la maggior parte dei giochi venga eseguita in modalità a schermo intero.
Per abilitare lo schermo intero, trova il costruttore della tua classe di gioco e posiziona il cursore all'interno di esso. Stai per impostare una proprietà sul tuo gestore di dispositivi grafici che indica al tuo gioco di funzionare in modalità a schermo intero. Modifica il costruttore in modo che assomigli al seguente:
public Game1 () graphics = new GraphicsDeviceManager (this); graphics.IsFullScreen = true; Content.RootDirectory = "Contenuto"; // Il frame rate è 30 fps di default per Windows Phone. TargetElapsedTime = TimeSpan.FromTicks (333333); // Impostazioni pre-autoscale. graphics.PreferredBackBufferWidth = 480; graphics.PreferredBackBufferHeight = 800;
La prossima cosa che dobbiamo fare è caricare la texture della palla che verrà usata per tutte le palle nel gioco. Poiché non vogliamo caricare la trama più e più volte, la archiviamo come campo pubblico nel nostro gioco.
La prima cosa che devi fare è creare un nuovo campo pubblico nella classe Game1. Nella parte superiore della definizione della classe, vicino ai campi pregenerati, aggiungi una dichiarazione per un oggetto Texture2D in modo che la sezione del tuo campo sia simile alla seguente:
Grafica GraphicsDeviceManager; SpriteBatch spriteBatch; Texture2D ballTexture;
Ora, è necessario ottenere effettivamente la trama caricata. Trova il LoadContent della tua classe Game1 e inserisci la seguente dichiarazione:
ballTexture = Content.Load("Palla");
La tua applicazione conterrà un numero di palline che appaiono e si muovono sullo schermo. Come tale, ha senso creare una nuova classe che contenga informazioni su una palla. Innanzitutto, fai clic con il pulsante destro del mouse sul nome del progetto in Esplora soluzioni, passa con il mouse su "Aggiungi" e fai clic su "Classe ..." Assegna un nome alla classe Ball.cs.
La classe palla ha bisogno di memorizzare le seguenti informazioni sulla palla:
Pertanto, dovremo creare campi nella classe Ball per ognuno di questi elementi. Nella parte superiore della classe Ball, aggiungi il seguente codice:
Game1 game; Colore Texture2D trama; Vector2 topLeft; Velocità vettoriale; raggio di galleggiamento; scala galleggiante;
Ora, devi assicurarti che ognuno di questi elementi venga inizializzato quando viene creata una palla. È necessario creare un costruttore che adotti i parametri appropriati. Il campo scala è derivato dal raggio e dalla dimensione della trama, quindi non è necessario che venga passato al costruttore. Aggiungi il seguente alla tua classe Ball:
public Ball (Colore colore, Trama Texture2D, Centro Vector2, Velocità Vector2, raggio float) this.game = gioco; questo colore = colore; this.texture = texture; this.topLeft = new Vector2 (center.X - raggio, center.Y - raggio); this.velocity = velocity; this.radius = raggio; CalculateScale ();
Noterai che ognuno dei parametri è assegnato a un campo di istanza. Quindi, viene chiamato un nuovo metodo chiamato CalculateScale. Questo metodo calcola la scala tra il raggio desiderato e la dimensione effettiva dello sprite per una particolare istanza di una palla. Aggiungi il seguente alla tua classe Ball:
private void CalculateScale () float width = (float) texture.Bounds.Width; this.scale = (this.radius * 2) / width;
Ci sono due ultimi elementi che devono accadere ad ogni palla. Una palla deve essere in grado di disegnarsi e aggiornarsi. Iniziamo con il disegno. Crea il metodo Draw nella tua classe Ball come segue:
public public Draw (SpriteBatch batch) batch.Begin (); batch.Draw (texture, topLeft, null, color, 0f, Vector2.Zero, scale, SpriteEffects.None, 0f); batch.End ();
Nel codice precedente vedrai che il metodo Draw viene passato a un oggetto SpriteBatch. Questo SpriteBatch è usato per disegnare lo sprite per la palla. Inizi a disegnare con SpriteBatch chiamando Begin e smetti di disegnare con callind End. Nel mezzo, si usa il metodo Draw sull'oggetto SpriteBatch per disegnare effettivamente la palla.
Il metodo SpriteBatch.Draw accetta un numero di parametri, ma i più importanti sono texture, topLeft, colore e scala:
Adesso gestiamo gli aggiornamenti. Aggiungi i seguenti due metodi alla tua classe Ball:
public void Update () BounceBall (); topLeft + = velocità; private void BounceBall () Vector2 newTopLeft = topLeft + velocity; fluttuare a sinistra, a destra, in alto, in basso; left = newTopLeft.X; destra = newTopLeft.X + (raggio * 2); top = newTopLeft.Y; bottom = newTopLeft.Y + (raggio * 2); se (in alto < 0 || bottom > game.GraphicsDevice.Viewport.Height velocity.Y * = -1; if (a sinistra < 0 || right > game.GraphicsDevice.Viewport.Width) velocity.X * = -1;
Come puoi vedere, il metodo di aggiornamento è abbastanza semplice. Delega al metodo BounceBall che gestisce l'aggiornamento della velocità, quindi aggiorna il file in alto a sinistra variabile combinandolo con la velocità della palla. Il metodo BounceBall sembra un po 'complicato, ma è davvero piuttosto semplice. In primo luogo, si calcola quali sono i nuovi limiti superiore, inferiore, destro e sinistro della palla dopo un passo di velocità. Quindi, verifichi se questi nuovi limiti si trovano al di fuori dell'area visibile del telefono. Se la parte superiore o inferiore si trovano al di fuori dell'area visibile, si inverte la direzione della velocità Y. Se a destra oa sinistra ci si trova al di fuori dell'area visibile, si inverte la direzione della velocità X. Questo è ciò che fa rimbalzare la palla.
A questo punto, hai una lezione Ball completa e possiamo iniziare ad aggiungerli alla classe Game1.
Conserverai le palle per il tuo gioco all'interno della tua classe Game1. Apri Game1.cs e aggiungi un nuovo campo come segue:
IListpalle = nuova lista ();
Questa istruzione crea e crea un'istanza di un contenitore per le palle che verrà disegnato sullo schermo.
L'ultima parte di questa applicazione è quella di consentire agli utenti di creare palle toccando lo schermo. Questo deve accadere nel ciclo di aggiornamento del gioco. Trova il metodo di aggiornamento per la tua classe Game1 e inserisci le seguenti istruzioni al suo interno:
HandleTouches (); UpdateBalls ();
Con il metodo Update, crea i due nuovi metodi, HandleTouches e UpdateBalls. UpdateBalls dovrebbe essere simile al seguente:
private void UpdateBalls () foreach (Ball ball in balls) ball.Update ();
Questo metodo è semplice. Si itera su ogni palla nella lista della classe Game1 palle e chiama il suo metodo di aggiornamento. Se ricordi di prima, il Ball.Update () il metodo cambia semplicemente la posizione della palla. Il prossimo metodo è leggermente più complesso. Il tuo metodo HandleTouches dovrebbe essere simile al seguente:
private void HandleTouches () TouchCollection tocca = TouchPanel.GetState (); se (! toccando && tocchi.Count> 0) toccando = vero; Casuale casuale = nuovo casuale (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 = new Vector2 ((float) graphics.GraphicsDevice.Viewport.Width / 2, (float) graphics.GraphicsDevice.Viewport.Height / 2); float radius = 25f * (float) random.NextDouble () + 5f; balls.Add (new Ball (this, ballColor, ballTexture, center, velocity, radius)); else if (tocca.Count == 0) toccando = falso;
Lo vedi toccante variabile lì dentro? Questo memorizza se lo schermo è stato toccato nell'ultimo passaggio attraverso l'aggiornamento. Ciò garantisce che un tocco prolungato non crei più palline. Devi crearlo come campo nella classe Game1, quindi scorri fino ai tuoi campi e aggiungilo come segue:
bool toccando = falso;
Ora passiamo al resto del metodo. Innanzitutto, si recupera la raccolta di tocchi attualmente in corso sul TouchPanel, in questo caso lo schermo del telefono. Se ci sono tocchi che si verificano e lo schermo non viene toccato nell'ultimo passaggio, si inizializza una varietà di variabili relative alla nuova sfera. Le variabili sono inizializzate con l'aiuto di un'istanza della classe Random. Hai un colore casuale, una velocità casuale e un raggio casuale. La palla inizierà sempre centrata sullo schermo del telefono.
L'ultima cosa che devi fare è dire alle palle di disegnarsi sullo schermo. Controlla il metodo Draw nella tua classe Game1 al seguente:
protected override void Draw (GameTime gameTime) GraphicsDevice.Clear (Color.White); foreach (palla in palline) ball.Draw (spriteBatch); base.Draw (gameTime);
Qui, stai semplicemente impostando il colore dello schermo su Bianco e poi istruendo ciascun oggetto Ball per disegnarsi sullo schermo.
A questo punto hai un gioco completamente funzionale. La classe Ball racchiude informazioni su ogni palla che rimbalza sullo schermo e la classe Game1 gestisce l'input e gestisce la raccolta di oggetti Ball. Premi F5 per creare ed eseguire la tua soluzione sul simulatore di Windows Phone 7. Vedrai uno schermo bianco vuoto. Toccare (o fare clic) sul simulatore di Windows Phone 7 e apparirà una nuova sfera. Continua a fare clic finché non sei soddisfatto del numero di palline sullo schermo. Puoi chiudere il simulatore in qualsiasi momento. Se tutto funziona correttamente, ti ritroverai con qualcosa di simile al seguente:
Spero ti sia piaciuto il tutorial. Questo ha appena scalfito la superficie della scrittura di giochi XNA per Windows Phone 7. Se ti interessa saperne di più, ti consiglio quanto segue:
Accentsconagua