動畫與遊戲設計 2D Game 程于芳 老師 yfcheng@cc.ncue.edu.tw.

Presentation on theme: "動畫與遊戲設計 2D Game 程于芳 老師 yfcheng@cc.ncue.edu.tw."— Presentation transcript:

1 動畫與遊戲設計 2D Game 程于芳 老師

2 單元架構 1 2D基本貼圖 2 2D畫面特效 3 遊戲地圖製作 4 遊戲動畫簡介 5 進階動畫顯示技巧 6 橫向捲軸移動 7 透視圖的製作

3 2D Game 學習完本單元後，您將能： 1. 舉例出2D貼圖的運用 2. 了解如何貼圖 3. 了解什麼是遊戲動畫 4. 了解透視圖如何製作
學習目標 學習完本單元後，您將能： 1. 舉例出2D貼圖的運用 2. 了解如何貼圖 3. 了解什麼是遊戲動畫 4. 了解透視圖如何製作

4 2D基本貼圖

5 前言 2D貼圖的運用: 主畫面選單 戰鬥場景 遊戲環境設定 腳色互換 動畫展現

6 2D座標系統 數學XY座標系統: X座標表象限中的橫向座標軸 Y座標表象限中的縱向座標軸 座標值是向右遞增 座標值是向上遞增 Y軸
原點(0,0) X軸

7 2D座標系統 螢幕XY座標系統: 一堆像素(Pixel)構成 XY座標可接受負值(小於0)的數值 座標系統的大小 像素:螢幕上的點。
取決於螢幕的顯像解析度。 依顯示卡或螢幕設備，決定螢幕顯像解析度的高、低。 例:常用解析度有「320x200」、「640x480」、「800x600」、 「1024x768」，其中「640x480」，指X座標有640個像素點、Y座標有480個像素點。

8 2D座標系統 顯示卡通稱VGA(Video Graphics Array，視訊圖形陣列)卡: 解析度: 性能優劣: 顏色數:
取決於使用的顯示晶片。 顯示卡上的記憶體容量。 加快圖形與影像處理速度。 解析度: 解析度越大，螢幕可視範圍越大。 如:Super-VGA卡可設定640x480、800x600、1024x768、1280x1024。 顏色數: 三種顏色數為主，顏色數量越高，展現的色彩越豐富。

9 貼圖簡介 2D或3D遊戲製作，必須使用貼圖技巧展現遊戲畫面。 貼圖動作: 將圖片貼在顯示卡記憶體上，由顯示卡呈現於螢幕上的過程。
可使用圖形裝置介面(Graphics Device Interface，GDI)、Windows API、DirectX或OpenGL進行貼圖動作。

10 貼圖簡介 如何貼圖於螢幕上? 知道圖片在螢幕的左上角XY座標、 與圖片本身的長與寬，就能將圖貼 在螢幕上。 若改變X或Y的座標，
圖片便能改變其位置。 欲從螢幕左邊慢慢移動到右邊， 可利用程式碼撰寫一個迴圈， 用來改變X點座標。

11 GDI與貼圖 GDI(Graphics Device Interface) ，「圖形裝置介面」: 掌管所有顯像裝置的視訊顯示及輸出功能。
遊戲視窗 不論全螢幕或單純視窗模式，都必須建立一個視窗。 分「螢幕區(Screen)、視窗區(Window)、內部視窗區(Client)」 螢幕區 視窗區 內部視窗區

12 GDI與貼圖 裝置內文(Device Context，DC): 程式可以進行繪圖的地方。
在螢幕區上繪圖，Device(裝置)就是螢幕，Device Context就是螢幕區上的繪圖層。 例如:在視窗上繪圖，Device就是視窗，DC就是視窗上可繪圖地方，也就是內部視窗區。 視窗內部可以繪圖的地方-裝置內文區

13 2D畫面特效

14 透空效果 透空處理(去背): 前景圖與背景圖融合時，必須將前景圖的黑色底框去掉。
可利用GDI的BitBlt()貼圖函式及Raster值的運算，將不必要的部分去除(又稱去背)。 左邊為要去背貼到背景圖上，右邊的黑白圖則稱為「遮罩圖」，合成同一張。 去背部分為黑 恐龍部分為黑 去背部分為白

