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

作者: nowpaper 來源: 博客園發布時間: 2011-02-10 16:41 閱讀: 866 次推薦: 0 原文鏈接 [收藏]

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

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

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

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

Code Snippet

public partial class FaceCard : UserControl
{
    public FaceCard()
    {
        InitializeComponent();
        Sel_Rectangle.Visibility = System.Windows.Visibility.Collapsed;
    }
    protected override void OnMouseEnter(MouseEventArgs e)
    {
        Sel_Rectangle.Visibility = System.Windows.Visibility.Visible;
        base.OnMouseEnter(e);
    }
    protected override void OnMouseLeave(MouseEventArgs e)
    {
        Sel_Rectangle.Visibility = System.Windows.Visibility.Collapsed;
        base.OnMouseLeave(e);
    }
    private int _faceindex = 1;
    public int FaceIndex
    {
        get { return _faceindex; }
        set
        {
            _faceindex = value;
            var uri = new Uri("/3D_Space;component/Res/image" + value + "png", UriKind.Relative);
            FaceImage.Source = new System.Windows.Media.Imaging.BitmapImage(uri);
        }
    }
}

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

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

Code Snippet

public partial class SelectInterface : UserControl
{
    public SelectInterface()
    {
        InitializeComponent();
        for (int i = 0; i < 4; i++)
        {
            for (int j = 0; j < 5; j++)
            {
                var index = i * 5 + j;
                var t = FaceCardGroup.Children[index] as FaceCard;
                if (t != null)
                {
                    t.FaceIndex = index + 1;
                    t.Projection = new PlaneProjection()
                    {
                        RotationX = 30,
                        GlobalOffsetX = j * 70 - 140,
                        GlobalOffsetY = i * 60 - 300,
                    };
                }
            }
        }
    }
}