Giải pháp xử lí nhiều màn hình trong Android – P1

Bài viết được dịch từ: Gemserk blog
This post is translated from: Gemserk blog


Làm game để chạy được trên nhiều thiết bị không phải dễ. Một trong những vấn đề phổ biến gặp phải là làm sao để game chạy được trên nhiều kích thước ( tỉ lệ, độ phân giải) màn hình khác nhau.

Trong bài viết này chúng tôi muốn chia sẻ cách để xử lí vấn đề này khi chúng tôi làm game  Clash of the Olympians cho Android.

Trong mục tiếp theo chúng tôi sẽ chỉ ra một số cách mọi người thường dùng để xử lí nhiều màn hình, và sau đó là cách riêng của chúng tôi.

KÉO DÃN

Một trong những cách tiếp cận vấn đề này là đầu tiên, làm sao cho game hiển thị vừa với độ phân giải màn hình mà bạn nhắm đến. Chẳng hạn cho độ phần giải màn hình là 800 x 480

Theo đó, bạn sẽ có cách bố trí game cho độ phân giải này như sau:

Menu screen của game Clash of the Olympians chạy trên màn hình 800×480.

Sau đó, để hỗ trợ cho những kích thuớc màn hình khác, ta sẽ kéo dãn game ra sao cho vừa với kích thước mới:

Menu screen của game Clash of the Olympians chạy trên màn hình 800×600 ( được kéo dãn từ màn hình 800×480)

Ta có thể nhận thấy vấn đề ở đây là tỉ lệ các hình vẽ trong game đã bị ảnh hưởng và khó có thể chấp nhận được.
(nd: các bạn có thể thấy các chữ, buttons, background… bị kéo dãn ra theo chiều dọc)

KÉO DÃN VÀ GIỮ TỈ LỆ MÀN HÌNH

Để xử lí vấn đề trên, một kĩ thuật phổ biến đó là cũng kéo dãn, nhưng sẽ giử đúng tỉ lệ của các hình vẽ trong game, bằng cách thêm vào các viền màu đen, và như vậy tỉ lệ các hình ảnh sẽ luôn được giữ đúng trên các kích thước màn hình khác nhau. Trông như sau:

Menu screen trên kích thước màn hình 800×600

Menu screen trên kích thước màn hình 854×480

Đây là một cách dễ dàng để xử lí vấn đề nhiều kích thước màn hình, thay vì dùng màu đen, các bạn cũng có thể trang trí cho các thanh viền để game nhìn ổn hơn.

Tuy nhiên, trong một vài trường hợp thì cách này tỏ ra không phù hợp, bởi vì các viền đen đó làm game trông có vẻ không tự nhiên, và làm người chơi có suy nghĩ: game này không phải được làm để chạy tốt trên thiết bị của mình.

GIẢI PHÁP CỦA CHÚNG TÔI: XÂY DỰNG MỘT GÓC NHÌN ẢO (VIRTUAL VIEWPORT)

Our approach consists in adapting what is shown in the game screen area to the device screen size.

Đầu tiên, chúng tôi quyết định xem chúng tôi sẽ hỗ trợ những thiết bị có độ phân giải trong khoảng nào ? Ví dụ trong trường hợp này chúng tôi sẽ chọn tỉ lệ 4:3 (800×600) và 16:9 (854×480), vậy tất cả các màn hình có kích thước nằm trong khoảng đó đều sẽ được hỗ trợ.

Với 2 tỉ lệ đó, chúng ta sẽ qui định diện tích tối đa là 854×600 và diện tích tối thiểu là 800×480. Ý tưởng ở đây đó là tất cả mọi thứ đều phải nằm bên trong diện tích lớn nhất, nhưng những thứ quan trọng ( buttons, information…) phải luôn nằm trong diện tích nhỏ nhất.

Hình chữ nhật màu đỏ thể hiện cho diện tích nhỏ nhất, hình màu xanh biển thể hiện cho vùng diện tích lớn nhất.

Sau đó, với kích thước màn hình đã biết (nd: lấy từ Gdx.graphics.getWidth() và Gdx.graphics.getHeight()), chúng ta tính toán một diện tích có tỉ lệ bằng với tỉ lệ kích thước màn hình, nhưng độ lớn của nó phải nằm giữa 2 phần diện tích đỏ và xanh biển. Ví dụ, với độ phân giải 816×544 (4:3), ta sẽ có:

Hình chữ nhật màu xanh lá cây thể hiện cho vùng diện tích 816×544

Và trên thiết bị có kích thước 816×544, menu screen sẽ trông như thế này

Trong trường hợp kích thước màn hình mà chúng ta muốn hỗ trợ lớn hơn hình chữ nhật max, hoặc nhỏ hơn hình chữ nhật min, ví dụ màn hình có kích thước 480×320 (3:2) chẳng hạn, thì chúng ta sẽ tính toán để tìm kích thước cũng có tỉ lệ 3:2 và nằm giữa vùng min và max. Ví dụ một trường hợp thoả mãn là 800×534, có tỉ lệ 3:2, và nằm giữa 2 vùng min, max.

Vùng màu xanh lá cây thể hiện cho độ phân giải 800 x 534 ( có tỉ lệ khớp với tỉ lệ của kích thước màn hình 480 x 320)

Và trên thiết bị có kích thước màn hình 480 x 320 sẽ trông như thế này

NHỮNG THÀNH PHẦN ĐỘNG

Một số thành phần trong game như buttons, nếu ta cố định vị trí của chúng trong khi viewport ảo thay đổi theo kích thước màn hình như tính toán ở trên, thì không ổn lắm, vì vậy chúng ta phải làm cho chúng có thể di chuyển được, ví dụ như trong 2 hình dưới đây, mặc dù chạy trên 2 thiết bị có kích thước khác nhau (dẫn đến viewport ảo- hình chữ nhật màu xanh thay đổi), nhưng các buttons luôn di chuyển để nằm ở mép của màn hình:

Các buttons của menu screen trên màn hình có kích thước 854 x 480

Các buttons của menu screen trên màn hình có kích thước 800 x 600

Cuối cùng, bạn hãy xem video mà chúng tôi đã làm để xử lí vấn đề game chạy trên nhiều kích thước này:

một vài hạn chế

Khi chúng ta phóng to/ thu nhỏ hình ảnh trong game để khớp vớ kích thước màn hình, thì trên một vài thiết bị game của chúng ta sẽ bị mờ, và toạ độ vị trí cuối cùng của các thành phần động cũng không còn là só nguyên. Vấn đề này có thể tránh được trên các thiết bị có độ phân giải lớn, cũng như hình ảnh game rõ nét.

Cách bố trí giữa các kích thước màn hình khác nhau cũng khác nhau, ví dụ bố trí game trên điện thoại sẽ khác so với trên máy tính bảng.

Text là một trường hợp đặc biệt, nó có thể bị thu nhỏ đến mức không thể đọc được. Vì vậy trên các thiết bị có độ phân giải thấp, có thể bạn sẽ phải phóng to nó và làm nó dễ đọc hơn.

kết luận

Nếu bạn định làm game theo hướng tiếp cận này của chúng tôi, thì sẽ không khó để làm cho game có thể chạy trên đa màn hình ( theo cách có thể chấp nhận được). Tuy nhiên vẫn còn nhiều chi tiết cần để tâm tới, như chúng tôi đã liệt kê ở trên

Trong phần tiếp theo, chúng tôi sẽ giới thiệu code trên libGDX cho những ai muốn biết chúng tôi thực thi giải pháp này như thế nào

Cảm ơn đã đọc, hi vọng các bạn thích bài viết này.


Mình xin giải thích thêm về Viewport trong libGDX, cho các bạn dễ hình dung hơn:

ex

+ Các hình khối màu cam tượng trưng cho hình ảnh trong game
+ Hình xanh lá cây tượng trưng cho viewport ( theo như kĩ thuật trong bài này thì cái kích thước của viewport này sẽ thay đổi tuỳ vào kích thước màn hình)
+ Hình xanh biển và hồng tượng trưng cho 2 màn hình với 2 kích thước khác nhau

Khi chạy game trên thiết bị, thì viewport xanh lá cây ( cũng như hình ảnh game) sẽ thu nhỏ lại ( đối với xanh biển) hoặc phóng to ra ( đối với hồng) để có thể “áp” vào 2 màn hình kia. Và điểm quan trọng ở đây là tỉ lệ của viewport sẽ bằng với tỉ lệ kích thước màn hình tương ứng

Advertisements

One thought on “Giải pháp xử lí nhiều màn hình trong Android – P1

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s