Nhiều Kích thước Màn Hình và Thiết Bị

Với hyperPad, bạn có thể tạo dự án của mình cho nhiều thiết bị và kích thước màn hình khác nhau. Khi hỗ trợ các thiết bị khác nhau, có hai loại dự án: Dự án Cụ thể cho Thiết bị và Dự án Chung.

Dự án Cụ thể cho Thiết bị: Tạo phiên bản riêng biệt của dự án của bạn cho mỗi nền tảng mà bạn muốn hỗ trợ. Khi tạo dự án của bạn, bạn chỉ định một thiết bị duy nhất cho dự án của bạn. Ví dụ, nếu bạn chỉ muốn làm một trò chơi iPad, hãy chọn CHỈ iPad (4:3) khi tạo dự án của bạn.

Dự án Chung: Hỗ trợ nhiều thiết bị với một dự án duy nhất. Khi tạo dự án của bạn, hãy chọn nhiều hơn một thiết bị mục tiêu. Điều này có nghĩa là cùng một dự án có thể hoạt động trên cả iPhone và iPad mà không cần hai phiên bản riêng biệt.

Có những ưu và nhược điểm cho cả hai cách tiếp cận. Đối với các dự án yêu cầu kiểm soát hoàn toàn về màn hình, và những gì bạn muốn hiển thị mọi lúc, cách tiếp cận cụ thể cho thiết bị có thể là có lợi. Tuy nhiên, điều này đi kèm với cái giá là bạn sẽ phải tái tạo trò chơi/dự án của mình cho mỗi nền tảng mới.

Lợi ích của các dự án chung là bạn chỉ cần tạo trò chơi hoặc ứng dụng của mình một lần. Tuy nhiên, bạn có ít quyền kiểm soát hơn về những gì xuất hiện trên màn hình. Ví dụ, trên một thiết bị rộng hơn, bạn có thể thấy nhiều nội dung mà nếu không, sẽ không được chú ý. hyperPad cung cấp một số công cụ và hành vi để kiểm soát một số yếu tố nhất định, nhưng đôi khi bạn chỉ cần kiểm soát hoàn toàn và một dự án cụ thể cho thiết bị sẽ hợp lý hơn.

Bài viết này chủ yếu đề cập đến các dự án chung, vì bạn đang xử lý nhiều tỉ lệ khung hình và thiết bị. Đối với các dự án cụ thể cho thiết bị, thật đơn giản chỉ cần đảm bảo rằng nội dung của bạn vừa vặn trong khu vực màu xanh lá cây trên canvas.

Tạo một Dự án Chung

Khi tạo một dự án mới, bạn sẽ được nhắc chọn các thiết bị mà bạn muốn hỗ trợ. Theo mặc định, chỉ có iPad (4:3) được chọn. Bạn có thể chạm vào các thiết bị khác để kích hoạt hỗ trợ cho chúng. Nếu bạn có nhiều hơn một thiết bị được chọn, dự án của bạn được coi là một "Dự án Chung".

Chọn Thiết bị

Khi bạn chọn nhiều thiết bị để hỗ trợ, điều này có nghĩa là bạn phải chắc chắn rằng nội dung dự án của bạn vừa vặn trên màn hình cho mỗi thiết bị/tỉ lệ khung hình.

Khu vực hình chữ nhật màu xanh trên canvas là không gian màn hình có thể nhìn thấy. Bất cứ điều gì được đặt trong không gian màn hình có thể nhìn thấy sẽ được thấy khi dự án của bạn đang chạy. Hãy nhớ rằng mỗi thiết bị bạn đã kích hoạt khi tạo dự án có không gian màn hình có thể nhìn thấy riêng.

Để chắc chắn rằng nội dung của bạn vừa vặn trong không gian màn hình có thể nhìn thấy cho mỗi khu vực, hãy chạm vào biểu tượng Chọn Thiết bị trên bảng công cụ.

Nhớ rằng, một số thiết bị như iPhone có nhiều kích thước màn hình và tỉ lệ khung hình khác nhau. Nếu bạn đang phát triển một dự án cho những thiết bị này và muốn hỗ trợ một phiên bản iOS cũ hơn, bạn phải đảm bảo rằng nội dung của bạn hoạt động trên mỗi phiên bản của thiết bị đó. Vì vậy, nếu bạn chọn iPhone, bạn phải đảm bảo rằng nội dung của bạn vừa vặn trong không gian màn hình của iPhone 4 (3:2) và của iPhone 5,6,6+ (16:9).

