前面的章節(jié)主要針對地圖表現(xiàn)層進行講解。通常來說，簡單的游戲光有它就足夠了；但是為了達到更加真實的光影效果，模擬真實的虛擬世界，我們還得繼續(xù)在地圖上下大工夫。本節(jié)將就如何實現(xiàn)地圖中的遮罩層，即物體對角色的遮擋進行詳細講解。
首先我們來看一張比較完善的地圖應(yīng)該包含哪些內(nèi)容：
從上圖可以看到，我將一張地圖引擎結(jié)構(gòu)分成了3層（難道這就是傳說中的地圖三層架構(gòu)？汗一個先。。。）。中間的圖片代表地圖的表現(xiàn)層，也就是我們視覺上直接看到的地圖界面。關(guān)于它，前面的章節(jié)中已有非常多的講解，這里就不再累述了。接著我們再看最下面那張：地圖底層，它由黑白兩大顏色組成，似乎還有一圈黃色在右小角呢。有的朋友覺得它很奇怪，似乎摸不著頭腦，好象和地圖沒啥關(guān)系吧？其實只要將它和第二張圖進行分析比較就會發(fā)現(xiàn)，它上面的黑色就是地圖中障礙物區(qū)域，白色則為可以通行的區(qū)域，那黃色呢？？還有朋友要問了：前面的章節(jié)不是有講A*尋路嗎？通過Matrix[]數(shù)組來構(gòu)建障礙物不是很完美嗎？那為什么還要多此一舉再為每張地圖構(gòu)造一張同比例的障礙物底層圖呢？我只想告訴廣大的朋友們：它的作用可大了，尤其尤其在目前的Silverlight游戲開發(fā)中，它的作用及拓展性可謂承前啟后，用科學(xué)發(fā)展觀的話講就是：面向?qū)ο蟮乃季S開發(fā)Silverlight游戲。太多太多的懸念，才能有更多的期待，那么關(guān)于這張神秘底層圖的講解，請聽下回分析。
讀者聲音：同志，你也太假了吧，這樣就講完這節(jié)啦？BS你一下。
作者：安啦，怎么可能嘛，這叫倒敘懂不？（啥叫倒敘其實俺也不太。。。？嘿嘿）
不瞎扯啦，還剩一張圖沒講呢，對啦，本節(jié)的主角就是它了：地圖遮罩層。
首先來講講實現(xiàn)原理吧：我們可以從地圖表現(xiàn)層（下文直接就稱之地圖好了）中看到，遮擋人物的只有一棵樹。那么我們想要在此地圖上實現(xiàn)遮罩效果，首先就得用Photoshop將這棵樹給截出來，當然越精確越好，然后將它單獨保存成一張背景透明的圖片（通常Windows桌面RPG游戲中會將所有的遮擋物統(tǒng)一規(guī)格，例如50*50一張（如大于則分兩張、三張…等等），然后將全部遮擋物圖片放進一個龐大的二進制文件中，顯然這對于Silverlight基于網(wǎng)頁的游戲是不容許的），如果一張地圖上有多個遮擋物，同樣將他們都截取出來然后依次命名保存。準備工作做完后，我們就需要將遮罩層的圖片放在頂層，將地圖放在底層，人物等放在中間層。最后分別將遮罩層的所有圖片布局到它們應(yīng)該遮擋的位置上，這樣就完成了所有的遮擋工作了。好了。下面我將用代碼來實現(xiàn)它。
這里我以下圖作為地圖實例：
很明顯該地圖有三處障礙物，兩處遮擋物。障礙物我用綠色區(qū)域描繪出來了，遮擋物則為兩棵數(shù)，我用Photoshop將它們分別截取了出來命名為：Mask1.png和Mask2.png。
匆忙了點，截得不好可不要見怪哪！誰讓這兩棵樹長得如此奇怪呢？嘿嘿。
OK，接下我以第九節(jié)的代碼為基礎(chǔ)進行修改，首先構(gòu)建障礙物：
//構(gòu)建障礙物
for (int y = 22; y <= 24; y++) {
for (int x = 5; x <= 16; x++) {
//障礙物在矩陣中用0表示
Matrix[x, y] = 0;
rect = new Rectangle();
rect.Fill = new SolidColorBrush(Colors.GreenYellow);
rect.Opacity = 0.3;
rect.Stroke = new SolidColorBrush(Colors.Gray);
rect.Width = GridSize;
rect.Height = GridSize;
Carrier.Children.Add(rect);
Canvas.SetLeft(rect, x * GridSize);
Canvas.SetTop(rect, y * GridSize);
}
}
for (int y = 11; y <= 14; y++) {
for (int x = 27; x <= 31; x++) {
//障礙物在矩陣中用0表示
Matrix[x, y] = 0;
rect = new Rectangle();
rect.Fill = new SolidColorBrush(Colors.GreenYellow);
rect.Opacity = 0.3;
rect.Stroke = new SolidColorBrush(Colors.Gray);
rect.Width = GridSize;
rect.Height = GridSize;
Carrier.Children.Add(rect);
Canvas.SetLeft(rect, x * GridSize);
Canvas.SetTop(rect, y * GridSize);
}
}
for (int y = 18; y <= 21; y++) {
for (int x = 33; x <= 37; x++) {
//障礙物在矩陣中用0表示
Matrix[x, y] = 0;
rect = new Rectangle();
rect.Fill = new SolidColorBrush(Colors.GreenYellow);
rect.Opacity = 0.3;
rect.Stroke = new SolidColorBrush(Colors.Gray);
rect.Width = GridSize;
rect.Height = GridSize;
Carrier.Children.Add(rect);
Canvas.SetLeft(rect, x * GridSize);
Canvas.SetTop(rect, y * GridSize);
}
}
三個循環(huán)分別構(gòu)建了上圖中的三處障礙物，這幾章都對它進行了修改，大家應(yīng)該再熟悉不過了。接下來就是遮擋物那兩棵樹了，這里我用Image控件作為遮擋物的容器：
//創(chuàng)建遮罩層
Image Mask1 = new Image();
Image Mask2 = new Image();
private void InitMask() {
Mask1.Width = 238;
Mask1.Height = 244;
Mask1.Source = new BitmapImage((new Uri(@"Map\Mask1.png", UriKind.Relative)));
Mask1.Opacity = 0.7;
Carrier.Children.Add(Mask1);
Canvas.SetZIndex(Mask1, 10000);
Canvas.SetLeft(Mask1, 185);
Canvas.SetTop(Mask1, 220);
Mask2.Width = 198;
Mask2.Height = 221;
Mask2.Source = new BitmapImage((new Uri(@"Map\Mask2.png", UriKind.Relative)));
Mask2.Opacity = 0.7;
Carrier.Children.Add(Mask2);
Canvas.SetZIndex(Mask2, 10000);
Canvas.SetLeft(Mask2, 466);
Canvas.SetTop(Mask2, 11);
}
這樣就將遮擋物加入進了游戲窗體。有了前面那么多章節(jié)關(guān)于Image控件的使用知識，上面的代碼應(yīng)該不難理解。這里特別要說一下的是為什么要將它們的Opacity設(shè)置為0.7：因為這樣的遮擋物會有一定的透明度，當角色置身其中時會若隱若現(xiàn)，從而達到真實模擬MMORPG的效果。至于為什么要將遮擋物的Zindex屬性設(shè)置為10000呢？這關(guān)系到游戲運行時地圖中不光只有一個角色，還會有非常多的物體及對象角色的存在，它們之間也同樣有著相互遮擋與被遮擋的關(guān)系。而在WPF/Silverlight游戲中，物體的遮擋順序一樣可以使用畫家算法，該算法原理簡單描述就是近物遮擋遠物，幸運的是在WPF/Silverlight中，我們可以很方便的只要動態(tài)更新(一個對象的Zindex屬性)=(它的Y屬性)即可以巧妙的實現(xiàn)此效果，是不是有點邪惡？嘿嘿。所以要將遮蓋物的ZIndex設(shè)置得足夠大以防止任何一個物體它的Y屬性大過遮蓋物的Zindex屬性，從而造成畫面顯示BUG。
其他的代碼均和第九章的一樣，到這，本節(jié)的目標已經(jīng)達到了。那么讓我們運行測試一下吧：
大家可以隨便在地圖上點擊，會發(fā)現(xiàn)只要主角有經(jīng)過這兩棵樹的地方都會被樹以0.7的透明度遮擋，并且障礙物也同樣并行存在著，主角如有經(jīng)過同樣會饒過它。障礙物，人物，遮罩層次分明，互不干預(yù)，完美默契的并行著。
至此，地圖引擎就基本完成了。下一節(jié)將講解本節(jié)開始所提到的神秘第三層，它在WPF/Silverlight游戲輔助方面起著非常大的拓展作用，敬請關(guān)注。
