Silverlight 游戏开发小技巧:传说中的透视跑马灯

  昨夜元宵佳节,各种灯会热闹非凡,伴随烟火灿烂好不热闹,可惜一点也没看着T_T,那就写一个跑马灯吧,可是跑马灯并不稀奇,各位高手们已经写过而且都各有特点,所以,写也要写点有特色的才好,游戏中经常能看到一种带有透视的选人界面,上次写的是一个固定效果,那么这次带上点动画,结合一个Silverlight的MVC开发小技巧快速完成它。

  仍然继续偷懒,借用之前的控件:Silverlight 游戏开发:简单的技能条系统

  把Card控件拿出来,然后做一下简单的修改,然后打开XAML文件,填入如下的代码:

  这是给UserContrl增加了一个Projection,这是3D变换方面的属性,注意后面的x:Name="myProjection"是给这个对象做了一个命名,这样就可以在.cs中直接访问控制,而不需要麻烦的增加新的代码。

  看代码中可以直接使用这个对象,这应该算是Silverlight优秀的便捷开发技巧。

  现在在MainPage中增加一个用来放图标的容器:

  将它放置在中间或者其他你想要的位置。

  现在需要写代码了,为FaceCard类增加如下代码:

public FaceCard()

{

InitializeComponent();

Sel_Rectangle.Visibility = System.Windows.Visibility.Collapsed;

myProjection.CenterOfRotationZ = -200;

}

public double AngleY

{

get { return myProjection.RotationY; }

set

{

myProjection.RotationY = value;

if (value > 0)

this.Opacity = Math.Abs(value % 360 - 180) / 180 + 0.2;

else

this.Opacity = Math.Abs(value % 360 + 180) / 180 + 0.2;

myTransform.ScaleX = myTransform.ScaleY = Opacity + 0.1;

}

}

  注意在构造函数中,对旋转的中心进行了设置,为Z轴的-200位置,也就是说,所有的旋转都会围绕(0,0,-200)3D空间点上旋转,而AngleY是围绕Y轴进行旋转数值,它可以通过RotagtionY来获得,在赋值的代码中,进行了一个处理,就是当旋转到后面的时候,就会不清晰,这样看起来更加真实,当然了也可以通过Effect来完成。

  下面打开MainPage类,做一些改造:

public partial class MainPage : UserControl

{

public const int MaxFaceSum = 10;

public const double Speed = 10;

public MainPage()

{

InitializeComponent();

for (int i = 0; i < MaxFaceSum; i++)

{

var face = new FaceCard();

face.FaceIndex = i % MaxFaceSum;

FaceGroupPanel.Children.Add(face);

face.AngleY = (360 / MaxFaceSum) * i;

}

CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);

}

double mouseOffset;

protected override void OnMouseMove(MouseEventArgs e)

{

var aw = App.Current.Host.Content.ActualWidth / 2;

mouseOffset = (aw - e.GetPosition(null).X) / aw * Speed;

base.OnMouseMove(e);

}

void CompositionTarget_Rendering(object sender, EventArgs e)

{

for (int i = 0; i < MaxFaceSum; i++)

{

var face = FaceGroupPanel.Children[i] as FaceCard;

if (face != null)

face.AngleY += mouseOffset;

}

}

}

  代码很简洁,我使用CompositionTarget.Rendering作为循环逻辑,并增加了10个小图标,这个初始最大值写成const以方便随时修改,在MouseMove事件中,做了个数值计算得出一个偏移数值,而这个数值将会影响到旋转,参见CompositionTarget_Rendering(object sender, EventArgs e) 中的写法,考虑扩展性,可以修改速度等参数来达到一些效果。

  现在已经完成,运行起来看看如何呢,在这个基础上,我们能够做一些广告效果,或者游戏中的选人选物品的功能,我估计最刺激的是,如果能做成开宝箱的转盘就有意思了。

  本篇工程源代码下载地址如下:点击直接下载

时间: 2024-09-20 05:50:16

Silverlight 游戏开发小技巧:传说中的透视跑马灯的相关文章

Silverlight 游戏开发小技巧:传送点特效制作

前面我们使用投影(Projection)完成了一个升级的特效,Silverlight故事板动画相当的容易,这次我们将详细说说故事板动画的帧制作,完成一个循环的传送点特效,大家都知道,在游戏中,传送点一般是固定在某一个地方,循环播放,它通常表明这里会有一个事件之类的特殊地点,我们将用前面的升级特效稍微改造,就可以得到了: 这个系列只是有关于游戏开发的小技巧,相比纯粹的技术文章要简单一些,我个人感觉可能更加偏向于Blend美工方面的工作,能够为各位Silverlight开发者带来一些新的思路,就是一

一起谈.NET技术,Silverlight 游戏开发小技巧:动感小菜单

网页应用受限于自身的浏览器范畴,不能把华丽效果完全展示,正是因为如此,在网页上诞生了无数绚丽的设计,虽然动感程度和桌面应用无法比拟,但是在UI上却下足了功夫,用户体验可以说无以伦比,比如说小小的菜单,在桌面游戏还停留在四态按钮的时候,网页应用都已经入动感时代了,这次,使用Silverlight实现一个小菜单,体验一下动感吧 当鼠标移入的时候,目标的图标就会放大,形成一个阶梯的效果,要实现这个效果,将需要使用自定义控件和StackPanel的知识. 现在在一个Silverlight工程中添加新控件

