Hỗ trợ nhiều kích cỡ màn hình và kiểu dáng

Các thiết bị Android có nhiều kích cỡ màn hình và hệ số kiểu dáng. Có một số danh mục phổ biến như sau:

Điện thoại di động
Máy tính bảng
TV và hộp giải mã tín hiệu số TV
Máy tính xách tay chạy Android Runtime cho Chrome

Sự đa dạng này đồng nghĩa với việc trò chơi sẽ gặp phải nhiều độ phân giải màn hình (thường tương ứng với nhiều tỷ lệ khung hình). Ví dụ:

Điện thoại theo hướng nằm ngang có tỷ lệ khung hình 19:9 (2280x1080)
Một chiếc điện thoại khác cũng ở hướng ngang nhưng có tỷ lệ khung hình 20:9 (3200x1400)
TV HD 1080p với tỷ lệ khung hình 16:9 (1920x1080)
Máy tính bảng có tỷ lệ khung hình 4:3 (2048x1536)

Thiết kế trò chơi cần phải tính đến những khác biệt này để đảm bảo hiển thị chính xác bất kể độ phân giải màn hình và tỷ lệ khung hình của thiết bị.

Các chế độ chiếu của Defold

Bạn có thể định cấu hình cho độ phân giải cơ bản của một dự án Defold. Độ phân giải này được đặt trong tệp game.project bằng các trường Width (Chiều rộng) và Height (Chiều cao) trong danh mục Display (Hiển thị).

Phần cài đặt display (màn hình) của dự án Defold — **Hình 1.** Phần cài đặt **Display** (Màn hình) của dự án

Hành vi mặc định của Defold là kết xuất đồ hoạ ở độ phân giải cơ bản, sau đó mở rộng hình ảnh thu được theo độ phân giải thực tế của thiết bị mục tiêu. Defold gọi chế độ này là Chiếu kéo căng (stretch projection). Chế độ chiếu kéo căng không bảo toàn tỷ lệ khung hình gốc. Đối với một số trò chơi, chế độ mặc định này về trực quan là có thể chấp nhận được. Tập lệnh kết xuất đồ hoạ tiêu chuẩn của Defold bao gồm hai tuỳ chọn chiếu bổ sung giúp giữ lại tỷ lệ khung hình cơ bản: chiếu cố định vừa vặn (fixed fit projection) và chiếu cố định (fixed projection).

Ví dụ sau đây cho thấy một dự án mẫu được thiết kế xung quanh độ phân giải cơ bản là 480x272, hiển thị trong trình chỉnh sửa Defold.

Trong ví dụ này:

Một đối tượng tilemap (bản đồ ô) được dùng để vẽ một khung xung quanh đường viền của độ phân giải cơ bản.
Hai đối tượng sprite và một đối tượng văn bản nằm bên trong giới hạn của độ phân giải cơ sở.
Có bốn đối tượng sprite nằm bên ngoài ranh giới của độ phân giải cơ bản, trên, dưới, trái và phải tương ứng.

**Hình 2.** Ví dụ về bố cục đối tượng của dự án

Khi chạy ở độ phân giải màn hình là 960 x 544, đúng gấp 2 lần độ phân giải cơ sở, dự án hiển thị như sau:

Chiếu kéo căng

Các ví dụ sau đây cho thấy kết quả đổi kích thước cửa sổ với chế độ chiếu kéo căng mặc định, trong đó tỷ lệ khung hình không được giữ nguyên:

**Hình 5.** Dự án mẫu được kéo dài theo chiều ngang khi sử dụng chế độ chiếu kéo căng

Chiếu cố định vừa vặn

Chế độ chiếu cố định vừa vặn duy trì tỷ lệ khung hình độ phân giải cơ bản. Vì tỷ lệ khung hình được giữ nguyên, nên sẽ có thêm một vùng màn hình không được bao phủ trong độ phân giải cơ sở được điều chỉnh theo tỷ lệ. Tuỳ thuộc vào trục chính của độ chênh lệch giữa tỷ lệ khung hình, khu vực thừa này tồn tại ở trên cùng và dưới cùng hoặc bên trái và bên phải của độ phân giải cơ bản. Chế độ chiếu cố định vừa vặn sẽ sửa đổi độ phân giải cơ sở để giải quyết khu vực này. Hành động sửa đổi này sẽ tạo ra các khu vực khác của cảnh chơi trò chơi nằm bên ngoài khu vực giải quyết cơ sở. Hình ảnh thu được sau đó được điều chỉnh theo độ phân giải của màn hình.

