Bagaimana saya bisa menangani lembaran sprite dengan dimensi sprite tidak seragam?

14

Untuk spritesheet dengan dimensi sprite yang tidak seragam , bagaimana saya bisa mendapatkan bounding-rectangles untuk setiap sprite individu (yaitu kotak biru pada gambar berikut / saya hanya menggambar beberapa contoh)?

Yang ingin saya tentukan adalah: offset_x, offset_y, width, height

masukkan deskripsi gambar di sini

Sejauh ini, saya hanya menggunakan spritesheets yang memiliki semua sprite identik dimensi yang . Dalam hal ini, kita hanya perlu menentukan offset x dan y untuk mendapatkan sprite tertentu. Namun, untuk spritesheet dari dimensi yang tidak seragam ini tidak berfungsi.

EDIT: Setelah membaca komentar dan jawaban, saya mengulangi pertanyaan saya untuk membuatnya lebih inklusif. proses aktual menggunakan spritesheet dalam game. Sebelumnya, pertanyaan tersebut berisi poin mengapa orang menghasilkan spritesheets dari dimensi yang tidak seragam dan bagaimana saya bisa mengatasinya.

c++ sprites spritesheet clipping Ben
sumber
1
Menurut saya mereka semua memiliki ukuran yang identik, ruang yang tidak diisi oleh warna hanyalah piksel dengan alfa diatur ke nol.
Derek

Jawaban:

8

Kebanyakan sprite sheet dari dimensi yang tidak identik biasanya memiliki beberapa jenis data meta dengan tempat jangkar sprite tersebut berada. Ada banyak alat yang melakukan hal-hal seperti menghapus piksel alfa penuh dan memberi Anda data yang Anda butuhkan sehingga data ini tidak dihasilkan secara manual.

Jika Anda tidak memiliki meta data ini, Anda harus membuatnya sendiri. Cara yang paling akurat adalah yang Anda katakan dalam pertanyaan Anda, yaitu melakukannya dengan tangan. Mungkin perlu waktu, tapi mungkin lebih cepat daripada membuat sprite baru.

Tetrad
sumber
Ini - sementara pendekatan berdasarkan deteksi otomatis memiliki kegunaannya, dalam praktiknya mereka rewel dan rawan kesalahan. Anda sudah membutuhkan metadata untuk asal sprite (sprite Anda memang memiliki asal, kan?), Jadi data tambahan tidak terlalu banyak menjadi beban. Artis harus selalu tahu lebih baik dari aplikasi Anda berapa ukuran masing-masing sprite.
Steven Stadnicki
+1. Menyediakan metadata dengan sprite dijamin untuk menyelesaikannya secara masuk akal .
Bartek Banachewicz
5

Anda dapat melakukan analisis pada gambar untuk menemukan persegi panjang pembatas dari setiap sprite, mengurutkannya persegi panjang pembatas (mungkin dengan meningkatkan minimum X, lalu Y) dan Anda akan memiliki satu set wilayah pembatas yang sesuai dengan bingkai dari lembar sprite.

Karena proses ini bisa relatif mahal, Anda mungkin ingin melakukan ini secara offline, misalnya sebagai bagian dari proses pembuatan untuk permainan Anda. Anda kemudian dapat membuat serial informasi wilayah pembatas menjadi file yang Anda simpan dengan gambar sprite sheet yang sesuai. Saat runtime Anda memuat gambar dan file definisi batas dan Anda memiliki informasi yang Anda butuhkan untuk mengakses setiap sprite individu.

Itu lebih mudah diucapkan daripada dilakukan. Pada dasarnya Anda akan ingin melakukan deteksi fitur dan deteksi gumpalan khusus yang merupakan masalah penglihatan mesin. Anda juga bisa mengubah gambar (menjadi hitam dan putih) dan menggunakan teknik deteksi tepi . Matematika yang relevan di balik teknik-teknik itu dijelaskan jauh lebih baik pada tautan-tautan itu daripada yang saya bisa, dan dalam kasus di mana Anda tidak merasa sanggup mengimplementasikan matematika itu sendiri, ada beberapa perpustakaan yang tersedia yang dapat membantu Anda. Rangkaian tautan berikut ini tampaknya yang paling menjanjikan bagi saya:


sumber
1
+1. Saya setuju bahwa itu akan memerlukan beberapa keterampilan persepsi-komputer / manipulasi-gambar untuk menemukan batas sprite yang benar. Kadang-kadang bahkan mungkin tidak mungkin, misalnya jika Anda melihat kura-kura untuk membuat animasi. Akan sulit untuk menentukan posisi yang benar untuk itu relatif terhadap frame animasi lainnya. Dan untuk alasannya : Kemungkinan besar karena penggunaan ruang tekstur yang optimal. Dan biasanya file dengan koordinat harus disediakan dengan spritesheet, tetapi jika Anda hanya mengambilnya dari pencarian gambar Google, mungkin kekurangan informasi ini.
bummzack
Anda meningkatkan poin yang baik: jawaban saya tidak membahas masalah asal sprite; itu hanya akan mengarah pada menemukan persegi panjang terikat ketat, dan untuk lembaran dengan sprite tidak seragam, mengetahui asal usul setiap frame cukup penting. Ini akan sulit dilakukan secara otomatis kecuali jika Anda membuat beberapa asumsi (kemungkinan khusus untuk domain), misalnya asalnya akan selalu (lebar / 2, maksimum Y) atau sesuatu.
4

