Hi, I am

Ngô Tôn

I am a programmer.

Home / Programming / Mobile / Android / Thiết kế game multi resolution với engine cocos2dx

Thiết kế game multi resolution với engine cocos2dx

Tại sao phải thiết kế game multi resolution?

Hiện nay các thiết bị di động rẩt phổ biến, mỗi loại sẽ có những tính năng, đặc điểm, thiết kế đặc thù riêng biệt. Đi kèm với đó thì có rất nhiều loại màn hình khác nhau, có những màn hình to không thể cầm vừa lòng bàn tay, có những màn hình nhỏ, có màn hình dài. Là người tạo ra game chúng ta phải đảm bảo được rằng game có thể hiện thị tất cả thông tin và chạy đúng được trên tất cả các loại màn hình. Như thế nào là chạy đúng trên tất cả màn hình, ví dụ: game có hai người chơi, player1 và player2 mỗi người ở một đầu màn hình và bắn nhau, ở màn hình có chiều dọc ngắn, viên đạn được bắn từ player1 sẽ trúng player2 trước màn hình có chiều dọc dài hơn… Nên thiết kế game chạy được đúng trên tất cả các thiết bị rất quan trọng.

Các tỉ lệ màn hình mobile hiện nay

iPhone thế hệ đầu tiên ra mắt với màn hình 480 x 320, tức là mang tỉ lệ 3:2, một tỉ lệ hơi “khó coi” nếu tính tới thời điểm hiện tại. Tuy nhiên, tỉ lệ này vẫn đang được sử dụng khá rộng rãi trên nhiều mẫu máy mới ra mắt, ví dụ như chiếc Surface Pro 4 của Microsoft.
Các máy tính bảng của Apple đều có độ phân giải 4:3, nhưng các máy tính bảng chạy hệ điều hành android thì có rất nhiều ti lệ khác nhau.
iPhone 4: tỉ lệ 3:2
iPad: tỉ lệ 4:3
Các thiết bị chạy android, iphone 5 -> iphone 8 tỉ lệ là 16:9
LG sau khi ra mắt chiếc LG G6 màn hình 18:9 (hay 2:1) được coi là hãng tiên phong trong việc mang tới một tỉ lệ hiển thị rộng hơn. Mặc dù chưa được tiếp nhận rộng rãi nhưng các hãng dần dần đi theo xu thế này và dần dần người dùng cũng đã bắt đầu quen với tỉ lệ màn hình “siêu” dài. Một số thiết bị được ra mắt gần đây với tỉ lệ màn hình dài ví dụ như:
iphone x tỉ lệ 19.5:9
asus zenfone 5z tỉ lệ 19:9

asus-zenfone-5z

Chúng ta có thể thấy tỉ lệ màn hình các thiết bị di động hiện nay rất đa dạng phong phú, tùy theo mục tiêu phát triển game trên nền tảng nào mà chúng ta sẽ chọn hỗ trợ các tỉ lệ màn hình nào.
Như ta thấy ở trên, ta thấy các tỉ lệ màn hình phổ biến hiện nay là 3:2 4:3 16:9 19.5:9
Các thiết bị của Microsoft thường có tỉ lệ 3:2, còn các thiết bị còn lại thường có tỉ lệ 4:3 tới 19.5:9
Nên khi phát triển game nếu chúng ta có hỗ trợ game trên microsoft thì nên chọn tỉ lệ màn hình nhỏ nhất là 3:2 và tỉ lệ màn hình lớn nhất là 19.5:9. Còn hỗ trợ nền tẳng iOS và Android thì nên chọn tỉ lệ màn hình nhỏ nhất là 4:3 và lớn nhất là 19.5:9
Khi chúng ta chọn được tỉ lệ màn hình lớn nhất và nhỏ nhất rồi mình sẽ nói tiếp vào phần phía dưới.

Resource resolution, Design resolution, Display resolution

Display resolution là gì: chính là chỉ số của các điểm ảnh (pixel) được biểu hiện trên màn hình của các thiết bị, hay nói cách khác là kích thước chiều dài và rộng của thiết bị được tính bằng đơn vị pixel.
ví dụ, Display resolution “1024 × 768” có nghĩa là chiều rộng là 1024 pixel và chiều cao là 768 pixel.

Design resolution: đây chính là độ phân giải để thiết kế game và đơn vị trong game cũng dựa vào độ phân giải này. Cũng là độ phân giải chính mà artis và coder sẽ dựa vào nó để làm việc,

VD: game được thiết kế trên độ phân giải 1920×1080 (FHD) thì môi trường trong game cũng sẽ có đơn vị dài rộng là 1920×1080 thì một trái banh đi từ cạnh trái màn hình đến cạnh phải màn hình sẽ đi một quãng đường là 1080px