Các ví dụ sau đây minh hoạ về việc chế độ chiếu cố định vừa vặn kết xuất hình ảnh với độ phân giải hiển thị có tỷ lệ khung hình khác với độ phân giải cơ bản 480x272:

Chiếu cố định

Chế độ chiếu cố định duy trì tỷ lệ khung hình cho độ phân giải cơ bản và mở rộng độ phân giải cơ sở theo một hệ số thu phóng cụ thể. Tuỳ thuộc vào độ phân giải hiển thị và hệ số thu phóng, một tập hợp con hoặc siêu tập hợp của vùng độ phân giải cơ sở có thể được hiển thị.

Các ví dụ sau đây minh hoạ chế độ chiếu cố định bằng cách sử dụng độ phân giải màn hình 644x408 với hệ số thu phóng 1x và 2x tương ứng:

Dự án mẫu 644x408 với mức thu phóng 1x sử dụng chế độ chiếu cố định — **Hình 8.** Dự án mẫu ở độ phân giải màn hình 644 x 408 khi dùng chế độ chiếu cố định với hệ số thu phóng 1x

Dự án mẫu ở độ phân giải màn hình 644 x 408 với mức thu phóng 2x khi dùng chế độ chiếu cố định — **Hình 9.** Dự án mẫu ở độ phân giải màn hình 644 x 408 khi dùng chế độ chiếu cố định với hệ số thu phóng 2x

Thay đổi chế độ chiếu

Bạn có thể chuyển đổi chế độ chiếu đang hoạt động trong thời gian chạy bằng cách gửi thông báo thích hợp cho trình kết xuất. Các thông báo này được gửi bằng hệ thống thông báo tiêu chuẩn của Defold. Tất cả thông báo chế độ chiếu bao gồm các thông số xác định giá trị gần và xa của mặt phẳng Z.

-- Change to stretch projection mode
msg.post("@render:", "use_stretch_projection", { near = -1, far = 1 })

-- Change to fixed fit projection mode
msg.post("@render:", "use_fixed_fit_projection", { near = -1, far = 1 })

-- Change to fixed projection mode
msg.post("@render:", "use_fixed_projection", { near = -1, far = 1, zoom = 2 })

Tập lệnh kết xuất đồ hoạ của Defold

Hoạt động hiển thị màn hình được Defold kiểm soát bằng một tệp tập lệnh đặc biệt được gọi là tập lệnh kết xuất đồ hoạ. Giống như các tập lệnh khác của công cụ Defold, tập lệnh kết xuất đồ hoạ được viết bằng ngôn ngữ lập trình Lua. Tập lệnh kết xuất đồ hoạ mặc định sẽ được đưa vào trong quá trình tạo dự án, nhưng bạn cũng có thể thay thế tập lệnh đó bằng tập lệnh kết xuất đồ hoạ tuỳ chỉnh.

Các chế độ chiếu kéo căng, chiếu cố định và chiếu cố định vừa vặn là các tính năng của tập lệnh kết xuất đồ hoạ mặc định. Khi sử dụng một trong các chế độ này, tập lệnh kết xuất đồ hoạ sẽ tạo ra một ma trận chiếu 2D để sử dụng khi kết xuất các đối tượng trò chơi. Cấu hình của ma trận này còn tuỳ thuộc vào chế độ chiếu đang được sử dụng.

Bạn có thể sử dụng tập lệnh kết xuất đồ hoạ tuỳ chỉnh để mở rộng hoặc thay đổi cấu hình của ma trận chiếu. Chức năng không được tập lệnh mặc định hỗ trợ, chẳng hạn như letterbox hoặc pillarbox cho nhiều tỷ lệ khung hình, cũng có thể được triển khai bằng tập lệnh hiển thị tuỳ chỉnh.

