Bekerja dengan Ikon dan Gambar tvOS di Xamarin

Artikel
03/16/2017

Membuat ikon dan citra yang menawan adalah bagian penting untuk mengembangkan pengalaman pengguna yang imersif untuk app Apple TV Anda. Panduan ini akan membahas langkah-langkah yang diperlukan untuk membuat dan menyertakan aset grafis yang diperlukan untuk aplikasi Xamarin.tvOS Anda:

Luncurkan Gambar - Gambar peluncuran ditampilkan saat aplikasi Anda pertama kali dimulai, dan digantikan oleh layar pertama aplikasi setelah peluncuran selesai.
Gambar Berlapis - Khusus untuk Apple TV, Gambar Berlapis baru Apple bekerja dengan Efek Parallax untuk membuat efek 3D untuk item yang dipilih. Ada beberapa cara untuk Membuat Gambar Berlapis.
Ikon App - Ikon diperlukan untuk tidak hanya layar Utama Apple TV tetapi untuk App Store. Mereka harus disediakan sebagai Gambar Berlapis.
Gambar Rak Teratas - Jika aplikasi Anda ditempatkan di Baris Atas layar Beranda, aplikasi akan memerlukan Gambar Rak Teratas untuk menyoroti fitur aplikasi Anda. Secara opsional, Anda dapat menyediakan Konten Shelf Teratas Dinamis untuk menyoroti konten di aplikasi Anda.
Gambar Pusat Permainan - Jika aplikasi Anda adalah game dan menggunakan Game Center, beberapa gambar tambahan akan diperlukan.
Mengatur Gambar Proyek Xamarin.tvOS - Mencakup langkah-langkah yang diperlukan untuk mengatur Ikon Luncurkan Gambar dan Aplikasi untuk aplikasi Xamarin.tvOS Anda.

Penting

Semua gambar di Apple TV berada pada resolusi 1x (@1x) dan Anda hanya boleh menggunakan gambar dengan ukuran ini. Termasuk grafis resolusi yang lebih besar dan lebih tinggi tidak hanya membutuhkan waktu untuk mengunduh dan menggunakan lebih banyak memori dan penyimpanan, tetapi harus diskalakan ulang secara dinamis pada runtime dan akan berdampak negatif pada performa menggambar.

Luncurkan Gambar

Gambar Peluncuran adalah hal pertama yang ditampilkan ketika aplikasi Xamarin.tvOS Anda awalnya dimulai di Apple TV, dan dengan demikian, setiap aplikasi tvOS harus menyediakan Gambar Peluncuran.

Gambar Peluncuran muncul dengan cepat dan memberikan kesan bahwa aplikasi Anda cepat dan responsif. Apple TV akan menggantiKan Gambar Peluncuran dengan layar pertama aplikasi Anda tak lama setelahnya.

Luncurkan Gambar bukanlah kesempatan untuk iklan atau ekspresi artistik, mereka hanya ada untuk memberikan kesan bahwa aplikasi Anda diluncurkan dengan cepat dan siap digunakan.

Luncurkan Ukuran Gambar	Catatan
1920x1080px	File .png yang tidak berlapis saja

Apple membuat saran berikut untuk merancang Gambar Peluncuran aplikasi Anda:

Hampir Identik dengan Layar Pertama - Layar Peluncuran Anda harus sedekat mungkin dengan layar pertama aplikasi Anda. Menyertakan grafik atau elemen yang berbeda dapat mengakibatkan "flash" yang mengganggu saat layar pertama muncul.
Hindari Menggunakan Teks - Luncurkan Gambar bersifat statis dan dengan demikian, tidak akan dilokalkan sebelum ditampilkan.
Peluncuran Downplay - Karena pengguna Apple TV sering beralih app, Anda tidak boleh menarik perhatian pada proses peluncuran aplikasi.
Tidak ada Iklan atau Branding - Gambar Peluncuran Anda tidak boleh digunakan sebagai layar Tentang atau menyertakan merek apa pun kecuali itu adalah bagian statis dari layar pertama aplikasi Anda. Iklan dilarang keras.

