Untuk memperbaiki baris atau kolom ekstra pada ekspor sprite sheet Affinity di Mac, periksa posisi, dimensi, dan skala output persegi panjang ekspor. Gunakan irisan dengan ukuran yang presisi untuk sheet yang sudah ditata, lalu verifikasi PNG hasil ekspor sebelum mengubah karya seni.

Panduan ini membahas antarmuka desktop Affinity saat ini dan Slice Studio-nya. Tugasnya adalah mengekspor kisi sprite yang sudah ada pada dimensi piksel yang diinginkan. Bantuan Affinity saat ini mendokumentasikan persegi panjang ekspor khusus dan output irisan individual; langkah-langkah di bawah menggunakan kontrol tersebut secara langsung.

Cari tahu apakah piksel ekstra mengubah dimensi file

Pertama, bedakan dua gejala: file yang ukurannya satu piksel terlalu besar dan file berukuran tepat yang berisi piksel tepi yang tidak diinginkan. Keduanya memerlukan pemeriksaan berbeda. Catat lebar dan tinggi yang diinginkan, lalu buka file hasil ekspor secara terpisah untuk memeriksa dimensinya serta mengamati baris dan kolom terluar.

Gunakan perhitungan ukuran yang diharapkan. Sebagai contoh, sheet berisi empat bingkai berukuran 64 × 64 dalam satu baris horizontal, tanpa margin atau celah, memiliki target 256 × 64 piksel. Ekspor 256 × 65 memiliki ketidakcocokan dimensi. Ekspor 256 × 64 dengan baris bawah berwarna yang tidak diinginkan memiliki dimensi yang tepat, tetapi konten atau penempatannya perlu diperiksa.

Temuan Periksa terlebih dahulu Tindakan berikutnya yang berguna
Lebar atau tinggi lebih besar satu piksel Batas ekspor dan posisinya Tetapkan persegi panjang irisan yang presisi
Dimensi sangat berbeda Skala ekspor dan DPI dokumen Periksa resolusi output aktual irisan
Dimensi benar, tetapi tepinya tampak salah Posisi karya seni dan konten yang terlihat Periksa tepi tanpa mengubah ukuran sheet
Ekspor berisi karya seni yang tidak diharapkan Jenis irisan atau Area ekspor Pilih batas konten yang diinginkan

Affinity membedakan irisan yang digambar dari irisan yang dibuat dari lapisan. Irisan yang digambar mencakup semua lapisan yang terlihat di dalam perseginya; irisan yang berasal dari lapisan hanya mencakup konten lapisan sumbernya. Perbedaan ini penting ketika objek di dekatnya atau latar belakang muncul di sheet hasil ekspor. Lihat Mengekspor menggunakan Slice Studio.

Periksa posisi piksel selain lebar dan tinggi

Lebar bilangan bulat tidak memastikan bahwa persegi panjang dimulai pada batas piksel. Dalam ilustrasi geometris, persegi panjang selebar 256 piksel yang dimulai pada X = 10.5 berakhir pada X = 266.5. Kedua tepinya berada di antara batas piksel. Contoh ini menunjukkan mengapa pemeriksaan lebar saja dapat melewatkan masalah penyelarasan; ini bukan klaim tentang rumus rasterisasi Affinity secara persis.

Untuk pemeriksaan numerik di Mac, buka Window > General > Transform. Panel ini menyediakan X, Y, W, dan H, serta pemilih titik jangkar. Pilih jangkar kiri atas saat memeriksa posisi kiri atas area ekspor persegi panjang. Pengukuran menggunakan satuan penggaris saat ini dan relatif terhadap titik asal penggaris. Kontrol ini didokumentasikan di Panel Transform.

Jika perlu, tampilkan penggaris dengan View > Show > Rulers, lalu Control-klik titik perpotongannya dan pilih piksel. Jika sebelumnya Anda memindahkan titik asal penggaris, klik dua kali titik perpotongan untuk mengatur ulang sebelum mendiagnosis koordinat. Affinity mendokumentasikan kedua tindakan tersebut di Penggaris.

Periksa posisi dan ukuran batas ekspor, bukan memilih semua karya seni sprite lalu membulatkan setiap nilai. Untuk sheet empat bingkai dalam contoh, persegi panjang yang diinginkan mungkin X = 0, Y = 0, W = 256, H = 64. Sheet Anda mungkin dimulai di tempat lain; gunakan posisi yang benar-benar mencakup kisi bingkainya.

Jika tampilan angka menyembunyikan pecahan kecil, bantuan Transform menyebut Settings > User Interface sebagai tempat untuk menyesuaikan jumlah tempat desimal. Tingkatkan presisi tampilan saat memeriksa. Hindari mengubah dimensi karya seni hanya agar angkanya terlihat rapi: perubahan ukuran dapat mengubah konten bingkai.