mobile-display

Như vậy chúng ta đã có 2 khái niệm display resolution và design resolution. Display resolution là độ phân giải của thiết bị, nơi mà người dùng sẽ nhìn thấy game của mình. Còn design resolution là độ phần giải để mình thiết kế game. Vậy khi game đã thiết kế xong, làm thế nào để hiển thị game trên các thiết bị.

Hình dưới đây biểu diễn quá trình xử lý từ design resolution đến display resolution.

design-resolution

Như ta thấy, hình ảnh ở design có độ phân giải là 1080×1920 sẽ được scale để hiển thị trên màn hình có độ phân giải 720×1280. Ở vd trên thì cả design resolution và display resolution có cùng tỉ lệ màn hình 16:9 với nhau. Display resolution có rất đa dạng, nếu không cùng tỉ lệ màn hình thì sẽ scale như thế nào. Engine cocos2d hỗ trợ các cách tính hệ số scale (Resolution Policy) như sau:

  • ExactFix: toàn bộ màn hình design sẽ được scale vừa màn hình của thiết bị mà không cần giữ tỉ lệ khung hình gốc, những biến dạng có thể xảy ra vd design hình tròn nhưng khi hiển thị trên màn hình lại thành hình elip.
  • FixWidth: chiều rộng của design được scale bằng với chiều rộng của màn hình, tỉ lệ khung hình được giữ nguyên, có thể xuất hiện các viền đen hoặc bị cắt xén.
  • FixHeight: chiều cao của design được scale bằng với chiều cao của màn hình, tỉ lệ khung hình được giữ nguyên, có thể xuất hiện các viền đen hoặc bị cắt xén.
  • ShowAll: hiển thị tất cả design lên màn hình hình, duy trì được tỉ lệ khung hình gốc nên hình ảnh không bị méo mó, nhưng có thể xuất hiện viền đen 2 bên màn hình.
  • NoBoder: design được duy trì được tỉ lệ khung hình gốc nên hình ảnh không bị méo mó, không xuất hiện viền đen 2 bên màn hình nhưng màn hình design có thể bị cắt xén bớt.

Trong cocos2dx chúng ta có thể dùng hàm sau để set design resolution

Resource resolution là gì: là độ phân giải của resource, đây chính là bộ hình ảnh mà artis hay design export ra cho chúng ta. Nó thường có độ phân giải bằng với design resolution. Trên thị trường thường có rất nhiều device, có device độ phân giải thấp có device độ phân giải cao, nên nhu cầu sử dụng nhiều bộ resource có độ phân giải kháck nhau là cần thiết, do nhưng device có độ phân giải thấp hoặc yếu mà load bộ resource có độ phân giải cao thì CPU xử lý nhiều và tốn bộ nhớ ram nên hiệu năng không cao, do vậy chúng ra sẽ sử dụng nhiều bộ resource cho 1 game. Để sử dụng được nhiều bộ resource có resolution khác nhau, chúng ra sẽ scale bộ resource đó sao cho bằng với design resolution.

resource-resolution

Như hình trên ta thấy để hình ảnh hiển thị trên màn hình thì sẽ trải qua hai bước, bước thứ nhất là scale từ resource resolution sang design resolution, và từ design resolution sang display resolution.

Trong cocos2dx hộ trợ hàm sau để chúng ra scale:

Cách thiết kế game multi resolution

game-multi-resolution

Tính đến thời điểm hiện nay màn hình có độ phân giải và tỉ lệ màn hình dài trên thị trường là iphone X, còn tỉ lệ màn hình có chiều rộng dài nhất là ipad,  giao 2 tỉ lệ màn hình này lại thì chúng ta có safe area, tức vùng an toàn, vùng này sẽ không bị che khuất trên tất cả device, nên mình thường chọn vùng này làm design resolution (1152 x 2048) còn lại các vùng bên ngoài có thể bị che khuất đi nên khi thiết kế game vùng này chỉ nên để những thứ không cần thiết cho game ví dụ backgroud hay những chi tiết trang trí cho game. Nên kích thước backgroud sẽ phải là 1536×2617

Một số ví dụ

Ví dụ game Woody Puzzle, game này chọn design resolution là 1152×2048 và Resolution Policy là Fix Height. chạy trên 3 device khác nhau là ipad, iphone 6 và iphone X

resolution

About phanson

Check Also

Welcome Back

Xin chào các bạn, Hôm nay, mình chính thức đánh dấu sự trở lại của …

Leave a Reply

avatar
  Subscribe  
Notify of