Mengatur Gambar Peluncuran

Untuk mengatur Luncurkan Gambar untuk proyek tvOS Anda, silakan lakukan hal berikut:

Di Penjelajah Solusi, klik Assets.xcassets dua kali untuk membukanya untuk pengeditan:
Di Editor Aset, klik asetLaunchImages:
Klik entri 1x Apple TV dan pilih Luncurkan Gambar atau secara opsional seret gambar baru dari sistem file:
Simpan perubahan.

Gambar Berlapis

Baru menggunakan Apple TV, Gambar Berlapis berfungsi dengan Efek Parallax untuk menghasilkan efek 3D yang membantu menjaga pengguna tetap terhubung secara mental ke konten di layar di seluruh ruangan.

Gambar Berlapis berisi dari dua (2) hingga lima (5) lapisan terpisah yang digabungkan untuk membentuk gambar lengkap. Dengan pengecualian lapisan latar belakang, setiap lapisan menggunakan urutan Z-nya bersama dengan transparansi untuk menciptakan ilusi kedalaman. Ketika pengguna berinteraksi dengan Gambar Berlapis, lapisan berurutan Z yang lebih tinggi diskalakan dan tumpang tindih untuk membuat efek ini.

Penting

Gambar Berlapis diperlukan untuk ikon aplikasi Anda dan bersifat opsional untuk Item Yang Dapat Difokuskan lainnya (seperti Gambar Rak Atas). Namun, Apple menyarankan penggunaan Gambar Berlapis untuk gambar apa pun yang bisa mendapatkan fokus di aplikasi Anda.

Apple membuat saran berikut untuk merancang Gambar Berlapis Anda:

Buat Lapisan Latar Belakang Buram - Lapisan latar belakang Anda (lapisan 1) harus buram atau Anda akan mendapatkan kesalahan saat mencoba menggunakan Gambar Berlapis di Apple TV. Semua lapisan lainnya dapat berisi beberapa tingkat transparansi untuk meningkatkan efek 3D.
Isolasi Latar Depan, Elemen Tengah dan Latar Belakang - Tempatkan elemen menonjol (seperti karakter game) di latar depan, gunakan tengah untuk elemen atau bayangan sekunder. Terakhir, sertakan latar belakang netral untuk menyediakan panggung untuk lapisan atas Anda.
Pertahankan Teks di Latar Depan - Kecuali Anda ingin teks Anda dikaburkan oleh tingkat yang lebih tinggi, umumnya teks harus berada di lapisan paling atas.
Gunakan Lapisan Sederhana - Efek Parallax dirancang untuk menjadi halus sehingga jaga lapisan Anda menjadi minimal untuk mencegah efek jarring dan tidak realistis.
Sertakan Zona Brankas - Karena lapisan atas dapat dipotong selama Efek Parallax, Anda perlu membangun batas Zona Brankas ke setiap lapisan. Jika Anda mendapatkan konten Anda terlalu menutup tepi lapisan, konten tersebut dapat dipotong. Lapisan atas akan mengalami lebih banyak penskalaan dan pemotongan daripada lapisan yang lebih rendah. Lihat bagian Lapisan Gambar Ukuran di bawah ini.
Pratinjau Sering - Gambar Berlapis harus sering dipratinjau untuk memastikan bahwa efek 3D yang diinginkan terjadi dan bahwa tidak ada konten pada lapisan individual yang sedang dipangkas. Anda harus mempratinjau Gambar Berlapis di perangkat keras Apple TV asli untuk memastikan gambar tersebut dirender seperti yang diharapkan.

Jika memungkinkan, Anda harus selalu menggunakan kontrol bawaan UIKit untuk menampilkan Gambar Berlapis Anda, karena mereka akan secara otomatis mendapatkan Efek Parallax ketika mereka menjadi fokus.

Lapisan Gambar Ukuran

