bada 2D遊戲編程之二——圖像繪製(1)

bada 2D遊戲編程之二——圖像繪製

 

在2D遊戲中，圖像繪製能夠說是無處不在，整個遊戲均可以看做是由繪製的圖像組成的。拿咱們所知道的遊戲背景圖片、地圖、精靈等來講，都是一張張圖片經過繪製在手機屏幕上才顯示出來的。bada平臺上繪製圖像都得經過Osp::Graphics::Canvas類提供的繪製函數。它總共提供了5個版本的繪製位圖的函數。

(1)result DrawBitmap(const Point& point, const Bitmap& bitmap);

將座標點(point)做爲位圖的左頂點來繪製位圖(bitmap)。

這也是最常規的繪製整張圖片的方式。

 

(2)result DrawBitmap(const Rectangle& destRect, const Bitmap& srcBitmap, const Rectangle& srcRect);

將位圖(srcBitmap)中某一區域(srcRect)的內容繪製到目標區域(destRect)。

這經常使用於從一張圖片中摳取部份內容進行繪製。

 

(3)result DrawBitmap(const Rectangle& rect, const Bitmap& bitmap);

將位圖(bitmap)繪製到目標區域(rect)，

這個函數經常使用於對位圖進行放縮繪製。

 

(4)result DrawBitmap(const Point& point, const Bitmap& bitmap, FlipDirection dir);

將座標點(point)做爲位圖的左頂點來繪製位圖(bitmap)，但會根據翻轉方式(dir)對位圖內容進行翻轉。

這個函數用於對圖片內容進行翻轉繪製。

 

(5)result DrawBitmap(const Point& point, const Bitmap& bitmap, const Point& pivot, int degree);

將座標點(point)做爲位圖的左頂點來繪製位圖(bitmap)，但會根據相對於位圖(bitmap)中的中心點(pivot)來旋轉必定角度(degree)進行繪製。

這個函數用於對圖片進行旋轉繪製。

 

其中的(3),(4),(5)中的函數在繪製過程當中都會對位圖進行變換處理，相對於(1)函數繪製效率低了不少。你們能夠參這篇文章《2D圖形的效率》，它對這(1), (3),(4),(5)這4個函數的繪製效率進行了詳細的對比，

http://developer.bada.com/article/2D-Graphics-performance

因此建議你們在繪製圖片前先將圖片準備好，舉例來講若是你須要一張圖片的翻轉效果，最好事先準備好翻轉效果的圖片，而後調用(1)函數直接繪製就能夠了，而不是準備一張常規的圖片，而後調用(4)函數進行翻轉繪製，這樣就能夠提供繪圖的效率。

 

下面給你們介紹在圖像繪製過程當中經常使用到的(1),(2)兩個函數，如何經過這兩個函數進行圖像的繪製。

 

在2D遊戲開發中常見的有三種圖像繪製方式：

1，  整圖繪製

這種繪製方式就是調用(1) result DrawBitmap(const Point& point, const Bitmap& bitmap)來繪製一張完整的圖片。

拿遊戲中常見的精靈動畫圖片來講，有的遊戲中會將精靈的每一個動做作成一張單獨的圖片，而後將一套動做動畫的圖片都放在同一個文件夾下方便管理。 以下面的這套精靈動做圖片：

 

   

     

   

 

這3張圖片組成了小機器人的一套動做。這樣在實現這套動做的動畫時，就須要分別加載這3張圖片，分別進行繪製。

 

下面的代碼就是如何對這三張圖片進行繪製

(1)   圖片變量聲明

Osp::Graphics::Bitmap* __robot1Bmp;

Osp::Graphics::Bitmap* __robot2Bmp;

Osp::Graphics::Bitmap* __robot3Bmp;

(2)   加載圖片

__robot1Bmp = AppResource::GetInstance()->GetBitmapN("robot_1.PNG");

__robot2Bmp = AppResource::GetInstance()->GetBitmapN("robot_2.PNG");

__robot3Bmp = AppResource::GetInstance()->GetBitmapN("robot_3.PNG");

(3)   在OnDraw函數中進行繪製

Canvas* pCanvas = GetCanvasN();

if(pCanvas){

pCanvas->DrawBitmap(Point(100,100), *__robot1Bmp);

pCanvas->DrawBitmap(Point(100,300), *__robot2Bmp);

pCanvas->DrawBitmap(Point(100,500), *__robot3Bmp);

 

delete pCanvas;

}

 

2，  區域繪製

這種繪製方式就是調用(2) result DrawBitmap(const Rectangle& destRect, const Bitmap& srcBitmap, const Rectangle& srcRect)對圖片中的部分區域進行繪製。

仍是拿遊戲中的精靈動畫圖片來講，有的遊戲中會將一個精靈相關的圖片組合成一張較大的圖片，這樣在每次進行精靈的繪製時，只須要在大圖片中找到精靈對應的區域進行區域繪製就能夠了。

下面的這張圖就是由3張精靈圖片組合而成的：

 

 

這張組合而成的大圖片也稱爲「精靈表」，精靈表就是一個圖片中包含一系列以網格形式存在的精靈圖片。能夠經過每一個精靈圖片在大圖片中的行和列的位置進行訪問。簡單的精靈表含有多個單一精靈，而且每一個精靈的維度都是相同的。這樣就很容易經過行列位置訪問表格中的某個特定精靈。就拿上面的精靈表來講，它其中包含的精靈的長度和寬度是115*100像素，這樣經過使用行列位置進行一些簡單的計算就能得出給定精靈的像素位置。例如：

X = 列*100

Y = 行*115

這樣的話對第0行第1列的精靈進行計算後得出X的值是100，Y的值爲0，也就是第2張圖片的座標位置。經過這個計算能夠得出所給精靈圖像左上角的精確像素位置。

 

下面的代碼就是如何繪製出這三張精靈圖片：

(1)   精靈表圖片變量聲明

Osp::Graphics::Bitmap* __robotBmp;

(2)   加載精靈表圖片

__robotBmp = AppResource::GetInstance()->GetBitmapN("robot.PNG");

(3)   根據精靈在精靈表中的位置進繪製

Canvas* pCanvas = GetCanvasN();

if(pCanvas){

   int spriteWidth = 100;

   int spriteHeight = 115;     pCanvas->DrawBitmap(Rectangle(100,100,spriteWidth,spriteHeight),*__robotBmp,

Rectangle(0*spriteWidth,0*spriteHeight,spriteWidth,spriteHeight));

       pCanvas->DrawBitmap(Rectangle(100,300,spriteWidth,spriteHeight),*__robotBmp,

Rectangle(1*spriteWidth,0*spriteHeight,spriteWidth,spriteHeight));

 

pCanvas->DrawBitmap(Rectangle(100,500,spriteWidth,

priteHeight),*__robotBmp,

Rectangle(2*spriteWidth,0*spriteHeight,spriteWidth,spriteHeight));

 

       delete pCanvas;

}