Pixi.js: Kemasan poligon

Dibuat pada 13 Des 2015 · 33Komentar · Sumber: pixijs/pixi.js

Saya lambat tapi TexturePacker mendukung poligon . Sekarang kita membutuhkan SpriteRenderer baru. Silakan tandai hal itu untuk v4.

Format

{"frames": {
"animal_extractor.png":
{
    "frame": {"x":2,"y":326,"w":164,"h":136},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":164,"h":136},
    "sourceSize": {"w":164,"h":136},
    "pivot": {"x":0.5,"y":0.5},
    "vertices": [ [140,34], [164,76], [164,88], [95,127], [74,136], [50,136], [0,108], [0,62], [32,19], [86,15], [101,0], [106,0] ],
    "verticesUV": [ [142,360], [166,402], [166,414], [97,453], [76,462], [52,462], [2,434], [2,388], [34,345], [88,341], [103,326], [108,326] ],
    "triangles": [ [9,10,11], [3,8,9], [7,3,5], [3,0,1], [5,6,7], [5,3,4], [3,7,8], [3,9,0], [3,1,2], [0,9,11] ]
}
}

Stale 🙏 Feature Request 🥶 Low Priority

Sumber

ivanpopelyshev

🎉1

Komentar yang paling membantu

Ini akan ditambahkan di v5, saya akan menyediakannya.

ivanpopelyshev pada 26 Jun 2017

👍6 ❤1

Semua 33 komentar

Orang mengatakan bahwa itu ditambahkan dalam kesatuan 1 tahun yang lalu

ivanpopelyshev pada 13 Des 2015

luar biasa.
ponsel selalu tidak cukup memori.
jadi butuh itu..
bagaimana pendapat Anda tentang kinerja dengan polygon texturepacking?

SeminYun pada 19 Jan 2016

Ini brilian! @SeminYun jika Anda tidak menemukan informasi tentang kinerja, inilah tes yang mereka lakukan di iphone 4s: https://www.codeandweb.com/blog/2015/10/01/cocos2d-x-performance-optimization
gambar dibuat 36fps tanpa dipangkas, dan 60 fps dipangkas! Berbicara tentang peningkatan! Dukungan tekstur ini akan sangat, sangat diterima di pixi!! :)

Friksel pada 30 Apr 2016

Catatan: Manfaat perf itu datang dengan mengorbankan CPU. Sesuatu yang sudah sangat dibatasi di JS. Saya ingin membandingkan ini di pixi dan melihat seperti apa perbedaannya.

englercj pada 30 Apr 2016

Bagus. Di samping semoga kinerja ini bermanfaat, ini pasti akan membuat beberapa spritesheet lebih kecil sementara gambar dapat masuk ke dalam lubang alfa! Jadi banyak spritesheets akan memuat lebih cepat. Hal baik!

Friksel pada 30 Apr 2016

Saya akan segera mengimplementasikannya di cabang WIP v4.1 :)

ivanpopelyshev pada 30 Apr 2016

👍3

Tidak bisakah ini dirender melalui Mesh alih-alih membuat fitur baru?

englercj pada 28 Sep 2016

@englercj 100% benar. Pengaturan Sprite baru akan mengakomodasi ini dengan baik juga!

GoodBoyDigital pada 28 Sep 2016

uvs dan geometri harus berada di sisi "tekstur" atau "model", bukan dalam contoh, jadi Mesh bukanlah solusi.

ivanpopelyshev pada 1 Okt 2016

Perubahan apapun?

nikolayh pada 22 Feb 2017

👍1

Karena mode poligon masih dinonaktifkan secara default untuk format data PixiJS, sepertinya poligon tidak didukung di Pixi.

Seperti yang disarankan oleh beberapa komentar terakhir, itu harus ada di suatu tempat di agenda rilis PixiJs mulai dari versi 4.1. Adakah yang bisa memastikan bahwa fitur ini sudah masuk ke PIXI 4.*?

Dan jika didukung, apakah ada yang tahu cara mengaktifkan fitur ini di TexturePacker untuk format PixiJS json?

Jorisslagter pada 26 Jun 2017

Ini akan ditambahkan di v5, saya akan menyediakannya.

ivanpopelyshev pada 26 Jun 2017

👍6 ❤1

Luar biasa! Terima kasih banyak.

Jorisslagter pada 27 Jun 2017

Hebat @ivanpopelyshev !

Friksel pada 24 Jul 2017

Ada berita di sini?

gle6as pada 15 Sep 2017

