一起谈.NET技术，Silverlight 游戏开发小技巧：实现街霸4的选人界面-阿里云开发者社区

一起谈.NET技术，Silverlight 游戏开发小技巧：实现街霸4的选人界面

2019-06-01 942

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 　　上一篇只是一个引子，用来说明Projection的基本操作，游戏研发都是用这些小的基本功能慢慢组合出来，其实这一篇仍然是Projection，但是我们将会做一个比较复杂的应用使用silverlight的Projection，玩过街霸4，可能对它的选人界面印象深刻，但是做起来却不容易，因为要请美术...

　　上一篇只是一个引子，用来说明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,
                    };
                }
            }
        }
    }
}
 
  