繪製文字紋理

摘要:繪製文字紋理

前幾篇已經介紹,如何用XNA在程式中載入2D圖片。

在那邊當中用了SpriteBatch中的Draw函式,大家可以多多參考MSND,這個函式有很多Overloading格式,像是你可以決定呈現2D圖片的範圍等等。

現在就繼續接下來的範例,現在要在程式中繪製出文字,在一個遊戲中除了圖片美工外,最重要不外乎的是文字,文字呈現出故事內容以及對話,豐富遊戲的劇情。
在繪製想要輸出的文字之前,我們必須要先定義好Sprite Font檔案。

在Solution Expolorer中,對著專案按下右鍵,【Add】->【New Item】,選擇Sprite Font。

這個檔案用途主要是設定字型、大小、字元間距和字型形式等等。

建立好以後可以依照自己的喜好去修改
<FontName>新細明體</FontName>   選擇字體,決定所繪製的文字要用哪個已經被安裝的字體。
注意 : 部分字體有各自的版權,請確認有該字體的使用版權,否則可能會引起法律事件。
<Size>14</Size>  選擇字體大小。
<Spacing>2</Spacing>  選擇字元間距。
<Style>Regular</Style>  選擇字型型態,"Regular","Bold"粗體, "Italic"斜體,"Bold, Italic"粗斜體。

修改完畢以後存檔,這樣就可以開始繼續程式的編寫。

首先,增加三個元件,SpriteBatch、SpriteFont、Vector2D。
SpriteBatch spriteBatch;
SpriteFont spriteFont;
Vector2 pos;
SpriteBatch就是告訴設備目前要做的動作,像是準備繪畫等等,所以在建構的時候,可以想成他先跟設備先建立溝通,這種感覺,等等可以看看初始化的函數,這樣多少可以體會到。
SpriteFont : 呈現一個字型的紋理。
Vector2 : 一個2D的向量,這邊就當作他是一個座標,標示等等要把字畫在哪邊。

接下來,初始化SpriteBatch物件,在Initialize中,加入
spriteBatch = new SpriteBatch( graphics.GraphicsDevice );
建構子裡面所需要的參數就是GraphicsDevice,這邊讓我的感覺就像是我在跟圖形設備建立溝通。

在LoadGraphicsContent中的IF條件式裡,加入
spriteFont = content.Load<SpriteFont>("SpriteFont1");
把一開始我們最先建立好的SpriteFont交給Content去載入進來,這邊所載入後的回傳型態需要轉換成<SpriteFont>,在Load的參數中就是打入剛剛建立好的SpriteFont檔案名稱。

再來我做的事情就是指定位置,指定我畫出的文字要落在哪個地方,我把這行程式碼加在LoadGraphicsContent中,可是位置這個東西當然不只侷限在這邊,你可以在Draw的函數中,指定要繪製的位置,或是自己寫個函數讓他可以落在想要的位置。
pos = new Vector2(graphics.GraphicsDevice.Viewport.X, graphics.GraphicsDevice.Viewport.Y);

前置工作都準備完畢以後,接下來就是要將文字畫出來了,這邊我宣告一個字串物件text,用來指定要畫出的文字。
string text = "It's test by teexit!";
一樣的,我們必須要先告訴設備我準備要開始繪製了。
用spriteBatch.Begin()通知設備準備繪製。
使用SpriteBatch中的DrawString函數將字串畫出來
spriteBatch.DrawString(spriteFont, text, pos, Color.DarkBlue);
這 個函式中有四個參數,第一個參數是需要傳入SpriteFont物件,第二個參數需要指定繪出的文字字串,第三個參數指定要輸出的位置,第四個參數指定文 字的顏色,這個算是最基本的形式,只需要設定少數的參數,就可以繪製出字串。這個DrawString還提供比較進階的設定,像是旋轉、效果、深度等等。
繪製完成以後,就結束繪畫工作。
spriteBatch.End();

完成以上動作後,編譯執行看看,看看你想要畫出的文字是不是呈現出來了。

程式碼範例 :
下載