Tidak ada berita, tetapi tidak ada yang mengkonfirmasi bahwa mereka membutuhkannya dengan serius. Saya dapat menjadikannya sebagai plugin untuk v4, tetapi siapa yang akan mengujinya dan mengonfirmasi bahwa itu berfungsi? Dan v5 dalam tahap alpha, jadi tidak ada yang akan menggunakannya selama beberapa bulan jika saya menambahkannya di sana.

ivanpopelyshev pada 16 Sep 2017

Tidak ada berita, tetapi tidak ada yang mengkonfirmasi bahwa mereka membutuhkannya dengan serius.

Hah? Maksudmu, kecuali kita?

Saya yakin untuk banyak proyek ini dapat mengoptimalkan 'spreadsheet' dengan banyak format gambar yang berbeda karena setiap gambar bisa lebih dekat satu sama lain. Saya sudah membutuhkannya beberapa kali, untuk dapat membuat spreadsheet di mana saya meletakkan gambar kecil di bagian transparan dari gambar besar untuk memiliki gambar output spreadsheet yang lebih kecil.

Tidak dapat berbicara untuk orang lain, tetapi saya akan sering menggunakan fitur ini

Friksel pada 16 Sep 2017

👍1

Silakan tulis email ke @GoodBoyDigital , jika dia setuju maka saya akan fokus pada hal itu.

ivanpopelyshev pada 16 Sep 2017

Saya membutuhkan fitur ini.

finscn pada 9 Okt 2017

👍5

Saya pikir sudah waktunya untuk menandainya untuk v5.

finscn pada 14 Des 2017

👍3

Apakah tersedia sebagai plugin untuk v4.x? atau haruskah saya menunggu v5 untuk fitur ini?

sudhalucky pada 6 Jun 2018

V5 pasti, ini akan sangat mudah diterapkan dengan sistem baru!
(dengan pengelompokan!)

Pada Rabu, 6 Juni 2018 pukul 10:05 sudhalucky [email protected] menulis:

Apakah tersedia sebagai plugin untuk v4.x? atau haruskah saya menunggu v5 untuk ini
fitur?
—
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub
https://github.com/pixijs/pixi.js/issues/2243#issuecomment-394998933 ,
atau matikan utasnya
https://github.com/notifications/unsubscribe-auth/AC998nI2I61yvKnAEcwik_-jBCsiGUnvks5t55tigaJpZM4G0VPE
.
>

Direktur teknis

Beranda: www.goodboydigital.com
Telepon: 020 8533 1177
Alamat: Unit B1, Matchmakers Wharf, Homerton Road, London, E9 5FF

GoodBoyDigital pada 6 Jun 2018

❤2 👍2

saya membutuhkan fitur ini

djmisterjon pada 6 Jun 2018

Plugin ini mendukung pengepakan poligon: https://github.com/gameofbombs/pixi-heaven

Gunakan PIXI.heaven.Sprite

ivanpopelyshev pada 29 Jun 2018

@ivanpopelyshev Terima kasih atas tip bagus tentang pixi-heaven. Pasti lihat itu. Tetapi untuk pengepakan poligon saja, plugin itu tampaknya agak berlebihan untuk pengepakan poligon saja. README menyatakan bahkan memerlukan plugin Spine (walaupun kami tidak menggunakan Spine dalam sebuah proyek) dan dikatakan membutuhkan kinerja untuk menggunakannya. Saya baru saja melihat sekilas repo itu, jadi saya mungkin melewatkan sesuatu di sini, tetapi saya tidak melihat alasan mengapa pengemasan poligon perlu mengkompromikan kinerja selama animasi dan membutuhkan Spine.

Apa yang saya cari adalah cara untuk menjaga spritesheet sekecil dan seefisien mungkin dalam lebar dan tinggi untuk memiliki waktu pemuatan yang lebih cepat. Saya pikir untuk banyak proyek ada banyak yang kosong di spritesheet karena gambarnya 100% transparan di wilayah yang luas. Itu bisa diisi dengan gambar yang lebih kecil yang sekarang harus keluar dari persegi panjang gambar transparan ini.

