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.

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:

1. la texture da disegnare.
2. 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).
3. il rettangolo “sorgente”, ovvero quel rettangolo che racchiude tutta l’immagine (per intenderci, la prima da me esposta all’inizio dell’articolo.
4. 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