Tỷ lệ màn hình và tai thỏ (notch)

Phone	Aspect ratio	Resolution
Huawei P30 Pro, OnePlus 6T, Oppo Find X, Xiaomi Mi 9, Xiaomi Mi Mix 3, Honor 8X, Asus Zenfone 6, Xiaomi Mi 9T	19.5:9	2340×1080
OnePlus 7 Pro, Huawei Mate 20 Pro, LG G8 ThinQ, LG V50 ThinQ 5G, LG V40 ThinQ	19.5:9	3120×1440
Apple iPhone XS Max	19.5:9	2688×1242
Apple iPhone X and XS	19.5:9	2436×1125
Samsung Galaxy S10, Samsung Galaxy S10 Plus	19:09	3040×1440
Huawei Mate 20	18.7:9	2244×1080
Vivo Nex S	19.3:9	2316×1080
Honor V20	19.25:9	2310×1080
Samsung Galaxy S10e, OnePlus 6	19:09	2280×1080
Samsung Galaxy S9 Plus, Samsung Galaxy Note 9, Samsung Galaxy S9	18.5:9	2960×1440
Asus Zenfone 5 or 5Z	18.7:9	2246×1080
Xiaomi Mi Mix	17:09	2040×1080

Và với tỷ lệ màn hình của các máy tính bảng vẫn trung thành với 4:3 với các độ phân giải

iPad Pro 12.9-inch (2nd generation)	2732×2048
iPad Pro 10.5-inch	2224×1668
iPad Pro (12.9-inch)	2732×2048
iPad Pro (9.7-inch)	2048×1536
iPad Air 2	2048×1536
iPad Mini 4	2048×1536

Thế là game của bạn phải thiết kế UI, background sao cho phù hợp với màn hình gần vuông 4:3 và màn hình dài như cái lược 19.5:9. Nếu background chỉ vẽ ở mức 19.5:9 thì khi chơi trên các máy tính bảng sẽ thiếu, hiện ra các khoảng không vô định.

• Độ phân giải của game:

Gọi là độ phân giải của game, vì nó là độ phân giải mình config lúc làm game, còn lên thiết bị nó ra theo độ phân giải của thiết bị rồi.

Con Gangmaster này là con game màn hình dọc, nên kích thước độ phân giải sẽ đảo lại thành từ: 720×1560 (9:19.5) đến 1170x1560 (3:4)

Tức là đồ họa game chỉ ở mức HD-720 chứ không phải fullHD-1080, kinh nghiệm thực tế của mình cho thấy với mức đồ họa fullHD không có nhiều khác biệt với HD là mấy mà chi phí về dung lượng file, render lớn hơn hẳn, vì việc build atlas cho fullHD thường lớn hơn 1024×1024.

Con Gangmaster này còn đơn giản, như trong hình thì vùng không gian của game nằm trọn trong độ phân giải 1170x1560. Bên đồ họa cũng đã thiết kế UI chủ yếu nằm trong vùng 720×1560 cho đơn giản. Còn vùng tối màu trung gian là vùng cropp. Sao cho game chạy trên từng thiết bị cropp dần vùng tối màu. Một số thành phần UI như button setting, shop sẽ neo theo cạnh trái của màn hình.

Tạm thời với các game màn hình dọc thì khẩu quyết là:
– Thiết kế UI theo tỷ lệ màn hình dài nhất, để lúc crop hết rồi, các button không đè lên nhau, không bị lẹm bởi viền màn hình
– Thiết kế Background theo tỷ lệ màn hình vuông nhất để còn crop dần, không bị thiếu.

• Màn hình tai thỏ (notch), đục lỗ:

Unity cũng đã support vụ này ổn áp rồi.

Chi tiết thì các sếp đọc ở đây
Package: Safe Area Helper. Chỉ cần tải cái package này về unity, import vào và add cái component SafeArea vào canvas cần xử lý là xong. Còn lại code nó tự co canvas cho bạn.

• Note lại các bước config độ phân giải của game:

Note lại để dự án sau dùng cho nhanh :V

– Lấy cái code: ResolutionMatch.cs này về.
– Nhét vào Main Camera và config camera thế này.

– Còn Canvas thì config thế này:
Trong cái Canvas Scaler chọn Screen Match Mode là Expand, tức là kiểu mở rộng canvas ra nếu không đúng tỷ lệ chuẩn 720×1560, UI sẽ không bị lẹm mất.

– Sau đó tìm cái panel chính, cái này thì tùy game như game này là GameplayPanel (các game khác của cty thì là MainMenuPanel) add cái component SafeArea vào. Nó sẽ tự xử lý việc co kéo header và footer game để không bị tai thỏ và đục lỗ che mất.

•