精靈頁是保存在一個圖像文件上的所有圖片。如果你想處理很多圖片，但又不想處理很多圖像文件的話是非常有用的。你可以在Blit的時候對一部分進行剪切，這樣就能夠得到單個的圖片，下面我們就看看怎么樣從一張精靈頁上剪切一張圖片。

// The?surfaces
SDL_Surface? * dots? = ?NULL;
SDL_Surface? * screen? = ?NULL;

// The?event?structure
SDL_Event? event ;

// The?portions?of?the?sprite?map?to?be?blitted
SDL_Rect?clip[? 4 ?];

以上是一些全局的變量。屏幕表面，事件是我們看到過的。我們也有一個保存所有圓點精靈的表面，也就是精靈頁。最后是定義了一個有四個元素的數組，它們將保存4個圓點精靈的偏移和尺寸。

void ?apply_surface(? int ?x,? int ?y,?SDL_Surface * ?source,?SDL_Surface * ?destination,?SDL_Rect * ?clip? = ?NULL?)
{
???? // Holds?offsets
????SDL_Rect?offset;
????
???? // Get?offsets
????offset.x? = ?x;
????offset.y? = ?y;
????
???? // Blit
????SDL_BlitSurface(?source,?clip,?destination,? & offset?);
}

以上是我們的Blit函數，比起前幾篇教程的函數略有不同。我們在函數中加了一個SDL_Rect參數，該參數傳遞我們要剪切的源表面的哪一部分表面。

??? // Clip?range?for?the?top?left
????clip[? 0 ?].x? = ? 0 ;
????clip[? 0 ?].y? = ? 0 ;
????clip[? 0 ?].w? = ? 100 ;
????clip[? 0 ?].h? = ? 100 ;
????
???? // Clip?range?for?the?top?right
????clip[? 1 ?].x? = ? 100 ;
????clip[? 1 ?].y? = ? 0 ;
????clip[? 1 ?].w? = ? 100 ;
????clip[? 1 ?].h? = ? 100 ;
????
???? // Clip?range?for?the?bottom?left
????clip[? 2 ?].x? = ? 0 ;
????clip[? 2 ?].y? = ? 100 ;
????clip[? 2 ?].w? = ? 100 ;
????clip[? 2 ?].h? = ? 100 ;
????
???? // Clip?range?for?the?bottom?right
????clip[? 3 ?].x? = ? 100 ;
????clip[? 3 ?].y? = ? 100 ;
????clip[? 3 ?].w? = ? 100 ;
????clip[? 3 ?].h? = ? 100 ;

在主函數中，當所有的東西都準備就緒了，我們就開始設置一下剪切區域
假設我們要剪切如下的精靈頁：

我們把要剪切的矩形設置成指定的區域。

?

現在我們用SDL_FillRect()函數把屏幕填充成白色，該函數有二個參數，第一個就是要填充的表面，第二個就是顏色了。

現在我們就開始Blit精靈，注意，我們每次Blit的源都是同一個，只是我們選取了不同的區域而已。

最后的結果就如下了。