---

內容簡介

1、第三部分第三課：?SDL開發游戲之顯示圖像

2、第三部分第四課預告：?SDL開發游戲之事件處理

---

第三部分第三課：SDL開發游戲之顯示圖像

上一課中，我們學習了如何加載SDL庫（SDL_Init），釋放SDL庫（SDL_Quit），如何打開一個窗口（Window），如何使用表面（Surface）。

這些都是SDL庫最最基本的操作。暫時，我們只會給窗口自帶的表面上點顏色，好像挺乏味的。

這一課我們來學習如何插入圖片。上一課我們說過，SDL中繪制圖樣需要在Surface上進行。Surface就好像一個畫板。所以，我們來學習如何在Surface上“貼上”圖片。

然而，SDL的庫默認只能載入BMP格式的圖片，那我們要載入其他格式（PNG，JPG，GIF等）的圖片怎么辦呢？

我們就需要使用到SDL_p_w_picpath這個SDL的插件（或稱擴展）。我們會學習如何給SDL庫安裝插件。

還將學習如何設置圖片的透明度。

老的SDL版本一般是1.2版，但是目前已經不再怎么更新了吧。SDL官網最新的穩定版本（截止2015年8月13日）是SDL2.0.3，有人說2.0.4版也快發布了。

SDL1.2到SDL2.0，是一個很大的飛躍，增加了很多新的元素，性能也增強了很多。

不過可惜的是SDL2的API不向后兼容，不過一般來說SDL1.2編寫的程序要遷移到SDL2.0，改動是不太大的。官網也有migration（遷移）的教程貼（全是英語，又一次“論學好英語對編程的幫助”，雖不是必須，但做編程不會英語是很可惜的）：

http://wiki.libsdl.org/MigrationGuide

推薦一個不錯的百度貼吧：SDL吧

http://tieba.baidu.com/f?kw=sdl&ie=utf-8

如果你英語還不錯，那么SDL官網的WiKi毫無疑問是最好的老師了，所有你想知道的SDL的知識幾乎都在WiKi里：

http://wiki.libsdl.org/

注：小編會在Mac OS下的XCode上用SDL2來編寫演示下面的課程。其他平臺（Windows，Linux等）類似，就是環境配置略有不同，也會講解如何配置。SDL具有可移植性。

---

加載BMP格式的圖片

加載圖片是開發游戲很基本很重要的一點，因為游戲中的精靈（sprite）是由一張張圖片構成的。

基礎的SDL庫是比較簡單的，為了節省代碼量，它只支持加載一種圖片格式：BMP，這種圖片的后綴是 .bmp。

雖然我們平時用的圖片格式是PNG和JPG居多，但是BMP也是一種常用的格式。

BMP取自位圖BitMaP的縮寫，也稱為DIB（與設備無關的位圖），是微軟視窗圖形子系統（Graphics Device Interface）內部使用的一種位圖圖形格式，它是微軟視窗平臺上的一個簡單的圖形文件格式。

BMP文件通常是不壓縮的，所以它們通常比同一幅圖像的壓縮圖像文件格式要大很多。例如，一個800×600的24位幾乎占據1.4MB空間。因此它們通常不適合在因特網或者其他低速或者有容量限制的媒介上進行傳輸。但是BMP文件被電腦讀取也快一些，畢竟不需要解壓縮這一步。

但是也不要擔心，正如開頭我們所說，我們可以通過給SDL添加一個插件SDL_p_w_picpath，獲得加載其他各種圖片格式的能力。

加載BMP圖片

要加載BMP圖片，在SDL中我們只需要調用SDL_LoadBMP函數。

函數原型如下：

SDL_Surface*?SDL_LoadBMP(const?char*?file)

這個函數很簡單，只有一個參數，就是一個字符串，指明要加載的BMP圖片的路徑。

返回值則是一個SDL_Surface的指針。