Gunakan pengaturan penyelarasan piksel yang tepat

Buka View > Snapping dan aktifkan Force Pixel Alignment. Affinity mendokumentasikan bahwa opsi ini menjepret objek vektor, simpul, gagang, dan area pemilihan piksel ke piksel utuh saat dibuat, dipindahkan, atau diubah. Affinity juga memperingatkan bahwa menjepret ke objek, panduan, atau kisi yang tidak sejajar dengan piksel dapat menghasilkan posisi yang tidak sejajar, jadi nonaktifkan sementara mode penjepretan yang bertentangan saat melakukan koreksi. Lihat Paksa Penyelarasan Piksel.

Untuk mengoreksi posisi pecahan yang sudah ada, biarkan Move By Whole Pixels nonaktif. Opsi itu membatasi jarak perpindahan dan dapat mempertahankan offset pecahan suatu objek. Misalnya, menambahkan 10 ke X = 10.5 menghasilkan X = 20.5. Affinity secara eksplisit membedakan perilaku ini dari Force Pixel Alignment dalam dokumentasi penyelarasan piksel yang sama.

Gunakan penjepretan sebagai bantuan saat mengedit. Setelah memindahkan atau menyesuaikan batas yang relevan, periksa kembali nilai numeriknya. Mengaktifkan opsi penjepretan saja tidak memastikan bahwa setiap objek yang sudah ada telah dikoreksi.

Ekspor sheet yang sudah ditata melalui satu irisan presisi

Untuk sheet yang sudah ada, irisan khusus yang digambar memberi Anda cara terdokumentasi untuk mengontrol persegi panjang hasil ekspor tanpa membuat dimensinya bergantung pada luas grup sprite yang berubah-ubah. Affinity secara khusus merekomendasikan panel Transform di dalam Slice Studio untuk memosisikan irisan secara presisi dan menentukan dimensinya dengan tepat. Lihat Mengekspor irisan.

  1. Buka Studio Manager, aktifkan entri Studio Slice jika perlu, lalu pindah ke Studio tersebut. Cara mengaktifkan entri Studio didokumentasikan di Menyesuaikan Studio.
  2. Pilih Slice Tool dan seret persegi panjang mengelilingi sheet yang sudah ditata. Alat ini tersedia secara default di Slice Studio; pintasannya adalah S. Lihat Alat Slice.
  3. Dengan irisan yang digambar terpilih, gunakan Transform untuk menetapkan posisi, lebar, dan tinggi yang diinginkan. Untuk sheet dalam contoh, gunakan W = 256 px dan H = 64 px, lalu posisikan di atas keempat bingkai.
  4. Buka Window > General > Slices, luaskan entri irisan, lalu pilih PNG sebagai format file. Periksa penskalaan ukuran dan resolusi output yang ditampilkan.
  5. Ekspor ukuran yang diperlukan menggunakan kontrol ekspor untuk ukuran tersebut, atau biarkan hanya irisan yang diinginkan tetap tercentang lalu gunakan Export Slices. Pilih folder tujuan dan klik Export.

Dokumentasi Panel Slices menjelaskan pemilihan format file, penskalaan ukuran, dan entri ekspor yang dicentang. Petunjuk Mengekspor irisan yang terpisah membedakan ekspor satu ukuran, satu format, atau semua output irisan yang dicentang. Untuk ekspor diagnostik pertama, pilih satu output PNG agar file yang Anda periksa tidak ambigu.

Sebelum mengekspor, periksa lapisan yang terlihat di dalam persegi panjang. Irisan yang digambar mencakup konten lapisan tersebut. Jika Anda membuat irisan dari grup atau lapisan, batas awalnya mengikuti luas item itu dan output-nya hanya berisi item sumber tersebut. Gunakan jenis irisan yang sesuai dengan sheet yang diinginkan, seperti dijelaskan di Mengekspor menggunakan Slice Studio.

Pertahankan ruang kosong yang disengaja di dalam setiap bingkai. Dalam contoh empat bingkai, setiap bingkai harus tetap memiliki alokasi 64 × 64 meskipun grafik di dalamnya jauh lebih kecil. Mempersempit ekspor hingga hanya mencakup karya seni yang terlihat akan mengubah kisi yang hendak Anda hasilkan.

Periksa DPI sebelum menganggap 1x berarti jumlah piksel yang diharapkan

Affinity mendokumentasikan hubungan antara DPI dokumen dan ukuran 1x, 2x, dan 3x di Slice Studio. Contohnya menunjukkan dokumen 64 × 64 px yang diekspor menjadi 64 × 64 pada 1x jika DPI dokumen adalah 72 atau 96. Pada 144 DPI, output 1x yang didokumentasikan adalah 32 × 32, sedangkan 2x menghasilkan 64 × 64. Lihat tabel di Mengekspor menggunakan Slice Studio.

