1、1,游戲動畫技巧,2,游戲動畫,游戲中播放動畫的方式： 直接播放視頻文件，如片頭動畫 用連續(xù)貼圖的方式實現(xiàn)動畫效果,3,循環(huán),游戲是以無限循環(huán)的方式不斷地在游戲窗口 中進(jìn)行窗口畫面重繪的操作 即使畫面沒有任何變化，重繪的操作還是不斷地進(jìn)行， 一直到玩家選擇結(jié)束游戲為止。,4,基礎(chǔ)動畫顯示,5,掌握： 定時器使用 游戲循環(huán)在動畫繪制的應(yīng)用,6,定時器,定時器(Timer)可以每隔一段時間發(fā)出一個時間消息，程序一旦接收到這個消息，就可以決定接下來的運算。 這樣的特性正好可以用來以固定的時間間隔顯示圖片，產(chǎn)生動畫效果。 如何建立與使用定時器 ?,7,Windows API的SetTimer()函數(shù)可

2、為窗口建立一個定時器。 每隔一段時間就發(fā)出WM_TIMER消息。,8,定時器的建立,定時器是存在一個窗口之內(nèi)的 UINT SetTimer ( HWND hWnd, /接收定時器消息的窗口 UINT nIDEvent, /定時器ID UINT uElapse,/時間間隔，毫秒 TIMERPROC lpTimerFunc /回調(diào)函數(shù)指針 );,這個代號在同一個窗口必須是唯一的，且值不為0 。,若此參數(shù)設(shè)為1000，則每間隔1秒發(fā)出一個WM_TIMER消息,設(shè)定由系統(tǒng)調(diào)用處理WM_TIMER消息的響應(yīng)函數(shù)，如果不用響應(yīng)函數(shù)處理WM_TIMER消息，則此參數(shù)應(yīng)設(shè)為NULL。,9,例：建立定時器,Se

3、tTimer(hWnd, 1, 500, NULL); 沒有指定消息響應(yīng)函數(shù)，就需要在窗口函數(shù)中響應(yīng)WM_TIMER處理定時器消息。 在窗口函數(shù)中如何響應(yīng)定時器消息呢?,10,窗口WM_TIMER響應(yīng),LRESULT CALLBACK WndProc(HWND hWnd, .) / switch (message) case WM_TIMER: MyPaint(hdc); break; case WM_DESTROY:/ / ,11,刪除定時器,定時器建立以后，就會一直按指定的時間間隔發(fā)送WM_TIMER消息。 如果需要停止這種行為，就用： BOOL KillTimer ( HWND hWnd

4、,/窗口句柄 UINT uIDEvent/定時器ID );,12,定時器動畫例子,連續(xù)擺動的人物位圖,13,定時器動畫例子,BOOL InitInstance ( HINSTANCE hInstance, int nCmdShow) /.窗口建立 /加載位圖 for(i=0;i7;i+) sprintf(filename,girl%d.bmp,i); girli = (HBITMAP)LoadImage( ); num = 0; SetTimer(hWnd,1,100,NULL); MyPaint(hdc); return TRUE; ,14,定時器動畫例子,LRESULT CALLBACK

5、WndProc(HWND hWnd,.) int i; switch (message) case WM_TIMER:/ 定時器WM_TIMER消息 MyPaint(hdc); break; case WM_DESTROY: / 刪除定時器 DeleteDC(mdc);ReleaseDC(hWnd,hdc); for(i=0;i7;i+) DeleteObject(girli); KillTimer(hWnd,1);PostQuitMessage(0); break; /,15,MyPaint (HDC hdc) if (num = 7) num = 0; SelectObject(mdc,g

6、irlnum); BitBlt(hdc,0,0,600,450,mdc,0,0,SRCCOPY); num+; ,16,定時器動畫結(jié)果,SetTimer(hWnd, 1, 500, NULL); SetTimer(hWnd, 1, 1000, NULL); 演示并比較效果,17,定時器的優(yōu)缺點,優(yōu)點：簡單方便。 缺點： （1）適合顯示簡易動畫；小型的游戲。 （2）游戲本身需要顯示順暢的游戲畫面，使玩家感覺不到延遲的狀況?；旧嫌螒虍嬅姹仨氃谝幻腌娭畠?nèi)更新至少25次以上。 （3）這一時間之內(nèi)程序：繪制、音效、數(shù)學(xué)物理的計算等操作。 （4）使用定時器的消息來驅(qū)動這些操作，往往達(dá)不到所要求的標(biāo)準(zhǔn)，

