一起谈.NET技术,Silverlight 游戏开发小技巧:升级和传送点特效1

  这次我们将使用Projection完成一些有趣的RPG游戏中常用的特效:升级和传送点特效,我们不需要请特效师制作复杂绚丽的特效,而是只需要他们提供关键的几张图片或者设计样式,如果了您有本领教会他们使用Blend来做特效,那就太好了,好了,闲话不说,在Silverlight中制作下面的这种效果简直是手到擒来。

  这个拍摄的角度效果不是很合适,但是大概能够看清楚,这时一个升级的特效动画,我们今天将会完成这个效果,就像下面这样

  虽说用Blend做这样的Silverlight特效易如反掌,但是读者还是要了解一下Projection的基础知识,在前面两篇当中已经做了详细的例子,如果需要补课的请再看一遍。

  首先你需要一个工程,然后建立一个控件名字暂时叫Effect_Levelup,现在预备一个角色的参照,按照下面的位置放置,原因是你需要以原点定位:

  为了操作起来方便,建议将LayoutRoot转换成为Canvas控件,为什么要将角色这么放置,需要了解Silverlight的容器概念,控件的位置定位是按照左上角定位,这和屏幕的关系是一样,所以这样做的做法是让未来的控件直接和角色的中心点对齐(Center)。

  下面就是考验美术设计能力的时候了,我们的目标效果是下面的样子:

  不要被这些东西吓坏,其实做起来一点都不难,我们这里只是使用来的Projection的3D旋转,其他的只是使用简单的位移而已。

  我们先将这个圈圈画出来:

  这个圈只是填充了一个紫色,然后使用了柔化特效,你可以在Effect属性中点击设置

  下面我们在复制一个这个圈,但是去掉模糊特效,并且将颜色填充

  颜色设置请参看右边,你可能有趣的发现并不是填充色造成的这个效果,而是Stroke,建议做一些尝试吧。

  然后我们再画几个内圈:

  这些内圈可以使用上面的画成一个貌似闪光的圆环,在这些上面做一些妆点。

  装饰一些漂亮的发光球,你需要复制一个中心环,用中心渐变填充,将颜色色值的A调成透明,几个复合颜色下来就能够得到一个“小亮点”,下一步将他们组合就能够有我们所期望的效果。

  好了,现在将刚才画的圈圈全部组合起来成为一个Grid:

  下一步继续将组合的Grid再组合到一个新的Grid中,为什么这么做呢,因为要变换透视感觉,在后面的动画中的旋转做准备

  到这一步大家似乎能够看出有点眉目了,关于前后的渐变不透明,也是通过不透明Mask的填充得到

  加入几根光柱让效果更加显著:

  只需要用Ellipse即可,我们用不上太复杂的Path,最后为了让这个升级动画更丰富一点,加入几个套圈。

  这几个套圈的制作方法几乎和前面的没什么区别,这里主要是再次为大家讲解有关三维旋转的例子。

  为了更好的操作,现在将他们合并到一个容器当中,

  下面就是调动画的事件了,我计划将在第二个部分做详细的讲解,这里是一个完成版本的图片,请参看吧

  这个动画做起来并不难,难就在对这些控件之间的关系理解,最后,我们把角色的参照图给删除掉,然后生成工程,在MainPage里加入这个控件,看看效果。

  我们前面把特效放置在左上0,0点,并且使用Canvas作为容器,所以才会产生内容不会变形控件。

  然后我们在Mainpage里简单的写一些逻辑和代码,请注意此事我已经将中间的升级按钮命名为btn_levelup,特效动画命名为effect_Levelup,升级特效的控件中的故事板动画名字为ANI_Show

Code Snippet

  1. public partial class MainPage : UserControl
  2. {
  3.     public MainPage()
  4.     {
  5.         InitializeComponent();
  6.         effect_Levelup.ANI_Show.Begin();
  7.         btn_levelup.Click += new RoutedEventHandler(btn_levelup_Click);
  8.     }
  9.  
  10.     void btn_levelup_Click(object sender, RoutedEventArgs e)
  11.     {
  12.         effect_Levelup.ANI_Show.Begin();
  13.     }
  14. }

  这段代码只是点击的时候就会触发动画播放。

  具体效果,请参看下面的直接实例,关于传送点的特效制作,咱们明天再说:)

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

时间: 2024-10-26 15:10:27

一起谈.NET技术,Silverlight 游戏开发小技巧:升级和传送点特效1的相关文章

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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