我們就來加載下面這個BMP圖像試試吧（下面的圖片是JPG格式的，因為BMP格式太大，有1.4MB，所以我制作成了JPG格式，小很多。大家可以下載這個圖片，然后轉存為BMP格式，或者用自己的圖片）:

代碼如下：

#include?<SDL2/SDL.h> #include?<unistd.h>/*?窗口寬和高?*/ #define?WINDOW_WIDTH?800 #define?WINDOW_HEIGHT?600 /*?窗口標題?*/ #define?WINDOW_TITLE?"SDL窗口" /*?窗口?*/ SDL_Window*?window?=?NULL; /*?窗口自帶的表面（Surface）?*/ SDL_Surface*?screen?=?NULL; /*?加載BMP圖片后返回的表面?*/ SDL_Surface*?p_w_picpath?=?NULL;int?main(int?argc,?char*?args[]) {if(SDL_Init(SDL_INIT_VIDEO)?<?0)?{??//?如果初始化SDL失敗printf("SDL2?不能被初始化，SDL2_Error?:?%s\n",?SDL_GetError());}?else?{//?創建寬800像素，高600像素的窗口。window?=?SDL_CreateWindow(WINDOW_TITLE,SDL_WINDOWPOS_CENTERED,SDL_WINDOWPOS_CENTERED,WINDOW_WIDTH,WINDOW_HEIGHT,SDL_WINDOW_SHOWN);//?取得窗口自帶的表面screen?=?SDL_GetWindowSurface(window);//?加載BMP圖片p_w_picpath?=?SDL_LoadBMP("/Users/enmingxie/Desktop/TestSDL2/ubuntu.bmp");//?將BMP圖片的表面貼到窗口自帶的表面上SDL_BlitSurface(p_w_picpath,?NULL,?screen,?NULL);//?刷新窗口表面SDL_UpdateWindowSurface(window);}pause();??//?暫停SDL_FreeSurface(p_w_picpath);????//?釋放BMP圖片表面SDL_DestroyWindow(window);??//?釋放窗口SDL_Quit();???//?釋放SDLreturn?0; }

運行結果如下圖所示：

我們的BMP圖片的原始像素是800 x 600，所以正好填充滿整個窗口（窗口也是 800 x 600）。

上面代碼通過注釋應該不難理解，不過我們還是講一下其中的一個函數SDL_BlitSurface。

這個函數的作用是將一個表面貼到另一個表面上。

我們創建一個窗口（window）后，窗口自帶一個表面，可以由SDL_GetWindowSurface取得。這個表面如果不做設定，默認是沒有顏色的（也就是黑色）。如果把這個表面看成一張黑色的紙面，那么我們還可以創建很多其他大大小小的紙面（Surface），黏貼到這張紙面上。

函數原型如下：

int?SDL_BlitSurface(SDL_Surface*?src,?const?SDL_Rect*?srcrect,?SDL_Surface*?dst,?SDL_Rect*?dstrect)

這個函數接受四個參數：

src	源表面，也就是要黏貼的那個表面
srcrect	一個SDL_Rect結構體，代表了黏貼的表面的位置和寬高；如果設定為NULL，那么就是拷貝整個表面
dst	目的表面，也就是被黏貼的那個表面
dstrect	一個SDL_Rect結構體，代表了被貼的表面的位置和寬高；如果設定為NULL即可，那就是從表面左上角開始拷貝

返回值：

• 0 ：如果黏貼成功。

• 一個負值：代表錯誤信息，如果失敗。可以調用SDL_GetError函數來獲得錯誤信息。

順便介紹一下SDL_Rect結構體的定義：

Rect是rectangle的前四個字母，就是英語“矩形”的意思。所以SDL_Rect就是SDL的矩形的結構體定義。

在SDL源代碼中，此結構體的定義如下：

typedef?struct{Sint16?x,?y;Uint16?w,?h; }?SDL_Rect;

這個結構體包含四個參數：

x	矩形的左上角的橫坐標值
y	矩形的左上角的縱坐標值
w	矩形的寬
h	矩形的高

