1 / 88

Chapter 18 遊戲畫面繪圖

Chapter 18 遊戲畫面繪圖. 基本螢幕繪圖. GDI(Graphics Device Interface) 中文可譯為「圖形裝置介面」，是 Windows API 中相當重要的一個成員，它掌管了所有顯像裝置的視訊顯示及輸出功能 。. 螢幕區、視窗區與內部視窗區. 對一個遊戲程式來說，當視窗建立之後，顯示的螢幕上便劃分為三個區域 螢幕區 (Screen) 視窗區 (Window) 內部視窗區 (Client). Device Context.

misha
Download Presentation

Chapter 18 遊戲畫面繪圖

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 18 遊戲畫面繪圖

  2. 基本螢幕繪圖 • GDI(Graphics Device Interface)中文可譯為「圖形裝置介面」，是Windows API中相當重要的一個成員，它掌管了所有顯像裝置的視訊顯示及輸出功能 。

  3. 螢幕區、視窗區與內部視窗區 • 對一個遊戲程式來說，當視窗建立之後，顯示的螢幕上便劃分為三個區域 • 螢幕區(Screen) • 視窗區(Window) • 內部視窗區(Client)

  4. Device Context • 一般常稱為DC，就繪圖的觀點來說，DC就是程式可以進行繪圖的地方。舉例來說，如果我們要在整個螢幕區上繪圖，那麼Device(裝置)就是螢幕，而Device Context就是螢幕區上的繪圖層。

  5. 回顧前面訊息處理函式中關於處理視窗重繪訊息的程式片段：回顧前面訊息處理函式中關於處理視窗重繪訊息的程式片段： 1case WM_PAINT: //視窗重繪訊息 2hdc = BeginPaint(hWnd, &ps); 3EndPaint(hWnd, &ps); 4 break;

  6. X軸(向右為正) 座標系統 (0,0) Y軸(向下為正)

  7. 繪圖視窗的座標 原點座標依繪圖區不同而不同

  8. 畫筆與畫刷 • 畫筆與畫刷都是GDI中所定義的圖形物件，畫筆是線條的樣式，畫刷是封閉圖形內部的填充樣式。 • GDI物件一經建立便會佔用部分記憶體，一旦不使用的時候請務必將它們刪除。

  9. 使用預設值以及自訂畫筆畫刷所繪製的填充矩形：使用預設值以及自訂畫筆畫刷所繪製的填充矩形：

  10. 要自訂畫筆或畫刷，使用下列三個API函式 HPEN CreatePen (int 樣式, int 寛度, COLORREF 顏色); //建立畫筆 HBRUSH CreateHatchBrush (int 樣式, COLORREF 顏色); //建立陰影畫刷 HBRUSH CreateSolidBrush (COLORREF 顏色); //建立單色畫刷

  11. 畫筆及畫刷繪圖範例

  12. 範例程式：全域變數宣告 H 代表 handle 指定7種系統提供的畫筆陣列 指定6種系統提供的陰影畫刷陣列

  13. 範例程式：InitInstance() 建立視窗物件 設定位置及大小 設定顯示狀態 繪製在顯示設備

  14. 範例程式：InitInstance() 建立各種 畫筆與畫刷 呼叫GetDC()取得視窗DC 釋放視窗DC

  15. 範例程式：MyPaint()

  16. 範例程式：WndProc()

  17. Exercise 03 • 寫一個Windows API程式，利用Rectangle將繪圖視窗變為黃色，並利用畫線方式，用藍色線在繪圖視窗中畫一個X。 • 專案名稱為『學號_03』 • (例：8223582_03) • 編譯及執行無誤後，使用ftp將『學號_03.cpp』上傳至192.192.155.217的EX03目錄下，帳號：student5，密碼：student5

  18. GDI繪圖函式 • 在上一節中，畫筆和畫刷是學習螢幕繪圖及GDI的第一堂課，並接觸了幾個簡單的GDI繪圖函式 • 文字輸出 • 有時候需要在畫面上顯示一些數據、資訊，這時候就會在繪圖視窗上做文字輸出

  19. 範例程式：WndProc( )

  20. 範例程式：MyPaint( )

  21. 執行結果

  22. 函式名稱 說明 Polygon 繪製封閉多邊形 PolyLine 繪製多邊線條 PolylineTo 以目前畫筆所在位置繪製多邊線條 PolyPolygon 繪製多個封閉多邊形 PolyPolyline 繪製多個多邊線條 GDI函式中關於多邊形的繪圖函式有以下幾個

  23. 封閉圖形函式 • 橢圓形的GDI函式： BOOL Ellipse( HDC hdc, int 外圍矩形左上點X座標, int 外圍矩形左上點Y座標, int 外圍矩形右下點X座標, int 外圍矩形右下點Y座標); 圖中的虛線部份就是外圍矩形，當我們呼叫 Ellipse()函式時只要傳入外圍矩形的座標， 便會畫出實線部份的橢圓形。

  24. 繪製圓角矩形的函式 BOOL RoundRect( HDC hdc, int 外圍矩形左上點X座標, int 外圍矩形左上點Y座標, int 外圍矩形右下點X座標, int 外圍矩形右下點Y座標, int 圓角上橢圓長 int 圓角上橢圓高); 以上函式中除了定出外圍矩形的座標，還定 出圓角上橢圓的長與高來表示圓角的弧度， 如圖示，實線部份是實際畫出的圓角矩形。

  25. 扇形(Pie)和弓形(Chord) Pie( ) Chord( )

  26. 繪製點陣圖 • 點陣圖從檔案載入到繪製於視窗中必須經過以下幾個步驟： 1.從檔案載入到點陣圖(HBITMAP)物件。 2.建立一與視窗DC相容的記憶體DC。 3.記憶體DC選用步驟1所建立的點陣圖物件。 4.將記憶體DC的內容貼到視窗DC便完成顯像的動作。

  27. 要從檔案載入點陣圖我們常使用LoadImage()函式 HANDLE LoadImage( HINSTANCE 來源實體, //載入點陣圖 LPCTSTR 名稱, UINT 點陣圖類型, int 載入寛度, int 載入高度, UINT 載入方式);

  28. 貼圖

  29. 範例程式：全域變數宣告 點陣圖物件

  30. 範例程式：InitInstance()

  31. 範例程式：InitInstance() 建立一個與hdc相容的記憶體DC mdc 載入 點陣圖 選用hbmp到mdc中

  32. 範例程式：MyPaint()

  33. 範例程式：WndProc()

  34. 貼圖

  35. Exercise 04 • 寫一個Windows API程式，利用Mouse移動偵測及載入點陣圖的方法，如果Mouse移動到繪圖視窗左邊顯示圖bg.bmp，如果Mouse移動到繪圖視窗右邊顯示圖bg1.bmp。 • 專案名稱為『學號_04』 • (例：8223582_04) • 編譯及執行無誤後，使用ftp將『學號_04.cpp』上傳至192.192.155.217的EX04目錄下，帳號：student5，密碼：student5

  36. 遊戲畫面特效製作 • 透空效果

  37. 要去背的部份必須是黑色 恐龍部分是黑色 去背部分是白色

  38. 彩色圖點的二進位值為任意值 白色圖點的RGB顏色值為(255,255,255)，二進位值為111111... 黑色圖點的RGB顏色值為(0,0,0)，二進位值為000000...

  39. 遮罩圖與背景圖做AND運算

  40. 前景圖與背景圖做OR運算

  41. 範例程式：全域變數宣告 宣告點陣圖物件bg與dra 宣告一記憶體DC mdc，用來暫存點陣圖

  42. 範例程式：InitInstance() 取得視窗DC，並建立與其相容之記憶體DC 載入bg及 dra

  43. 範例程式：MyPaint() 先將背景圖貼到顯示視窗 選用恐龍圖到mdc中 遮罩圖與背景圖AND 前景圖與背景圖OR

  44. 執行結果

  45. Exercise 05 • 寫一個Windows API程式，利用Mouse移動偵測、載入點陣圖及透空貼圖的方法，如果Mouse移動到繪圖視窗的任何位置，小恐龍就會移動到什麼位置。 • 專案名稱為『學號_05』 • (例：8223582_05) • 編譯及執行無誤後，使用ftp將『學號_05.cpp』上傳至192.192.155.217的EX05目錄下，帳號：student5，密碼：student5

  46. Homework 04 • 寫一個Windows API程式，利用Mouse移動偵測、載入點陣圖及透空貼圖的方法，如果Mouse移動，小恐龍就會向滑鼠的座標位置慢慢移動過去。

  47. 半透明效果 • 半透明在遊戲中通常是用來呈現若隱若現的特殊效果 • 像是薄霧、鬼魂、隱形人物…等等 • 下一張圖是將一張點陣圖經過半透明處理後顯示於背景上的樣子

  48. 半透明圖

  49. 半透明的製作原理 • 前景圖和背景圖像素顏色的混合 • 每一個像素中都包含三原色 • 紅(R)、綠(G)、藍(B) • 由三原色值決定該像素的色彩 • 前景圖和背景圖的對應像素的顏色依某一比例來進行調配，稱為『不透明度』 半透明圖色彩=前景圖色彩*不透明度+ 背景圖色彩*(1-不透明度)

  50. 半透明的實作步驟 • 步驟一：取得點陣圖結構 • 從檔案載入點陣圖後，必須先取得該點陣圖的結構，其函式為 • 假設有一個有一個點陣圖名稱為bitbmp，點陣圖結構名稱為bm int GetObject(HGDIOBJ 物件, int 結構大小 LPVOID 結構變數); GetObject(bitmap, sizeof(BITMAP), &bm);

More Related