WP7 - XNA DrawString & TouchGesture

首先在 File >> New >> Project 標籤按下後，在左列已安裝樣版中找到 XNA Game Studio 4.0 專案，並選擇 Windows Phone Game (4.0) 的樣版輸入專案名稱。

建立完成後，整個方案(Solution)中會有兩個專案.
一個專案是原本輸入的專案名稱 XNA 實體的專案, 另一個則是在原本輸入的名稱加上 Content 字樣的專案名稱，是用來置放資源的專案，通常會將整個遊戲中的照片及文字放在這個當中。

程式執行的進入點 Program.cs 類別中，在 Main 的主進入函式中會自動建立 Game1.cs 然後開始整個程式執行。
這個專案是要用來練習如何在 XNA 的程式中繪出文字並瞭解 XNA 的觸控手勢(Touch Gesture)。
為了要顯示文字，必需先在資源的專案中加入 Sprit Font 的文字配置檔案。你可以在資源專案上按下滑鼠右鍵，選擇加入新項目。

選擇 Sprint Font 樣版。

該檔案是利用 XML 來描述文字的使用，包含字型、字型樣式、大小及編碼範圍，有了這個描述文字配置的檔案後，在編譯時編譯器會將文字轉譯成2進位的 .xnb 檔案，你可在
bin\Content 資料夾底下看到這個檔案，目前可以使用字型如下。

我將該檔案的 FontName 改成 Segoe UI Mono。

<FontName>Segoe UI Mono</FontName>

Size 改成 42

<Size>42</Size>

如果需要其它相關詳細的資料可參考:
What is Sprit,  Sprite Font XML Schema Reference

接下來要把文字顯示在畫面上。
首先先簡單的介紹 XNA，XNA 的應用程式運作的方式有點像影格，它是利用不斷的更新及重繪來顯示出遊戲的畫面，所以在預設的程式碼中，會看到如下的程式用來指定更新的頻率。

TargetElapsedTime = TimeSpan.FromTicks(333333);
    

詳細請參考 MSDN 邊做邊學的介紹(一定要看啊)
在預設已覆寫的 LoadContent 事件中可以看到建立 SpriteBatch 物件的程式碼。

spriteBatch = new SpriteBatch(GraphicsDevice);
    

這個物件主要是用來顯示各個種類的 2D 圖形，有點像是類似畫板的容器，讓我們可以畫上任何東西。
我們需要建立幾個區域變數以供之後使用，先建立一個 Hello World 的文字變數用來測試將文字顯示在畫面上，建立一個 SpriteBatch 用來儲放文字。宣告如下:

string message = "Hello World";
   SpriteFont segoe42;

在 LoadContent 的覆寫事件中載入文字:

segoe42 = this.Content.Load<spritefont>("Segoe42");
      

在 Draw 的覆寫事件中繪出文字，SpriteBatch.DrawString 中 第3個參數是文字的位置，第4個是文字顏色。

>spriteBatch.Begin();
            spriteBatch.DrawString(segoe42, message, new Vector2(50, 50), Color.White);
            spriteBatch.End();
      

執行後可以看到 Hello World 的字樣。

確認沒問題後來調整一下文字的位置，將字體置中於畫面當中，先建立一個 viewport 的區域變數用來暫存行動裝置的可視範圍。
再建立一個 Vector2 的區域變數用來指定文字的位置。

Vector2 textPosition;
      

在 LoadContent 時取得行動裝置的範圍(viewport)，MeasureString 是用來取得字體的2D的向量物件(Vector2)，可以用取得字體的大小，文字的座標算法可以參考如下的公式(裝置的長寬-文字的左下的座標再除以2就是文字的座標)

deviceViewPort = this.GraphicsDevice.Viewport;
        Vector2 textSize = segoe42.MeasureString(message);
        textPosition = new Vector2((deviceViewPort.Width - textSize.X) / 2, (deviceViewPort.Height - textSize.Y) / 2);
     

最後只要在 Draw 的方法當中將 textPosition 置換掉就可以了。

protected override void Draw(GameTime gameTime)
        {
            GraphicsDevice.Clear(Color.CornflowerBlue);

            spriteBatch.Begin();
            spriteBatch.DrawString(segoe42, message, textPosition, Color.White);
            spriteBatch.End();

            base.Draw(gameTime);
        }
     

測試的時侯可以看見文字在裝置的正中央。

繪出文字沒問題後，我們只要需要讓目前的程式能抓到目前的使用者對觸控板手勢，我們先在建構函式中設定支援的手勢(我並沒有將所有手勢加入，模擬器並沒有支援所有手勢的輸入)

TouchPanel.EnabledGestures = 
                GestureType.DoubleTap | GestureType.DragComplete | GestureType.Hold | 
                GestureType.HorizontalDrag | GestureType.Tap | GestureType.VerticalDrag;
    

再加入下面的程式碼就可以動態抓到目前的手勢， TouchPanel.IsGestureAvailable 是來判斷是不是還有沒有未取得的手勢標記，另因文字改變了，也順便記得要重新計算文字的位置，因會重複用到，可以包成方法。

private void RefreshTextPoint()
        {
            Vector2 textSize = segoe42.MeasureString(message);
            textPosition = new Vector2((deviceViewPort.Width - textSize.X) / 2, (deviceViewPort.Height - textSize.Y) / 2);
        }
    

參考連結:
Programing Windows Phone 7 By Charles Petzold
What is Sprit
Sprite Font XML Schema Reference