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

上一次我們一起搞定了動畫的一些效果，在最後給出了一排蝴蝶的隨機扇動，今次我們一起研究一下互動元素的製作，完成初步能夠互動的環節，這些過程用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代碼中加幾行而已，原始碼在這裡，下載參考。