Dengan pengepakan poligon kita bisa membuat spritesheets jauh lebih kecil, seperti contoh sederhana ini (setiap warna berbeda adalah sprite yang berbeda):
polygon packing
Anda dapat melihat di sini bentuk bulat besar sekarang memungkinkan bentuk kecil untuk mengisi lubang transparan yang biasanya hanya ruang besar yang hilang. Dan di sebelah kanan Anda melihat dua segitiga dapat menggunakan ruang yang sama sehingga mengurangi 50% ruang yang digunakan.
Dengan spritesheet normal, ini akan menghasilkan spritesheet yang sangat besar, di mana semua gambar membutuhkan persegi panjang penuh, meskipun mereka transparan untuk wilayah besar yang akan menghasilkan spritesheet yang jauh lebih besar dan membutuhkan lebih banyak waktu untuk dimuat.

Fitur ini tidak hanya akan membuat spritesheets jauh lebih kecil dalam banyak kasus, seperti status posting diri Anda di atas, bahkan drawcalls bisa lebih cepat, karena alih-alih menggambar persegi panjang besar hanya poligon yang lebih kecil yang perlu digambar. Tetapi untuk yang terakhir, Anda tahu lebih banyak tentang itu daripada saya.

Ada juga artikel di situs Texturepacker tentang peningkatan kinerja yang besar dengan pengepakan poligon:
https://www.codeandweb.com/texturepacker/tutorials/cocos2d-x-performance-optimization

Dan mereka memberikan contoh dunia nyata lain di mana ini sangat berguna dan sangat efisien:
tp-screenshot-2652

Jadi untuk menyimpulkan; Saya tidak yakin PIXI.heaven.Sprite adalah solusi untuk ini dan saya berharap kinerja meningkat, bukan turun.

Friksel pada 2 Jul 2018

👍1

+1 untuk fitur ini

kane-mason pada 19 Feb 2019

Masalah ini secara otomatis ditandai sebagai basi karena tidak ada aktivitas terbaru. Ini akan ditutup jika tidak ada aktivitas lebih lanjut yang terjadi. Terima kasih atas kontribusi Anda.

stale[bot] pada 20 Mei 2019

Saya melihat beberapa +1 di sini dan 6 Juni 2018 @GoodBoyDigital menulis:
"V5 pasti, ini akan sangat mudah diterapkan dengan sistem baru!
(dengan pengelompokan!)"

Sekarang kita membaca label 'Resolution: Won't Fix' telah ditambahkan oleh bot basi dan masalah tersebut (secara otomatis) telah ditutup. Sebelumnya kami diberitahu 'bot' ini harus diambil dengan sebutir garam, jadi saya tidak yakin:

Fitur ini masih sangat diterima. Apakah masih dalam proses untuk v5?

Friksel pada 5 Jun 2019

saya pikir @CodeAndWeb perlu mengaktifkan poligon di texturePacker untuk kerangka pixijs terlebih dahulu.
Tampaknya menonaktifkan.

djmisterjon pada 5 Jun 2019

Anda dapat menggunakan format "JSON (Hash)" untuk mencobanya - format ini mengaktifkan polygon packer tetapi menonaktifkan beberapa hal khusus PixiJS (Deteksi animasi). Sisa formatnya identik.

Setiap sprite mendapat 3 entri tambahan:

"vertices": [ [147,74], [194,68], [204,200], [153,266], [56,267], [15,220], [1,180], [11,72], [64,70], [66,3], [132,1] ],
"verticesUV": [ [194,901], [200,948], [68,958], [2,907], [1,810], [48,769], [88,755], [196,765], [198,818], [265,820], [267,886] ],
"triangles": [ [8,9,10], [6,7,8], [5,0,2], [6,0,5], [5,3,4], [6,8,0], [0,1,2], [5,2,3], [0,8,10] ]

simpul adalah titik-titik dalam sistem koordinat sprite
simpulUV adalah simpul dalam atlas tekstur
segitiga adalah segitiga yang dibangun dari simpul

CodeAndWeb pada 6 Jun 2019

👍2

@djmisterjon Ini juga tidak terlalu sulit untuk mengubah template untuk output di texturePacker sendiri atau untuk membuat template kustom Anda sendiri untuk output (yang sebenarnya cukup bagus!):
https://www.codeandweb.com/texturepacker/documentation/custom-exporter

Friksel pada 6 Jun 2019

👍1

@Friksel menarik , terima kasih atas tipsnya, ini bisa sangat berguna untuk banyak sistem kustom.

djmisterjon pada 6 Jun 2019

👍1

Hai, apakah ada dukungan untuk ini di PixiV5? Jika tidak ada, bisakah seseorang menyoroti fitur apa yang digunakan dari Pixiv5 untuk mengimplementasikannya? Mungkin tertarik menerapkan ini untuk proyek saya.