Silverlight 游戏开发小技巧：实现街霸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,
};
}
}
}
}
}

上面的代码的效果是遍历所有FaceCardGroup的元素，将符合条件的添加3D变换处理，这里有一些扩展的做法，比如将中间的两个用其他的控件代替就可以达到空白的效果，以及增加一些鼠标点击事件就能取得目标索引值之类的功能。

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

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

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

推荐Silverlight游戏开发博客：深蓝色右手

posted on 2011-02-06 00:05 nowpaper 阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/nowpaper/archive/2011/02/06/1949399.html

Silverlight 游戏开发小技巧：实现街霸4的选人界面相关推荐

一起谈.NET技术，Silverlight 游戏开发小技巧：动感小菜单
网页应用受限于自身的浏览器范畴,不能把华丽效果完全展示,正是因为如此,在网页上诞生了无数绚丽的设计,虽然动感程度和桌面应用无法比拟,但是在UI上却下足了功夫,用户体验可以说无以伦比,比如说小小的菜单, ...
Silverlight 游戏开发小技巧：动感小菜单2
Silverlight 游戏开发小技巧:动感小菜单2 动感小菜单其实是想模仿Apple的菜单按钮设计制作,但是画虎不成反类犬,看起来有点别扭,昨天各位园友提了这方面的建议,感觉太硬如果加入动画可能更好 ...
Silverlight 游戏开发小技巧：轨迹跟随效果
Silverlight 游戏开发小技巧:轨迹跟随效果我们通常在游戏中有各种各样的粒子效果,其中有一种就是跟随鼠标发生的轨迹动画,在鼠标经过的地方会产生一些特效,这种方式我们在粒子当中经常使用,本篇使 ...
Silverlight 游戏开发小技巧：扇形排列元素
Silverlight 游戏开发小技巧:扇形排列元素斗地主风靡了大江南北,在春晚都做免费性推广,棋牌游戏平台几乎将其作为标配,但是牌类游戏总是一成不变的样子--横向排列,如果扇形排列应该更加符合真实 ...
一起谈.NET技术，Silverlight 游戏开发小技巧：实现街霸4的选人界面
上一篇只是一个引子,用来说明Projection的基本操作,游戏研发都是用这些小的基本功能慢慢组合出来,其实这一篇仍然是Projection,但是我们将会做一个比较复杂的应用使用silverlight ...
Silverlight 游戏开发小技巧：角色升级特效
这次我们将使用Projection完成一些有趣的RPG游戏中常用的特效:升级和传送点特效,我们不需要请特效师制作复杂绚丽的特效,而是只需要他们提供关键的几张图片或者设计样式,如果了您有本领教会他们使用 ...
Silverlight 游戏开发小技巧：星球大战字幕效果
各位科幻迷可能对星球大战的字幕效果印象深刻,这个电影字幕表现手法曾经风靡大小美国影片,甚至超人影片和电视也曾经用此来做开场和结尾字幕,今天我就将这个效果在blend里面制作技巧告诉大家,下面是星球大战 ...
Silverlight 游戏开发小技巧：昼夜交替动画
记得在WP7上玩一个游戏有段动画很有趣,是背景在进行昼夜交替,一会儿白天太阳出来白天了,一会儿月亮蹦出来夜晚了,在以前做C++程序的时候曾经实现过类似的效果,今天早上移植了一下到Silverlight ...
Silverlight 游戏开发小技巧：技能冷却效果1（Cooldown）
到目前为止,大家都非常推崇魔兽的技能冷却效果,就是这样的,我记得群里还对这个效果展开过探讨,其实实现起来并不难,关键是思路是否正确,这部分我得谢谢猪笨无罪,是他先想出的解决方案,他不愿意写博客,也就只 ...

Silverlight 游戏开发小技巧：实现街霸4的选人界面

Silverlight 游戏开发小技巧：实现街霸4的选人界面相关推荐

最新文章

热门文章