給應用添加圖標

通常我們創建一個應用程序（游戲也是一種應用程序），都會給它添加自定義的圖標。一般我們都說圖標是icon，是英語“圖標”的意思。

如果沒有添加圖標，那么應用被添加到桌面或者是任務欄時都會是空白的，很難看。一般來說，添加的圖標也會顯示在打開應用時的窗口的左上角，增加美觀度。

那么我們如何給窗口添加圖標呢？

用SDL_SetWindowIcon函數就可以。

函數原型如下：

void?SDL_SetWindowIcon(SDL_Window*?window,?SDL_Surface*?icon)

這個函數沒有返回值，接受兩個參數，第一個參數不難理解，就是要添加圖標的那個窗口，第二個參數是加載圖標的圖片后返回的表面。

第二個參數的類型又是SDL_Surface* 這個指針，所以我們可以用加載BMP圖像來得到圖標所對應的那個表面。

我們要添加的圖標如下：

完整代碼如下：

#include?<SDL2/SDL.h> #include?<unistd.h>/*?窗口寬和高?*/ #define?WINDOW_WIDTH?800 #define?WINDOW_HEIGHT?600 /*?窗口標題?*/ #define?WINDOW_TITLE?"SDL窗口" /*?窗口?*/ SDL_Window*?window?=?NULL; /*?窗口自帶的表面（Surface）?*/ SDL_Surface*?screen?=?NULL; /*?加載BMP圖片后返回的表面?*/ SDL_Surface*?p_w_picpath?=?NULL; /*?加載圖標后返回的表面?*/ SDL_Surface*?icon?=?NULL;int?main(int?argc,?char*?args[]) {if(SDL_Init(SDL_INIT_VIDEO)?<?0)?{??//?如果初始化SDL失敗printf("SDL2?不能被初始化，SDL2_Error?:?%s\n",?SDL_GetError());}?else?{//?創建寬800像素，高600像素的窗口。window?=?SDL_CreateWindow(WINDOW_TITLE,SDL_WINDOWPOS_CENTERED,SDL_WINDOWPOS_CENTERED,WINDOW_WIDTH,WINDOW_HEIGHT,SDL_WINDOW_SHOWN);//?加載圖標的圖片icon?=?SDL_LoadBMP("/Users/enmingxie/Desktop/TestSDL2/mushroom.bmp");//?設置窗口圖標SDL_SetWindowIcon(window,?icon);//?取得窗口自帶的表面screen?=?SDL_GetWindowSurface(window);//?加載BMP圖片p_w_picpath?=?SDL_LoadBMP("/Users/enmingxie/Desktop/TestSDL2/ubuntu.bmp");//?將BMP圖片的表面貼到窗口自帶的表面上SDL_BlitSurface(p_w_picpath,?NULL,?screen,?NULL);//?刷新窗口表面SDL_UpdateWindowSurface(window);}pause();??//?暫停SDL_FreeSurface(p_w_picpath);?????//?釋放BMP圖片表面SDL_DestroyWindow(window);??//?釋放窗口SDL_Quit();???//?釋放SDLreturn?0; }

運行一下代碼。

在Mac OS中，雖然在xCode中運行時不會在窗口左上角產生圖標，但是應用的圖標是會改變成這只萌萌的大蘑菇的（再看我，再看我就把你吃掉...）：

如果是在Windows中，那么是會在窗口左上角出現這個蘑菇的圖標的。

---

使用SDL_p_w_picpath插件，加載更多類型圖片

SDL默認只支持加載BMP類型的圖片，雖說這種類型的圖片在游戲開發中可以使游戲加載更快（不需要對圖片進行解壓縮），但是今天我們在網絡上傳播時一般使用JPG，PNG，GIF等圖片格式。

SDL存在不少插件，這些插件就好像平時我們用瀏覽器，例如Chrome，火狐之類，也會有add-on（稱為擴展或插件），我們只需要安裝到瀏覽器，就能獲得額外的功能。SDL的基本功能雖然很強大，但是如果有了更多插件的配合，則威力更甚。