Penting untuk diingat untuk menyertakan batas Zona Brankas ke dalam setiap lapisan yang akan menyusun Gambar Berlapis Anda. Karena lapisan individu dapat diskalakan dan dipangkas selama Efek Parallax, konten lapisan dapat dipotong jika terlalu dekat dengan tepi lapisan:

Membuat Gambar Berlapis

tvOS bekerja dengan Gambar Berlapis dalam format berikut:

CAR Files - Ini adalah format Katalog Aset eksklusif yang dibuat oleh Apple. Anda tidak membuat file CAR secara langsung, file tersebut dibuat pada waktu kompilasi dari file LSR apa pun dan disertakan dalam bundel aplikasi Anda.
Gambar LSR - Ini adalah format gambar eksklusif yang dibuat oleh Apple. Gunakan Plugin Parallax Exporter Adobe Photoshop atau Parallax Previewer untuk membuat dan mempratinjau Gambar Berlapis dalam format LSR.
Assets.xcassets - Dari dua (2) hingga lima (5) gambar berformat standar .png yang disertakan dalam Katalog Aset yang akan dikompilasi ke dalam Gambar Berlapis berformat CAR atau LSR pada waktu kompilasi.
File LCR - Ini adalah format file milik yang dibuat oleh Apple. File LCR dimaksudkan untuk digunakan sebagai konten tambahan yang diunduh dari salah satu server konten Anda. File LCR tidak boleh disertakan dalam bundel aplikasi Anda. File LCR dihasilkan dari file LSR atau Photoshop menggunakan layerutil alat baris perintah yang disertakan dengan Xcode.

Pemratinjau Parallax

Apple membuat Pemratinjau Parallax untuk mempratinjau dan membuat Gambar Berlapis yang diperlukan untuk Ikon Aplikasi dan Item Yang Dapat Difokuskan opsional. Pemratinjau menunjukkan setiap lapisan yang membentuk Gambar Berlapis yang telah selesai:

Saat mempratinjau Gambar Berlapis, Anda dapat menggunakan mouse untuk memutar gambar dan mempratinjau Efek Parallax. Gunakan tombol + (plus) dan - (minus) untuk menambahkan dan menghapus lapisan.

Saat membuat Gambar Berlapis baru, gambar tersebut dapat diekspor dalam format LSR dan disertakan dalam bundel aplikasi Anda.

Untuk informasi selengkapnya tentang membuat dan mempratinjau Gambar Berlapis, silakan lihat bagian Membuat Karya Parallax Apple dari Panduan Pemrograman Aplikasi untuk tvOS.

Ikon Aplikasi

Aplikasi Xamarin.tvOS Anda tidak hanya memerlukan Ikon Aplikasi untuk layar Utama Apple TV, tetapi juga ikon untuk App Store. Ikon Aplikasi adalah perubahan pertama Anda untuk membuat kesan besar pada pengguna potensial Anda dan harus mengkomunikasikan tujuan aplikasi Anda secara sekilas.

Setiap aplikasi harus menyediakan versi kecil dan besar dari Ikon Aplikasinya. Ikon kecil akan digunakan di layar Utama Apple TV saat app diinstal. Versi besar digunakan oleh App Store. Ikon Aplikasi besar harus meniluki tampilan dan nuansa versi ikon kecil.

Ikon Kecil	Resolusi	Resolusi
Ukuran Aktual	400x240px	1280x768px
Ukuran Zona Brankas	370x222px
Ukuran Tidak Fokus	300x180px
Ukuran Terfokus	370x222px

Penting

Ikon Aplikasi Anda harus disediakan sebagai Gambar Berlapis. Silakan lihat bagian Gambar Berlapis di atas untuk detail selengkapnya.

Apple memberikan saran berikut untuk membuat Ikon Aplikasi Anda:

Berikan Titik Fokus Tunggal – Desain ikon Anda dengan satu titik fokus yang ditempatkan langsung di tengah ikon.
Gunakan Latar Belakang Sederhana - Jaga agar latar belakang ikon Anda tetap sederhana sehingga lapisan atas menonjol. Pertimbangkan untuk menggunakan warna sederhana atau gradien halus.
Batasi Jumlah Teks – Karena nama aplikasi akan muncul di bawah ikon saat dipilih oleh pengguna, Anda hanya boleh menyertakan teks saat penting untuk desain ikon.
Jangan gunakan Cuplikan Layar – Cuplikan layar terlalu kompleks untuk ikon dan tidak mengizinkan pengguna untuk melihat tujuan aplikasi Anda secara sekilas.
Keep Icons Square – tvOS secara otomatis menerapkan masker yang membulatkan sudut ikon Anda secara halal. Jangan sertakan pembulatan ini sendiri.
Pisahkan Lapisan Anda Dengan Hati-hati - Teks harus berada di lapisan paling atas, item sekunder di tengah dan latar belakang netral yang memungkinkan lapisan atas Anda bersinar.
Gunakan Gradien dan Bayangan Dengan Hati-hati – Gradien dan bayangan dapat berbenturan dengan Efek Parallax sehingga harus digunakan dengan hati-hati. Gaya gradien atas ke bawah yang sederhana berfungsi paling baik. Bayangan biasanya bekerja paling baik sebagai warna tajam dan bermata keras.
Transparansi Lapisan Bervariasi – Gunakan berbagai tingkat transparansi pada tingkat atas Ikon Aplikasi Anda untuk meningkatkan efek 3D. Lapisan latar belakang harus buram atau akan mengakibatkan kesalahan.

Mengatur Ikon Aplikasi

Untuk mengatur Ikon Aplikasi yang diperlukan untuk proyek tvOS Anda, silakan lakukan hal berikut:

Di Penjelajah Solusi, klik Assets.xcassets dua kali untuk membukanya untuk pengeditan:
Di Editor Aset, perluas App Icon & Top Shelf Image aset:
Selanjutnya, Perluas App Icon - Small aset:
Kemudian perluas Back aset dan klik Contents entri:
Klik entri 1x Apple TV dan pilih file gambar.
Ulangi langkah-langkah Front di atas untuk aset dan Middle .
Kemudian ulangi langkah yang sama untuk menentukan App Icon - Large aset.
Simpan perubahan.

Gambar Rak Teratas

Jika pengguna telah menempatkan app Xamarin.tvOS Anda di Baris Atas di layar Beranda Apple TV, Gambar Rak Atas besar akan ditampilkan saat aplikasi Anda dipilih oleh pengguna. Gambar ini harus menyoroti fitur aplikasi Anda atau menyediakan tautan langsung ke kontennya.

Gambar Rak Atas dapat disediakan sebagai satu statis .png atau .lsr file (lihat Membuat Gambar Berlapis) atau dapat dibuat secara dinamis pada runtime sebagai satu baris Item yang Dapat Difokuskan (lihat Konten Rak Teratas Dinamis di bawah).

Ukuran Gambar Rak Teratas	Catatan
1920x720px	File .png statis atau .lsr berlapis

Apple memberikan saran berikut untuk membuat Gambar Rak Teratas Anda:

Gunakan Citra Statis Kaya – Jika aplikasi Anda tidak menyediakan konten dinamis, Gambar Rak Atasnya tidak akan dapat difokuskan. Gunakan gambar ini untuk menyoroti fitur aplikasi atau merek Anda.
Tautan ke Konten Aplikasi – Dynamic Top Shelf Layouts menyediakan tautan cepat ke konten yang menurut pengguna Anda paling penting di aplikasi Anda. Gunakan area ini untuk menyediakan tautan cepat untuk memulai aplikasi Anda dan segera melompat ke konten yang diberikan.
Tampilkan Konten Terbaru - Konten Rich Top Shelf dapat menarik pengguna ke dalam aplikasi Anda dan membuat mereka ingin menggunakannya lebih banyak. Gunakan ini sebagai area untuk menampilkan konten dengan peringkat tertinggi atau terbaru.
Konten yang Dipersonalisasi – Pengguna menempatkan aplikasi yang paling sering digunakan atau favorit mereka di Baris Atas layar Beranda. Gunakan Top Shelf untuk menampilkan konten yang paling mereka minati.
Iklan Tidak Diizinkan – Iklan dilarang keras ditampilkan di Rak Teratas. Anda dapat menampilkan konten terbaru yang dapat dibeli, tetapi tidak ada informasi harga yang harus ditampilkan.