15 透空效果 步驟1:將遮罩圖與背景圖做AND運算，如下: (1)遮罩圖中黑色部分與背景圖做AND運算:
000000… 遮罩圖中黑色圖點的顏色值 AND) … 背景圖中彩色圖點得顏色值 000000… 運算後變成黑色 (2)遮罩圖中白色部分與背景圖做AND運算: 遮罩圖中白色圖點的顏色值 AND) … 背景圖中彩色圖點的顏色值 … 運算後還是原來背景的色彩 經過此一步驟所 產生的結果如圖:

16 透空效果 步驟2:將遮罩圖與背景圖做OR運算，如下: (1)遮罩中黑色部分與背景圖做OR運算: 101011… 前景圖中彩色圖點的顏色值
101011… 前景圖中彩色圖點的顏色值 OR) … 背景圖中變成黑色圖點顏色值 101011… 運算後變成前景圖的色彩 (2)遮罩途中白色部分，與背景圖做OR運算: 000000… 前景圖中黑色圖點的顏色值 OR) … 背景圖中彩色圖點的顏色值 運算後還是原來背景圖的色彩 經過此一步驟所 產生的結果如圖:

17 半透明效果 半透明在遊戲運用頻繁，如:薄霧、鬼魂、隱形人物…等。 半透明效果就是前景圖案與背景圖案像素顏色混合。
下圖是將一張點陣圖經過半透明處理後顯示於背景上:

18 半透明效果 如何將前景圖與背景圖像素顏色混合?
瞭解點陣圖的基本架構，點陣圖由許多像素組成，每一像素包含三原色:紅(R)、綠(G)、藍(B)。 將前景圖與背景圖進行某一比例的調配，此步驟叫「不透明度」。 如果要讓前景圖透明，須決定不透明度值，設不透明度為70%，指前景圖像素顏色在顯示的比例是70%，剩下的30%就是取用背景像素的顏色。 綜合上面說明，得公式: 半透明圖色彩=前景圖色彩 x 不透明度 + 背景圖色彩 x (1-不透明度)

19 透空半透明效果 為改善半透明效果，還留著前景圖的矩形輪廓，以透空半透明效果解決這個問題。 透空半透明效果:就是先透空再進行半透明的處理。
作法: 使用記憶體DC與點陣圖物件，先在記憶體DC上完成透空， 再取出這個DC上的點陣圖內容來進行半透明處理。

20 遊戲地圖製作

