Silverlight C# 游戏开发：草动系统（二）随风而动

上一个草动效果是完全的随机摇摆效果，并没有特定的规律，看起来不是很自然，在实际的游戏进行过程当中，玩家并不太注意是否真的和现实世界一模一样，但是作为开发者，没有理由拒绝极致，这一次咱们一起做一个风吹过的草动效果。
 

真实中的风动效果，如下示意图，是一种类似波动的形象，当然了，风完全看不到，那么为了达到这个效果，应该从一个方向吹过，然后产生摇摆。
 

问题来了，如何知道风碰到了那些草，可能最简单的方式是遍历一下所有的草，看看符合条件的就执行一下动画，但是效率不可恭维，当屏幕上超过一定数量草的时候，每次的遍历绝对是一个非常大的开销，所以可以结合以前我提出的区块式循环概念将判断操作分成块来完成，达到性能提升快速执行的效果。
区块概念如下：

将整个显示区域划分成小块，每个小块上可能没有草，可能有草，也可能有很多草，每个格子是一个List，而这些格子正好组成一个数组——元素为List的二维数组，这样做可以很清晰的知道哪些格子有哪些草，将其划分以后遍历也是非常容易。为了达到这个效果，我们写一个GrassLogic的类来组织和管理这个数组：

GrassLogic代码

1. public class GrassLogic  
2. {  
3. List<Grass01>[,] GrassBuffArray;  
4. int ArrayW;  
5. int ArrayH;  
6. int RangeW;  
7. int RangeH;  
8. public GrassLogic(int arrayW, int arrayH, int rangeW, int rangeH)  
9. {  
10. ArrayW = arrayW;  
11. ArrayH = arrayH;  
12. RangeW = rangeW;  
13. RangeH = rangeH;  
14. GrassBuffArray = new List<Grass01>[arrayH, arrayW];  
15. }  
16. public void AddGrass(Grass01 grass)  
17. {  
18. int ty = (int)grass.Y / (RangeH / ArrayH);  
19. int tx = (int)grass.X / (RangeW / ArrayW);   
20. if (GrassBuffArray[ty, tx] == null)  
21. GrassBuffArray[ty, tx] = new List<Grass01>();  
22. GrassBuffArray[ty, tx].Add(grass);   
23. }  
24. }  

 

创建这个逻辑类的时候，我们会传入数组的宽高和显示范围，用来计算草到底在什么位置，是什么归属，细心的朋友会发现grass带有了X和Y两个属性成员，我们要对Grass01控件添加相应的属性。另外我们还要为Grass01的控件增加一个动画，以前的摇摆是循环的，这次我们需要一个只执行一次的动画（故事板），打开Grass01.xaml把下面的代码添加到<UserControl.Resources>内：

Wave故事板代码

1. <Storyboard x:Name="Ani_Wave" AutoReverse="True"> 
2. <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="LayoutRoot"> 
3. <EasingDoubleKeyFrame KeyTime="0" Value="0"/> 
4. <EasingDoubleKeyFrame x:Name="WaveValue" KeyTime="0:0:1" Value="10"/> 
5.  
6. </DoubleAnimationUsingKeyFrames> 
7. </Storyboard> 
8.    
9.  

修改Grass01.xaml.cs里的代码：

Grass01类代码

1. public Grass01()  
2. {  
3. InitializeComponent();  
4. image.CacheMode = new BitmapCache();   
5. }  
6. public void GrassWave()  
7. {  
8. Ani_Wave.Begin();  
9. }  
10.  
11. public double X  
12. {  
13. get { return Canvas.GetLeft(this); }  
14. set { Canvas.SetLeft(this, value); }  
15. }  
16. public double Y  
17. {  
18. get { return Canvas.GetTop(this); }  
19. set { Canvas.SetTop(this, value); Canvas.SetZIndex(this, (int)value); }  
20. }  
21.    
22.  

上面的准备已经就绪，那么我们如何产生风的自然波动呢，请看下图示意：

是否有明白了呢，我们只需要做一个X的游标来标识风吹到了哪里，对此，我们需要对逻辑类做一些改造：

GrassLogic代码

1. public class GrassLogic  
2. {  
3. List<Grass01>[,] GrassBuffArray;  
4. int ArrayW;  
5. int ArrayH;  
6. int RangeW;  
7. int RangeH;  
8. DispatcherTimer WaveTimer = new DispatcherTimer();  
9. public GrassLogic(int arrayW, int arrayH, int rangeW, int rangeH)  
10. {  
11. ArrayW = arrayW;  
12. ArrayH = arrayH;  
13. RangeW = rangeW;  
14. RangeH = rangeH;  
15. GrassBuffArray = new List<Grass01>[arrayH, arrayW];  
16. WaveTimer.Tick += new EventHandler(WaveTimer_Tick);  
17. WaveTimer.Interval = TimeSpan.FromMilliseconds(300);  
18. }  
19. int _marker = 0;  
20.  
21. void WaveTimer_Tick(object sender, EventArgs e)  
22. {  
23. _marker += 1;  
24. if (_marker >= ArrayW)  
25. _marker = 0;   
26. for (int i = 0; i < ArrayH; i++)  
27. {  
28. List<Grass01> items = GrassBuffArray[i, _marker];  
29. if (items == null)  
30. continue;  
31. foreach (var item in items)  
32. {  
33. item.GrassWave();  
34. }  
35. }  
36. }  
37. public void AddGrass(Grass01 grass)  
38. {  
39. int ty = (int)grass.Y / (RangeH / ArrayH);  
40. int tx = (int)grass.X / (RangeW / ArrayW);   
41. if (GrassBuffArray[ty, tx] == null)  
42. GrassBuffArray[ty, tx] = new List<Grass01>();  
43. GrassBuffArray[ty, tx].Add(grass);   
44. }  
45. public void StartWave()  
46. {  
47. WaveTimer.Start();  
48. }  
49. }  
50.    
51.  

加入了一个Timer来循环逻辑，按照格子逐步的推进，执行下面对应的草的动画，当推进到底的时候，从头来过，好了，基本上已经写完，可能需要在MainPage里将生成的草添加到GrassLogic逻辑中，使用AddGrass方法即可，其实这里有一些并不是很严谨的地方，例如移除之类的操作，相信各位有自己的玩法，我的方式是直接通过访问图层然后进行添加操作，移除也是如此，不过在这里不在进行这方面的讨论，请直接参看最终效果：  

源代码如下：草动系统（二）随风而动，可以通过上面的滑杆调整摆动的幅度，最高20，最低1，可以看看那种情况更加自然，人物控制使用键盘WASD

素材来自《窝窝世界》，窝窝世界是Silverlight开发的回合制MMORPG网页游戏。

本文转自nowpaper 51CTO博客，原文链接:http://blog.51cto.com/nowpaper/712376