Periksa resolusi yang ditampilkan pada irisan dan dimensi file yang dihasilkan. Jika penskalaan menjelaskan ketidakcocokan, sesuaikan pengaturan ekspor sebelum mengubah ukuran bingkai. Mengubah geometri sheet untuk mengimbangi pengaturan skala ekspor membuat sumbernya lebih sulit dipelihara.

Gunakan dialog Export jika sheet sudah memenuhi satu artboard

Jika seluruh sheet menempati satu artboard, Anda dapat menggunakan File > Export > Export, memilih preset PNG, lalu mengatur Area ke artboard bernama tersebut. Periksa pratinjau dan dimensi output, pilih Ask for Location, lalu ekspor dan simpan. Show in Finder dapat menampilkan lokasi tujuan setelahnya. Ini adalah langkah-langkah Mac saat ini di Dialog Export.

Pilih area dengan cermat. Dokumentasi Pengaturan Export saat ini menyatakan bahwa output Whole document dari dokumen yang berisi artboard akan menghasilkan file gambar terpisah untuk setiap artboard. Mengekspor beberapa artboard dengan cara ini tidak menyatukannya menjadi satu gambar sprite sheet. Untuk satu sheet, tata bingkai di dalam satu persegi panjang yang diinginkan lalu ekspor persegi panjang tersebut.

Dialog Export juga memungkinkan lebar dan tinggi output alternatif, dengan kunci rasio aspek. Gunakan kolom tersebut untuk memverifikasi dimensi yang diinginkan. Hindari langsung memaksa hasil 256 × 65 menjadi 256 × 64 sebagai perbaikan pertama: mengubah dimensi output dapat melakukan resampling pada gambar, alih-alih memperbaiki batas aslinya. Affinity menjelaskan kontrol ukuran dan resampling ini di Pengaturan Export.

Perhatikan batasan format dan ekspor

PNG cocok digunakan jika sheet memerlukan transparansi; Affinity secara eksplisit mencantumkan dukungan transparansi PNG di Format file yang didukung. Jika Anda sengaja memperbesar karya seni piksel dengan tepi tajam, Affinity menjelaskan Nearest Neighbor sebagai opsi resampling untuk gambar dengan tepi tajam. Ini merupakan pilihan penskalaan, bukan perbaikan untuk persegi panjang ekspor yang posisinya keliru. Lihat Pengaturan Export.

Periksa juga Include bleed jika tersedia. Affinity mendokumentasikan opsi ini untuk PNG dan menyatakan bahwa mengaktifkannya akan menyertakan area bleed yang dikonfigurasi pada dokumen. Biarkan nonaktif jika output yang diperlukan harus persis sama dengan persegi panjang kisi sprite. Dokumentasi yang sama memperingatkan bahwa ekspor yang melebihi dimensi maksimum suatu format akan diskalakan agar muat, dengan peringatan di dialog Export. Lihat Pengaturan Export.

Alur kerja irisan yang didokumentasikan mengekspor area yang ditentukan; alur ini tidak menyediakan petunjuk untuk pengemasan bingkai otomatis, pengaturan waktu animasi, atau metadata atlas sprite umum. Secara khusus, Batch builder didokumentasikan hanya untuk batch JSON Xcode dari irisan ikon Apple. Untuk tugas ini, cara yang didukung adalah menata bingkai sendiri lalu mengekspor persegi panjang yang mencakup semuanya, bukan menggunakan Batch builder sebagai pembuat atlas. Lihat Panel Slices.

Verifikasi PNG yang sudah diperbaiki sebelum mengubah hal lain

Buka ekspor baru secara terpisah dan pastikan tiga hal: dimensi pikselnya yang tepat, baris dan kolom terluarnya, serta batas bingkainya. Pada sheet 256 × 64 dalam contoh, pembagian vertikal bingkai harus berada pada jarak 64, 128, dan 192 piksel dari tepi kiri. Nilai-nilai ini mengikuti langsung dari tata letak empat bingkai yang disebutkan.

Jika ukuran file sudah benar, tetapi masih ada piksel yang tidak diinginkan, periksa konten sumber yang terlihat di lokasi tersebut. Jika ukurannya masih lebih besar satu piksel, periksa kembali irisan yang dipilih, nilai X/Y/W/H, skala output, dan pengaturan bleed. Urutan ini memisahkan masalah batas dari masalah konten tanpa berulang kali mengubah ukuran karya seni.

Simpan persegi panjang ekspor dan pengaturan ekspor yang sudah dikoreksi bersama dokumen. Hasil yang diinginkan adalah PNG yang dimensi dan kisi bingkainya sesuai dengan tata letak yang Anda inginkan. Setelah kedua pemeriksaan lolos, Anda tidak perlu menebak-nebak untuk menghapus baris atau kolom dari file akhir.

Sumber