XNA
Disegnare il testo su schermo – Grafica – XNA Tutorials
dic 31
In questo articolo analizzeremo DrawString, il metodo della classe SpriteBatch che si occupa di disegnare a schermo il testo. Vedremo velocemente come caricare e un font in memoria e successivamente smanetteremo un pò, guardando i vari risultati ottenuti.
Innanzitutto, lavorando con XNA dobbiamo sapere che il font viene rappresentato, come risorsa, tramite un file di tipo SpriteFont. Questo file conterrà la descrizione del font che utilizzeremo: parametri come la grandezza, il nome del font e così via saranno specificati qui.
Per creare un file SpriteFont, clicchiamo con il pulsante destro del mouse su Content, nell’Esplora Soluzioni, quindi su Aggiungi -> Nuovo Elemento. (in figura il procedimento)
Ci si aprirà una finestra dove dovremo selezionare il tipo di risorsa da creare e il nome da assegnare. Ovviamente sceglieremo SpriteFont e daremo come nome, per esempio, “font1″.
(click per ingrandire)
Dando l’ok sarà questo il codice che ci ritroveremo davanti per questa risorsa (ho cancellato i commenti per risparmiare spazio):
<?xml version="1.0" encoding="utf-8"?>
<XnaContent xmlns:Graphics="Microsoft.Xna.Framework.Content.Pipeline.Graphics">
<Asset Type="Graphics:FontDescription">
<FontName>Kootenay</FontName>
<Size>14</Size>
<Spacing>0</Spacing>
<UseKerning>true</UseKerning>
<Style>Regular</Style>
<CharacterRegions>
<CharacterRegion>
<Start> </Start>
<End>~</End>
</CharacterRegion>
</CharacterRegions>
</Asset>
</XnaContent>
I parametri sono veramente semplici da capire. FontName definisce il nome del font utilizzato: lo cambierò in “Arial” (senza virgolette ovviamente). Size indica la grandezza del font da utilizzare in fase di scrittura. Spacing indica invece la larghezza tra un carattere e l’altro, mentre UseKerning è un opzione che gestisce il layout del font. Style consente inoltre di decidere che tipo di stile applicare al testo scritto: grassetto, corsivo e così via.
La CharacterRegion indica l’insieme dei caratteri che è possibile riprodurre. Per ora lo lasceremo così, successivamente modificheremo questi valori per permetterci di riprodurre altri caratteri.
Ecco quindi come appare il file dopo la mia piccola modifica:
<?xml version="1.0" encoding="utf-8"?>
<XnaContent xmlns:Graphics="Microsoft.Xna.Framework.Content.Pipeline.Graphics">
<Asset Type="Graphics:FontDescription">
<FontName>Arial</FontName>
<Size>14</Size>
<Spacing>0</Spacing>
<UseKerning>true</UseKerning>
<Style>Regular</Style>
<CharacterRegions>
<CharacterRegion>
<Start> </Start>
<End>~</End>
</CharacterRegion>
</CharacterRegions>
</Asset>
</XnaContent>
Ora che la nostra risorsa è pronta, dobbiamo includerla con il codice. Creiamo una variabile di tipo SpriteFont e, successivamente, carichiamo la nostra risorsa un pò come avevamo fatto con le immagini, nel metodo LoadContent.
Quindi, prima dichiariamo
public class Game1 : Microsoft.Xna.Framework.Game
{
GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;
SpriteFont font1;
public Game1()
{
graphics = new GraphicsDeviceManager(this);
Content.RootDirectory = "Content";
}
e dopo carichiamo.
protected override void LoadContent()
{
spriteBatch = new SpriteBatch(GraphicsDevice);
font1 = Content.Load<SpriteFont>("font1");
}
A questo punto non dobbiamo fare altro che disegnare un pò di cose a schermo. Iniziamo con una scritta semplice, la classica “Ciao Mondo!” (non poteva mancare). Modificando il codice del metodo Draw con le istruzioni riportate qui,
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.Black);
spriteBatch.Begin();
spriteBatch.DrawString(font1, "Ciao Mondo!!!", new Vector2(10, 10), Color.White);
spriteBatch.End();
base.Draw(gameTime);
}
il risultato sarà semplicemente questo illustrato.
(click per ingrandire)
Proviamo qualcos’altro.
Tornando ad analizzare il metodo SpriteBatch.DrawString, vediamo un pò quali sono i parametri che diamo.
- Il primo parametro di tipo SpriteFont è il font con cui disegneremo il testo. Verdana, Arial, Times New Roman di qualsiasi grandezza, questo è il punto di riferimento per eventuali cambiamenti.
- Il secondo parametro è la stringa di testo che vogliamo portare su schermo.
- Il terzo parametro è un vettore di tipo Vector2 che si occupa di definire su schermo la posizione del testo. Nel mio caso volevo mettere il testo in posizione x = 10 ed y = 10 ed ho definito così il vettore di conseguenza.
- Il quarto parametro è il colore del testo, che possiamo cambiare a nostro piacimento. Qui di seguito qualche prova con i valori Green, Red e Lime.
Dopo queste prove con il colore vediamo l’overload del metodo da noi usato, che al posto dei classici quattro parametri ne presenta di più, precisamente 9. Grazie a questo metodo potremo ruotare il nostro testo:
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.Black);
spriteBatch.Begin();
spriteBatch.DrawString(
font1,
"testo di prova 2",
new Vector2(200, 200),
Color.White,
10,
new Vector2(
font1.MeasureString("testo di prova 2").X/2,
font1.MeasureString("testo di prova 2").Y/2
),
1.0f,
SpriteEffects.None,
1
);
spriteBatch.End();
base.Draw(gameTime);
}
I primi quattro parametri rimangono invariati: non abbiamo bisogno di descriverli un’altra volta. Ciò che cambia invece arriva dopo. Abbiamo quel “10″ che rappresenta l’angolo di rotazione che vogliamo usare. Ovviamente serve un centro di rotazione, ed a questo serve il successivo parametro, di tipo Vector2. E’ prevista anche la possibilità di gestire lo scaling del testo (il ridimensionamento) tramite un parametro di tipo Float. Infine abbiamo il tipo di effetto da dare al testo (provate voi stessi a smanettarci per vedere i risultati) ed infine la profondità del layout come ultimo parametro.
Ecco qui il risultato del codice, ed anche con il testo per ora abbiamo finito.
(click per ingrandire)
P.S: è importante sapere come regolarsi con le CharacterRegions del file XML della risorsa. Come ho detto precedentemente, questo parametro del font permette di decidere quali caratteri verranno ridisegnati. I valori che notiamo nel codice
<?xml version="1.0" encoding="utf-8"?>
<XnaContent xmlns:Graphics="Microsoft.Xna.Framework.Content.Pipeline.Graphics">
<Asset Type="Graphics:FontDescription">
<FontName>Arial</FontName>
<Size>14</Size>
<Spacing>0</Spacing>
<UseKerning>true</UseKerning>
<Style>Regular</Style>
<CharacterRegions>
<CharacterRegion>
<Start> </Start>
<End>~</End>
</CharacterRegion>
</CharacterRegions>
</Asset>
</XnaContent>
tra i tag Start ed End sono i codici ASCII di partenza e di arrivo dell’insieme dei caratteri riproducibili. In poche parole, il sistema sarà in grado di disegnare su schermo i caratteri che hanno il codice ASCII che va da 32 a 126. Volendo portare a schermo dei caratteri come “ò” oppure “à” dovremo necessariamente modificare l’intervallo, in quando non include questi caratteri. Al posto di 126, nel tag End, usate 255 e non dovreste avere ulteriori problemi.
Cheers.
Disegnare una sprite animata – Grafica – XNA Tutorials
dic 30
In questo articolo impareremo a disegnare su schermo una sprite animata tramite poche e semplici istruzioni. Innanzitutto, ecco l’immagine che ho usato io per questa prova:
Come potete notare non è niente di che: un insieme di quadrati con un semplice effetto di illuminazione, fatto in photoshop in due secondi. Ora, se volessimo partire da questa immagine per creare un animazione, come fare? Basta ragionare in termini di frame. Mi spiego meglio: provate a disegnare uno dopo l’altro, nella stessa posizione, i quadrati contenuti in quest’immagine e non uno a fianco all’altro.
Quale effetto otterreste? Eccolo.
![[gickr.com]_651a3e0d-5b3f-a354-9dbe-384d07960c7c](http://francescomalatesta.net/wp-content/uploads/2009/12/gickr.com_651a3e0d-5b3f-a354-9dbe-384d07960c7c.gif "[gickr.com]_651a3e0d-5b3f-a354-9dbe-384d07960c7c"){kind=small}
Spero di essere stato chiaro, più di tanto non potevo 
Prenderemo la nostra immagine di esempio e disegneremo su schermo una parte per volta e non tutta insieme, in modo tale da dare l’idea dell’animazione. Come si fa? Ecco il codice, che piano piano spiegherò nel dettaglio (per quanto sia veramente facile).
Nota: nella stessa cartella dell’eseguibile ho posizionato il file “immagine.png”, in quanto ho caricato la texture direttamente da file.
using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Media;
using Microsoft.Xna.Framework.Net;
using Microsoft.Xna.Framework.Storage;
namespace GiocoDiProva
{
public class Game1 : Microsoft.Xna.Framework.Game
{
GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;
Texture2D immagine;
int number_of_frames = 10;
int current_frame = 0;
public Game1()
{
graphics = new GraphicsDeviceManager(this);
Content.RootDirectory = "Content";
}
protected override void Initialize()
{
base.Initialize();
}
protected override void LoadContent()
{
spriteBatch = new SpriteBatch(GraphicsDevice);
immagine = Texture2D.FromFile(this.GraphicsDevice, "immagine.png");
}
protected override void UnloadContent()
{
}
protected override void Update(GameTime gameTime)
{
if (current_frame < number_of_frames)
{
current_frame++;
}
else
{
current_frame = 0;
}
base.Update(gameTime);
}
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.Black);
spriteBatch.Begin();
spriteBatch.Draw(immagine, new Rectangle(200, 200, 40, 40), new Rectangle(current_frame * 40, 0, 40,40), Color.White);
spriteBatch.End();
base.Draw(gameTime);
}
}
}
Partiamo dalle dichiarazioni delle variabili:
GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;
Texture2D immagine;
int number_of_frames = 10;
int current_frame = 0;
La Texture2D immagine è la nostra texture che verrà “sezionata” per poi essere disegnata. “number_of_frames” è invece il numero dei frames totali di cui si compone la nostra animazione. “current_frame” è invece un intero che assumerà il numero del frame attuale per sapere in ogni istante quale parte dell’immagine deve essere riprodotta.
Il metodo Update spiega meglio l’utilizzo di queste due variabili (il metodo LoadContent l’ho saltato perchè mi pare ovvio ormai a cosa serve 
):
protected override void Update(GameTime gameTime)
{
if (current_frame < number_of_frames)
{
current_frame++;
}
else
{
current_frame = 0;
}
base.Update(gameTime);
}
In questo metodo controlliamo se il frame attuale che stiamo considerando è minore del conteggio totale dei frames. Se ciò avviene, allora andremo avanti di frame passando al successivo, tramite un semplice incremento. Altrimenti, se il controllo restituisce falso, vuol dire che abbiamo raggiunto la fine dell’animazione e dobbiamo riniziare da capo. A questo proposito aggiungiamo il “current_frame = 0″.
Ora che abbiamo deciso quale frame disegnare, dobbiamo utilizzare quest’informazione nel metodo Draw. Ecco il codice:
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.Black);
spriteBatch.Begin();
spriteBatch.Draw(immagine, new Rectangle(200, 200, 40, 40), new Rectangle(current_frame * 40, 0, 40,40), Color.White);
spriteBatch.End();
base.Draw(gameTime);
}
Stavolta basta una sola istruzione. Precisamente, il metodo Draw che prende quattro parametri in input:
- la texture da disegnare.
- il rettangolo di “destinazione”, ovvero il nostro frame con le coordinate di disegno e la grandezza del frame desiderato. In quest’esempio, ho disegnato la sprite alle coordinate 200,200, con una grandezza del frame di 40×40 (che è appunto la dimensione di ogni quadrato incluso il contorno).
- il rettangolo “sorgente”, ovvero quel rettangolo che racchiude tutta l’immagine (per intenderci, la prima da me esposta all’inizio dell’articolo.
- il colore da usare per la modulazione del canale (come al solito ho usato il bianco).
Come per ogni test, premete F5 e guardate il risultato 
Ridimensionare una Sprite – Grafica – XNA Tutorials
dic 29
Ridimensionare una sprite, al pari della rotazione, è un’operazione molto semplice, nonostante sia molto comune in tantissimi giochi. Comunque sia, chiacchiere a parte, in questo articolo affronteremo due metodi di ridimensionamento: prima quello “fisso”, ovvero il disegno della texture ridimensionata, e successivamente quello “variabile” tramite input da tastiera.
- Ridimensionamento “fisso”
Il nocciolo della questione, come potete immaginare, si trova nel metodo Draw, che come abbiamo detto prima è il punto in cui i contenuti vengono disegnati su schermo. A fare la parte importante, nel nostro caso, è il rettangolo che noi diamo come parametro nel metodo Draw dello SpriteBatch da noi utilizzato. Nello specifico, di questo rettangolo modificheremo larghezza ed altezza.
Ecco il metodo Draw:
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
spriteBatch.Begin();
spriteBatch.Draw(immagine, new Rectangle(10, 10, immagine.Width * 2, immagine.Height * 2), Color.White);
spriteBatch.End();
base.Draw(gameTime);
}
Stavolta ho semplicemente dato come dimensione del rettangolo una larghezza pari al doppio della rispettiva nell’immagine e un’altezza calcolata in egual modo. Il risultato? Eccolo.
(Click per ingrandire)
Adesso passiamo all’ingrandimento dato dall’input dell’utente. Anche questo è molto semplice da gestire: tuttavia, richiederà qualche variabile in più in quanto abbiamo dei problemi a livello di tipo di variabili.
Mi spiego meglio: come potete vedere dall’intellisense, la proprietà Width e Height di una texture sono di tipo Int. Questo vuol dire che, per ottenere un’ingrandimento di, toh, una volta e mezzo (x1.5) avremo dei problemi rimanendo ad usare gli interi. Per cui, ecco cosa faremo.
- Creiamo una variabile di tipo float, chiamata moltiplicatore. Qui memorizzeremo il valore da usare per la moltiplicazione nel ridimensionamento.
- Modifichiamo il metodo Update in modo da gestire l’input da tastiera.
- Modifichiamo il metodo Draw in modo da disegnare bene la nostra immagine.
Ecco la nostra variabile:
public class Game1 : Microsoft.Xna.Framework.Game
{
GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;
Texture2D immagine;
float moltiplicatore = 1.0f;
In fase di disegno moltiplicheremo le dimensioni dell’immagine per questo valore. Ponendo come valore iniziale 1.0, inizialmente la nostra immagine verrà disegnata nella sua grandezza naturale.
Ora gestiamo l’input da parte dell’utente: stavolta i tasti che useremo saranno il “+” per ingrandire ed il “-” per rimpicciolire. Il metodo Update verrà riscritto così:
protected override void Update(GameTime gameTime)
{
if (Keyboard.GetState().IsKeyDown(Keys.Add))
{
if (moltiplicatore < 2.0f)
{
moltiplicatore += 0.05f;
}
}
if (Keyboard.GetState().IsKeyDown(Keys.Subtract))
{
if (moltiplicatore > 0.5f)
{
moltiplicatore -= 0.05f;
}
}
base.Update(gameTime);
}
Per evitare problemi nel mostrare l’immagine (dimensioni negative e così via) ho limitato il ridimensionamento in modo tale che vada da un minimo di 0.5 (la metà della grandezza originale) a 2.0 (il doppio ). I valori “Keys.Add” e “Keys.Subtract” sono i corrispettivi del “+” e del “-”.
(nel caso togliate i limiti del ridimensionamento, andando in negativo si ottiene l’immagine capovolta, quando la variabile moltiplicatore è diversa da zero)
Infine ecco il metodo Draw riscritto:
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
spriteBatch.Begin();
spriteBatch.Draw(immagine, new Rectangle(10, 10, (int)(immagine.Width * moltiplicatore), (int)(immagine.Height * moltiplicatore)), Color.White);
spriteBatch.End();
base.Draw(gameTime);
}
Ogni dimensione viene moltiplicata per il moltiplicatore (gioco di parole non voluto) e successivamente visto come int tramite l’aggiunta di “(int)” dietro l’espressione da usare. Potete provare voi stessi il tutto senza ulteriori spiegazioni 
Ruotare una Sprite – Grafica – XNA Tutorials
dic 29
Dunque, ora vediamo un pò, dopo aver imparato a disegnare una sprite su schermo, come ruotarla e disegnare quindi questo effetto. Questo articolo sarà suddiviso in due parti: nella prima osserveremo da vicino il metodo che utilizzeremo. Successivamente, creeremo un metodo che richiamato ad ogni frame darà l’effetto di movimento nella rotazione.
- Il Metodo
Ecco qui il metodo da noi utilizzato: lo riporto qui di seguito e successivamente spiegherò ogni parametro. Per provare l’esempio vi basterà copiare il codice qui di seguito (adattandolo con i nomi degli oggetti che voi avete deciso) sull’esempio dell’articolo precedente, senza cambiare altro.
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
spriteBatch.Begin();
spriteBatch.Draw(
immagine,
new Rectangle(400,200,immagine.Width,immagine.Height),
null,
Color.White,
40,
new Vector2(immagine.Width/2,immagine.Height/2),
SpriteEffects.None,
0
);
spriteBatch.End();
base.Draw(gameTime);
}
Il primo parametro, la Texture2D immagine, è semplicemente la texture che abbiamo caricato precedentemente in memoria e che vogliamo utilizzare.
Il secondo parametro, invece, è un oggetto Rectangle nel quale specifico la posizione nella quale voglio disegnare la texture e le dimensioni di questa.
Il terzo parametro, che dovrebbe rappresentare un’altro rettangolo, è stavolta definito come null. Potrebbe non significare niente, ma questo metodo Draw consente di disegnare anche delle parti di texture. Più avanti magari vedremo come funziona meglio questo discorso.
Il quarto parametro è il classico colore visto anche precedentemente. Ho specificato il White come nell’esempio precedente.
Il quinto parametro è invece proprio ciò che serve a noi: l’angolo della rotazione che vogliamo ottenere. Stavolta ho messo quaranta come primo valore che mi è venuto in mente, per fare l’esempio.
Il sesto parametro è un vettore che serve a definire quale sarà il centro della rotazione. E’ importantissimo e, dato che noi vogliamo far ruotare l’oggetto intorno a se stesso, il punto che prenderemo in considerazione sarà il centro preciso, ovvero la metà della lunghezza e la metà dell’altezza.
Gli altri due parametri finali per ora non ci interessano molto, lasciamoli così.
Et voilà, ecco il risultato:
(Click per Ingrandire)
La nostra sprite è stata ruotata e il risultato è visibile su schermo.
- Il Movimento
Wow, ad essere ruotata la nostra immagine è effettivamente ruotata. Ma se vogliamo farla muovere? L’effetto di rotazione può avvenire in tanti modi. Vi farò vedere due possibili casi: in base ad un fattore fisso (ad ogni frame ruoteremo di un tot la nostra immagine) oppure in base all’input dell’utente.
Vediamo come ruotare l’immagine in base ad un fattore fisso. Per rendere le cose semplici, ho dichiarato una variabile che rappresenterà l’angolo di rotazione.
public class Game1 : Microsoft.Xna.Framework.Game
{
GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;
Texture2D immagine;
//ecco la nostra variabile, impostata inizialmente a zero.
float rot = 0f;
Una volta creata questa variabile, la andiamo ad inserire nel contesto. Per prima cosa dobbiamo contare che la rotazione può avvenire (dato che parliamo in gradi) da 0° a 360°. Per questo ho deciso di scrivere in questo modo il metodo Update:
protected override void Update(GameTime gameTime)
{
if (rot != 360) rot += 0.1f; else rot = 0f;
base.Update(gameTime);
}
L’operazione è veramente semplice da capire: ad ogni frame aggiungo 0.1 al al valore della rotazione. Appena verrà raggiunto il valore 360, la variabile verrà reimpostata a zero, in modo tale che il ciclo rinizi nuovamente. A questo punto basterà modificare il parametro in input nel metodo Draw:
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
spriteBatch.Begin();
spriteBatch.Draw(
immagine,
new Rectangle(400,200,immagine.Width,immagine.Height),
null,
Color.White,
rot,
new Vector2(immagine.Width/2,immagine.Height/2),
SpriteEffects.None,
0
);
spriteBatch.End();
base.Draw(gameTime);
}
Testiamo tutto premendo F5. Vi renderete conto da soli del risultato. Potete inoltre modificare il centro di rotazione per vedere le differenze: provate per esempio a togliere il “diviso due” dai valori dati in input, e vedrete l’immagine ruotare intorno al punto in basso a destra
Adesso invece scopriremo come ruotare un’immagine in base all’input dell’utente. Qui inserirò solo delle istruzioni basilari e facili da capire, in modo tale da non complicare le cose. Il nostro obiettivo è il seguente: alla pressione della freccia destra sulla tastiera, la nostra immagine ruoterà.
Lasciamo immutato il metodo Draw, concentriamoci solamente sull’Update. Come potrete facilmente intuire, quello che faremo sarà veramente semplice: aumenteremo il valore della variabile rot solo quando il tasto sarà premuto. Per fare questo cambieremo il metodo Update in:
protected override void Update(GameTime gameTime)
{
if (Keyboard.GetState().IsKeyDown(Keys.Right))
{
if (rot != 360) rot += 0.1f; else rot = 0f;
}
base.Update(gameTime);
}
In questo caso ho semplicemente controllato, con istruzioni tra l’altro comprensibili (IsKeyDown(Keys.Right), per esempio) la pressione del tasto da noi desiderato.
Provate il risultato, alla prossima!
Disegnare una Sprite su schermo – Grafica – XNA Tutorials
dic 28
In questo articolo scopriremo come si può disegnare su schermo una sprite con XNA. Come prima cosa avviamo l’ambiente di sviluppo e creiamo un nuovo progetto (Come si fa?). Ora, quello che noi dobbiamo fare essenzialmente è innanzitutto caricare in memoria la nostra sprite. Successivamente, andare a modificare il codice del metodo Draw per poter disegnare sullo schermo quello che vogliamo.
Ecco l’immagine che disegneremo su schermo:
Autostima alle stelle, eh?
- Importiamo l’immagine nel progetto.
Come prima cosa, dobbiamo importare la nostra immagine in modo tale da essere riconosciuta. Le possibilità, in questo caso, sono due:
- Importare l’immagine con il ContentManager;
- Caricare l’immagine direttamente da file;
Ovviamente, spiegherò sia un metodo che l’altro.
Per caricare un’immagine con il ContentManager, importiamo il file cliccando con il pulsante destro su Content, nella scheda Esplora Soluzioni, selezionando quindi Aggiungi -> Elemento Esistente.
La voce Content evidenziata nella scheda Esplora Soluzioni.
Si aprirà una classica finestra di apertura file: selezioniamo il file da importare e confermiamo. Ora ecco come appare la voce Content:
Attenzione: quando importerete l’immagine (se usate la mia immagine di esempio) il nome non è lo stesso. Ho modificato il nome direttamente da Esplora Soluzioni per rendere l’uso del file più agevole.
Bene, adesso dobbiamo aggiungere il codice: innanzitutto facciamo le prime modifiche subito dopo la dichiarazione dell’oggetto SpriteBatch.
public class Game1 : Microsoft.Xna.Framework.Game
{
GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;
// Ecco la nostra texture.
Texture2D immagine;
public Game1()
{
graphics = new GraphicsDeviceManager(this);
Content.RootDirectory = "Content";
}
Come potete vedere, ho dichiarato un nuovo oggetto di tipo Texture2D: rappresenta esattamente la nostra immagine. Ora dobbiamo dire a quest’oggetto di prendere come immagine di riferimento la nostra. Il codice da utilizzare, posto nel metodo LoadContent, è il seguente:
protected override void LoadContent()
{
spriteBatch = new SpriteBatch(GraphicsDevice);
immagine = Content.Load<Texture2D>("texture");
}
In parole povere abbiamo usato il metodo Load del ContentManager (con tipo Texture2D) e abbiamo passato come parametro una stringa contenente il nome del file importato senza estensione.
Con questa istruzione abbiamo completato questo tipo di caricamento. Spesso, tuttavia, per alcune scelte è possibile evitare tutto questo procedimento, caricando la nostra Texture in modo differente. Nello specifico, il metodo che sto per illustrare permette di caricare la texture specificando il percorso della nostra immagine.
Supponiamo che nella cartella dell’eseguibile del gioco ci sia un’altra cartella, che chiameremo Graphics. In questa cartella vi sarà la nostra immagine. Ecco un’immagine per farvi capire meglio.
(Click per Ingrandire)
Stavolta, per caricare la nostra texture, ecco cosa dovremo fare:
Senza aggiungere con il ContentManager il nostro file, basterà cambiare il metodo LoadContent come riportato qui di seguito:
protected override void LoadContent()
{
spriteBatch = new SpriteBatch(GraphicsDevice);
immagine = Texture2D.FromFile(GraphicsDevice, "Graphics/texture.jpg");
}
Stavolta abbiamo utilizzato il metodo FromFile della classe Texture2D. Come parametri del metodo passiamo l’oggetto GraphicDevice e una stringa che contiene il percorso del file. Nulla di più, e anche in questo modo la nostra texture è pronta per essere utilizzata!
- Disegnamo la Sprite su schermo
La fase di disegno è ancora più semplice.
Come prima cosa passiamo dal metodo LoadContent al metodo Draw: basterà aggiungere queste tre righe di codice per disegnare la nostra Sprite.
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
spriteBatch.Begin();
spriteBatch.Draw(immagine, new Vector2(0, 0), Color.White);
spriteBatch.End();
// TODO: Add your drawing code here
base.Draw(gameTime);
}
Per prima cosa abbiamo avviato lo SpriteBatch, l’oggetto che si occupa delle operazioni di disegno. Ricordatevi, il metodo Begin() deve essere sempre chiamato prima di qualsiasi disegno, altrimenti vi verrà restituito un errore.
Successivamente chiamiamo il metodo Draw, al quale passiamo i seguenti parametri:
- nome dell’oggetto Texture2D da disegnare,
- la posizione dell’oggetto sullo schermo,
- il colore da usare per il channel modulation (vi basti sapere per ora che usare Color.White è più che sufficiente, in seguito vedremo cosa succede variando questo valore)
Infine richiamiamo il metodo End() dello SpriteBatch. Ed ecco il risultato sullo schermo:
(Click per Ingrandire)
Come vedete, basta veramente poco a disegnare qualcosa su schermo. Nei prossimi articoli vedremo un pò come realizzare animazioni, ruotare queste texture ed ingrandirle o rimpicciolirle.
Bye
Mercury Particle Engine – XNA
dic 27
Arieccomi qua, a scrivere dopo poche ore dal post precedente. Volevo segnalarvi velocemente un sistema particellare per XNA decisamente utile e comodo, il Mercury Particle Engine. Reperibile su http://mpe.codeplex.com/, è sicuramente degno di nota in quanto presenta un sistema comodo da implementare e un editor semplicissimo da usare ma allo stesso tempo potentissimo.
Ecco alcuni screenshot di cose realizzate in meno di due minuti:
Dateci un’occhiata
E Questo Codice? – Inizio e Preparazione – XNA Tutorials
dic 27
Proprio adesso stavo scrivendo il primo articolo della sezione Grafica e stavo pensando: “cavolo, non ho scritto niente di generale riguardo alla struttura del codice?”. Certo, su internet si trovano tonnellate di documentazioni a riguardo, e sullo stesso progetto generato automaticamente troviamo un sacco di commenti utili, se si mastica un pò d’inglese.
Ma vogliamo fare le cose per bene (e io vorrei anche iniziare ad usare sto plugin wordpress per il codice XD) per cui ecco cosa ci ritroviamo davanti all’avvio, nella scheda “Esplora Soluzione”:
Si, il gioco si chiama “GiocoDiProva”. Non saltatemi addosso per l’eccessiva originalità.
Comunque sia, prima di tutto apriamo il file “Program.cs”:
using System;
namespace GiocoDiProva
{
static class Program
{
/// <summary>
/// The main entry point for the application.
/// </summary>
static void Main(string[] args)
{
using (Game1 game = new Game1())
{
game.Run();
}
}
}
}
Questo che vedete è il punto d’ingresso del programma: essendo totalmente ad oggetti il nostro approccio, creiamo un oggetto di tipo Game1 (che rappresenta il nostro gioco) e lo avviamo con il metodo Run(). Niente di più semplice, ma considerate che questo file almeno adesso non lo toccheremo minimamente.
Le cose cambiano per il file Game1.cs, che contiene la definizione della nostra classe principale:
using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Media;
using Microsoft.Xna.Framework.Net;
using Microsoft.Xna.Framework.Storage;
namespace GiocoDiProva
{
/// <summary>
/// This is the main type for your game
/// </summary>
public class Game1 : Microsoft.Xna.Framework.Game
{
GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;
public Game1()
{
graphics = new GraphicsDeviceManager(this);
Content.RootDirectory = "Content";
}
/// <summary>
/// Allows the game to perform any initialization it needs to before starting to run.
/// This is where it can query for any required services and load any non-graphic
/// related content. Calling base.Initialize will enumerate through any components
/// and initialize them as well.
/// </summary>
protected override void Initialize()
{
// TODO: Add your initialization logic here
base.Initialize();
}
/// <summary>
/// LoadContent will be called once per game and is the place to load
/// all of your content.
/// </summary>
protected override void LoadContent()
{
// Create a new SpriteBatch, which can be used to draw textures.
spriteBatch = new SpriteBatch(GraphicsDevice);
// TODO: use this.Content to load your game content here
}
/// <summary>
/// UnloadContent will be called once per game and is the place to unload
/// all content.
/// </summary>
protected override void UnloadContent()
{
// TODO: Unload any non ContentManager content here
}
/// <summary>
/// Allows the game to run logic such as updating the world,
/// checking for collisions, gathering input, and playing audio.
/// </summary>
/// <param name="gameTime">Provides a snapshot of timing values.</param>
protected override void Update(GameTime gameTime)
{
// Allows the game to exit
if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
this.Exit();
// TODO: Add your update logic here
base.Update(gameTime);
}
/// <summary>
/// This is called when the game should draw itself.
/// </summary>
/// <param name="gameTime">Provides a snapshot of timing values.</param>
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
// TODO: Add your drawing code here
base.Draw(gameTime);
}
}
}
Non andate in stallo subito, in realtà le cose sono molto semplici! Come prima cosa, dovete comprendere che l’evolversi del nostro gioco, concettualmente, si può riassumere in due “parti”, escludendo il momento in cui carichiamo le risorse.
Per prima cosa, la logica del gioco deve essere aggiornata. Per logica del gioco si intende tutto quell’insieme di variabili ed in generale operazioni da fare che possono tradursi, in parole povere, al capire se un pulsante sulla tastiera è premuto (facendo per esempio muovere il nostro alter-ego virtuale), oppure eseguire dei calcoli (per una battaglia nel nostro gioco di ruolo) e così via.
Dopo la fase di aggiornamento della logica, che chiameremo Update, tutto questo groviglio di dati deve essere disegnato a schermo per rendere il tutto percepibile dal giocatore. Tutto l’insieme delle operazioni legate al disegno le possiamo raggruppare in quella che è la parte, appunto, di disegno, o Draw in inglese.
E che metodi abbiamo appena visto?
Il metodo Update:
protected override void Update(GameTime gameTime)
{
// Allows the game to exit
if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
this.Exit();
// TODO: Add your update logic here
base.Update(gameTime);
}
All’avvio del progetto, ovviamente, il metodo sarà quasi vuoto, in quanto non abbiamo ancora definito nulla. Ed ecco che compare anche il metodo Draw:
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
// TODO: Add your drawing code here
base.Draw(gameTime);
}
concettualmente ci siamo, vero? L’istruzione che vedete in Draw, invece, serve a colorare la nostra schermata con un colore a scelta dell’utente. Se cambierete colore, scegliendone un’altro da passare come parametro, cambierà quindi quello della schermata.
(Click per Ingrandire)
Lo so, come inizio non è molto eccitante, ma non vi aspettate che il gioco si faccia da solo
Introduzione – Grafica – XNA Tutorials
dic 27
Dunque, in questa seconda parte dei tutorials, come potrete ben immaginare, ci occuperemo delle prime basilari operazioni di grafica. Impareremo ad importare un’immagine per poi disegnarla oppure caricarla direttamente da un file. Proseguiremo modificando un pò le nostre immagini disegnate, con operazioni quali la rotazione e il ridimensionamento.
Provvederemo anche al testo, studiando la funzione DrawString, essenziale per lo scopo. Ed ancora, vedremo le Sprite Animate e il loro disegno su schermo, con tutte le modalità relative.
Insomma, in questo primo capitolo affonderemo le mani nella pasta per bene. Non parlerò oltre, buona lettura!
Creazione di un nuovo Progetto – Inizio e Preparazione – XNA Tutorials
dic 26
Quasi quasi non c’era bisogno di un articolo del genere. Ma vabè, facciamo le cose per bene
Una volta aperto Visual C# Express, dovremo scegliere che tipo di progetto creare. Clicchiamo su “File -> Nuovo Progetto” e ci verranno mostrate le varie possibilità. Le opzioni ovviamente sono tante: si parte dalle semplici applicazioni console per arrivare a quelle con form, passando per le librerie di classi (i files .dll).
Noterete subito, nella lista a sinistra, la voce XNA Game Studio 3.1. Clicchiamoci, e le opzioni da scegliere cambieranno in quelle che ci interessano di più
Ecco che troviamo tutti i tipi di progetto relativi al framework XNA: Windows Game, ovvero un gioco per Windows, Xbox 360 Game, un gioco per Xbox, Zune Game, un gioco per Zune. Troverete inoltre le Game Library (ovvero files dll da usare nel proprio progetto) associate ad ogni tipologia precedentemente illustrata.
Noteremo anche un progetto per una Content Pipeline Extension (che non analizzeremo in questi tutorials base) e il Platformer Starter Kit, che ci metterà a disposizione un mini platform completo di codice e di immagini, per farci vedere “come funzionano le cose” riguardo a questa tipologia di gioco.
Altri Starter Kit, inoltre, possono essere scaricati dal sito ufficiale creators.xna.com. (Precisamente da Qui)
Selezioniamo Windows Game 3.1 (ma si, andiamo sul classico) e clicchiamo su Ok dopo aver definito il nome del nostro progetto e della relativa soluzione. Ovviamente non analizzeremo da subito il codice (cosa che faremo comunque tra pochissimo) ma appena il progetto sarà caricato premiamo F5 sulla tastiera.
(Click per Ingrandire)
Quello che vi ritroverete davanti sarà il primo progetto in XNA pronto, già codificato e compilato per la sua operazione “base” ovvero la costruzione della finestra e il riempimento di questa con un colore. Per ora è tutto ed il nostro progetto è bello e creato in due soli click.
Installazione dei programmi – Inizio e Preparazione – XNA Tutorials
dic 26
Adesso che abbiamo scaricato i nostri file e il necessario per iniziare, ovviamente, dobbiamo installare un pò tutto. Come prima cosa quindi avvieremo il setup del Visual C# 2008 Express Edition. Una volta avviato dovremo aspettare qualche secondo per il caricamento dei componenti.
Successivamente, ci ritroveremo davanti ad una schermata di installazione classica, nella quale dovremo andare avanti. Incontreremo anche una schermata relativa ai prodotti facoltativi da installare, simile a questa:
(Click per Ingrandire)
Se è la prima volta che lo installate avrete più opzioni tra le quali scegliere: tralasciando il resto delle descrizioni, vi consiglio di installare una copia della documentazione MSDN sul disco fisso, in modo tale da avere sempre un riferimento anche senza una connessione ad internet.
Dopo aver proseguito ci ritroveremo quindi nella schermata di download: potrete vedere con i vostri occhi il programma che creerà una lista di applicazioni da scaricare, le scaricherà una ad una e le installerà sul sistema. Una volta terminate queste operazioni, avremo finito con il Visual C#.
Passiamo quindi all’XNA Game Studio. Apriamo il file “XNAGS31_setup.exe” ed ecco la schermata che ci si porrà davanti:
(Click per Ingrandire)
Da questo momento in poi il discorso sarà lo stesso del Visual C#. L’installazione è automatica e quindi ci basterà cliccare su “Next” quando necessario, scegliendo in un passaggio le modalità di comunicazione dei giochi realizzati con il framework. A voi la scelta di questi parametri.
Una volta finito il processo di installazione avremo tutto il materiale pronto per l’uso. A questo punto non ci rimane che avviare Visual C# 2008 Express Edition e proseguire al prossimo articolo…
Ultimi Commenti