Bài giảng Lập trình nâng cao: Đồ hoạ với SDL - Trần Quốc Long

Graphics
7&8 - Đồ hoạ với SDL
/>

Nội dung
● Thư viện SDL
○ Cài đặt, khởi tạo, sử dụng, giải phóng

● Xây dựng API vẽ
○ Lớp Painter

● Vẽ hình bằng bút vẽ
○ Đường thẳng, hình vng, tam giác …
○ Phối hợp tạo thành các hình tuyệt đẹp
○ Vẽ ảnh JPG, PNG

● Vẽ hình fractal
○ Kỹ thuật đệ quy


Đồ họa với SDL
● />
●
●
●
●

Hướng dẫn: />SDL có thể phát triển trò chơi chuyên nghiệp
SDL dễ dàng kết nối với CodeBlocks
SDL chạy trên nhiều nền tảng (Windows,
Linux, Android, iOS …)

3 / 15


Lựa chọn thư viện
● Phát triển phần mềm trên thực tế
○ Thường cần thư viện (bên thứ 3 - third party library) ngồi tính
năng của ngơn ngữ và thư viện chuẩn của C++
○ Lựa chọn thư viện cho dự án: cần thiết và quan trọng

● Trong khóa học này, dùng SDL bởi
○ Chỉ dùng các tính năng đồ họa đơn giản
○ Đa nền tảng (cross-platform) - dễ cho sinh viên

● Để phát triển game thực thụ
○ Thường dùng các Game Engine
○ />

Các tính năng của SDL
/>● Video (2D, 3D)
● Threads
● Input events
● CPU Detection
● Force Feedback
● Timer
● Audio
● Endian independence
● File I/O
● Power Management
● Shared objects

Cài đặt SDL với CodeBlocks-MinGW
● Tải về />● Giải nén vào một thư mục nào đó, trong đó có 2 thư mục
○ Bản 32bit: i686-w64-mingw32
○ Bản 64bit: x86_64-w64-mingw32
● Ở đây ta dùng bản 32 bit (vì CodeBlock đang dùng mingw32),
trong thư mục này có 4 thư mục bin, include, lib, share
● Thư mục bin chứa SDL2.dll (liên kết khi chạy, copy file này vào thư mục
mã nguồn project)
● Thư mục include chứa các file .h (như stdio.h) khai báo các hàm của SDL
● Thư mục lib chứa các thư viện (mã đối tượng) để liên kết chương trình
6 / 15


Cấu hình CodeBlocks
Settings / Compiler ...

7 / 15


Cấu hình CodeBlocks
Liên kết thư viện:
● Linker settings: -lmingw32 -lSDL2main -lSDL2

8 / 15


Cấu hình CodeBlocks
Vị trí thư mục include và lib: Search directories | Compilers

Đường dẫn đến thư
mục chứa SDL
9 / 15


Cấu hình CodeBlocks
Vị trí thư mục include và lib: Search directories | Linker

10 / 15


Sử dụng SDL
● Khởi tạo

(0,0)

○ SDL_Init()
○ Mở cửa sổ để vẽ
○ Lấy bút vẽ của cửa sổ

● Vẽ hình
● Giải phóng SDL
○ Giải phóng bút vẽ, cửa sổ
○ SDL_Quit()

(x,y)

(width, height)

Khởi tạo SDL
# include < iostream >
# include < SD L.h>
u sin g n am esp ace std;
in t m ain (in t argc, ch ar* argv[])
{
retu rn 0 ;
}

sử dụng thư
viện SDL2


Báo lỗi SDL
void log S D LError(std::ostream & os,
con st std::string & m sg, b ool fatal= false);
void log S D LError(std::ostream & os,
con st std::string & m sg, b ool fatal)
{
os < < m sg < < " Error: " < < SD L_G etError() < < std::endl;
if (fatal) {
SD L_Q uit();
exit(1);
}
}


Khởi tạo SDL
con st in t SC REEN _W ID TH = 80 0 ;
con st in t SC REEN _H EIG H T = 60 0;

