Silverlight 游戲開發小技巧：軌跡跟隨效果

我們通常在游戲中有各種各樣的粒子效果，其中有一種就是跟隨鼠標發生的軌跡動畫，在鼠標經過的地方會產生一些特效，這種方式我們在粒子當中經常使用，本篇使用一個簡單的例子再次將粒子系統改善，更加精簡更加高效。

如果有興趣的同學可以讀一下以前的

Silverlight C# 游戲開發：絢麗的粒子特效-粒子效果（二）

但是這今次實現方法更加簡單更加偏向于美術設計師，因為這次的編程將基本上在Blend中實現。

在繼續往下看之前，你需要了解MouseMove事件，以及基本的控件、故事板的知識，只有這樣在下面的操作中比較容易理解，而我們目的效果是，當鼠標經過一個地方，會出現閃爍的小星星。

首先先建立工程，然后建立一個用戶控件UserControl，我們起名為FlashPoint，顧名思義這是一個閃爍的點點。

可能建立方式各有不同，但是我們只是需要一個沒有填充色的LayoutRoot，然后在最左上為中心畫一個我們想要的圖形，當然了，你也可以使用圖片。

現在創建一個故事板動畫，同樣動畫的是怎么編排可以看各自的需求設計。

在下面的例子中實現一個閃爍出現的小方塊然后漸隱消失掉。

選擇需要動畫的目標，添加一個關鍵幀，然后找到這個目標控件的變換屬性（Transform），設置為0，0，這樣在動畫播放的最開始是完全不可見。

然后拖動故事板的時間線，在1秒的位置上增加另外一個關鍵幀，將關鍵幀上的XY放縮變換設置為1，1，設置位置就是第一個關鍵幀的地方。

現在選擇關鍵幀，我們可以使用Silverlight自帶的緩沖（Easing）方法，制作閃爍出現的效果，我們選擇Elastic Out的方法，你可以播放一下看看感覺：）

好了，最后在1.5秒的位置設置新的關鍵幀，將不透明度設置成0%，再次播放一下，你會看到一個突然蹦出的小方塊，然后消失掉的故事板動畫。

好了，截止現在基本的粒子控件制作完畢，現在打開MainPage控件將背景設置成為灰色或者漸變色，因為上面的小方塊是白色的，為了更好看，并且把LayoutRoot從Grid改成Canvas，這樣可以方便我們對位置的操作，

下面就是Coding時間了，在這里我將弄幾個小的技巧增加程序的便利性。

在FlashPoint.cs的類構造中，添加一行代碼，就是故事板的開始動畫，比如說：Storyboard1.Begin();

現在打開VS或者在Blend里修改.cs文件，在MainPage.cs中加入鼠標的移動事件或者重寫本身的OnMouseMove方法，我用的是重寫：）

Code Snippet

public partial class MainPage : UserControl

{

????public MainPage()

????{

????????InitializeComponent();

????}

????protected override void OnMouseMove(MouseEventArgs e)

????{

????????var pos = e.GetPosition(this);

????????var point = new FlashPoint();

????????LayoutRoot.Children.Add(point);

????????Canvas.SetLeft(point,pos.X);

????????Canvas.SetTop(point, pos.Y);

????????base.OnMouseMove(e);

????}

}

好了，現在運行一下看看，

但是現在仍有很多的問題，比如這么new出來的對象一定是非常多的，那么怎么才能正確的將控件對象移除掉呢？在我的另外一片有關于粒子文章中，使用的方式是計時器的循環運算，然后反著來遍歷，將符合條件的移除掉，這是因為粒子具有很不確定的因素，所以需要遍歷處理，更何況還涉及到軌跡的計算邏輯，雖然說我們比較明確動畫的時間長度，可以使用計時器從集合中RemoveAt，而這次我們將使用一個更加簡便的方法解決這個小瑕疵。請看下面的代碼

Code Snippet

{

????public FlashPoint()

????{

????????InitializeComponent();

?

????????Storyboard1.Completed += new EventHandler(Storyboard1_Completed);

????????Storyboard1.Begin();

????}

????void Storyboard1_Completed(object sender, EventArgs e)

????{

????????Storyboard1.Completed -= Storyboard1_Completed;

????????var parent = this.Parent as Panel;

????????if (parent != null)

????????????parent.Children.Remove(this);

????}????????

}

這是我們自定義的控件FlashPoint的構造和事件代碼，在構造函數中注冊動畫完成事件，然后在完成的部分實現我們的具體邏輯，我們目的是讓父一級移除我們，所以先要判定是否是一個標準的Panel的容器，Panel類請參看官方Silverlight文檔。

本工程的源代碼下載如下：點擊直接下載

實際展示效果：

推薦Silverlight游戲開發博客：深藍色右手

posted on 2011-02-03 00:53 nowpaper 閱讀(...) 評論(...) 編輯 收藏

轉載于:https://www.cnblogs.com/nowpaper/archive/2011/02/03/1948913.html

總結

以上是生活随笔為你收集整理的Silverlight 游戏开发小技巧：轨迹跟随效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。