SDL的一些插件的匯總頁面：

http://www.libsdl.org/projects/

在這個頁面，有一個項目，SDL_p_w_picpath，就是我們此處要使用的插件：

只要安裝了這個插件，那么SDL在BMP圖片格式以外，還可以支持：GIF, JPEG, LBM, PCX, PNG, PNM, TGA, TIFF, WEBP, XCF, XPM, XV 這些圖片格式。

我們來到SDL_p_w_picpath的主頁：

http://www.libsdl.org/projects/SDL_p_w_picpath/

我們所要安裝的包是Development Libraries對應的那個，不是Runtime Binaries對應的那個。Development Libraries是英語“開發庫”的意思，就是我們做開發的時候需要用到的庫。Runtime Binaries是英語“運行時二進制文件”的意思，是安裝以后可以供運行應用的安裝包，只用于運行，不用與開發。

---

Windows下安裝SDL_p_w_picpath插件

一般在Windows中我們使用SDL做開發，會用到的IDE是Codeblocks或者Visual C++（也包含在Visual Studio中）。

Codeblocks安裝SDL_p_w_picpath插件

下載那個 SDL2_p_w_picpath-devel-2.0.0-mingw.tar.gz 的文件，解壓。

打開你的SDL項目，點擊菜單欄中的 項目->屬性

點擊 Project's Build Options... 按鈕

添加 -lSDL2_p_w_picpath

然后，如果系統是32位Windows的，則把對應的那些DLL文件都放到 C:\WINDOWS\SYSTEM32 文件夾下；如果是64位Windows系統，則把對應的那些DLL文件都放到 C:\Windows\SysWOW64 文件夾下。

Visual C++安裝SDL_p_w_picpath插件

下載那個 SDL2_p_w_picpath-devel-2.0.0-VC.zip的文件，解壓。

打開你的SDL項目，點擊 項目 -> 屬性：

然后，如果系統是32位Windows的，則把對應的那些DLL文件都放到 C:\WINDOWS\SYSTEM32 文件夾下；如果是64位Windows系統，則把對應的那些DLL文件都放到 C:\Windows\SysWOW64 文件夾下。

小編我發現了，Windows下面開發SDL是最麻煩的... 在Linux和Mac OS X下SDL的各種配置都沒有Windows下面那么麻煩，也是醉了。

怪不得好多讀者在Windows下一直配置SDL2不成功，而且64位Windows和32位Windows的配置也有差異，Win XP，Win 7和Win8什么的也有差異。

---

Linux下安裝SDL_p_w_picpath插件

如果你使用的是Ubuntu，Fedora，CentOS之類常用的Linux發行版，那么安裝很簡單。只需要用命令行來安裝即可：

• Debian一族或Ubuntu中安裝SDl_p_w_picpath插件：

• sudo?apt-get?install?libsdl2-p_w_picpath-dev

• Redhat一族或Fedora或CentOS中安裝SDl_p_w_picpath插件：

• sudo?yum?install?SDL2_p_w_picpath-devel

如果你的Linux發行版沒有如上所示的包管理軟件可以幫你快速安裝SDL_p_w_picpath插件，那也不要急，你可以下載其源碼，自己編譯，安裝：

下載源代碼

去SDL_p_w_picpath的頁面，下載那個 Source 下面的隨意一個，一般推薦下載tar.gz的那個：

解壓文件

（如果下載的是那個zip文件，那么也可以用對應解壓軟件解壓）

tar?zxvf?SDL_p_w_picpath-2.0.0.tar.gz

編譯源碼

cd?SDL_p_w_picpath-2.0.0 ./configure make

安裝

sudo?make?install

---

Mac下安裝SDL_p_w_picpath插件

下載Development Libraries（不是Runtime Binaries）下的那個 SDL2_p_w_picpath-2.0.0.dmg 文件。