Mengatur Gambar Rak Atas

Untuk mengatur Gambar Rak Teratas yang diperlukan untuk proyek tvOS Anda, silakan lakukan hal berikut:

Di Penjelajah Solusi, klik Assets.xcassets dua kali untuk membukanya untuk pengeditan:
Di Editor Aset, perluas App Icon & Top Shelf Image aset:
Klik pada Top Shelf Image aset:
Klik entri 1x Apple TV dan pilih file gambar.
Simpan perubahan.

Konten Rak Teratas Dinamis

Alih-alih menampilkan Gambar Rak Atas statis, Rak Atas dapat berisi baris dinamis Item yang Dapat Difokuskan atau sekumpulan banner pengguliran dinamis. Kedua gaya dinamis ini memungkinkan Anda untuk menyoroti konten yang disediakan oleh aplikasi Anda atau melompat ke fitur yang paling banyak digunakan.

Baris Isi Terseksi

Tipe konten Top Shelf dinamis ini menyajikan satu baris gulir, Item yang Dapat Difokuskan secara opsional dipecah menjadi bagian. Biasanya digunakan untuk menyoroti konten aplikasi baru, favorit, atau yang baru dilihat.

Konten disajikan sebagai daftar konten gulir horizontal tunggal dengan label muncul di bawah bagian konten saat ini dipilih (yang saat ini memiliki fokus). Jika pengguna memilih konten tertentu, aplikasi Anda akan diluncurkan dan mereka harus dibawa langsung ke konten tersebut.

Ukuran konten berikut akan diperlukan:

Ukuran	Poster (2:3)	Persegi (1:1)	HDTV (16:9)
Ukuran Aktual	404x608px	608x608px	908x512px
Ukuran Zona Brankas	380x570px	570x570px	852x479px
Ukuran Tidak Fokus	333x500px	500x500px	782x440px
Ukuran Terfokus	380x570px	570x570px	852x479px

Apple memberikan saran berikut untuk Baris Konten Terseksi:

Lengkapi Baris – Anda harus menyediakan konten yang cukup untuk menjangkau lebar layar penuh.
Menskalakan Gambar Campuran – Baris Konten Terpencil dirancang untuk menyimpan campuran ukuran gambar (dari daftar yang disediakan di atas). Namun, jika Anda mencampur ukuran gambar, ketahuilah bahwa penskalaan tambahan akan diterapkan untuk menormalkan tampilan konten.

Menggulir Spanduk Inset

Secara opsional, aplikasi Xamarin.tvOS Anda dapat menyajikan kontennya di Rak Atas sebagai kumpulan banner yang menggulir dan mengulang secara otomatis yang hampir memenuhi layar. Gaya ini biasanya digunakan untuk menampilkan konten baru yang kaya seperti acara TV baru.

Selain pengguliran otomatis, pengguna dapat mengontrol banner dan menggulir ke kedua arah menggunakan Siri Remote. Membuat gerakan kecil dan melingkar pada Siri Remote ketika banner sedang fokus akan mengaktifkan Efek Parallax untuk banner tersebut.

Gambar Banner (Lebar Ekstra)

Ukuran	Resolusi
Ukuran Aktual	1940x624px
Ukuran Zona Brankas	1740x620px
Ukuran Tidak Fokus	1740x560px
Ukuran Terfokus	1740x620px

Menggulir Spanduk Inset dapat disediakan sebagai file statis .png atau berlapis .lsr .

