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


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

    2  请注意小头像,都是按照透视排列组成,这样的形式在一些其他的游戏中经常见到,你可以从容的发给美术,然后请他们做好,再套入,可是这样图片的量就大了很多,一般来说这种方法比较暴力,可是有更好的方法实现,只需要一个小的控件就行了,没错就是使用Projection,我们可以利用它来实现一段代码的生成。

      首先你有一个工程,先建立小的头像,小的头像可以是依据你的布局大小来确定,我这里的布局是600x400的主界面,小头像图标是64x64,所以在参照我的练习中,各位可以以此作为标准。

    3  上面是一个样图,我们会在后台写一些暴露的属性来控制操作,以及一些鼠标控制的代码,这些代码并不复杂,请注意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)。

    4  好了,为容器命名,然后需要一些代码了,让代码为我们把目标做好:

    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变换处理,这里有一些扩展的做法,比如将中间的两个用其他的控件代替就可以达到空白的效果,以及增加一些鼠标点击事件就能取得目标索引值之类的功能。

      那么运行起来看看效果如呢:

    5  看起来怎么样,很像街霸4的效果吧,剩下的就需要各位再更加深层次的发挥了,想了解更细致的内容,可以下载工程直接查看。

      源代码下载地址如下:点击直接下载

  • 相关阅读:
    System.arraycopy()的用法?
    Java当中“+=”和“=+”的区别
    jsp FN 标签库的使用方法
    手作编辑画面处理
    mpfu 位编辑处理?
    5/14 自动跟新 位数编集 百分号添加 手作部品。
    jsp 4-14 知识总结
    jstl split 分割字符串?
    aws vpc 知识总结(助理级)
    典型的软件自动化测试框架
  • 原文地址:https://www.cnblogs.com/waw/p/2163010.html
Copyright © 2020-2023  润新知