Thiết kế dự án của bạn cho nhiều thiết bị

Thông thường, khi phát triển một trò chơi hoặc ứng dụng, bạn muốn tránh việc làm lại tất cả cho mỗi dự án. Với các Dự án Chung, bạn có thể sử dụng thiết kế thông minh để giảm thiểu khối lượng công việc bạn cần làm lại.

hyperPad có tất cả kích thước màn hình bắt đầu từ góc dưới bên trái, sau đó mở rộng lên và sang phải cho các thiết bị lớn hơn. Nếu bạn ghi nhớ điều này, nhiều trò chơi có thể được tạo ra một lần.

Khi thiết kế cảnh của bạn, hãy thiết kế sao cho nội dung chính của bạn vừa vặn trong thiết bị nhỏ nhất, và nền của bạn sao cho nó vừa vặn trên thiết bị lớn nhất. Khi tạo dự án của bạn, kích thước lớn nhất được gán là "Độ phân giải Thiết kế". Bằng cách làm này, nhiều dự án tự động trông tuyệt đẹp trên tất cả các thiết bị.

Ví dụ, bạn muốn tạo một trò chơi nền tảng hoạt động trên cả iPhone và iPad. Bạn có thể thiết kế cấp độ chính (các chướng ngại vật trên mặt đất, v.v.) để vừa vặn trong màn hình của iPhone nhỏ nhất (tỷ lệ khung hình 16:9), sau đó có nền của bạn phù hợp với thiết bị lớn nhất (iPad). Trên iPhone nhỏ nhất, trò chơi sẽ xuất hiện chính xác như bạn đã thiết kế. Đối với các thiết bị lớn hơn (iPad 4:3 hoặc máy tính để bàn 16:10), trò chơi sẽ hiển thị nhiều nội dung theo chiều dọc hơn ở phía trên. Bởi vì bạn đã làm cho nền của bạn phù hợp với kích thước lớn nhất, luôn có điều gì đó có thể nhìn thấy và bạn không bị bỏ lại với không gian đen trống.

Khi chọn các thiết bị khác nhau, hãy nhận thấy rằng không gian màn hình có thể nhìn thấy không thay đổi về chiều rộng. hyperPad sử dụng độ phân giải tùy chỉnh để giữ cho chiều rộng nhất quán trên tất cả các thiết bị. Chỉ chiều cao thay đổi, hiển thị nhiều hoặc ít nội dung theo chiều dọc.

Dưới đây là bảng biểu diễn các tỉ lệ khung hình và độ phân giải của các thiết bị khác nhau.

Tỉ lệ khung hình	Biểu tượng	Các thiết bị	Độ phân giải Thiết kế
4:3		iPad, iPad Pro	2048 px x 1536 px
16:9		iPhone 5, iPhone 5S, iPhone 6, iPhone 6 Plus, iPhone 6S, iPhone 6S Plus, iPod thế hệ thứ 5, iPod thế hệ thứ 6	2048 px x 1158 px
3:2		iPhone 3GS, iPhone 4, iPhone 4S, iPod thế hệ thứ 4	2046 px x 1364 px
16:10		Máy tính để bàn	2048 px x 1280 px

Một lưu ý về các iPhone cũ (3GS, iPhone 4, 4S và iPod thế hệ thứ 4): Các thiết bị này sử dụng tỷ lệ khung hình 3:2. Để giữ cho chiều rộng của tất cả các thiết bị nhất quán, không gian màn hình có thể nhìn thấy cho các thiết bị 3:2 thực sự dài hơn so với các thiết bị iPhone lớn hơn về thể chất như iPhone 5, 6+ (16:9). Nếu bạn muốn phát triển cho iPhone và hỗ trợ iOS 9 trở xuống, bạn PHẢI cũng đảm bảo rằng dự án của bạn vừa vặn trong không gian màn hình 3:2.

Nếu bạn chỉ muốn hỗ trợ iOS 10 và mới hơn, thì bạn không cần phải lo lắng về việc nội dung của bạn vừa vặn trong không gian màn hình 3:2.

Nhập tài nguyên

