Pelbagai Saiz Skrin dan Peranti

Dengan hyperPad anda boleh mencipta projek anda untuk pelbagai peranti dan saiz skrin. Apabila menyokong peranti yang berbeza, terdapat dua jenis projek, Projek Spesifik Peranti dan Projek Universal.

Projek Spesifik Peranti: Cipta versi berasingan projek anda untuk setiap platform yang ingin anda sokong. Apabila mencipta projek anda, anda menentukan satu peranti untuk projek anda. Sebagai contoh, jika anda ingin membuat permainan iPad sahaja, maka pilih HANYA iPad (4:3) semasa mencipta projek anda.

Projek Universal: Sokong pelbagai peranti dengan satu projek. Apabila mencipta projek anda, pilih lebih daripada satu peranti sasaran. Ini bermakna projek yang sama boleh berfungsi pada iPhone dan iPad tanpa perlu mempunyai dua versi berasingan.

Terdapat kebaikan dan keburukan untuk kedua-dua pendekatan. Untuk projek yang memerlukan kawalan penuh pada skrin dan apa yang ingin anda paparkan pada setiap masa, pendekatan spesifik peranti mungkin bermanfaat. Namun, ini datang dengan kos perlu mencipta semula permainan/projek anda untuk setiap platform baru.

Kebaikan projek universal adalah bahawa anda hanya perlu mencipta permainan atau apl anda sekali. Walau bagaimanapun, anda mempunyai kawalan yang kurang tentang apa yang muncul di skrin. Sebagai contoh, pada peranti yang lebih lebar, anda mungkin melihat lebih banyak kandungan yang sebaliknya tidak dapat dilihat. hyperPad menyediakan beberapa alat dan tingkah laku untuk mengawal elemen tertentu, tetapi kadang-kadang anda hanya memerlukan kawalan penuh dan projek spesifik peranti lebih masuk akal.

Artikel ini terutama membincangkan projek universal, apabila anda berurusan dengan pelbagai nisbah aspek dan peranti. Untuk projek spesifik peranti, ia se简单 sebagai memastikan kandungan anda sesuai dalam kawasan hijau pada kanvas.

Mencipta Projek Universal

Apabila mencipta projek baru, anda akan diminta untuk memilih peranti yang ingin anda sokong. Secara lalai, hanya iPad (4:3) yang dipilih. Anda boleh mengetuk peranti lain untuk membolehkan sokongan untuk mereka juga. Jika anda mempunyai lebih daripada satu peranti yang dipilih, projek anda dianggap sebagai "Projek Universal".

Menukar Peranti

Apabila anda memilih pelbagai peranti untuk disokong, ini bermakna anda harus memastikan kandungan projek anda sesuai pada skrin untuk setiap peranti/nisbah aspek.

Kawasan segi empat tepat hijau pada kanvas adalah ruang skrin yang boleh dilihat. Apa sahaja yang diletakkan dalam ruang skrin yang boleh dilihat akan dilihat apabila projek anda berfungsi. Ingat bahawa setiap peranti yang anda aktifkan semasa mencipta projek mempunyai ruang skrin yang boleh dilihat sendiri.

Untuk memastikan kandungan anda sesuai dalam ruang skrin yang boleh dilihat untuk setiap kawasan, tekan ikon Cycle Device pada palet alat.

Ingat, beberapa peranti seperti iPhone mempunyai pelbagai saiz skrin dan nisbah aspek. Jika anda membangunkan projek untuk peranti ini dan ingin menyokong versi iOS yang lebih lama, anda mesti memastikan kandungan anda berfungsi pada setiap versi peranti itu. Jadi, jika anda memilih iPhone, anda mesti memastikan kandungan anda sesuai dalam ruang skrin iPhone 4 (3:2), dan ruang skrin iPhone 5,6,6+ (16:9).

Reka bentuk projek anda untuk pelbagai peranti

Biasanya apabila membangunkan permainan atau apl, anda ingin mengelakkan mengulang segala-galanya untuk setiap projek. Dengan Projek Universal, anda boleh menggunakan reka bentuk yang bijak untuk meminimumkan jumlah kerja yang perlu anda lakukan semula.

hyperPad mempunyai semua saiz skrin bermula dari sudut bawah kiri, kemudian mengembang ke atas dan ke kanan untuk peranti yang lebih besar. Jika anda ingat ini, banyak permainan boleh dicipta sekali.

Apabila mereka bentuk adegan anda, reka bentuk supaya kandungan utama anda sesuai dalam peranti terkecil, dan latar belakang anda supaya ia sesuai untuk yang terbesar. Semasa mencipta projek anda, saiz terbesar dilabel sebagai "Resolusi Reka Bentuk". Dengan melakukannya, banyak projek secara automatik kelihatan hebat pada semua peranti.

Sebagai contoh, anda ingin membuat permainan platform yang berfungsi pada iPhone dan iPad. Anda boleh merekabentuk tahap utama (halangan landasan, dan lain-lain) untuk sesuai dalam skrin iPhone terkecil (nisbah aspek 16:9), kemudian mempunyai latar belakang anda sesuai dengan peranti terbesar (iPad). Pada iPhone terkecil, permainan akan muncul tepat seperti yang anda reka. Untuk peranti yang lebih besar (iPad 4:3, atau Desktop 16:10), permainan akan menunjukkan lebih banyak kandungan menegak di bahagian atas. Oleh kerana anda telah menjadikan latar belakang anda sesuai dengan saiz terbesar, selalu ada sesuatu yang boleh dilihat dan anda tidak ditinggalkan dengan ruang hitam kosong.

