Dengan hyperPad, Anda dapat membuat proyek Anda untuk berbagai perangkat dan ukuran layar. Ketika mendukung perangkat yang berbeda, ada dua jenis proyek, proyek yang spesifik untuk perangkat dan proyek universal.

Proyek Spesifik Perangkat: Buat versi terpisah dari proyek Anda untuk setiap platform yang ingin Anda dukung. Ketika membuat proyek Anda, Anda menentukan satu perangkat untuk proyek Anda. Misalnya, jika Anda ingin membuat game hanya untuk iPad, maka pilih HANYA iPad (4:3) saat membuat proyek Anda.

Proyek Universal: Dukung berbagai perangkat dengan satu proyek. Saat membuat proyek Anda, pilih lebih dari satu perangkat target. Ini berarti proyek yang sama dapat berfungsi di iPhone dan iPad tanpa memiliki dua versi terpisah.

Ada kelebihan dan kekurangan untuk kedua pendekatan tersebut. Untuk proyek yang memerlukan kontrol penuh atas layar, dan apa yang ingin Anda tampilkan setiap saat, pendekatan spesifik perangkat mungkin menguntungkan. Namun, ini juga berarti Anda harus membuat ulang game/proyek Anda untuk setiap platform baru.

Manfaat dari proyek universal adalah Anda hanya perlu membuat game atau aplikasi Anda sekali. Namun, Anda memiliki kontrol yang lebih sedikit tentang apa yang muncul di layar. Misalnya, di perangkat yang lebih lebar, Anda mungkin melihat lebih banyak konten yang seharusnya tidak terlihat. hyperPad menyediakan beberapa alat dan perilaku untuk mengendalikan elemen tertentu, tetapi terkadang Anda hanya perlu kontrol total dan proyek spesifik perangkat lebih masuk akal.

Artikel ini terutama mencakup proyek universal, karena Anda berurusan dengan berbagai rasio aspek dan perangkat. Untuk proyek spesifik perangkat, sesederhana memastikan konten Anda sesuai di area hijau pada kanvas.

Membuat Proyek Universal

Saat membuat proyek baru, Anda diminta untuk memilih perangkat yang ingin Anda dukung. Secara default, hanya iPad (4:3) yang dipilih. Anda dapat mengetuk perangkat lain untuk mengaktifkan dukungan untuk mereka juga. Jika Anda memiliki lebih dari satu perangkat yang dipilih, proyek Anda dianggap sebagai "Proyek Universal".

Menggilir Perangkat

Ketika Anda memilih beberapa perangkat untuk didukung, ini berarti Anda harus memastikan konten proyek Anda sesuai di layar untuk setiap perangkat/rasio aspek.

Area persegi panjang hijau pada kanvas adalah ruang layar yang terlihat. Apa pun yang ditempatkan di dalam ruang layar yang terlihat akan terlihat ketika proyek Anda sedang berjalan. Ingatlah bahwa setiap perangkat yang Anda aktifkan saat membuat proyek memiliki ruang layar yang terlihat masing-masing.

Untuk memastikan konten Anda cocok dalam ruang layar yang terlihat untuk setiap area, ketuk ikon Gilir Perangkat di palet alat.

Ingat, beberapa perangkat seperti iPhone memiliki beberapa ukuran layar dan rasio aspek. Jika Anda mengembangkan proyek untuk perangkat ini dan ingin mendukung versi iOS yang lebih lama, Anda harus memastikan konten Anda berfungsi di setiap versi perangkat tersebut. Jadi jika Anda memilih iPhone, Anda harus memastikan konten Anda cocok dalam ruang layar iPhone 4 (3:2), dan ruang layar iPhone 5, 6, 6+ (16:9).

Mendesain Proyek Anda untuk Berbagai Perangkat

Umumnya, saat mengembangkan game atau aplikasi, Anda ingin menghindari mengulang semuanya untuk setiap proyek. Dengan Proyek Universal, Anda dapat menggunakan desain cerdik untuk meminimalkan jumlah pekerjaan yang perlu Anda lakukan lagi.

hyperPad memiliki semua ukuran layar mulai dari sudut kiri bawah, kemudian skala ke atas dan ke kanan untuk perangkat yang lebih besar. Jika Anda memperhatikan hal ini, banyak game dapat dibuat sekali.

Saat mendesain adegan Anda, desain agar konten utama Anda sesuai dengan perangkat terkecil, dan latar belakang agar sesuai dengan yang terbesar. Saat membuat proyek Anda, ukuran terbesar diberi label sebagai "Resolusi Desain". Dengan melakukan ini, banyak proyek secara otomatis terlihat hebat di semua perangkat.

Misalnya, Anda ingin membuat game platform untuk bekerja di iPhone dan iPad. Anda dapat mendesain level utama (halangan tanah, dll.) untuk sesuai dengan layar iPhone terkecil (rasio aspek 16:9), lalu memiliki latar belakang yang sesuai untuk perangkat terbesar (iPad). Di iPhone terkecil, game akan tampil persis seperti yang Anda desain. Untuk perangkat yang lebih besar (iPad 4:3, atau Desktop 16:10), game akan menunjukkan lebih banyak konten vertikal di bagian atas. Karena Anda membuat latar belakang Anda sesuai dengan ukuran terbesar, selalu ada sesuatu yang terlihat dan Anda tidak akan dibiarkan dengan ruang hitam kosong.

