Lịch học Tài liệu Bài tập - INT 2202 Lập trình nâng cao. Nhóm 3 và nhóm 5 Lec7 8 SDL.b

Graphics
7 - Đồ 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 vuông, 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) ngoà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 <SDL.h>
using namespace std;
int main(int argc, char* argv[])
{
return 0;
}

sử dụng thư
viện SDL2


Báo lỗi SDL
void logSDLError(std::ostream& os,
const std::string &msg, bool fatal = false);
void logSDLError(std::ostream& os,
const std::string &msg, bool fatal)
{
os << msg << " Error: " << SDL_GetError() << std::endl;
if (fatal) {
SDL_Quit();

exit(1);
}
}


Khởi tạo SDL
const int SCREEN_WIDTH = 800;
const int SCREEN_HEIGHT = 600;
const string WINDOW_TITLE = "An Implementation of Code.org Painter";
void initSDL(SDL_Window* &window, SDL_Renderer* &renderer);

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

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


void initSDL(SDL_Window* &window, SDL_Renderer* &renderer)
{
if (SDL_Init(SDL_INIT_EVERYTHING) != 0)
logSDLError(std::cout, "SDL_Init", true);

Khởi tạo SDL

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

window = SDL_CreateWindow(WINDOW_TITLE.c_str(), SDL_WINDOWPOS_CENTERED,
SDL_WINDOWPOS_CENTERED, SCREEN_WIDTH, SCREEN_HEIGHT, SDL_WINDOW_SHOWN);
//window = SDL_CreateWindow(WINDOW_TITLE.c_str(), SDL_WINDOWPOS_CENTERED,

SDL_WINDOWPOS_CENTERED, SCREEN_WIDTH, SCREEN_HEIGHT, SDL_WINDOW_FULLSCREEN_DESKTOP);
if (window == nullptr) logSDLError(std::cout, "CreateWindow", true);

const int SCREEN_WIDTH = 800;
//Khi const
thông int
thường
chạy với môi= trường
SCREEN_HEIGHT
600; bình thường ở nhà
renderer
= SDL_CreateRenderer(window,
SDL_RENDERER_ACCELERATED
const
string WINDOW_TITLE = "An-1,
Implementation
of Code.org| Painter";
Lấy bút vẽ
SDL_RENDERER_PRESENTVSYNC);
//Khi chạy ở máy thực hành WinXP ở trường (máy ảo)
void initSDL(SDL_Window* &window, SDL_Renderer* &renderer);
//renderer = SDL_CreateSoftwareRenderer(SDL_GetWindowSurface(window));
if (renderer == nullptr) logSDLError(std::cout, "CreateRenderer", true);
SDL_SetHint(SDL_HINT_RENDER_SCALE_QUALITY, "linear");
SDL_RenderSetLogicalSize(renderer, SCREEN_WIDTH, SCREEN_HEIGHT);
}


Giải phóng SDL
void quitSDL(SDL_Window* window, SDL_Renderer* renderer);

void quitSDL(SDL_Window* window, SDL_Renderer* renderer)
{
Giải phóng
SDL_DestroyRenderer(renderer);
bộ nhớ quản
SDL_DestroyWindow(window);
lý cửa sổ và
SDL_Quit();
bút vẽ
}


Đợi 1 phím để thoát
void waitUntilKeyPressed();
void waitUntilKeyPressed()
{
SDL_Event e;
while (true) {
if ( SDL_WaitEvent(&e) != 0 &&
(e.type == SDL_KEYDOWN || e.type == SDL_QUIT) )
return;
SDL_Delay(100);
}
}

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


Hàm main()

int main(int argc, char* argv[])
{
SDL_Window* window;
SDL_Renderer* renderer;
initSDL(window, renderer);

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

// Your drawing code here
// use SDL_RenderPresent(renderer) to show it
waitUntilKeyPressed();
quitSDL(window, renderer);
return 0;
}


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


Các hàm vẽ cơ bản
int
int
int
int
int
int

// xóa màn hình
SDL_RenderClear(SDL_Renderer* renderer)
// đặt màu vẽ r: red, g: green, b: blue, a: alpha opaque (255: mầu đặc nhất)
SDL_SetRenderDrawColor(SDL_Renderer* renderer, Uint8 r, Uint8 g, Uint8 b, Uint8 a)
// vẽ điểm
SDL_RenderDrawPoint(SDL_Renderer* renderer, int x, int y)
// vẽ đoạn thẳng
SDL_RenderDrawLine(SDL_Renderer* renderer, int x1, int y1, int x2, int y2)
// vẽ hình chữ nhật rỗng
SDL_RenderDrawRect(SDL_Renderer* renderer, const SDL_Rect* rect)
// vẽ hình chữ nhật đặc
SDL_RenderFillRect(SDL_Renderer* renderer, const SDL_Rect* rect)


Các hàm vẽ cơ bản
// hiển thị màn hình
//Khi thông thường chạy với môi trường bình thường ở nhà, với trước đó khởi tạo dùng
// renderer = SDL_CreateRenderer(...)

void SDL_RenderPresent(SDL_Renderer* renderer)
Hoặc
//Khi chạy ở máy thực hành WinXP ở trường (máy ảo), với trước đó khởi tạo dùng
// renderer = SDL_CreateSoftwareRenderer(...)

void SDL_UpdateWindowSurface(SDL_Window *window)


SDL_RenderClear(renderer);

Ví dụ

SDL_SetRenderDrawColor(renderer, 255, 255, 255, 255); // white
SDL_RenderDrawPoint(renderer, SCREEN_WIDTH/2, SCREEN_HEIGHT/2);
SDL_SetRenderDrawColor(renderer, 255, 0, 0, 255); // red
SDL_RenderDrawLine(renderer, 100, 100, 200, 200);
int main(int argc, char* argv[])
SDL_Rect filled_rect;
{
SDL_Window* window; filled_rect.x = SCREEN_WIDTH - 400;
filled_rect.y = SCREEN_HEIGHT - 150;
SDL_Renderer* renderer;
filled_rect.w = 320;
initSDL(window, renderer);
filled_rect.h = 100;
// Your drawing code SDL_SetRenderDrawColor(renderer,
here
0, 255, 0, 255); // green
// use SDL_RenderPresent(renderer)
to show it &filled_rect);
SDL_RenderFillRect(renderer,
waitUntilKeyPressed();//Khi thông thường chạy với môi trường bình thường ở nhà
quitSDL(window, renderer);
SDL_RenderPresent(renderer);
return 0;
//Khi chạy ở máy thực hành WinXP ở trường (máy ảo)
}

//SDL_UpdateWindowSurface(window);

Tự học tiếp ...
Tutorial:
/>Tra cứu các hàm SDL
● Vẽ: />● Tô: />● Các loại khác: />

Graphics
8. Painter và ứng dụng


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 vuông, 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