Sewaktu menukar antara peranti yang berbeza, perhatikan ruang skrin yang boleh dilihat tidak berubah lebarnya. hyperPad menggunakan resolusi tersuai untuk menjaga lebar yang konsisten di seluruh peranti. Hanya ketinggian yang berubah menunjukkan lebih atau kurang kandungan secara menegak.

Di bawah adalah carta yang mewakili pelbagai nisbah aspek dan resolusi peranti.

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

Catatan mengenai iPhone lama (3GS, iPhone 4, 4S, dan iPod generasi ke-4): Peranti ini menggunakan nisbah aspek 3:2. Untuk menjaga lebar semua peranti konsisten, ruang skrin yang boleh dilihat untuk peranti 3:2 sebenarnya lebih tinggi daripada peranti iPhone 5, 6+ (16:9) yang lebih besar secara fizikal. Jika anda ingin membangunkan untuk iPhone, dan menyokong iOS 9 dan ke bawah, anda HARUS memastikan projek anda juga sesuai dalam ruang skrin 3:2.

Jika anda hanya ingin menyokong iOS10 dan ke atas, maka anda tidak perlu risau tentang kandungan anda yang sesuai dalam ruang skrin 3:2.

Mengimport aset

hyperPad secara automatik menyesuaikan projek anda agar kelihatan hebat pada semua peranti. Untuk memastikan projek anda kelihatan hebat di semua peranti, anda harus sentiasa mengimport imej anda untuk sesuai dengan Resolusi Reka Bentuk. Resolusi Reka Bentuk diberikan dalam retina, jadi apabila anda mengimport imej, imej bukan retina akan dihasilkan untuk anda secara automatik.

Contohnya, jika anda mengimport imej 512x512 piksel, imej 256x256 piksel akan dicipta untuk anda.

Juga, ambil perhatian bahawa resolusi reka bentuk diukur dalam piksel. Pada peranti sebenar, semuanya diukur dalam titik. Ini bermakna 2048x1536 piksel sebenarnya 1024x768 titik (pada peranti retina).

Posisi Absolut dan Relatif

Terdapat dua cara untuk menentukan kedudukan objek dalam hyperPad. Absolut, dan Relatif. Posisi absolut meletakkan objek pada lokasi piksel tertentu pada kanvas dan diukur dalam meter. Posisi relatif meletakkan objek anda berdasarkan peratusan daripada ruang skrin yang boleh dilihat.

Dengan posisi absolut, objek anda mungkin muncul di luar skrin untuk peranti yang lebih kecil. Ini berlaku kerana sistem koordinat tidak berubah berdasarkan setiap peranti (1 meter adalah sama pada iPhone, iPad, dan apa sahaja yang lain).

Dengan posisi relatif, objek anda akan muncul di kedudukan relatif yang sama tidak kira peranti apa pun. Jadi jika anda meletakkan objek anda di tengah-tengah skrin anda, ia akan berada di tengah untuk iPhone, iPad, dan mana-mana peranti yang lebih besar seperti TV atau komputer.

Secara lalai, mana-mana objek yang anda letakkan pada lapisan biasa akan menggunakan posisi absolut, dan mana-mana objek yang diletakkan pada lapisan UI akan ditetapkan kepada posisi berdasarkan peratusan. Dengan cara ini, anda tidak perlu risau tentang butang, bar kesihatan, atau joystick anda tidak berada di skrin untuk setiap peranti.

Dalam gif di bawah, anda boleh melihat kesan posisi relatif. Tanda "Ketuk", dan tangan menggunakan posisi relatif dan sentiasa tetap di tengah untuk setiap peranti.

Untuk menukar jenis penentuan posisi objek anda, pilih objek anda dan dari Ciri Objek, beralih ke Tab Transform dan ketuk ikon "%" pada medan posisi. Ini akan mengubah posisi semasa anda menjadi peratusan skrin.

Jika anda mengalihkan melalui peranti yang disokong dari palet alat, anda boleh melihat objek relatif anda tetap berada dalam ruang skrin yang boleh dilihat.

Untuk memastikan objek benar-benar di tengah, posisi X dan Y harus berada pada 50%.

Tindakan Khusus Berdasarkan Saiz Skrin

Kadang-kadang anda mahu projek anda kelihatan dan berasa sedikit berbeza untuk setiap peranti. Contohnya, anda hanya mahu butang tersedia pada iPad dan bukan pada iPhone.

Untuk ini, anda boleh menggunakan tingkah laku "Dapatkan Skrin" untuk mengetahui saiz skrin semasa, dan dengan tingkah laku IF untuk menyembunyikan butang pada iPhone.

Dalam contoh di atas, anda akan menggunakan Dapatkan Skrin, kemudian mengeluarkan Nisbah Aspek kepada tingkah laku IF, yang memeriksa sama ada ia adalah iPhone (16:9).

Kemudian gunakan tingkah laku sembunyikan grafik untuk menyembunyikan butang jika saiz skrin adalah 16:9.