美术

当前位置:北京快三 > 美术 > Silverlight 游戏开发小技巧:昼夜交替动画

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

来源:http://www.yylbdq.com 作者:北京快三 时间:2019-10-09 23:12

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

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

以前的效果预览:

北京快三 1

北京快三 2

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

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

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

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

北京快三 3

北京快三 4

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

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

北京快三 5

北京快三 6

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

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

北京快三 7

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

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

北京快三 8

北京快三,现在打开故事板,建立一个名字为ANI_Show

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

北京快三 9

北京快三 10

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

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

现在我们调一组动画出来

北京快三 11

北京快三 12

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

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

北京快三 13

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

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

北京快三 14

北京快三 15

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

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

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

北京快三 16

北京快三 17

下面就是把太阳升起来:

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

北京快三 18

北京快三 19

北京快三 20

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

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

北京快三 21

北京快三 22

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

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

北京快三 23

北京快三 24

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

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

北京快三 25

本文由北京快三发布于美术,转载请注明出处:Silverlight 游戏开发小技巧:昼夜交替动画

关键词:

上一篇:重访南国(四)

下一篇:没有了