Flyer02最后，我們得到了一個屏幕，上面有云彩向上飄去，但是很容易發現有一個很明顯的瑕疵，就是云彩不會限定在一個畫面中，那么能不能控制在一個指定的范圍內呢。

Sivlerlight中限定一個UIElement的邊界，可以使用Clip來實現，在能夠顯示圖片主窗口元素上添加如下代碼：

?

GameMainWindow.Clip = new RectangleGeometry() { Rect = new Rect(0, 0, 400, 400) };

?

?

現在再運行一下，看到了吧，是否達到了我們想要的效果了呢？

是不是很有趣，讓我們想想，如果能夠裁剪的方式獲得一個限定區域，那么是不是可以將一組圖片的各個部分拆分出來呢？就如資源目錄中的filyer.png，能否將每個部分拆分出來顯示？Clip完全可以做到，但是并不高效，其原因是，Clip的裁剪并不會減少整張圖片的大小，這意味著有多少動作幀內存中就要載入多少張整張圖片，很顯然，絕不優美，相信玩家也不會為此買內存的單，那么是不是就沒有辦法了呢？能否有一個好的方法，只加載一個張圖片然后處理分成多張小圖，對內存的占用就低的多了。

可以通過WriteableBitmap來實現分成小圖，WriteableBitmap是Silverlight提供操作Bitmap數據的BitmapSouce，通過這個類可以生成多張指定大小的圖片，在內存上不需要加載過多的圖，只需要一張大圖即可，那么我們的編寫思路圖如下：

?

通過截取整張圖片當中的一個部分，渲染到WriteableBitmap當中，然后轉換成為Image控件的Souce，最后通過一個定時器完成動畫效果

一如既往，我們只使用代碼實現這個部分，那么需要創造一個類，這個類的名字叫ClassFlyer

代碼如下：

Image _image; ImageSource[,] FlyerFrames = new ImageSource[6, 8]; public ClassFlyer() { _image = new Image(); BitmapImage bitmap = new BitmapImage(new Uri(@"Src/flyer.png", UriKind.Relative)); bitmap.ImageOpened += new EventHandler<RoutedEventArgs>(bitmap_ImageOpened); this.Children.Add(_image); }//之所以在這里處理是因為Silverlight的圖片下載是異步的，只有載入完畢后才好處理
void bitmap_ImageOpened(object sender, RoutedEventArgs e)
{ _image.Source = sender as BitmapImage;
for (int j = 0; j < 6; j++)
{
for (int i = 0; i < 8; i++) {
WriteableBitmap wb = new WriteableBitmap(64,64);
wb.Render(_image, new TranslateTransform() { X = -64 * i, Y = -64 * j }); wb.Invalidate();
FlyerFrames[j, i] = (ImageSource)wb; } }
}

最終的目的是得到了一個FlyerFrames的禎組，這組圖片涵蓋了以行為劃分的動畫序列，清晰的描述角色們的狀態

現在看起來容易多了，實現動畫只是找對正確的行和列，建議實現一個簡單的枚舉，當然了，C#不像C++那般方便的將enum轉換成為數字，所以我的實現方法是用const

?

public class EmFlyerState { public const int 正常 = 0;
public const int 向上 = 1;
public const int 向右 = 2;
public const int 向左 = 3;
public const int 向下 = 4;
public const int 擊中 = 5;
}

現在下面重要的是動畫，動畫是按照一個時間的循環，這種有很多方法來實現，在這里為了方便理解，用一個DispatcherTimer

DispatcherTimer dispatcherTimer = new DispatcherTimer();
dispatcherTimer.Tick += new EventHandler(TickGameFrameLoop);
dispatcherTimer.Interval = TimeSpan.FromMilliseconds(30); //重復間隔
dispatcherTimer.Start();
private void TickGameFrameLoop(object sender, EventArgs e)
{

}

也許你覺得現在有點意思了，但是還無法實現控制飛行員動作，為了達到這個目的需要為MainPage加上按鍵事件，

在MainPage類中加上下述代碼，然后實現KeyDown和KeyUp的方法，這里做一個特別的說明，為什么還要檢測KeyUp，這是因為當玩家松開鍵盤的時候，可以讓飛行員的角色變為正常狀態。

this.KeyDown += new KeyEventHandler(MainPage_KeyDown);
this.KeyUp += new KeyEventHandler(MainPage_KeyUp);

在KeyDown和KeyUp事件里，我們可以寫下如下代碼來控制角色的狀態，假設我們之前定為ClassFlyer的實例名為Hero

?

void MainPage_KeyDown(object sender, KeyEventArgs e)
{
switch (e.Key)

{??????????????????

case Key.Up:

Hero.Flyerstate = EmFlyerState.向上;

break;

case Key.Down:

Hero.Flyerstate = EmFlyerState.向下;

break;

case Key.Left:

Hero.Flyerstate = EmFlyerState.向左;

break;

case Key.Right:

Hero.Flyerstate = EmFlyerState.向右;

break;

}

}

void MainPage_KeyUp(object sender, KeyEventArgs e)

{

Hero.Flyerstate = EmFlyerState.正常;

}

基本上我們已經接近于完成，但是還有一些細節代碼需要整理，在這里就不一一做講解了，有興趣的請直接看代碼：）

點擊這里進行下載：FlyerGame2

?

?

總結

以上是生活随笔為你收集整理的Silverlight C# 游戏开发：Flyer03大图裁剪，高效动画的艺术的全部內容，希望文章能夠幫你解決所遇到的問題。

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