Silverlight C# 游戏开发:Flyer10完成"寻找"工作

2016-08-20 11:08:31来源:http://nowpaper.blog.51cto.com/3893223/712463作者:nowpaper人点击


上一次我们一起搞定了动画的一些效果,在最后给出了一排蝴蝶的随机扇动,今次我们一起研究一下互动元素的制作,完成初步能够互动的环节,这些过程用Blend做,就变得非常快速和容易,今次我们一起研究如何使用Blend制作Silverlight的事件,来达到我们期望的选定以及打乱动画的需求。


现在,我们先调整一下前面的工程,将界面布局完成,然后放入一个命名为Target的蝴蝶控件,用来标示到底哪个是要选择的目标。



现在将蝴蝶布置好,然后将他们都放置到一个Canvas当中,用Grid也可以,命名为ButterflyGoup,在后面我们用它来完成所有的蝴蝶扇动效果,做对象检索用,要将所有的Butterfly控件放在这个容器当中。



在MainPage.xaml.cs中加入下面的代码,很简单,只是一个定时器,做一个循环,这个循环用来产生随机的扇动效果。



上面的代码详细如下:


上面的代码

public MainPage()

{

// 为初始化变量所必需

InitializeComponent();



DispatcherTimer Loop = new DispatcherTimer();

Loop.Tick += new EventHandler(Loop_Tick);

Loop.Interval = TimeSpan.FromSeconds(4);

Loop.Start();

RandomTarget();

}



void Loop_Tick(object sender, EventArgs e)

{

Random rm = new Random((int)DateTime.Now.Ticks);

int i = 0;

while (i < 5)

{

i++;

int j = rm.Next(0, ButterflyGroup.Children.Count);

Butterfly tmp = ButterflyGroup.Children[j] as Butterfly;

tmp.FlapAnimation();

}

}



简单讲解一下,我们使用了一个范围为1-12的随机数,然后循环5次,每次取得ButterflyGroup容器的Children中的一个(注意,我们认定这里只有Butterfly控件),激活Flap动画,这个随机每4秒钟产生一次,以取得相应效果,运行起来就和上节中最后的Silverlight效果一致了。


我们需要一些互动环节,比如鼠标选定的操作,下面,我们开始做鼠标移入和移出的效果。


打开蝴蝶控件,选择LayoutRoot添加一个投影特效,设定效果。



创建一个动画,名字随便起,我用的是Ani_MouseEnter和Ani_MouseLeave,调时间轴,变化BlurRadius的数值,产生一个外圈扩散光圈的效果,注意移出和移入是相反的。



形成两个动画,入下图,Flap2是无用的,以前的不用管它。



现在控件鼠标移入和移出的时候产生相应的效果,通过鼠标事件来完成,在下面添加一个事件命名(这个命名是任意的),然后按回车。



将会进入到cs文件编辑界面当中,同理加入Leave的事件,分别加入Ani_MouseEnter.Begin()和Ani_MouseLeave.Begin()



好了,现在鼠标移入和移出的时候就会播放相应的动画,下面回到MainPage中,选择一个蝴蝶控件,在MouseLeftButtonDown加入一个SelectedButterfly事件,也就是说,当鼠标按下去的时候选择的控件会调用这个事件。



我们为每个控件,一共是12个全部加入这个事件方法,名字都是一样的,这样无论按下那个都会调用那个方法,但是我们怎么知道是哪个调用的呢?我们可以通过sender来取得,在Silverlight当中,Sender会告诉我们那个控件调用事件方法,因为只有蝴蝶会调用,只需要将sender做一下转换,sendr as Butterfly,当然安全考虑,可以做一个if(sendr is Butterfly)判断。


OK,现在我们有一个需求,要打乱12个蝴蝶排列,要做一个方法,下面代码中RandmTarget()方法来实现。



上面的代码中,要想达到一个随机打乱,在这里我们使用一个List临时记录随机数,然后将1-12放到到这个列表中,当然了,随机12以内的数字时,使用这个临时的List做检索,如果不存在这个数字就将其放到队列中,队列数满足12个就停止这个循环,这里用了一个%(取余)来取得一个12数字以内的功能。


当然了这个算法还有另外一种方式,就是从头循环,随机和12的范围内进行交换,进行几次后就乱了,我这里用的方法比较简单。


下面是直接的Silverlight效果,加了一些有趣的修饰,基本上来说和上面的制作方法相同,无非是在.xaml.cs代码中加几行而已


最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台