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.

1. Creiamo una variabile di tipo float, chiamata moltiplicatore. Qui memorizzeremo il valore da usare per la moltiplicazione nel ridimensionamento.
2. Modifichiamo il metodo Update in modo da gestire l’input da tastiera.
3. 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

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

“Le Surface in SDL.NET rappresentano, genericamente, delle informazioni grafiche. E’ possibile crearle da zero (e quindi disegnarci ciò che si vuole) oppure caricando dei files dal disco fisso o da un array di bytes. Ogni Surface ha una propria larghezza ed altezza e possiedono delle funzionalità di disegno sulla superficie stessa.”

Le cose non sono ancora chiare? Tranquilli, ecco un bel programma di prova, che verrà prontamente spiegato.

[code]]czoxMDg3OlwiDQp1c2luZyBTeXN0ZW07DQoNCnVzaW5nIFNkbERvdE5ldC5Db3JlOw0KdXNpbmcgU2RsRG90TmV0LkdyYXBoaWNzOw17WyYqJl19Cg0KbmFtZXNwYWNlIERlbW8NCnsNCiAgICBwdWJsaWMgY2xhc3MgR2FtZQ0KICAgIHsNCiAgICAgICAgU3VyZmFjZSBzY2hlcm1hdHtbJiomXX1hID0gVmlkZW8uU2V0VmlkZW9Nb2RlKDgwMCwgNjAwKTsNCiAgICAgICAgU3VyZmFjZSBpbW1hZ2luZSA9IG5ldyBTdXJmYWNlKFwiaXtbJiomXX1tbWFnaW5lLmpwZ1wiKTsNCg0KICAgICAgICBbU1RBVGhyZWFkXQ0KICAgICAgICBwdWJsaWMgc3RhdGljIHZvaWQgTWFpbigpDQogIHtbJiomXX0gICAgICB7DQogICAgICAgICAgICBHYW1lIGFwcCA9IG5ldyBHYW1lKCk7DQogICAgICAgICAgICBhcHAuR28oKTsNCiAgICAgICAge1smKiZdfX0NCg0KICAgICAgICBwdWJsaWMgR2FtZSgpDQogICAgICAgIHsNCiAgICAgICAgICAgIEV2ZW50cy5GcHMgPSA2MDsNCiAgICAgICB7WyYqJl19ICAgICBWaWRlby5XaW5kb3dDYXB0aW9uID0gXCJHZXN0aW9uZSBTdXJmYWNlIC0gU0RMLk5FVFwiOw0KICAgICAgICB9DQoNCiAgICAge1smKiZdfSAgIHB1YmxpYyB2b2lkIEdvKCkNCiAgICAgICAgew0KICAgICAgICAgICAgRXZlbnRzLlF1aXQgKz0gbmV3IEV2ZW50SGFuZGxlcjx7WyYqJl19UXVpdEV2ZW50QXJncz4odGhpcy5RdWl0KTsNCiAgICAgICAgICAgIEV2ZW50cy5UaWNrICs9IG5ldyBFdmVudEhhbmRsZXI8VGlja3tbJiomXX1FdmVudEFyZ3M+KEV2ZW50c19UaWNrKTsNCiAgICAgICAgICAgIEV2ZW50cy5SdW4oKTsNCiAgICAgICAgfQ0KDQogICAgICAgIHZve1smKiZdfWlkIEV2ZW50c19UaWNrKG9iamVjdCBzZW5kZXIsIFRpY2tFdmVudEFyZ3MgZSkNCiAgICAgICAgew0KICAgICAgICAgICAgc2NoZXJ7WyYqJl19bWF0YS5GaWxsKFN5c3RlbS5EcmF3aW5nLkNvbG9yLkJsYWNrKTsNCg0KICAgICAgICAgICAgc2NoZXJtYXRhLkJsaXQoaW1tYWdpbntbJiomXX1lKTsNCg0KICAgICAgICAgICAgc2NoZXJtYXRhLlVwZGF0ZSgpOw0KICAgICAgICB9DQoNCiAgICAgICAgcHJpdmF0ZSB2b2lkIFF1e1smKiZdfWl0KG9iamVjdCBzZW5kZXIsIFF1aXRFdmVudEFyZ3MgZSkNCiAgICAgICAgew0KICAgICAgICAgICAgRXZlbnRzLlF1aXRBcHBsaWN7WyYqJl19YXRpb24oKTsNCiAgICAgICAgfQ0KICAgIH0NCn0NClwiO3tbJiomXX0=[[/code]

Partiamo dalle prime righe:

using System;

using SdlDotNet.Core;

using SdlDotNet.Graphics;

Qua dovremmo esserci: includiamo i namespace che ci servono per i nostri scopi, attraverso la direttiva using.

Surface schermata = Video.SetVideoMode(800, 600);

Ecco la prima delle nostre Surface. Come detto precedentemente, queste possono essere create in vari modi: l'oggetto “schermata” che stiamo dichiarando è speciale: rappresenta infatti la finestra di gioco che noi utilizzeremo.

Il tutto viene reso possibile grazie al metodo SetVideoMode della classe Video, che restituisce appunto una Surface. In questo modo abbiamo deciso che la nostra finestra avrà una dimensione di 800 pixel per 600 pixel.

Ora abbiamo:

Surface immagine = new Surface("immagine.jpg");

Questa surface invece viene creata passando come argomento del metodo costruttore il nome del file da caricare. In questo caso caricheremo il file “immagine.jpg”, situato nella stessa cartella del nostro file exe compilato. Una volta che il nostro oggetto viene creato è pronto per essere mostrato. Continuiamo però con il codice:

public Game()

{

Events.Fps = 60;

Video.WindowCaption = "Gestione Surface - SDL.NET";

}

Qui abbiamo il metodo costruttore della nostra classe Game, che svolge essenzialmente due operazioni: imposta il limite dei frame per secondo a 60 utilizzando la proprietà Fps della classe Events e cambia il titolo alla finestra del programma, stavolta utilizzando WindowCaption di Video. Molto semplice come concetto. Adesso:

public void Go()

{

Events.Quit += new EventHandler<QuitEventArgs>(this.Quit);

Events.Tick += new EventHandler<TickEventArgs>(Events_Tick);

Events.Run();

}

Il metodo Go aggiunge gli Handler per gli eventi che vogliamo gestire: in questo caso ne abbiamo due: Quit, già visto in precedenza, e Tick. Tick permette di gestire ciò che succede ad ogni frame, risultando particolarmente utile nell'aggiornamento dei valori delle variabili in gioco. Stando al limite dato precedentemente, la nostra funzione Events_Tick viene eseguita 60 volte al secondo. Quello che facciamo nel metodo Events_Tick è spiegato nelle righe successive:

void Events_Tick(object sender, TickEventArgs e)

{

schermata.Fill(System.Drawing.Color.Black);

schermata.Blit(immagine);

schermata.Update();

}

Ed ecco l'utilizzo effettivo delle nostre Surface! Come si può vedere, in questo metodo eseguiamo tre operazioni:

1. Tramite la funzione Fill riempiamo tutta la schermata di nero. Può apparire insensato, ma pensate ad un file immagine con delle trasparenze (per esempio un file PNG) che si sposta nel tempo. Senza riempire lo schermo di nero tutte le volte avremmo un effetto fastidioso dovuto alla “non pulizia” della surface, se così la vogliamo chiamare.
2. Tramite il metodo Blit invece disegnamo la nostra immagine. Blit è un metodo che ha ben 8 overload: ciò vuol dire che ci sono ben 9 modalità diverse con cui disegnare sulle surface. Nel nostro caso abbiamo passato solo il nome della Surface da disegnare: questo vuol dire che le coordinate in cui verrà disegnata la nostra Surface saranno (0,0) rispetto alla “schermata”.
3. Il metodo Update si occupa infine di “aggiornare” il nostro frame e fare in modo che tutte le eventuali modifiche del sistema siano mostrate a schermo. Non dimenticatelo alla fine della fase di disegno, è importante!

Ma torniamo al punto 2: perchè queste coordinate sono (0,0)? E' semplice da spiegare: la Surface “schermata” rappresenta la finestra stessa del programma. Di conseguenza, il punto situato più in alto a sinistra avrà delle coordinate pari a 0 sull'asse x ed altrettanto sulla y.

Per disegnare la nostra immagine in una posizione differente, la sintassi sarà la seguente:

schermata.Blit(immagine, new System.Drawing.Point(20, 20));

Stavolta disegneremo la nostra immagine alle coordinate (20,20), e non più (0,0), sui nostri assi cartesiani. A tal proposito devo ricordarvi una cosa molto importante: gli assi cartesiani sullo schermo del pc sono ribaltati sull'asse Y. In poche parole, ecco due immagini per chiarire le idee.

Ciò che abbiamo dopo il metodo Events_Tick è il codice del metodo Quit, che ci consente di uscire dal programma.

Tornando a parlare genericamente, l'oggetto Surface supporta una buona quantità di formati grafici:

• BMP
• PNM
• XPM
• LBM
• PCX
• GIF
• JPEG
• PNG
• TGA

Trasparenza
Ovviamente non è solo questo quello che dobbiamo dire riguardo alle Surface e al loro utilizzo. Un'altra feature molto utile è quella della gestione della trasparenza, che avviene tramite due proprietà:

• TransparentColor
• Transparent

Facciamo un esempio. Abbiamo un'immagine in un file PNG che vogliamo utilizzare come cursore del mouse nel nostro gioco. Caricandola e mostrandola sullo schermo tramite la procedura sopra mostrata, tuttavia, non avremmo il risultato desiderato: oltre a mostrare il cursore, infatti, verrebbe mostrato anche il quadrato in cui è contenuta l'immagine, ovvero tutto il file immagine, per intero. Come facciamo ad evitare questo problema?

Per prima cosa, dobbiamo specificare il colore di trasparenza del nostro file. Ecco un veloce esempio, usando sempre la nostra surface “immagine”:

immagine.TransparentColor = System.Drawing.Color.White;

In questo modo diciamo al sistema che, quando mostrerà a schermo la surface “immagine” dovrà ignorare tutti i pixel di colore bianco. Dopo questo, usiamo anche la proprietà Transparent, semplicemente impostandola su True. Ricordate che questo step è necessario.

immagine.Transparent = true;

Adesso il nostro cursore sarà bello e pronto da mostrare senza problemi . Ovviamente queste istruzioni è bene non metterle nel loop senza condizioni: io per esempio le metto nel metodo costruttore della mia classe. Ecco un esempio completo, per mostrare dove ho posizionato le istruzioni.

public Game()

{

immagine.TransparentColor = System.Drawing.Color.White;

immagine.Transparent = true;

Events.Fps = 60;

Video.WindowCaption = "Gestione Surface - SDL.NET";

}

Alpha Blending

Anche l'Alpha Blending è decisamente semplice da utilizzare. Come per la trasparenza, dovremo scrivere solamente due righe di codice, utilizzando due proprietà:

• Alpha
• AlphaBlending

Alpha è di tipo byte e va da 0 a 255. Impostandolo su 0 avremo la totale trasparenza della surface. A 255 invece la surface sarà totalmente visibile. Dopo aver impostato l'Alpha procediamo quindi ad attivare l'AlphaBlending impostando la proprietà su true, proprio come per la trasparenza. Se non effettuiamo quest'ultimo passo la proprietà Alpha verrà ignorata.

Ecco un esempio:

immagine.Alpha = Convert.ToByte(255);

immagine.Alpha = Convert.ToByte(0);

immagine.AlphaBlending = true;

Come suggerisce anche la Wiki ufficiale, un uso saggio delle surface può essere anche l'uso delle SurfaceCollections, ovvero strutture dinamiche che permettono di gestire altrettanto dinamicamente questo tipo di oggetto. Tuttavia ne parleremo più in la, magari quando riuscirò a scrivere una sorta di sezione “avanzata” di questa guida. Per ora, per quanto riguarda le surface, è tutto!