Disegnare il testo su schermo – Grafica – XNA Tutorials

FrancescoMalatesta — Thu, 31 Dec 2009 13:23:10 +0000

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):

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:

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("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

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.

the void. » spritefont

Disegnare il testo su schermo – Grafica – XNA Tutorials