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

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

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

2D基本貼圖

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

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

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

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

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

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

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

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

2D畫面特效

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

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

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

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

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

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

遊戲地圖製作

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

平面地圖貼圖 平面貼圖編號計算： 列編號=索引值 / 每一列的圖塊個數(行數); 行編號=索引值%每一列的圖塊個數(行數); 驗證上列公式: 使用一維陣列定義地圖內容，陣列上每個元素的索引值是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(行)

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

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

斜角地圖貼圖 斜角貼圖座標計算（衍生觀念）: 圖塊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;

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

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

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

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

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

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

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

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

遊戲動畫簡介

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

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

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

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

一維連續貼圖 (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

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

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

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

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

一維連續貼圖 //遊戲迴圈 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);

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

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

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

透空動畫 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; }

進階動畫顯示技巧

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

貼圖座標修正

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

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

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

橫向卷軸移動

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

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

單一背景捲軸

單一背景捲軸

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

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

單背景循環捲動

單背景循環捲動

單背景循環捲動

單背景循環捲動 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; }

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

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

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

遮罩點的處理

遮罩點的處理

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

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

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

透視圖製作

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

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

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

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

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

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

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

Thank You !