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:

1. Importare l’immagine con il ContentManager;
2. 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