Apple memberikan saran berikut untuk Banner Inset Pengguliran:

Jumlah Konten - Anda harus memberikan minimal tiga (3) spanduk agar pengguliran terasa alami. Anda harus menyertakan tidak lebih dari delapan (8) banner atau membuat navigasi sulit untuk pengguna akhir.
Teks Konten - Jika banner Anda memerlukan teks harus disertakan dalam gambar banner. Jika Anda menggunakan Gambar Berlapis, teks Anda harus berada di lapisan paling atas.

Silakan lihat Referensi KERANGKA KERJA TVServices Apple untuk informasi selengkapnya tentang menambahkan Ekstensi Rak Teratas ke aplikasi Anda untuk menyediakan konten Rak Teratas dinamis.

Gambar Game Center

Jika aplikasi Xamarin.tvOS Anda adalah game dan Anda telah menyertakan dukungan Game Center, beberapa aset gambar lagi akan diperlukan:

Ikon Prestasi - Gambar buram diperlukan untuk setiap pencapaian yang akan secara otomatis dipangkas menjadi lingkaran. Pencapaian adalah item yang tidak dapat difokuskan.
Karya Seni Dasbor - Gambar opsional dapat disediakan yang akan muncul di bagian atas dasbor aplikasi Anda dalam Game Center. Gambar-gambar ini tidak dapat difokuskan.
Leaderboard Artwork - Anda harus menyediakan antara satu (1) hingga tiga (3) gambar rasio aspek 16:9 untuk setiap papan peringkat yang didukung aplikasi Anda. Ini mungkin file statis .png atau berlapis .lsr . Karya seni Leaderboard dapat difokuskan.

Ukuran	Ikon Prestasi	Karya Dasbor	Karya Seni Papan Peringkat
Ukuran Terlihat	200x200px	923x150px	n/a
Ukuran Aktual	320x320px	n/a	659x371px
Ukuran Zona Brankas	n/a	n/a	618x348px
Ukuran Tidak Fokus	n/a	n/a	548x309px
Ukuran Terfokus	n/a	n/a	618x348px

Untuk informasi selengkapnya tentang bekerja dengan Game Center, silakan lihat Panduan Pemrograman Game Center Apple.

Bekerja menggunakan Citra

Karena tvOS 9 adalah subset iOS 9, teknik yang sama yang digunakan untuk menyertakan dan menampilkan gambar dalam aplikasi Xamarin.iOS, juga berfungsi untuk aplikasi Xamarin.tvOS. Silakan lihat dokumentasi Menampilkan Gambar untuk informasi selengkapnya.

Mengatur Gambar Proyek Xamarin.tvOS

Seperti yang dinyatakan di atas, semua aplikasi tvOS memerlukan Gambar Peluncuran, dan Ikon Aplikasi. Bagian ini mencakup pemilihan Gambar Peluncuran dan Ikon Aplikasi untuk proyek aplikasi Xamarin.tvOS Anda setelah diatur dalam Katalog Aset.

Lakukan:

Di Penjelajah Solusi, klik Info.plist dua kali untuk membukanya untuk pengeditan:
Di Editor Info.Plist, pilih Katalog Aset (dikonfigurasi di atas di bagian Mengatur Ikon Aplikasi) untuk Ikon Aplikasi:
Selanjutnya, pilih Katalog Aset (dikonfigurasi di atas di bagian Pengaturan Luncurkan Gambar ) untuk Luncurkan Gambar.
Simpan perubahan.

Ringkasan

Artikel ini telah membahas semua jenis dan ukuran gambar yang digunakan dalam aplikasi Xamarin.tvOS. Pertama, ini mencakup Gambar Peluncuran, Gambar Berlapis, Ikon Aplikasi, Gambar Rak Teratas, dan Gambar Pusat Game. Kemudian mencakup bekerja dengan gambar di aplikasi Xamarin.tvOS Anda.

Bagikan melalui

Bekerja dengan Ikon dan Gambar tvOS di Xamarin