开发者社区> 科技小能手> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Silverlight 游戏开发小技巧:昼夜交替动画

简介:
+关注继续查看

记得在WP7上玩一个游戏有段动画很有趣,是背景在进行昼夜交替,一会儿白天太阳出来白天了,一会儿月亮蹦出来夜晚了,在以前做C++程序的时候曾经实现过类似的效果,今天早上移植了一下到Silverlight当中效果还是不错,当然了,有了Blend神器,就完全不用通过代码的方式实现,真的方便了很多。

以前的效果预览:

 

由于条件所限定,本篇中实现的效果仅仅为一个引子,更细的细节,还需要自行制作,请注意,本篇的程序尺寸为600x400的标准。

为了方便起见,就不用Blend来画太阳和月亮了,直接使用了两张图片:

 

加入工程后,打开MainPage控件,添加两个Rectangle,分别来表示天空和海面:

 

上面的两个矩形都填充了渐变颜色,暂时表示一下。

添加月亮进来,移动到中间

 

下面是一个小的布局技巧,为了避免月亮随着布局而发生怪异的变化,把宽高定死,并且设定为绝对中间对齐

 

然后太阳也是这么添加到界面中,现在将海移动到前面来,为了在后面的动画中挡住太阳和月亮:

 

那么现在开始制作动画了,新建一个故事板动画,名字为ANI_Loop,然后为太阳和月亮添加关键帧,并且移动到海面之下:

 

现在把月亮移动上来,毕竟一天之际在于午夜时分么。

 

在2秒的地方添加一个关键帧,把月亮拉到海面以下:

 

下面就是把太阳升起来:

 

 

好了,现在形成一个交替循环,选择ANI_Loop把自动回放选上,把播放测试设为Forever

 

现在可以播放一下,看看是不是循环的出来下去呢,为了增加一些动感,我决定加一个缓冲效果,现在选择所有的帧,看好,可是所有帧哦。

 

选择Back的第三个缓冲效果。

 

现在播放起来看看,是否很有趣了呢,太阳和月亮真的就是“蹦”出来的,当然了,你可以尝试其余的缓冲效果,看看是否能形成更有趣的感觉。

不过大家肯定不会就此满意,因为这天空海面实在太丑了,而且太阳和月亮出来也没有变化,现在下面就开始完成这个问题:

 

现在把时间轴移动到开始,开始调天空和海面的颜色,大家可以依据自己的想法调整,直到自己满意,此时可以用月亮做参照。

同样,再将第2秒,即清晨的颜色调出来,此事不需要关闭动画,在Silverlight里Color是可以作为动画的的类型之一。

 

以及在最后一帧的白天设置出来。

 

有的时候你可能需要美术设计师的支持,才能得到最佳的表现效果,现在播放一下,看看是否不错呢,日月交替,昼夜交替,如果你想拉长时间,只需要把关键帧调整即可。

我们在下面加一下小细节,让整个的效果看起来更加真实:月亮的泛光、海面、小星星的制作

为了不产生混乱,现在将动画的编辑模式关闭,点击界面上方的小红色按钮关闭。

 

选择月亮,为它添加一个投影的Effect

 

参数设置如下:

 

月亮看起来更加真实了,而海面的话,需要一张海面的波纹图片,添加到海面的Rectangle的下面,并将海面的透明度降低:

 

关于星星的制作会用上另外一个Effect效果——模糊,画一个小圆圈,5x5就够了,然后添加模糊效果,将参数设置如下:

 

我在旁边放了一个小参照,看看是不是很像呢:)

当然了这些细节将会增加更多的设计和编码时间,例如白天星星是不会出现的、波纹只是不动肯定不会好看、甚至太阳和月亮的在海面上的投影,这些细节都决定这个场景的真实性,我相信各位能够做的更好。

最后不要忘记在构造函数中添加一个Begin,否则这个动画不会自动的运行。

 

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


本文转自nowpaper 51CTO博客,原文链接:http://blog.51cto.com/nowpaper/712755


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
简单的Silverlight动画
简单的Silverlight动画   看图说话 先在Design工具中画上一个小宝宝。   导出Silverlight中的Xaml格式   打开Blend 2 sp1 建立一个Silverlight 2 Application项目   把刚才的Xaml文件复制到Blend中   创建一个摇头晃脑的动画   设置动画的AutoReverse为true,并且为永远循环。
492 0
Silverlight初级教程-动画
Silverlight初级教程 动画 在这一节里将要用到在“认识工作区”中提到的时间抽了。这里将和学习flash的过程一样做一个最简单的动画。 silverlight中的动画是以“storyboard”的形式表现出来。
715 0
一起谈.NET技术,Silverlight 游戏开发小技巧:动感弹出动画
  玩Silverlight的朋友一定对自带控件ChildWindow印象深刻,Show的时候仿佛从远处弹了出来,这个效果制作起来并不复杂,下面就将介绍这个小技巧,本篇并非是一个新鲜的技巧,而是一般的故事板结合变换放缩实现。
815 0
Silverlight 游戏开发“.NET研究”小技巧:星球大战字幕效果
  各位科幻迷可能对星球大战的字幕效果印象深刻,这个电影字幕表现手法曾经风靡大小美国影片,甚至超人影片和电视也曾经用此来做开场和结尾字幕,今天我就将这个效果在blend里面制作技巧告诉大家,下面是星球大战的图片:   可能大家觉得这做成一个游戏开发技巧有点牵强,我计划以此作为引子,引出有关于Silverlight特效制作的关键知识点——Projection,在直接翻译上是投影的意思,但是一般我们称之为3D变换,RenderTransform一般是2D的变换,如果使用了Projection那么就能弄出非常有趣的效果。
823 0
Silverlight 游“.NET研究”戏开发小技巧:扇形排列元素
  斗地主风靡了大江南北,在春晚都做免费性推广,棋牌游戏平台几乎将其作为标配,但是牌类游戏总是一成不变的样子——横向排列,如果扇形排列应该更加符合真实,最近在WP7上玩了一个UNO游戏就是用扇形排列,感觉很不错,今天咱们照猫画虎,在Silverlight上实现一个扇形的手牌效果。
886 0
一起谈.NET技术,Silverlight 游戏开发小技巧:扇形排列元素
  斗地主风靡了大江南北,在春晚都做免费性推广,棋牌游戏平台几乎将其作为标配,但是牌类游戏总是一成不变的样子——横向排列,如果扇形排列应该更加符合真实,最近在WP7上玩了一个UNO游戏就是用扇形排列,感觉很不错,今天咱们照猫画虎,在Silverlight上实现一个扇形的手牌效果。
847 0
23703
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载