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