Saya membuat alat sendiri untuk spritesheet yang tidak seragam. Ini memungkinkan pengeditan offset, dan sebagainya. Berikut screenshot untuk memberi Anda ide:

masukkan deskripsi gambar di sini

Rumah Anonim
sumber
Itu terlihat seperti Anda membuat spritesheet seragam yang hanya berisi satu animasi dari yang tidak seragam? Atau saya salah menafsirkan ini?
Ben
tidak, saya membuka spritesheet yang tidak seragam dan menggambar persegi panjang di sekitar sprite (yang otomatis menyusut ke ukuran yang benar). Setelah ive membuat animasi dengan mengulangi bahwa saya dapat memainkan setiap animasi dan menyesuaikan offset sesuai dengan kebutuhan saya.
Anonymouse
Sepertinya alat yang sangat rapi yang Anda buat di sana. Pikiran untuk berbagi alat?
eckyputrady
@eckyputrady, saya minta maaf tapi masih jauh dari selesai tetapi saya merekomendasikan alat lain (yang pada dasarnya mengilhami saya). Anda dapat menemukannya di sini: colourclash.com/sprite_buddy/sprite_buddy.html
Anonymouse
0

Lihat pembungkus teks

http://www.texturepacker.com/

Ini menghasilkan file seperti ini (tergantung pada pengaturan yang Anda pilih)

    {
    "filename": "image_front_1",
    "frame": {"x":1,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":2,"w":36,"h":40},
    "sourceSize": {"w":36,"h":40}
},
{
    "filename": "image_front_2.png",
    "frame": {"x":36,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":36,"h":42},
    "sourceSize": {"w":36,"h":42}
},
{
    "filename": "image_front_3.png",
    "frame": {"x":71,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":34,"h":52},
    "sourceSize": {"w":36,"h":42}
},
{
    "filename": "image_front_4.png",
    "frame": {"x":106,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":34,"h":52},
    "sourceSize": {"w":36,"h":42}
}

Dengan menggunakan data ini, Anda dapat dengan mudah mengambil persegi panjang terpisah dari gambar.

omgnoseat
sumber
Ini bukan teknologi yang menggunakan pertanyaan. Cukup menjawab dengan tautan ke alat dan contoh hasilnya tidak cukup menurut saya.
MichaelHouse
-1

spritebuddy.com telah bekerja sangat baik untuk saya. Tidak dapat menemukan bantuan di situs itu sendiri, tetapi pos Google Groups ini menjelaskan dengan sangat baik. Secara otomatis menebak batas-batas untuk sprite Anda, memungkinkan Anda menyesuaikannya, DAN memungkinkan Anda mengaturnya menjadi urutan animasi. Kemudian ia memuntahkan file metadata untuk semua ini dalam JSON atau XML. Maka yang harus Anda lakukan adalah mem-parsing file data itu dalam gim Anda untuk mendapatkan empat persegi panjang pembatas yang benar.

CletusW
sumber
1
Ini bukan teknologi yang menggunakan pertanyaan. Selanjutnya, alat ini sudah disarankan di salah satu komentar.
MichaelHouse
Saya memperbarui jawaban saya, tetapi saya tidak setuju bahwa itu tidak menjawab pertanyaan OP: "Apa yang ingin saya tentukan adalah: offset_x, offset_y, lebar, tinggi." Apakah ini harus terjadi atau tidak saat pertandingan dijalankan (yang akan sangat tidak berprestasi) atau sebelum tidak ditentukan. Mengenai "EDIT: [...] Saya mengulangi pertanyaan saya untuk membuatnya menjadi lebih inklusif. Proses aktual menggunakan spritesheet dalam permainan," ini adalah proses saya. Saya menghasilkan file JSON yang sesuai menggunakan spritebuddy kemudian menguraikannya dalam game saya untuk mendapatkan data yang saya butuhkan.
CletusW
1
@CletusW: jawaban yang bagus akan menjelaskan mengapa alat itu bekerja sangat baik untuk proses Anda, apa yang dilakukannya dan bagaimana itu membantu, dll. Saya harus bisa membaca jawaban Anda dan kemudian tahu bagaimana memilih alat atau menulis sendiri. Jika Anda menautkan ke contoh favorit Anda, itu hanya bonus, bukan daging jawabannya.
Sean Middleditch