con st string W IN D O W _TITLE = "An Im plem entation of Code.org Painter";
void in itS D L(SD L_W indow * & w indow , SD L_Renderer* & renderer);

Đại diện cho cửa sổ vẽ

Đại diện cho bút vẽ


void initS D L(SD L_W indow * & w indow , SD L_Renderer* & renderer)
{
if (SD L_Init(SD L_IN IT_EVERYTH IN G ) != 0)
logSD LError(std::cout,"SD L_Init", true);

Khởi tạo SDL

Mở cửa sổ vẽ
theo kích thước
đã chọn

w indow = SD L_CreateW indow (W IN D O W _TITLE.c_str(), SD L_W IN D O W PO S_CEN TERED ,
SD L_W IN D O W PO S_CEN TERED , SCREEN _W ID TH , SCREEN _H EIG H T, SD L_W IN D O W _SH O W N );
//w indow = SD L_CreateW indow (W IN D O W _TITLE.c_str(), SD L_W IN D O W PO S_CEN TERED ,
SD L_W IN D O W PO S_CEN TERED , SCREEN _W ID TH , SCREEN _H EIG H T,
SD L_W IN D O W _FU LLSCREEN _D ESKTO P);
if (w indow
= i
nul
con=st
n tlpt
SCr)REEN _W ID TH = 80 0 ;

logSDcon
LErrst
or(i
st
cout
,"Cr_H
eat
eW
", t0;
rue);
nd:
t :SC
REEN
EI
G Hindow
T = 60

con st string W IN D O W _TITLE = "An Im plem entation of Code.org Painter";

Lấy bút vẽ
renderer = SD L_CreateRenderer(w indow , -1,SD L_REN D ERER_ACCELERATED |
SD L_REN D ERER_PRESEN TVSYN C);
void in itS D L(SD L_W indow * & w indow , SD L_Renderer* & renderer);
//SD L_Renderer *renderer = SD L_CreateSoftw areRenderer(SD L_G etW indow Surface(w indow ));
if (renderer = = nullptr)
logSD LError(std::cout,"CreateRenderer", true);
SD L_SetH int(SD L_H IN T_R EN D ER_SCALE_Q U ALITY, "linear");
SD L_RenderSetLogicalSize(renderer, SCREEN _W ID TH , SCREEN _H EIG H T);
}

Giải phóng SDL
void q u itS D L(SD L_W indow * w indow , SD L_Renderer* renderer);
void q u itS D L(SD L_W indow * w indow , SD L_Renderer* renderer)
{
Giải phóng
SD L_D estroyRenderer(renderer);
bộ nhớ quản
SD L_D estroyW indow (w indow );
lý cửa sổ và
SD L_Q uit();
bút vẽ
}


Đợi 1 phím để thốt
void w aitU n tilK eyP ressed ();
void w aitU n tilK eyP ressed ()
{
SD L_Event e;
w h ile (true) {
if ( SD L_W aitEvent(& e) != 0 & &
(e.type = = SD L_KEYD O W N || e.type = = SD L_Q U IT) )
retu rn ;
SD L_D elay(10 0 );
}
}

Xác định sự
kiện bàn phím

Hàm main()
in t m ain (in t argc, ch ar* argv[])
{
SD L_W indow * w indow ;
SD L_Renderer* renderer;
initSD L(w indow , renderer);

/>raw/6f01f8f6f96afe0aa9e107d65dcde1780
2f1e1e3/lec10-sdl/main.cpp

// Your draw ing code here
// use SD L_RenderPresent(renderer) to show it
w aitU ntilKeyPressed();
quitSD L(w indow , renderer);
retu rn 0 ;
}


Cửa sổ trắng,
ấn 1 phím bất
kỳ để thốt


Nội dung
● Thư viện SDL:
○ Cài đặt, khởi tạo, sử dụng, giải phóng

● Xây dựng API vẽ

○ Lớp Painter