21 平面地圖貼圖 利用一張四方形小圖塊來組成同樣都是四方形的大地圖，下圖便是一張由3種不同圖塊組成的平面地圖:
假設圖中3種不同圖塊的編號分別為0、1、2，在一維陣列以行列的方式排列， apIndex[12]={0,1,1,1, //第1列 2,0,1,2, //第2列 2,2,2,2 }; //第3列 列 行

22 平面地圖貼圖 平面貼圖編號計算： 列編號=索引值 / 每一列的圖塊個數(行數); 行編號=索引值%每一列的圖塊個數(行數); 驗證上列公式:
使用一維陣列定義地圖內容，陣列上每個元素的索引值是0…11，將陣列的索引值轉換成對應的列編號與行編號，轉換公式如下: 列編號=索引值 / 每一列的圖塊個數(行數); 行編號=索引值%每一列的圖塊個數(行數); 驗證上列公式: 1 2 3 4 5 6 7 8 9 10 11 3/4=0(列) 3%4=3(行) 5/4=1(列) 5%4=1(行) 10 / 4=2(列) 10%4=2(行)

23 斜角地圖貼圖 斜角貼圖編號計算： 斜角度圖是平面地圖以45度角俯看四方型，其變成菱形。 菱形圖塊與方形圖塊的圖塊編號:
列編號=索引值/每一列的圖塊個數(行數) ; 行編號=索引值%每一列的圖塊個數(行數) ; 行方向 列方向 5/4=1(列) 5%4=1(行)

24 斜角地圖貼圖 斜角貼圖座標計算： 左上點X座標=xstart +行編號 * w/2 - 列編號 * (w/2)
求出行編號與列編號，可算出圖塊貼圖時左上點的座標，並知道圖塊中菱形的長度與高度，假設寬和高分別為w與h，左上點貼圖座標計算公式如下: 左上點X座標=xstart +行編號 * w/2 - 列編號 * (w/2) 左上點Y座標=ystart +列編號 * h/2 + 行編號 * (h/2) xstart與ystart代表第一張圖塊左上角貼圖座標的位置 w

25 斜角地圖貼圖 斜角貼圖座標計算（衍生觀念）: 圖塊0的貼圖座標是(xstart,ystart)，
圖塊1的貼圖座標是(xstart+w/2,ystart+h/2) 圖塊2的貼圖座標是(xstart+w/2*2,ystart+h/2*2) 求圖塊貼圖座標的公式: 如果在同一行上的座標變化是往左下方遞減半個圖塊長(X軸方向)以及遞增半個圖塊高(Y軸方向)。 左上點x座標=xstart+行編號 * w/2; 左上點y座標=ystart+列編號 * h/2;

26 斜角地圖貼圖 地圖大小計算: 由上圖推導出整張地圖的寬與高，計算公式如下:
當算出每個圖塊座標並完成斜角地圖拼接，將整塊地圖貼到視窗中，須知地圖的寬度與高度，圖示說明如下: 由上圖推導出整張地圖的寬與高，計算公式如下: 半個圖塊高x行數 半個圖塊高x列數 半個圖塊寬x列數 半個圖塊寬x行數 地圖寬=(列數+行數)*w/2 ; 地圖高=(列數+行數)*h/2 ;

27 景物貼圖 完成遊戲地圖拼接後，將在地圖上佈置景物，如:花草樹木、房子…等。 範例:以64x32的斜角圖塊貼上一張50x60的樹木圖
如果斜角圖塊的貼圖座標是(x, y)， 樹木圖: X座標必須向右移動32-25=7單位， Y座標必須向上移動60-16=44單位， 則樹木的貼圖座標為(X+7,X-44)。

28 人物遮掩 人物遮掩分兩種情況: 解決方法: 人物與人物之間的遮掩。 人物與地圖中的建築、樹木等的遮掩。
通過一個具有位置屬性的基礎圖塊，此基礎圖塊上又衍生出其他的圖塊，視覺方向上對人物位置進行排序，從遠到近分化出各圖塊與人物，便可實現人物遮掩。

29 人物遮掩 每一個圖塊是有高度的，下圖中的房子從牆角往上的高度依次分別為1、2、3…，這是編輯場景的時候就必須定義好。人物也有高度，它的高度是從下往上遞增。 設計場景: 先畫地圖->後畫人物； 圖塊高度大於人物高度會遮住人物=>重畫。 反之，則不需重畫。

30 進階斜角地圖貼圖 利用重複貼圖的方式來製作斜角地圖，可減少圖片檔案的運用並增加場景的變化性。
由於地圖須重疊拼接，使用貼圖的方式製作斜角地圖時，必先瞭解透空圖作法。在重複貼圖時才不致於使得背景覆蓋了其他圖片。 透空前 透空後

31 進階斜角地圖貼圖 因拼接時須使用透空圖，所以地圖中每個小方格都須經過兩次貼圖的動作。
所使用地圖方格圖片大小設定為像素32x16，但貼圖時會將其貼為64x32的大小，是原圖的兩倍，地圖中的方格才不致於過小。 地圖拼接時，周圍會出現鋸齒狀 解決方法:(1)可在周圍捕貼上地圖方格以改進這個問題。 (2)由視窗外開始貼圖，讓地圖超出顯示範圍。 無鋸齒、邊界的斜角地圖

32 進階斜角地圖貼圖 有障礙物時，如何繪製地圖?
使用陣列來製作地圖，陣列元素值為0表無障礙物，大於0表有障礙物，可對不同障礙物進行編碼，只要改變陣列中的元素值，就可改變地圖上景物配置。 解決座標定位問題，繪圖座標中每個點與陣列中的元素索引相配合，才不會有移動判斷的問題。 座標定位與 陣列索引的對應

33 進階斜角地圖貼圖 若場景中有兩個障礙物，陣列元素值設定1=骷髏頭，2=樹木，
在人物移動判斷時，只要針對陣列元素值進行檢查，如不為0表有障礙物，不得往該格移動。 少了方格線，看來已有遊戲的感覺。 仙劍奇俠傳

34 遊戲動畫簡介

35 遊戲動畫簡介 「動畫」成為一種新興時尚的必需品，無所不在的融入日常生活
動畫原理：使用一種連續貼圖的方式快速撥放，在加上人類「視覺暫留」產生動畫的效果 動畫的方式： 直接撥放影片，如AVI、MPEG等等 遊戲進行時利用連續貼圖的方式。

36 一維連續貼圖 所謂的貼圖分為兩個部份，一個是放圖片的框框，如同我們日常生活的相框一樣；而另一個是圖片，它就如同我們放在相框裡的照片一樣。

37 一維連續貼圖 「視覺暫留」所指的就是當一連串「靜態影像」在腦海中快速循序播放，因為視覺暫留而產生影像移動的錯覺。
連續貼圖就是利用這個原理。以「長」 、「寬」來排序圖像

38 一維連續貼圖 等級級數的公式如下列所示： 公式：an=a1+（n-1）*d a1為首項 an為第n項 n為項次 d為等差值

39 一維連續貼圖 (0,0) (50,0) (100,0) (150,0) (200,0) (250,0) (300,0) (0,80)
利用for迴圈來達到動畫效果 For i=1 to 6 srcPicture.X=0+(i+1)*w srcPicture.Y=0 Delay(1) Next

40 一維連續貼圖 除了上頁所說的，可利用Windows API來達到動態效果。
Windows API的SetTimer()函式可為視窗建立一個計時器，並每隔一段時間發出WM_TIMER訊息。 UINT SetTimer( HWND 接收計時器訊息的視窗, UINT 計時器代號, UINT 時間間隔, TIMERPROC 處理回呼函式);

41 一維連續貼圖 SetTimer(1,500,NULL); 例：設定一每隔0.5秒發出WM_TIMER訊息計時器的程式碼：
計時器僅使用於簡易動畫及小型遊戲程式中。因為一般遊戲本身為了顯示順暢始玩家感覺不到延遲，起碼需要每秒25張圖像的更新。使用計時器往往達不到此目標。 SetTimer(1,500,NULL);

42 一維連續貼圖 FPS(Fram Per Second)：每秒可撥放畫框數。 一般10~12FPS就會產生視覺暫留

43 一維連續貼圖 遊戲迴圈 是將原程式中的訊息回圈加以修改 會判斷目前是否需要處理的訊息 有則進行處理，達到所需的FPS
否則依照原設定的時間間隔

44 一維連續貼圖 //遊戲迴圈 while( msg.message!=WM_QUIT ) {
if( PeekMessage( &msg, NULL, 0,0 ,PM_REMOVE) ) //偵測訊息 TranslateMessage( &msg ); DispatchMessage( &msg ); } else tNow = GetTickCount(); //取得目前的時間 if(tNow-tPre >= 40) //若目前的時間比上次時間大於0.4秒 MyPaint(hdc);

45 二維連續貼圖 基本上多了Y軸 例：以二維矩陣來看，每一個點就是一張圖像。 公式： Wn=Ax1+[(n MOD 橫向總張數)-1*單張寬度
Hn=Ay1+[(n MOD 縱向總張數)-1*單張長度

46 二維連續貼圖 如果使用 VB則可使用PaintPicture函式： 優點：直接載入整張圖像 缺點：需要花費時間去計算繪圖來源區域
PaintPicture(source,dx,dy,dwidth,dhight,sx,sy,swidth,sheight,opcode) source：繪圖來源物件 (dx,dy)：目標區座標 (dwidth, dhight)：目標區繪圖區域大小 (sx, sy)：來源區座標 (swidth, sheight)：來源區圖形區域大小 opcode：vb控制碼 優點：直接載入整張圖像 缺點：需要花費時間去計算繪圖來源區域

47 透空動畫 遊戲中一定會運用到的基本技巧。 結合連續貼圖以及透空效果來產生背景圖上的動畫效果。

48 透空動畫 void MyPaint(HDC hdc) { if(num == 8) num = 0; //於mdc中貼上背景圖
SelectObject(bufdc,bg); BitBlt(mdc,0,0,640,480,bufdc,0,0,SRCCOPY); //於mdc上進行透空處理 SelectObject(bufdc,dra); BitBlt(mdc,x,y,95,99,bufdc,num*95,99,SRCAND); BitBlt(mdc,x,y,95,99,bufdc,num*95,0,SRCPAINT); //將最後畫面顯示於視窗中 BitBlt(hdc,0,0,640,480,mdc,0,0,SRCCOPY); tPre = GetTickCount(); //記錄此次繪圖時間 num++; x-=20; //計算下次貼圖座標 if(x<=-95) x = 640; }

49 進階動畫顯示技巧

50 進階動畫顯示技巧 動畫的基本要求： 流暢度 真實性 貼圖常常會因為一些細節使得畫面產生不自然感覺。

51 貼圖座標修正

52 貼圖座標修正 利用貼圖座標的位移，使得小瑕疵可以變得更細微或者消失

53 排序貼圖 源自於物體遠近呈現的一種貼圖概念

54 排序貼圖 氣泡排序法(bubble sort)，來處理這類的問題 7 5 2 1 3 5 2 1 3 7 2 1 3 5 7

55 橫向卷軸移動

56 橫向卷軸移動 以循環移動背景圖的方式，讓玩家在遊戲中，置身在動態的背景環境中。

57 單一背景捲軸 利用一個相當大的背景圖 當遊戲進行隨著畫面中人物的移動，背景的顯示區域跟著移動。

58 單一背景捲軸

59 單一背景捲軸

60 單一背景捲軸 若要觀看(X1,Y1)座標，而且畫框長為「W」，寬為「H」，就可以從(X1,Y1)座標取得長為W 寬為H的圖框並顯示於螢幕。以Direct Draw 的貼圖函式為例： 畫框.BltFast(畫框上的左上角X座標, 左上角Y座標, 原始圖, Rect(X1,Y1,W,H)

61 單背景循環捲動 不斷的進行背景圖的裁切與接合。下圖為原理

62 單背景循環捲動

63 單背景循環捲動

64 單背景循環捲動

65 單背景循環捲動 void MyPaint(HDC hdc) { //裁取背景圖右邊部份進行貼圖
BitBlt(mdc,0,0,x,480,bufdc,640-x,0,SRCCOPY); //裁取背景圖左邊部份進行貼圖 BitBlt(mdc,x,0,640-x,480,bufdc,0,0,SRCCOPY); //將接合後的背景圖貼到視窗中 BitBlt(hdc,0,0,640,480,mdc,0,0,SRCCOPY); tPre = GetTickCount(); x += 10; if(x==640) x = 0; }

66 多背景循環捲軸 由於不同背景在遠近層次上以及實際視覺移動速度的不同，因此以貼圖的方式製作時，須能夠決定不同背景貼圖的先後順序及捲動速度。

67 互動地圖捲軸 是一個固定的大小的地圖，隨著使用者的指標移動或者畫面中的物件移動而移動範圍。 只有當達到邊境時才停止上述的行為。
不須像前面”連續背景圖”須判定是否達到邊界。

68 遮罩點的處理 在2D的遊戲中，我們常見的就是主角人物或者是敵人與背景圖的互動，通常主角或敵人是不可能直接通過所謂的障礙物，它們可能要跳起來通過障礙物或者是將障礙物擊破，如下圖所示：

69 遮罩點的處理

70 遮罩點的處理

71 遮罩點的處理 假設遊戲一開始是顯示在第4行到第8行的陣列圖，如下圖所示：

72 遮罩點的處理 然後我們將主角往前動一格，而背景遮罩向後推 一格，如下圖所示

73 遮罩點的處理 我們可以利用矩陣代表整個情況。 若是障礙物則矩陣座標值為1 反之為0

74 透視圖製作

75 透視圖製作 使用一種如同建築美術的圖像表現法，稱之為「透視圖」，它可以用來提升2D遊戲的畫面立體感，讓玩家不是在3D的顯像技術裡也能感受到遊戲畫面的立體感，以增加遊戲畫面的品質。

76 透視圖簡介 透視圖在建築美術設計的領域裡，它有三種較為特殊的表視法，分別稱為 一點透視法 二點透視法 三點透視法

77 一點透視法 透視圖簡介 縱向的直線與賽視點的水平線是呈垂直的，而縱 向的直線與橫則呈平行。如下圖所示：

78 二點透視法 就是一個畫面中有兩個消失點的透視圖，通常我 們用這種技術來表現建築物正面與側面同時存在 的圖畫。如下圖所示：

79 三點透視法 就是有三點消失點，以一個美術人員而言，它是 三種透視圖較為困難的。如下圖所示：

80 透視圖在遊戲的應用 A面為前景，B面為背景

81 透視圖在遊戲的應用 因為遠近，所以當整個圖往左移動，A的消失範圍會比B來的大。

82 Thank You !