打開Finder，也可以隨便打開哪個文件夾，同時按下 Cmd + Shift + G這三個鍵，就會打開一個對話框，輸入 /Library/Frameworks

點擊“前往”，就到了 /Library/Frameworks 這個文件夾中。

雙擊下載的SDL2_p_w_picpath-2.0.0.dmg文件，會解壓為如下所示：

將其中的 SDL2_p_w_picpath.framework 這個文件拷貝到/Library/Frameworks 這個文件夾中，會讓你輸入管理員密碼。輸入后，確定，拷貝完畢：

然后進入你的xCode中的SDL的項目，點擊項目名稱，就會顯示設置頁。可以看到Link Binary With Libraries 那欄目前只有一個SDL2.framework（此前我們創建SDL2的項目時添加的），我們需要添加 SDL2_p_w_picpath.framework。點擊那個加號，如下圖：

點擊+號之后會彈出如下窗口，點擊 Add Others：

然后用老方法，同時按下 Cmd + Shift + G這三個鍵，就會打開一個對話框，輸入 /Library/Frameworks

點擊Go，進入/Library/Frameworks，選擇SDL2_p_w_picpath.framework，點擊Open；或者雙擊SDL2_p_w_picpath.framework文件也可以：

SDL2_p_w_picpath.framework就添加到我們xCode的SDL項目的鏈接庫中了，可以看到多了一項：

---

如何調用SDL_p_w_picpath的內容

要想調用SDL_p_w_picpath庫的內容，其實很簡單，只需要在程序的開頭處插入一個預處理命令：

Linux或者Windows平臺如下：

#include?<SDL/SDL_p_w_picpath.h>

Mac OS X與其他平臺不一樣，使用：

#include?<SDL2_p_w_picpath/SDL_p_w_picpath.h>

加載圖片

一般來說，只需要使用一個函數即可：IMG_Load，這個函數可以接受任意格式（只要是SDL_p_w_picpath支持的格式）的圖片作為參數。

函數原型：

SDL_Surface*?IMG_Load(const?char?*file)

可以看到與之前加載BMP圖片的SDL_LoadBMP函數是很類似的。唯一的參數就是圖片的路徑，返回值也是一個SDL_Surface指針。

我們來試著加載一個PNG格式的圖片（以Mac OS X下為例，所以如果是其他平臺，記得將代碼中的#include <SDL2_p_w_picpath/SDL_p_w_picpath.h>?改為?#include <SDL/SDL_p_w_picpath.h>）：

我們要載入的PNG圖片如下：

代碼如下：

