Silverlight C# 遊戲開發：Flyer10完成"尋找"工作

上一次我們一起搞定了動畫的一些效果，在最後給出了一排蝴蝶的随機扇動，今次我們一起研究一下互動元素的制作，完成初步能夠互動的環節，這些過程用Blend做，就變得非常快速和容易，今次我們一起研究如何使用Blend制作Silverlight的事件，來達到我們期望的標明以及打亂動畫的需求。

現在，我們先調整一下前面的工程，将界面布局完成，然後放入一個命名為Target的蝴蝶控件，用來标示到底哪個是要選擇的目标。

<a target="_blank" href="http://blog.51cto.com/attachment/201111/132946511.jpg"></a>

現在将蝴蝶布置好，然後将他們都放置到一個Canvas當中，用Grid也可以，命名為ButterflyGoup，在後面我們用它來完成所有的蝴蝶扇動效果，做對象檢索用，要将所有的Butterfly控件放在這個容器當中。

<a target="_blank" href="http://blog.51cto.com/attachment/201111/132958575.jpg"></a>

在MainPage.xaml.cs中加入下面的代碼，很簡單，隻是一個定時器，做一個循環，這個循環用來産生随機的扇動效果。

<a target="_blank" href="http://blog.51cto.com/attachment/201111/133010249.jpg"></a>

上面的代碼詳細如下：

上面的代碼

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 &lt; 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添加一個投影特效，設定效果。

<a target="_blank" href="http://blog.51cto.com/attachment/201111/133024989.jpg"></a>

建立一個動畫，名字随便起，我用的是Ani_MouseEnter和Ani_MouseLeave，調時間軸，變化BlurRadius的數值，産生一個外圈擴散光圈的效果，注意移出和移入是相反的。

<a target="_blank" href="http://blog.51cto.com/attachment/201111/133034989.jpg"></a>

形成兩個動畫，入下圖，Flap2是無用的，以前的不用管它。

<a target="_blank" href="http://blog.51cto.com/attachment/201111/133043333.jpg"></a>

現在控件滑鼠移入和移出的時候産生相應的效果，通過滑鼠事件來完成，在下面添加一個事件命名（這個命名是任意的），然後按回車。

<a target="_blank" href="http://blog.51cto.com/attachment/201111/133053733.jpg"></a>

将會進入到cs檔案編輯界面當中，同理加入Leave的事件，分别加入Ani_MouseEnter.Begin()和Ani_MouseLeave.Begin()

<a target="_blank" href="http://blog.51cto.com/attachment/201111/133106195.jpg"></a>

好了，現在滑鼠移入和移出的時候就會播放相應的動畫，下面回到MainPage中，選擇一個蝴蝶控件，在MouseLeftButtonDown加入一個SelectedButterfly事件，也就是說，當滑鼠按下去的時候選擇的控件會調用這個事件。

<a target="_blank" href="http://blog.51cto.com/attachment/201111/133122512.jpg"></a>

我們為每個控件，一共是12個全部加入這個事件方法，名字都是一樣的，這樣無論按下那個都會調用那個方法，但是我們怎麼知道是哪個調用的呢？我們可以通過sender來取得，在Silverlight當中，Sender會告訴我們那個控件調用事件方法，因為隻有蝴蝶會調用，隻需要将sender做一下轉換，sendr as Butterfly，當然安全考慮，可以做一個if（sendr is Butterfly）判斷。

OK，現在我們有一個需求，要打亂12個蝴蝶排列，要做一個方法，下面代碼中RandmTarget（）方法來實作。

<a target="_blank" href="http://blog.51cto.com/attachment/201111/133137368.jpg"></a>

上面的代碼中，要想達到一個随機打亂，在這裡我們使用一個List臨時記錄随機數，然後将1-12放到到這個清單中，當然了，随機12以内的數字時，使用這個臨時的List做檢索，如果不存在這個數字就将其放到隊列中，隊列數滿足12個就停止這個循環，這裡用了一個%（取餘）來取得一個12數字以内的功能。

當然了這個算法還有另外一種方式，就是從頭循環，随機和12的範圍内進行交換，進行幾次後就亂了，我這裡用的方法比較簡單。

下面是直接的Silverlight效果，加了一些有趣的修飾，基本上來說和上面的制作方法相同，無非是在.xaml.cs代碼中加幾行而已

本文轉自nowpaper 51CTO部落格，原文連結:http://blog.51cto.com/nowpaper/712463