Search…

Kỹ Thuật Xây Dựng Đa Màn Hình Cho Game Với Cocos2d-x

27/09/20202 min read
Tìm hiểu về kỹ thuật xử lý đa màn hình trên Cocos2d-x.

Vấn đề gặp phải

Phần lớn game được phát triển để có thể chạy được trên đa nền tảng và để ứng với nhiều thiết bị khác nhau thì kích thước và tỷ lệ màn hình của chúng có thể cũng khác nhau. Do đó, để đảm bảo rằng  game luôn chạy đúng trên đa thiết bị thì cần phải có giải pháp để xử lý việc này

Trong giai đoạn đầu phát triển 1 game, thông thường 1 nền tảng cụ thể nào đó sẽ được lựa chọn để thực hiện. Từ đó các resources trong game cũng được hình thành dựa trên nền tảng này. Dó đó khi chạy game trên các thiết bị khác resources ban đầu sẽ không phù hợp, dẫn đến xuất hiện các vấn đề về tính tương thích.

Những bước thực hiện

  • Lấy kích thước màn hình và tỷ lệ màn hình.
  • Chọn file quản lý đối tượng phù hợp với tỷ lệ màn hình. 

Lấy kích thước màn hình và tỷ lệ màn hình

Cocos2d-x cho phép lập trình viên dễ dàng lấy được kích thước của màn hình bằng cú pháp sau:

Size screenSize = director->getVisibleSize();

Phương thức getVisibleSize() trả về mội đố tượng Size gồm độ rộng (width) và chiều cao (height) của màn hình. Có được điều này sẽ tính ra được tỷ lệ của màn hình bằng cách lấy tỷ lệ chiều cao và chiều rộng với nhau. Có thể tạm chia ra các tỷ lệ màn hình  cơ bản sau: 

  • 3 : 2   –  Các màn hình loại 1152x768, 960x640, 1440x960, ...
  • 4 : 3   –  Các màn hình loại 1024x768, 960x720, 1280x960, ...
  • 15 : 9 –  Các màn hình loại 1280x768, 800x480, ...
  • 16 : 9 –  Các màn hình loại 1280x720, 960x540, 1600x900...

Chọn file quản lý đối tượng phù hợp với tỷ lệ màn hình

Để nắm được file quản lý đối tượng là gì, tham khảo bài viết Quản Lý Vị Trí Của Các Đối Tượng Trong Cocos2d-x.

Mỗi tỷ lệ màn hình lưu dưới dạng 1 Vec2 hay Point, lưu tất cả các tỷ lệ vào 1 mảng. Có thể hiện thực như sau:

const Vec2 RATIO_TABLE[] = {	
                              Vec2(4, 3),
			      Vec2(15, 9),
			      Vec2(16, 9),
			      Vec2(3, 2)
};

Duyệt mảng tỷ lệ màn hình trên, lấy từng tỷ lệ trừ cho chiều cao màn hình chia độ rộng màn hình:

Ví dụ: 

delta = (4 / 3) – (1024 / 768)

Nếu kết quả trên gần bằng 0 thì có nghĩa là màn hình hiện tại cần load có tỷ lệ 4:3. Có thể hiện thực như sau:

std::string config_file = "cnf_objects_pos_";

for (const auto & s : RATIO_TABLE)
{
	float delta = s.x / s.y - 1.0f * screenSize.height / screenSize.width;
	delta = fabsf(delta);
	if (delta < 0.02f)
	{
		designSize = Size(s.w, s.z);
		config_file += Value(int(s.x * 10 + s.y)).asString() + ".plist";
		break;
	}
}
IO Stream

IO Stream Co., Ltd

30 Trinh Dinh Thao, Hoa Thanh ward, Tan Phu district, Ho Chi Minh city, Vietnam
+84 28 22 00 11 12
developer@iostream.co

383/1 Quang Trung, ward 10, Go Vap district, Ho Chi Minh city
Business license number: 0311563559 issued by the Department of Planning and Investment of Ho Chi Minh City on February 23, 2012

©IO Stream, 2013 - 2024