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