Các nhà phát triển nguồn mở đã tạo các tập lệnh kết xuất đồ hoạ và các gói máy ảnh với nhiều tính năng hơn so với các tập lệnh Defold mặc định. Hai gói được sử dụng phổ biến là RenderCam và Defold-Orthography.

Hệ thống GUI của Defold

Defold bao gồm một hệ thống GUI, dựa trên khái niệm về tệp cảnh GUI. Tệp cảnh GUI bao gồm các đối tượng được gọi là nút xác định từng phần tử trên giao diện người dùng như hình ảnh hoặc văn bản.

Bạn có thể thêm tệp cảnh GUI dưới dạng một thành phần vào đối tượng trò chơi Defold Các cảnh trong GUI và các nút đi kèm được hiển thị riêng biệt và hoạt động hơi khác so với các đối tượng trò chơi thông thường. Do những khác biệt này, việc hỗ trợ nhiều độ phân giải hiển thị với các cảnh GUI bao gồm việc xem xét bổ sung liên quan đến hoạt động của các toạ độ hệ thống GUI và các trục và neo của nút GUI.

Các toạ độ hệ thống GUI

Các đối tượng trò chơi Defold thông thường được chỉ định toạ độ trong không gian thế giới. Một đối tượng máy ảnh sẽ dịch không gian thế giới sang không gian trên màn hình và hiển thị các đối tượng trò chơi nằm trong chế độ xem ảo hiện tại của máy ảnh. Hệ thống GUI sử dụng máy ảnh riêng. Các nút thuộc về cảnh GUI sử dụng toạ độ không gian màn hình thay vì toạ độ không gian thế giới. Khi độ phân giải hiển thị khác với độ phân giải cơ sở dự án dùng để bố trí các nút GUI, điều này có thể dẫn đến việc các nút có lề khác nhau liên quan đến cạnh màn hình hoặc cạnh của nút gốc. Defold có nhiều tuỳ chọn để điều chỉnh bố cục GUI nhằm tạo ra sự khác biệt trong độ phân giải hiển thị.

Trục và neo của nút GUI

Bạn có thể liên kết các nút GUI sang các cạnh dọc và/hoặc ngang bằng cách sử dụng các thuộc tính X Anchor và Y Anchor (neo X/ neo Y).

Nếu một nút có nút mẹ, neo sẽ nằm ở các cạnh của nút mẹ.
Nếu một nút không có nút mẹ, thì neo đó sẽ ở các cạnh của màn hình.

Nội dung sau đây minh hoạ cảnh mẫu bằng hai nút GUI, biểu tượng bộ điều khiển ở góc dưới cùng bên trái và góc trên cùng bên phải. Cả hai nút đều có X Anchor và Y Anchor được đặt thành None:

**Hình 10.** Một cảnh mẫu có các thành phần GUI

Khi đổi kích thước màn hình mà không có neo, các biểu tượng bộ điều khiển sẽ giữ nguyên vị trí tương ứng so với độ phân giải cơ bản:

Cảnh mẫu được đổi kích thước với các thành phần GUI khi đặt chế độ neo là "none" (không) — **Hình 11.** Cảnh mẫu được đổi kích thước với các thành phần GUI khi đặt chế độ neo là `None`

Khi Y Anchor (Neo Y) của nút dưới cùng bên trái được đặt thành Bottom và Y Anchor (Neo Y) của nút trên cùng bên phải được đặt thành Top, các nút GUI sẽ liên kết đến các cạnh màn hình thích hợp:

Cảnh mẫu được đổi kích thước với các thành phần GUI khi đặt chế độ neo là "edges" (cạnh) — **Hình 12.** Cảnh mẫu được đổi kích thước với các thành phần GUI khi đặt chế độ neo là `Edges`

Thuộc tính Pivot (Trục) của nút GUI chỉ định điểm trên hình chữ nhật của nút tương ứng với thuộc tính Position (Vị trí) toạ độ của không gian màn hình. Các nút GUI được mặc định cài đặt là Center, đặt điểm Position ở chính giữa hình chữ nhật giới hạn trực tiếp. Các tuỳ chọn cài đặt Pivot khác có thể bao gồm bốn hướng chính và thêm cả 4 đường chéo. Thuộc tính Pivot có thể đơn giản hoá quy cách của khoảng cách lề khi bạn dùng liên kết với thuộc tính X Anchor và thuộc tính Y Anchor.