7、（5）產(chǎn)生畫面顯示不順暢和游戲響應(yīng)時間太長的情況,18,WM_TIMER做定時器精度不高，而且很難與游戲循環(huán)結(jié)合。 游戲循環(huán)速度很快，通常都是25fps以上 使用定時器，可能造成游戲畫面響應(yīng)不及時、不流暢。 解決方案?,19,游戲循環(huán)動畫,20,循環(huán)動畫,游戲循環(huán)是將原先程序中的消息循環(huán)加以修改。 判斷其中的內(nèi)容目前是否有要處理的消息？ 如果有則進(jìn)行處理， 否則按照設(shè)定的時間間隔來重繪畫面。,21,構(gòu)建一個游戲循環(huán),while( msg.message!=WM_QUIT ) if( PeekMessage( ,22,代碼分析,while當(dāng)收到的消息不是WM_QUIT，則繼續(xù)循環(huán) PeekMes

8、sage函數(shù)檢測目前是否有待處理的消息，有則處理消息，反之，進(jìn)行游戲循環(huán)的處理 注意：不能用GetMessage，GetMessage取得WM_QUIT消息才返回0，其它時候是非零和-1（出錯）。,23,如果消息隊列里沒有消息的時候不讓Getmassage在Windows內(nèi)部等待,就是說想充分利用程序的所有時間,就應(yīng)該用peekmassage。 peekmessage是一個類似于Getmessage的函數(shù),區(qū)別在于： 當(dāng)消息隊列里有消息的時候,Peekmessage取回消息,并在eax中返回非零值, 沒有消息的時候它會直接返回,并在eax中返回零。,24,返回非零值的時候,程序檢查消息是否是W

9、M_QUIT： 是則結(jié)束消息循環(huán), 不是則用標(biāo)準(zhǔn)流程處理消息; 返回零的時候,表示是空閑時間,程序就可以做其他工作了, 但插入做其他工作的代碼執(zhí)行時間不能太長,以不超過10ms為好,否則會影響正常的消息處理,使窗口的反應(yīng)看起來很遲鈍. 如果必須處理很長時間的工作,那么應(yīng)該將它們分成很多小部分處理,以便有足夠頻率用Peekmessage來檢查消息.,25,peekmassage 比 Getmassage 多一個參數(shù).這個參數(shù)表示在取回消息以后,對消息隊列中的消息是否保留. 當(dāng)這個參數(shù)是PM_REMOVE時,消息被取回的同時也被從消息隊列里刪除, 而用PM_NOREMOVE的時候,被取回的消息不會

10、從消息隊列中刪除,函數(shù)相當(dāng)于偷看了這條消息.,26,TranslateMessage是用來把虛擬鍵消息轉(zhuǎn)換為字符消息。這兩個消息的附加參數(shù)（wParam和lParam）包含的是虛擬鍵代碼和掃描碼等信息，在程序中往往需要得到某個字符的ASCII碼， TranslateMessage這個函數(shù)就可以將WM_KEYDOWN和WM_ KEYUP消息的組合轉(zhuǎn)換為一條WM_CHAR消息 并將轉(zhuǎn)換后的新消息投遞到調(diào)用線程的消息隊列中。 也就是說TranslateMessage會發(fā)現(xiàn)消息里是否有字符鍵的消息，如果有字符鍵的消息，就會產(chǎn)生WM_CHAR消息，如果沒有就會產(chǎn)生什么消息。,27,DispatchMes

11、sage：該函數(shù)調(diào)度一個消息給窗口程序 GetTickCount函數(shù)：記錄繪圖時刻 由于游戲循環(huán)可以做到比定時器消息快，定時器消息時間間隔太短，會產(chǎn)生“堆疊”，就是連續(xù)幾次時間間隔，只產(chǎn)生一個WM_TIMER消息，會對我們的處理產(chǎn)生影響,28,游戲循環(huán)動畫例子,演示效果 嘗試改變周期 注意游戲循環(huán)時間間隔的計算,29,游戲循環(huán)處理動畫的優(yōu)點,時間容易準(zhǔn)確控制 不會丟失每一個處理流程 方便我們提高幀速率 但是：一旦計算機處理速度不能滿足，處理不得當(dāng)就會有游戲速度變慢的可能,30,解決方法：,游戲的邏輯運算中，時間標(biāo)準(zhǔn)以真實時間為準(zhǔn)，比如程序已經(jīng)運行到多少個Tick的時候就應(yīng)該做什么動作；而不是游

12、戲循環(huán)循環(huán)了多少次做什么動作 這樣解決的話，游戲運算不過來的時候，可以丟幀，但絕對不能降低游戲速度，造成難度的變化,31,透明動畫,32,透明動畫,透明動畫是游戲中一定會用到的基本技巧。 通過圖案的連續(xù)顯示。 透明來產(chǎn)生背景圖上的動畫效果。,33,前景圖和掩模圖,恐龍的連續(xù)跑圖,前提：在內(nèi)存中創(chuàng)建DC。 在該DC上繪制完成后BitBlt到屏幕DC。 避免屏幕更新時的閃爍問題,34,單個恐龍動畫例子,結(jié)合透明貼圖和循環(huán) 如何結(jié)合？,35,void MyPaint(HDC hdc) if(num = 8) num = 0; SelectObject(bufdc,bg); /在mdc上貼背景圖 Bi

13、tBlt(hdc,0,0,640,480,bufdc,0,0,SRCCOPY); SelectObject(bufdc,dra); /在mdc上進(jìn)行精靈的透明處理 BitBlt(hdc,x,y,95,99,bufdc,num*95,99,SRCAND); BitBlt(hdc,x,y,95,99,bufdc,num*95,0,SRCPAINT); tPre = GetTickCount(); /記錄繪圖時刻 num+; x-=5; /計算下次貼圖坐標(biāo) if(x=-95)x = 640; ,36,單個恐龍動畫的結(jié)果,37,多個恐龍貼圖,如果直接按照內(nèi)存中的順序貼圖，精靈會有重疊的現(xiàn)象，彼此遮蓋，

14、造成畫面不正常。 解決？,38,動畫顯示問題,動畫最基本的要求是畫面要流暢且符合真實性。然而由于是利用貼圖的方法來產(chǎn)生動畫的，因此常會因一些小細(xì)節(jié)沒注意到而使得動畫的效果看起來不太自然。 貼圖坐標(biāo)修正。 排序貼圖 。,39,貼圖坐標(biāo)修正,動畫的制作需要多張連續(xù)的圖片，如果這些連續(xù)圖片的規(guī)格不一，那么進(jìn)行貼圖時就需要進(jìn)行貼圖坐標(biāo)的修正，否則就可能產(chǎn)生動畫晃動和不順暢的情形。 避免圖片規(guī)格不一致的錯誤發(fā)生的。 即使圖片尺寸有誤也會重新進(jìn)行修正。,40,圖片不規(guī)格,恐龍上下左右跑動的連續(xù)圖片 按照精靈的前后關(guān)系排序：（先遠(yuǎn)后近）,41,貼圖坐標(biāo)修正,原本面向左然后變成面向下。恐龍本身并沒有移動。 程

15、序中先貼面向左的圖案，再貼向下的圖案，如果這兩個貼圖操作都使用相同左上角的貼圖坐標(biāo)。,42,貼圖坐標(biāo)修正,兩次貼圖，恐龍不過是做了個由左向下轉(zhuǎn)的動作，但它的陰影所在位置竟然移動了，表明恐龍在這一個動作之間產(chǎn)生了移動。而這樣的貼圖方法會使得動畫制作時產(chǎn)生誤差。因此在這樣的情況下，必須對貼圖坐標(biāo)進(jìn)行修正,43,以陰影部分作為貼圖的基準(zhǔn)，在恐龍動作轉(zhuǎn)而面向下時做貼圖坐標(biāo)的修正，使得第2次貼圖時陰影部分能夠與上一次重疊。（第2次貼圖的左上角坐標(biāo)與第1次相比稍微往右下方移動），這樣的修正使得動畫顯示時視覺效果更好采用Y坐標(biāo)排序,44,貼圖坐標(biāo)修正,貼圖的方式：對于距離較遠(yuǎn)的物體先進(jìn)行貼圖操作，然后再進(jìn)行

16、近距離物體的貼圖操作，而一旦定出貼圖的順序之后就無法再改變了。 把兩只恐龍做了編號。 先進(jìn)行1號恐龍的貼圖操作， 然后再進(jìn)行2號恐龍的貼圖操作。,45,貼圖坐標(biāo)修正的缺點,效果： 在前一秒的畫面里，畫面還很正常，可是到了后一秒的時候，畫面卻怪怪的。因為此時的2號恐龍遠(yuǎn)近跑到了1號恐龍的后面，但是貼圖順序還是先貼1號恐龍圖案再貼2號恐龍圖案，變成了后面的物體反而被遮掩住了前面的物體這種不協(xié)調(diào)的畫面。,46,貼圖坐標(biāo)修正,47,貼圖坐標(biāo)修正,為了避免這種因為貼圖順序固定而產(chǎn)生的錯誤畫面，必須在每一次窗口重新顯示時動態(tài)重新決定畫面上每一個物體的貼圖順序。 如何動態(tài)決定貼圖順序呢？,48,排序貼圖,排

17、序如何運用在貼圖中呢？,遠(yuǎn)的物體先貼圖的原則,49,假設(shè)現(xiàn)在有10只要進(jìn)行貼圖的恐龍圖案。先把它存在一個數(shù)組之中。 從2D平面的遠(yuǎn)近角度來看，Y軸坐標(biāo)比較?。ㄔ诖翱诋嬅孑^上方）的是比較遠(yuǎn)的物體。以恐龍的Y軸坐標(biāo)（在排序中稱為鍵值）來對恐龍數(shù)組由小到大進(jìn)行排序， 結(jié)果：最后會使得Y軸坐標(biāo)小的恐龍排在數(shù)組的前面，而進(jìn)行畫面貼圖時則由數(shù)組從小到大一個一個進(jìn)行處理，遮掩便可實現(xiàn)“遠(yuǎn)的物體先貼圖”的目的了。,50,氣泡排序,要進(jìn)行排序，首先必須決定所使用的排序法，這里所用的排序法為氣泡排序 。,（1）程序代碼簡單。 （2）排序效果中等。 （3）屬于穩(wěn)定（stable）排序法，這個特性會 使得Y軸坐標(biāo)相同

18、的物體，不必再去考慮它X 坐標(biāo)上的排序。,51,氣泡排序的步驟,從數(shù)組的最前面開始進(jìn)行兩兩比較，當(dāng)下一個元素值比前一個元素值大使則進(jìn)行交換，使得大的元素往后移。 7， 5，2，1，3 5，7，2，1，3 5，2，7，1，3 5，2，1，7，3 5，2，1，3，7,52,這樣不斷進(jìn)行比較，較大的元素會一直往后挪，最后數(shù)組中的最大元素便會排在數(shù)組的最后。 5，2，1，3，7 2，5，1，3，7 2，1，5，3，7 2，1，3，5，7,53,循環(huán)結(jié)束后，數(shù)組就變成了由小到大的排序順序 2，1，3，5，7 1，2，3，5，7,54,多個恐龍貼圖,按照精靈的前后關(guān)系排序 2D繪制可以直接采用Y坐標(biāo)進(jìn)行排

19、序 舉例，以冒泡法進(jìn)行排序,55,實現(xiàn)的效果,結(jié)果演示,56,背景動畫的設(shè)計,57,背景動畫的設(shè)計,背景動畫的設(shè)計制作。背景動畫的制作同樣是利用連續(xù)貼圖的原理。2D游戲中經(jīng)常運用到的動態(tài)背景表現(xiàn)手法大致有： 單一背景滾動 循環(huán)背景動畫 多層背景循環(huán)動畫,58,單一背景滾動,利用一張相當(dāng)大的背景圖，當(dāng)游戲進(jìn)行的時候，隨著畫面任務(wù)的移動，背景的顯示區(qū)域也跟著移動 方法：在每次背景畫面更新時改變要顯示到窗口上的區(qū)域就可以了。,59,單一背景滾動,60,單一背景滾動,在上面的這張背景圖里，由左上到右下畫了3個方框，代表要顯示在窗口上的背景區(qū)域，程序只要按照左上到右下的順序在窗口上連續(xù)顯示這3個方框區(qū)域

20、，就會產(chǎn)生背景由左上往右下滾動的效果,61,LRESULT CALLBACK WndProc(HWND hWnd, UINT message, WPARAM wParam, LPARAM lParam) int nStep = 5; switch (message) case WM_KEYDOWN: switch (wParam) case VK_UP:【】 y -= nStep;if(y 660)y = 660;break;,62,case VK_LEFT: 【】 x -= nStep;if(x 910) x = 910;break; break; case WM_DESTROY: Dele

21、teDC(mdc); DeleteObject(map); ReleaseDC(hWnd,hdc); PostQuitMessage(0); break; default: return DefWindowProc(hWnd, message, wParam, lParam); return 0;,63,效果演示： 以鍵盤，控制背景滾動,64,循環(huán)背景動畫,65,原理,循環(huán)背景時不斷進(jìn)行背景圖的裁切與拼接，然后顯示在窗口上的一種背景畫面循環(huán)滾動的效果 也稱作 “卷軸”,66,如何利用同一張跟窗口大小相同的背景天空圖案來產(chǎn)生背景由左向右循環(huán)滾動的動畫效果的,67,從左向右滾動后,TickCoun

22、t=31205,TickCount=31705,68,由圖中可以看出，窗口中背景圖部分跟前一次相比已經(jīng)往右移動了。在制作循環(huán)背景的過程中，是把超出窗口的部分貼到左邊突出的窗口區(qū)域中，以便重新組合成一張剛好等于窗口大小的新背景圖。,69,貼圖步驟一,裁取背景圖中將要在下一次繪制時超出畫面的部分，貼到內(nèi)存DC中,70,貼圖步驟二,將剩余的部分按照移動方向后的位置貼到內(nèi)存DC,71,貼圖步驟三,將內(nèi)存DC BitBlt到窗口中(右圖),72,注意,繪制循環(huán)背景的背景圖必須是上下無縫拼接和左右無縫拼接。 這樣在繪制的時候才不會造成背景圖的接縫不能對齊,73,循環(huán)背景示例,效果演示： 思考：怎樣改成斜方

23、向移動？,74,多背景循環(huán)動畫,75,目的和原理,制造一種透視的假相，使游戲畫面更加逼真，需要近處的背景移動迅速而遠(yuǎn)處的物體移動緩慢。 多背景循環(huán)動畫實質(zhì)上也是多幅循環(huán)背景動畫的疊加，在以貼圖方式繪制多背景循環(huán)動畫的時候，需要決定不同背景貼圖的先后順序以及滾動的速度,76,效果,77,實現(xiàn),貼圖順序： 天空草地山巒房屋恐龍 滾動速度： 天空山巒草地=房屋,78,多背景循環(huán)動畫例子,效果演示 x0 += 5; /設(shè)置天空背景切割寬度，運動速度 x1 += 8;/設(shè)置山巒背景切割寬度，運動速度 x2 += 12; /設(shè)置草地及房屋切割寬度，運動速度 改變背景滾動的速度,79,void MyPain

24、t(HDC hdc) /貼天空圖 SelectObject(bufdc,bg0); BitBlt(mdc,0,0,x0,300,bufdc,640-x0,0,SRCCOPY); BitBlt(mdc,x0,0,640-x0,300,bufdc,0,0,SRCCOPY); /貼草地圖 BitBlt(mdc,0,300,x2,180,bufdc,640-x2,300,SRCCOPY); BitBlt(mdc,x2,300,640-x2,180,bufdc,0,300,SRCCOPY);,80,/貼山巒并透明 SelectObject(bufdc,bg1); BitBlt(mdc,0,0,x1,300,bufdc,640-x1,300,SRCAND); BitBlt(mdc,x1,0,640-x1,300,bufdc,0,300,SRCAND); BitBlt(mdc,0,0,x1,300,bufdc,640-x1,0,SRCPAINT); BitBlt(mdc,x1,0,640-x1,300,bufdc,0,0,SRCPAINT);