Game C++ SDL – Bài 4: Load ảnh nhân vật & kỹ thuật Color Key

Chào mừng các bạn đến với chủ đề học lập trình game c++ SDL.

Bài số 4 này chúng ta sẽ cùng tìm hiểu về cách load nhân vật game lên màn hình và kỹ thuật color key để làm mất màu background của nhân vật.

1. Chuẩn bị một tấm ảnh cho nhân vật như sau:

Đây là một tấm ảnh tôi đã design với các thông số như sau:

Size: 64×91

Mã màu RGB background:  0, 255, 255 . Đổi sang mã hex sẽ là: 0x00, 0xFF, 0xFF.

Các bạn có thể download tấm ảnh tại link sau:  Link Down

File down về mình để 3 loại

+ Ảnh gốc nhân vật (dùng thoải mãi và miễn phí ko lo bản quyền)

+ Ảnh kích thước lớn 

+ Ảnh 64×91

2. Xử lý Code

Step1. Khai báo một biến global là:

SDL_Surface *g_object;   // sử dụng để quản lý nhân vật

Step2. Trong hàm main.

Sau đoạn code  applySurface back ground cho screen. Các bạn thêm đoạn code sau:

g_object = LoadImage("human64x91.png");
 if (g_object == NULL)
 return 0;
 ApplySurface(g_object, g_screen, 300, 420);

+ 300 và 240 là tọa độ của nhân vật sẽ xuất hiện trên màn hình.

Các bạn có thể chỉnh sửa để nhân vật đứng trên mặt đất cho phù hợp

Sau đó các bạn build và chạy thử.

kết quả được như sau:

Các bạn sẽ thấy. Image nhân vật được load lên trên màn hình.

Nhưng background của nó có màu xanh.

Và chúng ta cần phải xóa được cái nền background này đi.

step3. Kỹ thuật Color Key

Trong hàm load image các bạn thêm đoạn code sau

Ngay sau lệnh: SDL_FreeSurface (load_image)

Các bạn thêm:

 if (optimize_image != NULL) 
 {
   UINT32 color_key = SDL_MapRGB(optimize_image->format, 0, 0xFF, 0xFF);
   SDL_SetColorKey(optimize_image, SDL_SRCCOLORKEY, color_key);
 }

Đoạn code này sẽ thực hiện transparent background của nhân vật.

Với điều kiện mã màu truyền vào phải trùng với mã màu của background.

Tấm ảnh trên mã màu background dạng hexa là: 0, 0xFF, 0xFF nên tôi phải dùng nó để truyền vào hàm SDL_MapRGB.

Nếu các bạn dùng mã màu khác thì các bạn truyền mã màu khác vào thay thế.

Sau khi build thử chúng ta được kết quả như sau:

Ok. Đó là kỹ thuật color Key.

Các bạn có thể xem video thực hành để thực hành rõ hơn.

________________________________________________________

Pass Pham