Trong ví dụ sau, nút GUI của biểu tượng bộ điều khiển ở dưới cùng bên trái có Position là 0,0 và phần Pivot được đặt thành Center.

Nút GUI với Pivot (Trục) được đặt thành "Center" (Trung tâm) — **Hình 13.** Nút GUI với **Pivot** (Trục) được đặt thành `Center`

Thay đổi Pivot (Trục) thành South West sẽ dẫn đến sự điều chỉnh sau:

Nút GUI với Pivot được đặt thành South West (Tây Nam) — **Hình 14.** Nút GUI với **Pivot** được đặt thành `South West`

Các chế độ điều chỉnh nút GUI

Bạn có thể đổi kích thước các nút GUI khi độ phân giải hiển thị khác với độ phân giải cơ sở của dự án. Thuộc tính Adjust Mode (Điều chỉnh chế độ) kiểm soát hành vi điều chỉnh tỷ lệ của nội dung nút. Adjust Mode có 3 chế độ cài đặt: Fit, Zoom và Stretch.

Fit (vừa vặn)

Chế độ cài đặt Fit giữ nguyên tỷ lệ khung hình của nội dung nút. Nội dung được điều chỉnh theo tỷ lệ để phù hợp với chiều rộng hoặc chiều cao của hình chữ nhật ranh giới đổi kích thước của nút. Trục được chọn là trục có sự chênh lệch nhỏ hơn. Việc này đảm bảo nội dung hiển thị vừa vặn trong hình chữ nhật có giới hạn ở tỷ lệ khung hình gốc.

Zoom (thu phóng)

Chế độ cài đặt Zoom cũng giữ nguyên tỷ lệ khung hình của nội dung nút. Giống như tuỳ chọn cài đặt Fit, Zoom sẽ điều chỉnh tỷ lệ của nội dung để khớp với chiều rộng hoặc chiều cao của hình chữ nhật ranh giới đổi kích thước của nút. Không giống như Fit, Zoom sử dụng trục có sự khác biệt lớn hơn so với kích thước ban đầu làm mục tiêu điều chỉnh. Điều này có nghĩa là nội dung theo được điều chỉnh theo tỷ lệ có thể làm tràn hình chữ nhật ranh giới.

Sau đây là ví dụ về hai nút GUI với các tuỳ chọn cài đặt Adjust Mode (Chế độ điều chỉnh) khác nhau. Biểu tượng bộ điều khiển dưới cùng bên trái có Adjust Mode (Chế độ điều chỉnh) là Fit, còn biểu tượng bộ điều khiển trên cùng bên phải có Adjust Mode (Chế độ điều chỉnh) là Zoom.

Hai nút GUI có các chế độ cài đặt Adjust Mode (Điều chỉnh chế độ) khác nhau — **Hình 15.** Hai nút GUI có các chế độ cài đặt **Adjust Mode** (Điều chỉnh chế độ) khác nhau

Kéo căng

Tuỳ chọn cài đặt Stretch điều chỉnh tỷ lệ nội dung nút sao cho khớp chính xác với hình chữ nhật có kích thước giới hạn của nút. Tỷ lệ khung hình gốc không được giữ nguyên.

Bố cục GUI

Defold có một phương thức thay thế để điều chỉnh bố cục GUI cho phù hợp với nhiều độ phân giải màn hình: Layouts (Bố cục). Bạn có thể thêm Bố cục vào cảnh GUI để ghi đè lên các thuộc tính nút GUI mặc định. Một Bố cục được liên kết với một độ phân giải màn hình cụ thể. Khi có nhiều Bố cục, Defold sẽ chọn bố cục phù hợp nhất với độ phân giải màn hình thực tế. Vị trí mặc định, kích thước, tỷ lệ hoặc tài nguyên đồ hoạ mà nút GUI sử dụng đều có thể bị Bố cục ghi đè.