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!