Saat menggilir perangkat berbeda, perhatikan bahwa ruang layar yang terlihat tidak berubah dalam lebar. hyperPad menggunakan resolusi kustom untuk menjaga lebar tetap konsisten di semua perangkat. Hanya tinggi yang berubah, menunjukkan lebih atau kurang konten secara vertikal.

Berikut adalah tabel yang menggambarkan rasio aspek perangkat dan resolusinya yang berbeda.

Rasio Aspek	Ikon	Perangkat	Resolusi Desain
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 generasi 5, iPod generasi 6	2048 px x 1158 px
3:2		iPhone 3GS, iPhone 4, iPhone 4S, iPod generasi 4	2046 px x 1364 px
16:10		Komputer desktop	2048 px x 1280 px

Catatan mengenai iPhone yang lebih tua (3GS, iPhone 4, 4S, dan iPod generasi 4): Perangkat ini menggunakan rasio aspek 3:2. Untuk menjaga lebar semua perangkat konsisten, ruang layar yang terlihat untuk perangkat 3:2 sebenarnya lebih tinggi daripada perangkat iPhone 5, 6+ (16:9) yang lebih besar secara fisik. Jika Anda ingin mengembangkan untuk iPhone, dan mendukung iOS 9 dan di bawah, Anda HARUS juga memastikan proyek Anda sesuai dengan ruang layar 3:2.

Jika Anda hanya ingin mendukung iOS10 dan yang lebih baru, maka Anda tidak perlu khawatir tentang konten Anda cocok dalam ruang layar 3:2.

Mengimpor aset

hyperPad secara otomatis menskalakan proyek Anda agar terlihat hebat di semua perangkat. Untuk menjaga proyek Anda tetap terlihat hebat di semua perangkat, Anda harus selalu mengimpor gambar Anda untuk sesuai dengan Resolusi Desain. Resolusi Desain diberikan dalam retina, jadi ketika Anda mengimpor gambar, gambar non-retina akan otomatis dibuat untuk Anda.

Misalnya, jika Anda mengimpor gambar 512x512 piksel, gambar 256x256 piksel akan dibuat untuk Anda.

Perlu dicatat juga, bahwa resolusi desain diukur dalam piksel. Di perangkat sebenarnya, semuanya diukur dalam poin. Ini berarti bahwa 2048x1536 piksel sebenarnya adalah 1024x768 poin (di perangkat retina).

Posisi Absolut dan Relatif

Ada dua cara untuk memposisikan objek dalam hyperPad. Posisi Absolut, dan Posisi Relatif. Posisi Absolut menempatkan objek pada lokasi piksel tertentu di kanvas dan diukur dalam meter. Posisi Relatif menempatkan objek Anda berdasarkan persentase dari ruang layar yang terlihat.

Dengan posisi absolut, objek Anda mungkin muncul di luar layar untuk perangkat yang lebih kecil. Ini terjadi karena sistem koordinat tidak berubah berdasarkan masing-masing perangkat (1 meter sama pada iPhone, iPad, dan perangkat lainnya).

Dengan posisi relatif, objek Anda akan muncul pada posisi relatif yang sama tidak peduli perangkat apa. Jadi jika Anda menempatkan objek Anda di tengah layar, itu akan berada di tengah untuk iPhone, iPad, dan perangkat yang lebih besar seperti TV atau komputer.

Secara default, objek apa pun yang Anda tempatkan di lapisan reguler akan menggunakan posisi absolut, dan apa pun yang ditempatkan di lapisan UI disetel ke posisi berbasis persentase. Dengan cara ini, Anda tidak perlu khawatir tentang tombol, batang kesehatan, atau joystick Anda yang berada di luar layar untuk setiap perangkat.

Dalam gif di bawah ini, Anda dapat melihat efek posisi relatif. Tanda "Ketuk", dan tangan menggunakan posisi relatif dan selalu tetap di tengah untuk setiap perangkat.

Untuk mengubah jenis pemposisian objek Anda, pilih objek Anda dan dari Properti Objek, beralih ke Tab Transformasi dan ketuk ikon "%" pada field posisi. Ini akan mengubah posisi Anda saat ini menjadi persentase dari layar.

Jika Anda menggilir perangkat yang didukung Anda dari palet alat, Anda dapat melihat objek relatif Anda tetap berada dalam ruang layar yang terlihat.

Untuk menjaga objek tetap tepat di tengah, posisi X, dan Y harus berada di 50%.

Tindakan Kustom Berdasarkan Ukuran Layar

Kadang-kadang Anda ingin proyek Anda terlihat dan terasa sedikit berbeda untuk setiap perangkat. Misalnya, Anda hanya ingin sebuah tombol tersedia di iPad dan tidak di iPhone.

Untuk ini, Anda dapat menggunakan perilaku "Dapatkan Layar" untuk mengetahui ukuran layar saat ini, dan dengan perilaku IF untuk menyembunyikan tombol di iPhone.

Dalam contoh di atas, Anda akan menggunakan Dapatkan Layar, lalu mengeluarkan Rasio Aspek ke perilaku IF, yang memeriksa apakah itu iPhone (16:9).

Kemudian gunakan perilaku sembunyikan grafik untuk menyembunyikan tombol jika ukuran layar 16:9.

Berbagai Ukuran Layar dan Perangkat