通過(guò)第十四節、第十五節的學(xué)習，我們掌握了如何創(chuàng )建一個(gè)初具雛形的精靈控件。目前我已經(jīng)賦予了它少量的屬性，但是離完美還有很長(cháng)的距離。因此，我打算在后面的章節中以輔助游戲設計為前提，對該精靈控件進(jìn)行全方位的包裝，使之更加趨于完美與和諧（^-^||）。
在前面所有章節的示例中，角色均只有一個(gè)方向，且動(dòng)作均為跑步狀態(tài)，因此很多朋友都問(wèn)我該如何實(shí)現角色的全方向及全動(dòng)作。盡管我在文中已經(jīng)提級了相關(guān)的解決方案；但是，對于初次接觸WPF/Silverlight游戲制作的朋友在邏輯上或許還是有較大難度的。那么本節將實(shí)現主角8方向（在下文中凡涉及到角色方向時(shí)，我均會(huì )以時(shí)鐘0點(diǎn)的位置為0，然后順時(shí)針?lè )较蛞来螢?/span>1、2、3、4、5、6、7，通俗來(lái)講即方向代號0代表角色面朝北、1代表東北、2代表東、3代表東南、4代表南、5代表西南、6代表西、7代表西北）如下圖：
5大基本動(dòng)作（每個(gè)動(dòng)作均由若干幀組成，就拿本教程后面都要用到的主角圖片為例，其中站立動(dòng)作由5張圖片連續播放形成、跑動(dòng)8張、攻擊7張、施法6張、翹辮子8張。當然，在高質(zhì)量的游戲中一個(gè)角色并不只這5個(gè)動(dòng)作，還有例如受傷、眩暈、上馬下馬等等動(dòng)作，本教程以教會(huì )大家如何去基礎使用與常規制作為目的，關(guān)于更精細的活還得靠大家自行發(fā)揮與創(chuàng )新。至于你問(wèn)我這些動(dòng)作的幀數設置是否是最合理，我可以告訴大家肯定不是（圖片為破天一劍的，我保留了原先的幀配置未做大的改動(dòng)）。如果你打算開(kāi)發(fā)的是Silverlight游戲，我建議盡量讓每個(gè)動(dòng)作幀數不要超過(guò)5幀，實(shí)踐證明這在網(wǎng)頁(yè)游戲中能達到性能與效果的黃金分割；至于在WPF這樣帶客戶(hù)端的游戲中，你大可將所有的動(dòng)作均設置為10+幀都無(wú)所謂，在后面的教程中我將給大家見(jiàn)識一下劍俠世界中的16幀動(dòng)作）如下圖：
全面講解即將開(kāi)始，一定要認真聽(tīng)哦！坐正啦！
首先我們需要通過(guò)3DMAX等工具制作出一個(gè)擁有這5個(gè)動(dòng)作的3D動(dòng)畫(huà)角色，然后將之導出為8個(gè)方向5個(gè)動(dòng)作的系列幀圖片（大家如果只是做練習用，可以從網(wǎng)上下載相關(guān)素材或通過(guò)提取工具來(lái)提取，但是請勿用于商業(yè)用途，否則是需要承擔法律責任的）。這個(gè)過(guò)程不在本教程范圍內，所以就不詳細講解了。接下來(lái)為了節省時(shí)間，我就不再重新提取素材了，我將以QXGame(WPF GAME ENGINE)游戲引擎中的主角為例進(jìn)行相關(guān)解說(shuō)。
如果素材是通過(guò)3D渲染2D的方式得到的，那么素材均為統一標準尺寸的連續單幅圖片（不是的話(huà)找美工的麻煩）；但是如果是從網(wǎng)上下載或提取的話(huà)，每幀圖片的尺寸并不統一。因此，我們首要做的是將這些圖片通過(guò)Photoshop中的“動(dòng)作”功能進(jìn)行批量處理，使所有幀圖片尺寸規格統一。就以本節中的主角為例，我將它的所有幀圖片規格均統一為150*150像素，并且主角在圖片中的水平及垂直方向均居中，如下圖（該圖為局部，一共有8*34=272張）。
尺寸規格統一好以后，接下來(lái)還需要對所有圖片進(jìn)行微調（可想而知，游戲制作中對美工人數的需求是極其龐大的。就如我在前面章節中說(shuō)到的，游戲開(kāi)發(fā)的成功，極大幅度取決于美工，程序邏輯方面僅位列游戲需求分析、界面地圖美術(shù)設計之后排在第三）。所謂微調，就是將角色的各幀圖片通過(guò)測試工具讓它運動(dòng)起來(lái)（如第四節、第五節中的方法），然后觀(guān)察每幀圖片重疊起來(lái)位置是否吻合，不吻合的則需要通過(guò)Photoshop進(jìn)行微調，使它上面的角色處于圖片正確的位置上（如下圖則為錯誤的疊加，我們必須將所有幀圖片完全對齊，這樣連續切換的時(shí)候才能不漏破綻）：
至此就完成了素材準備階段。一切就緒后，接下來(lái)的工作就是將主角8方向5動(dòng)作的所有幀圖片（本例子中的272張）進(jìn)行處理，最終合成一張將這所有圖片按一定規律排列的8方向5動(dòng)作整合圖。就以這272張圖片為例，如何使用WPF類(lèi)庫中的方法將它們合并為一張圖片呢？來(lái)看本節的第一個(gè)精華ComposeImage()方法：
/// <summary>
/// 將N幀圖片合成一張8方向角色各動(dòng)作分布圖
/// </summary>
/// <param name="SourcePath">源文件路徑</param>
/// <param name="SavaToPath">保存文件到目標路徑</param>
/// <param name="imgnum">源圖片數量</param>
/// <param name="imgwidth">單位圖片寬</param>
/// <param name="imgheight">單位圖片高</param>
public static void ComposeImage(string SourcePath, string SavaToPath, int imgNum, int imgWidth, int imgHeight) {
System.IO.FileStream fileStream = new System.IO.FileStream(SavaToPath, System.IO.FileMode.Create);
DrawingVisual drawingVisual = new DrawingVisual();
DrawingContext drawingContext = drawingVisual.RenderOpen();
int count = 1;
for (int i = 0; i < 8; i++) {
for (int j = 0; j < imgNum / 8; j++) {
drawingContext.DrawImage(new BitmapImage(new Uri(SourcePath + count + "-1.png")), new Rect(j * imgWidth, i * imgHeight, imgWidth, imgHeight));
count += 1;
}
}
drawingContext.Close();
RenderTargetBitmap renderTargetBitmap = new RenderTargetBitmap((imgNum / 8) * imgWidth, 8 * imgHeight, 0, 0, PixelFormats.Pbgra32);
renderTargetBitmap.Render(drawingVisual);
PngBitmapEncoder encoder = new PngBitmapEncoder();
encoder.Frames.Add(BitmapFrame.Create(renderTargetBitmap));
encoder.Save(fileStream);
fileStream.Close();
}
我將該方法寫(xiě)在一個(gè)名叫Super的靜態(tài)類(lèi)中，關(guān)于它的參數意思在注釋中已經(jīng)寫(xiě)得很清楚了，至于它是如何實(shí)現將這272張圖片有規律的合成為1張我們能夠在后面使用的合成圖，大家只需要注意我用黃色突出的代碼，這是主要的算法邏輯（單張圖片的文件名格式如前文中的格式圖上的一樣，例如1-1.png、2-1.png、3-1.png、4-1.png、5-1.png、6-1.png……等等，如果你的圖片是1.png、2.png、3.png、4.png、5.png、6.png、7.png、8.png……等等這樣的取名格式，那么只需要將"-1.png"換成".png"即可）。至于其它的部分大家稍微看一下就可以輕松理解了。
上圖上部分即為我調用Super.ComposeImage(@"E:\Body\", "Body0.png", 272, 150, 150);方法合成的主角8方向5動(dòng)作的一張寬150*34=5100（34=5+8+7+6+8）像素、高150*8=1200（8=8個(gè)方向，按照上文中的順序）像素的整合圖。（由于該圖尺寸過(guò)大（5100*1200像素），所以我將之縮小為原尺寸的15%左右以供給大家展示）
從上圖下部分中（上部分的局部放大圖），大家可以很清晰的發(fā)現圖片排列的規律：即8行34列；從行看，由上至下的8行分別為代號0-7這8個(gè)方向的所有圖片；從列看，1-5列為站立幀圖片，6-13列為跑動(dòng)幀圖片，14-20列為攻擊幀圖片，21-26列為施法幀圖片，27-34列為死亡幀圖片。理清了規律后，如何對它進(jìn)行局部單圖截??？嘿嘿，且聽(tīng)下回分解。
聯(lián)系客服