hyperPad tự động thay đổi kích thước dự án của bạn để trông tuyệt đẹp trên tất cả các thiết bị. Để giữ cho dự án của bạn trông tuyệt vời trên tất cả các thiết bị, bạn nên luôn nhập hình ảnh của mình để vừa vặn trong Độ phân giải Thiết kế. Độ phân giải Thiết kế được đưa ra theo tỷ lệ retina, vì vậy khi bạn nhập hình ảnh, một hình ảnh không phải retina sẽ tự động được tạo ra cho bạn.

Ví dụ, nếu bạn nhập một hình ảnh 512x512 pixel, một hình ảnh 256x256 pixel sẽ được tạo ra cho bạn.

Cũng xin lưu ý rằng, độ phân giải thiết kế được đo bằng pixel. Trên thiết bị thực tế, mọi thứ được đo bằng điểm. Điều này có nghĩa là 2048x1536 pixel thực tế là 1024x768 điểm (trên một thiết bị retina).

Vị trí Tuyệt đối và Tương đối

Có hai cách để định vị các đối tượng trong hyperPad. Vị trí Tuyệt đối và Vị trí Tương đối. Vị trí Tuyệt đối đặt một đối tượng ở một vị trí pixel cụ thể trên canvas và được đo bằng mét. Vị trí Tương đối đặt đối tượng của bạn dựa trên tỷ lệ phần trăm của không gian màn hình có thể nhìn thấy.

Với vị trí tuyệt đối, các đối tượng của bạn có thể xuất hiện ngoài màn hình cho các thiết bị nhỏ hơn. Điều này xảy ra vì hệ thống tọa độ không thay đổi dựa trên mỗi thiết bị (1 mét là như nhau trên iPhone, iPad và bất cứ thứ gì khác).

Với vị trí tương đối, đối tượng của bạn sẽ xuất hiện ở cùng một vị trí tương đối cho dù thiết bị nào. Vì vậy, nếu bạn đặt đối tượng của mình ở giữa màn hình, nó sẽ ở giữa cho iPhone, iPad và bất kỳ thiết bị lớn hơn nào như TV hoặc máy tính.

Theo mặc định, bất kỳ đối tượng nào bạn đặt trên các lớp bình thường sẽ sử dụng vị trí tuyệt đối, và bất kỳ thứ gì được đặt trên các lớp UI đều được thiết lập thành vị trí dựa trên phần trăm. Bằng cách này, bạn không phải lo lắng về việc các nút, thanh sức khỏe hoặc cần điều khiển của bạn bị ngoài màn hình cho mỗi thiết bị.

Trong gif dưới đây, bạn có thể thấy hiệu ứng của vị trí tương đối. Các biểu tượng "Chạm" và bàn tay thì đang sử dụng vị trí tương đối và luôn ở giữa cho mỗi thiết bị.

Để thay đổi kiểu định vị của đối tượng của bạn, hãy chọn đối tượng của bạn và từ Thuộc tính Đối tượng, chuyển đến Tab Biến đổi và nhấn vào biểu tượng "%" trên trường vị trí. Điều này sẽ biến đổi vị trí hiện tại của bạn thành một tỷ lệ phần trăm của màn hình.

Nếu bạn chọn qua các thiết bị hỗ trợ của mình từ bảng công cụ, bạn có thể thấy các đối tượng tương đối của bạn vẫn nằm trong không gian màn hình có thể nhìn thấy.

Để giữ cho một đối tượng hoàn toàn ở giữa, các vị trí X và Y nên là 50%.

Hành động Tùy chỉnh Dựa trên Kích thước Màn hình

Đôi khi bạn muốn dự án của mình trông và cảm nhận hơi khác nhau cho mỗi thiết bị. Ví dụ, bạn chỉ muốn một nút xuất hiện trên iPad và không có trên iPhone.

Để làm điều này, bạn có thể sử dụng hành vi "Get Screen" để xác định kích thước của màn hình hiện tại, và với hành vi IF để ẩn nút trên iPhone.

Trong ví dụ trên, bạn sẽ sử dụng Get Screen, sau đó xuất tỷ lệ khung hình ra một hành vi IF, kiểm tra xem đó có phải là iPhone (16:9) không.

Sau đó, sử dụng hành vi ẩn đồ họa để ẩn nút nếu kích thước màn hình là 16:9.