Silverlight 遊戲開發小技巧：實現街霸4的選人介面

上一篇只是一個引子，用來說明Projection的基本操作，遊戲研發都是用這些小的準系統慢慢組合出來，其實這一篇仍然是Projection，但是我們將會做一個比較複雜的應用使用silverlight的Projection，玩過街霸4，可能對它的選人介面印象深刻，但是做起來卻不容易，因為要請美術設計師將介面設計出來，這樣就麻煩了很多，請看街霸4的選人介面：

請注意小頭像，都是按照透視排列組成，這樣的形式在一些其他的遊戲中經常見到，你可以從容的發給美術，然後請他們做好，再套入，可是這樣圖片的量就大了很多，一般來說這種方法比較暴力，可是有更好的方法實現，只需要一個小的控制項就行了，沒錯就是使用Projection，我們可以利用它來實現一段代碼的產生。

首先你有一個工程，先建立小的頭像，小的頭像可以是依據你的布局大小來確定，我這裡的布局是600x400的主介面，小頭像表徵圖是64x64，所以在參照我的練習中，各位可以以此作為標準。

上面是一個樣圖，我們會在後台寫一些暴露的屬性來控制操作，以及一些滑鼠控制的代碼，這些代碼並不複雜，請注意ImageSouce的BitmapImage所構造的目標用法，你需要從3D_Space改成為你的工程名字。

Code Snippet

1. public partial class FaceCard : UserControl
2. {
3.     public FaceCard()
4.     {
5.         InitializeComponent();
6.         Sel_Rectangle.Visibility = System.Windows.Visibility.Collapsed;
7.     }
8.     protected override void OnMouseEnter(MouseEventArgs e)
9.     {
10.         Sel_Rectangle.Visibility = System.Windows.Visibility.Visible;
11.         base.OnMouseEnter(e);
12.     }
13.     protected override void OnMouseLeave(MouseEventArgs e)
14.     {
15.         Sel_Rectangle.Visibility = System.Windows.Visibility.Collapsed;
16.         base.OnMouseLeave(e);
17.     }
18.     private int _faceindex = 1;
19.     public int FaceIndex
20.     {
21.         get { return _faceindex; }
22.         set
23.         {
24.             _faceindex = value;
25.             var uri = new Uri("/3D_Space;component/Res/image" + value + "png", UriKind.Relative);
26.             FaceImage.Source = new System.Windows.Media.Imaging.BitmapImage(uri);
27.         }
28.     }
29. }

現在建立一個600x400的角色選擇介面（SelectInterface），簡單的設計一下LayoutRoot，並在中下的位置上添加一個64x64的Canvas（Grid也可以），在裡面添加20個FaceCard控制項（就是剛才建立的小頭像控制項），在Asset裡的Project標籤中能夠找到自訂的控制項，如果它不存在就先編譯一下工程（Ctrl+Alt+B）。

好了，為容器命名，然後需要一些代碼了，讓代碼為我們把目標做好

Code Snippet

1. public partial class SelectInterface : UserControl
2. {
3.     public SelectInterface()
4.     {
5.         InitializeComponent();
6.         for (int i = 0; i < 4; i++)
7.         {
8.             for (int j = 0; j < 5; j++)
9.             {
10.                 var index = i * 5 + j;
11.                 var t = FaceCardGroup.Children[index] as FaceCard;
12.                 if (t != null)
13.                 {
14.                     t.FaceIndex = index + 1;
15.                     t.Projection = new PlaneProjection()
16.                     {
17.                         RotationX = 30,
18.                         GlobalOffsetX = j * 70 - 140,
19.                         GlobalOffsetY = i * 60 - 300,
20.                     };
21.                 }
22.             }
23.         }
24.     }
25. }

上面的代碼的效果是遍曆所有FaceCardGroup的元素，將合格添加3D變換處理，這裡有一些擴充的做法，比如將中間的兩個用其他的控制項代替就可以達到空白的效果，以及增加一些滑鼠點擊事件就能取得目標索引值之類的功能。

那麼運行起來看看效果如呢：

看起來怎麼樣，很像街霸4的效果吧，剩下的就需要各位再更加深層次的發揮了，想瞭解更細緻的內容，可以下載工程直接查看。

原始碼如下：點擊直接下載

推薦Silverlight遊戲開發部落格：深藍色右手