通過第十四節(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)系客服