Silverlight C# 遊戲開發：草動系統（二）随風而動

上一個草動效果是完全的随機搖擺效果，并沒有特定的規律，看起來不是很自然，在實際的遊戲進行過程當中，玩家并不太注意是否真的和現實世界一模一樣，但是作為開發者，沒有理由拒絕極緻，這一次咱們一起做一個風吹過的草動效果。

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

真實中的風動效果，如下示意圖，是一種類似波動的形象，當然了，風完全看不到，那麼為了達到這個效果，應該從一個方向吹過，然後産生搖擺。

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

區塊概念如下：

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

将整個顯示區域劃分成小塊，每個小塊上可能沒有草，可能有草，也可能有很多草，每個格子是一個List，而這些格子正好組成一個數組——元素為List的二維數組，這樣做可以很清晰的知道哪些格子有哪些草，将其劃分以後周遊也是非常容易。為了達到這個效果，我們寫一個GrassLogic的類來組織和管理這個數組：

GrassLogic代碼

public class GrassLogic  

{  

List&lt;Grass01&gt;[,] GrassBuffArray;  

int ArrayW;  

int ArrayH;  

int RangeW;  

int RangeH;  

public GrassLogic(int arrayW, int arrayH, int rangeW, int rangeH)  

ArrayW = arrayW;  

ArrayH = arrayH;  

RangeW = rangeW;  

RangeH = rangeH;  

GrassBuffArray = new List&lt;Grass01&gt;[arrayH, arrayW];  

}  

public void AddGrass(Grass01 grass)  

int ty = (int)grass.Y / (RangeH / ArrayH);  

int tx = (int)grass.X / (RangeW / ArrayW);   

if (GrassBuffArray[ty, tx] == null)  

GrassBuffArray[ty, tx] = new List&lt;Grass01&gt;();  

GrassBuffArray[ty, tx].Add(grass);   

建立這個邏輯類的時候，我們會傳入數組的寬高和顯示範圍，用來計算草到底在什麼位置，是什麼歸屬，細心的朋友會發現grass帶有了X和Y兩個屬性成員，我們要對Grass01控件添加相應的屬性。另外我們還要為Grass01的控件增加一個動畫，以前的搖擺是循環的，這次我們需要一個隻執行一次的動畫（故事闆），打開Grass01.xaml把下面的代碼添加到&lt;UserControl.Resources&gt;内：

Wave故事闆代碼

&lt;Storyboard x:Name="Ani_Wave" AutoReverse="True"&gt; 

&lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="LayoutRoot"&gt; 

&lt;EasingDoubleKeyFrame KeyTime="0" Value="0"/&gt; 

&lt;EasingDoubleKeyFrame x:Name="WaveValue" KeyTime="0:0:1" Value="10"/&gt; 

&lt;/DoubleAnimationUsingKeyFrames&gt; 

&lt;/Storyboard&gt; 

修改Grass01.xaml.cs裡的代碼：

Grass01類代碼

public Grass01()  

InitializeComponent();  

image.CacheMode = new BitmapCache();   

public void GrassWave()  

Ani_Wave.Begin();  

public double X  

get { return Canvas.GetLeft(this); }  

set { Canvas.SetLeft(this, value); }  

public double Y  

get { return Canvas.GetTop(this); }  

set { Canvas.SetTop(this, value); Canvas.SetZIndex(this, (int)value); }  

上面的準備已經就緒，那麼我們如何産生風的自然波動呢，請看下圖示意：

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

是否有明白了呢，我們隻需要做一個X的遊标來辨別風吹到了哪裡，對此，我們需要對邏輯類做一些改造：

DispatcherTimer WaveTimer = new DispatcherTimer();  

WaveTimer.Tick += new EventHandler(WaveTimer_Tick);  

WaveTimer.Interval = TimeSpan.FromMilliseconds(300);  

int _marker = 0;  

void WaveTimer_Tick(object sender, EventArgs e)  

_marker += 1;  

if (_marker &gt;= ArrayW)  

_marker = 0;   

for (int i = 0; i &lt; ArrayH; i++)  

List&lt;Grass01&gt; items = GrassBuffArray[i, _marker];  

if (items == null)  

continue;  

foreach (var item in items)  

item.GrassWave();  

public void StartWave()  

WaveTimer.Start();  

素材來自《窩窩世界》，窩窩世界是Silverlight開發的回合制MMORPG網頁遊戲。

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