● Vẽ hình bằng bút vẽ
○ Đường thẳng, hình vng, tam giác …
○ Phối hợp tạo thành các hình tuyệt đẹp
○ Vẽ ảnh JPG, PNG

● Vẽ hình fractal
○ Kỹ thuật đệ quy


Vẽ hình với SDL
● SDL đã cung cấp hàm
○ Vẽ điểm, đoạn thẳng, hình chữ nhật ...
○ Với các hình khối phức tạp hoặc ảnh
■ Dùng thư viện mở rộng SDL_image
■ Dùng SDL với OpenGL (3D)

● Ta cũng có thể xây dựng thư viện riêng
○ Dựa vào các hàm vẽ cơ bản của SDL
○ Đơn giản hóa các thao tác vẽ
■ Lệnh SDL khá phức tạp bởi có nhiều tham số
○ Vẽ hình theo phong cách của riêng chúng ta


Lớp Painter
● API vẽ (Application Program Interface)
● Cách vẽ
○ Bắt đầu tại điểm giữa màn hình, hướng sang phải (0
độ), màu vẽ trắng, màu nền xanh

○ Các chức năng vẽ cơ bản
■ Thay màu bút vẽ, tô nền bằng màu mới
■ Tiến lên phía trước một quãng đường
■ Quay phải, quay trái theo góc quay (xoay giấy)
■ Nhảy về phía trước một quãng đường (nhấc bút)


Lớp Painter

p u b lic:
Painter(SD L_W indow * w indow ,
SD L_Renderer* renderer);
void setP osition (f l
o at x, f l
o at y);
fl
o at getX() con st { retu rn x; }
fl
o at getY() con st { retu rn y; }
void setAngle(f l
o at angle);
fl
o at getAngle() con st { retu rn angle; }

class P ain ter
{
fl
o at x;
fl
o at y;

fl
o at angle;
in t w idth;
in t height;
SD L_C olor color;
SD L_Renderer* renderer;

in t getW idth() con st { retu rn w idth; }
in t getH eight() con st { retu rn height; }
void setColor(SD L_Color color);
SD L_C olor getC olor() con st { retu rn color; }
void clearW ithBgColor(SD L_Color color);
SD L_Renderer* getRenderer() con st
{ retu rn renderer; }
};


Một số màu hay dùng
con st SD L_Color CYAN _CO LO R = {0 ,255, 25 5 };
con st SD L_Color BLU E_C O LO R = {0 ,0 , 255};
con st SD L_Color O RAN G E_C O LO R = {25 5, 165 ,0 };
con st SD L_Color YELLO W _CO LO R = {255 ,255 , 0};
con st SD L_Color LIM E_C O LO R = {0 , 255, 0 };
con st SD L_Color PU RPLE_CO LO R = {128 ,0 , 128 };
con st SD L_Color RED _CO LO R = {25 5 , 0, 0};
con st SD L_Color W H ITE_C O LO R = {255, 25 5 , 255 };
con st SD L_Color BLACK_C O LO R = {0 ,0 , 0};
con st SD L_Color G REEN _C O LO R = {0, 128 , 0};
con st SD L_Color D EFAU LT_CO LO R = BLACK_CO LO R;

Nên đặt đoạn
mã này ở đâu ?
http://stackoverflow
.com/questions/23870
83/where-should-youput-global-constants
-in-a-c-program


Lớp Painter: Hàm khởi tạo
Painter::Painter(SD L_W indow * w indow ,SD L_Renderer* renderer_)
: renderer(renderer_)
{
SD L_RenderG etLogicalSize(renderer, & w idth, & height);
if (w idth = = 0 & & height = = 0)
Lấy kích
SD L_G etW indow Size(w indow , & w idth,& height);
thước cửa sổ
setPosition(w idth/2, height/2);
setAngle(0);
setColor(W H ITE_CO LO R);
clearW ithBgColor(BLU E_C O LO R);
}

Khởi tạo tọa độ,
màu và hướng ban
đầu của bút vẽ, tô
nền bằng màu xanh