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

  前面我们使用投影(Projection)完成了一个升级的特效,Silverlight故事板动画相当的容易,这次我们将详细说说故事板动画的帧制作,完成一个循环的传送点特效,大家都知道,在游戏中,传送点一般是固定在某一个地方,循环播放,它通常表明这里会有一个事件之类的特殊地点,我们将用前面的升级特效稍微改造,就可以得到了:

  这个系列只是有关于游戏开发的小技巧,相比纯粹的技术文章要简单一些,我个人感觉可能更加偏向于Blend美工方面的工作,能够为各位Silverlight开发者带来一些新的思路,就是一个不错的开端。

  现在我们在工程中加入一个传送点的控件,这个控件仍然和升级特效一样,在0,0点为中心。

  然后画一个要旋转的基础图形,就是我们的圆圈,这里偷个懒,直接使用了升级特效的圆圈,当然了这个部分你仍然可以使用图片来代替这个矢量图,如果你有兴趣自己绘制,可以参考<Silverlight 游戏开发小技巧:角色升级特效>

  我们的目的是让这个旋转起来,中间的人物是我先放置作为参考物的,并且是正确的角度,所以需要Projection旋转到正确的角度:

  请注意,第一层的Grid控件是变换的3D角度,而它下一层的Gird则是用来整体旋转,因此要套两层的容器。

  现在打开故事板,建立一个名字为ANI_Show。

  你做一下旋转尝试呢,调整旋转的角度,当然了,要选定正确的Gird容器。

  现在我们调一组动画出来。

  添加关键帧,然后将0位置关键帧到新位置关键帧角度设置0-360度的动画。

  此时此刻这个故事板动画还是单向,我们要做成循环的动画,下面选择动画的名字,在播放模式地方选择Forever,现在这个效果会在0-360度的动画循环了。

  好了,Forever并不会在预览的时候自动重复的播放,而是在实际运行中才会,先把这个放一边。

  此事的传送点似乎少点什么,我们加一个点缀:

  这个圆圈和里面的是一样的,只是简单的复制,但是动画则是上下的循环,并且旋转的方向相反,下面一起来制作它:

  在开始的位置上加入一个关键帧。

  然后在上面旋转一半的位置上添加另外一个关键帧,移动小圆圈下来,而我们要在最后一帧的时候返回到最初状态。

  选择起始点的第一个关键帧,点击右键,选择Copy,这个操作会将这个关键帧的信息记录下来,你可以粘贴对象使它们也有对应的动画,在这里,我们仅仅是操作动画,从0的位置到新的位置,并且返回到初始状态。

  为了达到这个效果,只需要粘贴第一开始的关键帧,如上图所述,将时间轴移动到最后面,和前面的大圆圈旋转结束是一个位置上(此时大圆圈的旋转关键帧我调整到了第5秒,也就是说,它将用5秒播放从0到360的角度动画)。

  时间轴确定之后,直接选择粘贴即可。

  现在简单的播放测试一下,你会发现小圆圈上下移动。

  但是光有移动不行的,要有一些旋转的效果。

  因为圆圈并不需要所有的都旋转,所以,我们只需要选择它的子元素就行了。

  我们在这里将旋转动画设置成为-360度,这样看起来就更加自然一些。

  好了,我们制作完毕,可以仔细来看这个效果。

  在游戏世界中,传送点会有很多中形式,所以你可以使用一些属性来规定好这些动画信息,用以控制在不同的场景中的表现,关于传送点特效,已经介绍完毕,关于Projection就这样完毕了吗,当我们发送想象的时候,会有更多有趣的效果制作出来,我在下一篇会介绍有关Projection制作圆形冲击波的效果,敬请期待:)

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

时间: 2024-10-01 19:13:38

Silverlight 游戏开发小技巧:传送点特效制作的相关文章

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

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

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

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

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

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

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

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

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

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

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

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

一起谈.NET技术,Silverlight 游戏开发小技巧:冲击技能特效制作

玩游戏的时候,肯定对以角色为中心释放的冲击波肯定特别有震撼力,前面使用Silverlight的变换完成了升级特效和传送点特效,这次制作以中心为原点冲击的发散特效,相信效果会非常的不错. 首先仍然是建立一个控件,这个控件名字,我暂时命名为Shockwave.xaml,并且准备两张作为冲击波效果基础图像,这里面的图片可以随便更换,可以拜托美术的兄弟制作一下,如果你有兴趣,可以了解有关软件的使用方法,当然了,使用Blend也能做出来,只不过考虑麻烦程度,还是先以简单的为主,我找来两张图片简单做了处理.

Silverlight 游戏开发小技巧:“.NET研究”冲击技能特效制作

玩游戏的时候,肯定对以角色为中心释放的冲击波肯定上海徐汇企业网站设计与制作特别有震撼力,前面使用Silverlight的变换完成了升级特效和传送点特效,这次制作以中心为原点冲击的发散特效,相信效果会非常的不错. 首先仍然是建立一个控件,这个控件名字,我暂时命名为Shockwave.xaml,并且准备两张作为冲击波效果基础图像,这里面的图片可以随便更换,可以拜托美术的兄弟制作一下,如果你有兴趣,可以了解有关软件的使用方法,当然了,使用Blend也能做出来,只不过考虑麻烦程度,还是先以简单的为主,我

Silverlight 游戏开发小技巧:冲击技能特效制作

玩游戏的时候,肯定对以角色为中心释放的冲击波肯定特别有震撼力,前面使用Silverlight的变换完成了升级特效和传送点特效,这次制作以中心为原点冲击的发散特效,相信效果会非常的不错. 首先仍然是建立一个控件,这个控件名字,我暂时命名为Shockwave.xaml,并且准备两张作为冲击波效果基础图像,这里面的图片可以随便更换,可以拜托美术的兄弟制作一下,如果你有兴趣,可以了解有关软件的使用方法,当然了,使用Blend也能做出来,只不过考虑麻烦程度,还是先以简单的为主,我找来两张图片简单做了处理.