一起谈.NET技术,Silverlight 游戏开发小技巧:动感小菜单2

动感小菜单其实是想模仿Apple的菜单按钮设计制作,但是画虎不成反类犬,看起来有点别扭,昨天各位园友提了这方面的建议,感觉太硬如果加入动画可能更好,非常感谢各位,而今天这篇的动感小菜单2,让按钮更加动感"柔"顺:)期望能做的更好吧. 我们可以直接借助昨天的工程,在上面的基础上修改,打开昨天的工程(Silverlight 游戏开发小技巧:动感小菜单): 直接选定一个StackPanel的Group,然后按住Alt键复制一个,为了方便编程,这次我们将它制作成一个控件: 在结构里面直接选择刚

一起谈.NET技术,Silverlight 游戏开发小技巧:传送点特效制作

前面我们使用投影(Projection)完成了一个升级的特效,Silverlight故事板动画相当的容易,这次我们将详细说说故事板动画的帧制作,完成一个循环的传送点特效,大家都知道,在游戏中,传送点一般是固定在某一个地方,循环播放,它通常表明这里会有一个事件之类的特殊地点,我们将用前面的升级特效稍微改造,就可以得到了: 这个系列只是有关于游戏开发的小技巧,相比纯粹的技术文章要简单一些,我个人感觉可能更加偏向于Blend美工方面的工作,能够为各位Silverlight开发者带来一些新的思路,就是一

Silverlight 游戏开发小技巧:动感小菜单

网页应用受限于自身的浏览器范畴,不能把华丽效果完全展示,正是因为如此,在网页上诞生了无数绚丽的设计,虽然动感程度和桌面应用无法比拟,但是在UI上却下足了功夫,用户体验可以说无以伦比,比如说小小的菜单,在桌面游戏还停留在四态按钮的时候,网页应用都已经入动感时代了,这次,使用Silverlight实现一个小菜单,体验一下动感吧 当鼠标移入的时候,目标的图标就会放大,形成一个阶梯的效果,要实现这个效果,将需要使用自定义控件和StackPanel的知识. 现在在一个Silverlight工程中添加新控件

一起谈.NET技术,Silverlight 游戏开发小技巧:传说中的透视跑马灯

昨夜元宵佳节,各种灯会热闹非凡,伴随烟火灿烂好不热闹,可惜一点也没看着T_T,那就写一个跑马灯吧,可是跑马灯并不稀奇,各位高手们已经写过而且都各有特点,所以,写也要写点有特色的才好,游戏中经常能看到一种带有透视的选人界面,上次写的是一个固定效果,那么这次带上点动画,结合一个Silverlight的MVC开发小技巧快速完成它. 仍然继续偷懒,借用之前的控件:Silverlight 游戏开发:简单的技能条系统 把Card控件拿出来,然后做一下简单的修改,然后打开XAML文件,填入如下的代码: 这是给

一起谈.NET技术,Silverlight 游戏开发小技巧:轨迹跟随效果

我们通常在游戏中有各种各样的粒子效果,其中有一种就是跟随鼠标发生的轨迹动画,在鼠标经过的地方会产生一些特效,这种方式我们在粒子当中经常使用,本篇使用一个简单的例子再次将粒子系统改善,更加精简更加高效. 如果有兴趣的同学可以读一下以前的:Silverlight C# 游戏开发:绚丽的粒子特效-粒子效果(二) 但是这今次实现方法更加简单更加偏向于美术设计师,因为这次的编程将基本上在Blend中实现. 在继续往下看之前,你需要了解MouseMove事件,以及基本的控件.故事板的知识,只有这样在下面的操

Silverlight 游戏开发小技巧:轨迹跟随“.NET研究”效果

我们通常在游戏中有各种各样的粒子效果,其中有一种就是跟随鼠标发生的轨迹动画,在鼠标经过的地方会产生一些特效,这种方式我们在粒子当中经常使用,本篇使用一个简单的例子再次将粒子系统改善,更加精简更加高效. 如果有兴趣的同学可以读一下以前的:Silverlight C# 游戏开发:绚丽的粒子特效-粒子效果(二) 但是这今次实现方法更加简单更加偏向于美术设计师,因为这次的编程将基本上在Blend中实现. 在继续往下看之前,你需要了解MouseMove事件,以及基本的控件.故事板的知识,只有这样在下面的操

Silverlight 游戏开发小技巧:轨迹跟随效果

我们通常在游戏中有各种各样的粒子效果,其中有一种就是跟随鼠标发生的轨迹动画,在鼠标经过的地方会产生一些特效,这种方式我们在粒子当中经常使用,本篇使用一个简单的例子再次将粒子系统改善,更加精简更加高效. 如果有兴趣的同学可以读一下以前的:Silverlight C# 游戏开发:绚丽的粒子特效-粒子效果(二) 但是这今次实现方法更加简单更加偏向于美术设计师,因为这次的编程将基本上在Blend中实现. 在继续往下看之前,你需要了解MouseMove事件,以及基本的控件.故事板的知识,只有这样在下面的操