#include?<unistd.h> #include?<SDL2/SDL.h> #include?<SDL2_p_w_picpath/SDL_p_w_picpath.h>/*?窗口寬和高?*/ #define?WINDOW_WIDTH?800 #define?WINDOW_HEIGHT?600 /*?窗口標題?*/ #define?WINDOW_TITLE?"SDL窗口" /*?窗口?*/ SDL_Window*?window?=?NULL; /*?窗口自帶的表面（Surface）?*/ SDL_Surface*?screen?=?NULL; /*?加載BMP圖片后返回的表面?*/ SDL_Surface*?p_w_picpath?=?NULL; /*?加載圖標后返回的表面?*/ SDL_Surface*?icon?=?NULL; /*?加載PNG圖片后返回的表面?*/ SDL_Surface*?pngImage?=?NULL; /*?PNG圖片的矩形：左上角橫、縱坐標，寬，高?*/ SDL_Rect?positionPNG;int?main(int?argc,?char*?args[]) {if(SDL_Init(SDL_INIT_VIDEO)?<?0)?{??//?如果初始化SDL失敗printf("SDL2?不能被初始化，SDL2_Error?:?%s\n",?SDL_GetError());}?else?{//?創建寬800像素，高600像素的窗口。window?=?SDL_CreateWindow(WINDOW_TITLE,SDL_WINDOWPOS_CENTERED,SDL_WINDOWPOS_CENTERED,WINDOW_WIDTH,WINDOW_HEIGHT,SDL_WINDOW_SHOWN);//?加載圖標的圖片icon?=?SDL_LoadBMP("/Users/enmingxie/Desktop/TestSDL2/mushroom.bmp");//?設置窗口圖標SDL_SetWindowIcon(window,?icon);//?取得窗口自帶的表面screen?=?SDL_GetWindowSurface(window);//?加載BMP圖片p_w_picpath?=?SDL_LoadBMP("/Users/enmingxie/Desktop/TestSDL2/ubuntu.bmp");//?將BMP圖片的表面貼到窗口自帶的表面上SDL_BlitSurface(p_w_picpath,?NULL,?screen,?NULL);//?加載PNG圖片pngImage?=?IMG_Load("/Users/enmingxie/Desktop/TestSDL2/frog.png");//?設置PNG圖片的矩形positionPNG.x?=?125;?//?左上角橫坐標positionPNG.y?=?100;?//?左上角縱坐標positionPNG.w?=?150;?//?寬150像素positionPNG.h?=?193;?//?寬193像素//?將PNG圖片的表面貼到窗口自帶的表面上SDL_BlitSurface(pngImage,?NULL,?screen,?&positionPNG);//?刷新窗口表面SDL_UpdateWindowSurface(window);}pause();??//?暫停SDL_FreeSurface(p_w_picpath);?????//?釋放BMP圖片表面SDL_DestroyWindow(window);??//?釋放窗口SDL_Quit();???//?釋放SDLreturn?0; }

運行，結果如下：

---

圖片的透明度

設置圖片的透明度（transparency）在開發游戲中十分常用。因為當我們有好多表面一張貼著一張時，有時候就需要設置某一些圖片背景透明，不然會很難看。

有兩種設置透明度的方式：

Color Keying：也就是采用設置三原色的方式，對圖片的紅，綠，藍分別設置。使用函數：SDL_SetColorKey

函數原型：int SDL_SetColorKey(SDL_Surface* surface, int flag, Uint32 key)

surface	要更改的圖片對應的表面指針
flag	如果是SDL_TRUE，則激活color key設置；如果是 SDL_FALSE，則不能設置color key
key	透明度像素

代碼樣例：

上面的代碼將圖片的藍色完全變成透明，也就是完全抹去。大家可以用背景為藍色的圖片試一下。

SDL_Surface*?loadedSurface?=?IMG_Load("圖片路徑"); SDL_SetColorKey(loadedSurface,?SDL_TRUE,?SDL_MapRGB(loadedSurface->format,?0,?0,?0xFF?)); }

Alpha混合：英語是Alpha Blending。使用函數SDL_SetSurfaceAlphaMod。

函數原型：

int SDL_SetSurfaceAlphaMod(SDL_Surface* surface, Uint8 alpha)

surface	要更改的圖片對應的表面指針
alpha	alpha值，0~255之間的整數值。255表示完全不透明；0表示完全透明；所以數值從255到0透明度依次遞增

---

總結

SDL中可以在Surface（表面）上載入圖片，默認SDL只能載入BMP格式的圖片。

我們可以安裝SDL_p_w_picpath這個第三方庫或者插件，使得SDL除了默認的BMP圖片格式外，還能加載很多其他圖片格式。

我們可以用SDL_SetColorKey來設置圖片上某一種（幾種）顏色的透明（也就是不顯示）。

我們可以用SDL_SetSurfaceAlphaMod來設置圖片整體的透明度，從255~0的整數范圍內取值。255表示完全不透明，0表示完全透明（圖片消失）。

---

第三部分第四課預告：

今天的課就到這里，一起加油吧。

下一次我們學習： ?SDL開發游戲之事件處理

轉載于:https://blog.51cto.com/4526621/1687890

總結

以上是生活随笔為你收集整理的【C语言探索之旅】第三部分第三课：SDL开发游戏之显示图像的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。