Get in touch
or send us a question?
CONTACT

UNITY – Test giao diện game sử dụng Device Simulator

Giới thiệu

Device Simulator là 1 cửa sổ mới thay thế cho cửa sổ Game Editor truyền thống. Với các tính năng mới và tiên tiến hơn cửa sổ này sẽ giúp chúng ta nhìn được các thành phần giao diện thực tế như trên thiết bị thật. Do đó tiết kiệm thời gian testing mà không cần deploy game lên thiết bị.

Device Simulator tương thích với phiên bản Unity 2019.3 trở lên.

Cài đặt và sử dụng

Để cài đặt Device Simulator cho Unity, ta cần vào menu Windows > Package Manager:

Trong cửa sổ Package Manager, ta cần bật chế độ show preview packages để có thể nhìn thấy package Device Simulator:

Tiếp đó chúng ta ấn Install để cài đặt. Sau khi cài đặt xong thì chúng ta đã có thể sử dụng cửa sổ Device Simulator bằng cách truy cập menu Windows > General > Device Simulator.

Cửa sổ Device Simulator sẽ giống như thế này:

Cửa sổ Game Editor truyền thống:

Khi so sánh với cửa sổ Game Editor truyền thống thì ta có thể thấy Device Simulator cung cấp chi tiết hơn các thông tin về device hiện tại dùng để test.

Một điểm đặc biệt không thể không nhắc đến của Device Simulator đó là hiển thị vùng safe area của các thiết bị có tai thỏ hoặc giọt nước. Tính năng này rất đáng giá game của chúng ta có các phẩn giao diện nằm bên dưới tai thỏ hoặc giọt nước. Thường thì khi test giao diện trên các thiết bị có tai thỏ, ta thường phải cài game lên điện thoại rồi có phần nào bị sai ta lại phải sửa rồi cài lại rồi test lại. Nhiều lúc deadline đang cận kề thì quá trình đó thật sự stress. Để bật vùng safe area trên cửa sổ Device Simulator ta chỉ cần tích vào phần nút safe area phía trên cùng của cửa sổ này:

Như bạn có thể thấy khi chuyển sang thiết bị là iPhone 11 thì phần logo bị che mất khỏi tai thỏ ta có thể sửa vấn đề này bằng cách sử dụng plugin safe area helper trên asset store. Sau khi sửa thì giao diện game sẽ thành như sau:

như bạn có thể thấy các nút và logo đã nằm gọn trong phần safe area và bạn có thể yên tâm là giao diện đã hiển thị đúng trên iPhone 11. Giờ ta sẽ thử 1 vài thiết bị khác xem giao diện sẽ hiển thị thế nào:

Ta có thế thấy giao diện hoạt động tốt trên hầu hết các thiết bị trừ Huawei P20. Vấn đề này có thể là do phần setup thiết bị bị thiếu phần safe area vì phần viền màu xanh tràn qua cả tai thỏ nên với thiết bị đó thì tạm thời chỉ có cách test trên thiết bị thật mà thôi.

Một tính năng khác cũng khá đáng chú ý đó là auto rotate, bạn có thể test tính năng này bằng cách ấn nút rotate left, right trên cửa sổ này:

Ngoài các tính năng trên, Device Simulator còn cung cấp thêm tính năng chuyển đổi ngôn ngữ hệ thống để hỗ trợ test các chức năng như localization(đa ngôn ngữ), test các tính năng liên quan đến internet, test các trường hợp hết bộ nhớ.

Nếu bạn muốn tìm hiểu kỹ hơn về Device Simulator thì có thể tìm hiểu tại trang web chính thức: https://docs.unity3d.com/Manual/com.unity.device-simulator.html

Tổng kết

Unity ngày càng lớn mạnh và cung cấp ngày càng nhiều các package tiện dụng cho việc phát triển game. Device Simulator là 1 trong số đó. Ngoài các tính năng có sẵn như cửa sổ Game Editor truyền thống nó còn cung cấp cho các developer nhiều tiện ích nhằm giảm thiểu thời gian trong quá trình testing giao diện trên nhiều thiết bị khác nhau.

Qua blog lần này mình mong các bạn có thêm một lựa chọn để khi làm việc với Unity thì sẽ nhanh chóng và hiệu quả hơn. Cảm ơn đã đọc blog của mình và hẹn gặp lại trong blog tiếp theo <3.

PS: source code cho bạn nào cần: https://drive.google.com/file/d/192E-_kHrX7SIPmJYstsvXujo5HmcSMu9/view?usp=sharing