Pixi.js: Buat penangan font SDF

Dibuat pada 15 Okt 2016  ·  11Komentar  ·  Sumber: pixijs/pixi.js

Saat ini pixi hanya memiliki teks berbasis kanvas dan font bitmap yang dibuat secara manual. Saya juga ingin mendukung teks SDF langsung dari file font.

Opsi perpustakaan parsing dengarkan di bawah ini. Ideal berukuran kecil, tidak memiliki kode pemuatan (tidak diperlukan), mem-parsing, dan membuat jalur.

https://github.com/Jolg42/awesome-typography

| Perpustakaan | Bintang | Ukuran | Font yang Didukung | Memuat | Mengurai | Membuat Jalur | Tata Letak Multi-baris | Catatan |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| opentype.js | 1136 | 288k | TTF, OTF, WOFF | | | | | Layout ditambahkan dengan opentype-layout |
| Typr.js | 271 | 60k | TTF, OTF | | | | | Dibuat untuk memecahkan beberapa masalah dengan opentype.js |
| fontkit | 85 | 379k | TTF, OTF, WOFF, WOFF2, TTC, DFONT | | | | | |
| tipe terbuka | 63 | ?k | TTF, OTF, WOFF, WOFF2 | | | | | simpul saja? |
| webfontloader | 4961 | ?k | ? | | | | | Sebagian besar hanya pengamat untuk memuat font CSS |

Stale 🙏 Feature Request 🥶 Low Priority

Komentar yang paling membantu

@englercj @ivanpopelyshev @PixelsCommander Apa kemajuan fitur ini saat ini? Jika tidak ada orang di sini baru-baru ini, saya bersedia menerima pekerjaan itu.
Saya penulis msdf-bmfont-xml yang bekerja dengan bantuan opentype.js dan node-canvas . Ini berjalan dengan baik pada Starling-Frameworks .
Ketika saya basah kuyup di Pixi.js baru-baru ini, saya menemukan bahwa teks msdf tidak diimplementasikan jadi saya hanya mengambil beberapa waktu untuk memperpanjang plugin hebat pixi-sdf-text untuk mengaktifkan SDF multi-saluran tanpa ketergantungan tambahan dan beberapa peretasan menjadi BitmapText dan Loader , di bawah ini adalah kemajuan saya saat ini:
pixi-msdf
efek stroke & dropshadow diimplementasikan tanpa drawcall tambahan.
Juga beberapa perbaikan dalam algoritma tata letak BitmapText (Implementasi saat ini di 4.7 agak bermasalah, dan parameter dasar bmfont penting tetapi tidak digunakan dalam tata letak BitmapText).

Saya telah membaca pembicaraan tentang v5 yang berubah dalam arsitektur dan shader, jadi saya tidak yakin ini saat yang tepat untuk mencoba membuat PR atau membiarkannya di plug-in mandiri.
Katakan apa yang Anda pikirkan teman-teman.

Semua 11 komentar

Ada hal lain dengan font. Misalnya, gunakan saluran RGB sebagai spritesheet yang berbeda untuk mencakup semua simbol Asia.

Hai @englercj , @ivanpopelyshev ,

Saat ini saya sibuk dengan ini karena tidak ada yang berubah sejak permintaan tahun lalu saya https://github.com/pixijs/pixi.js/issues/1679 .

Jadi rencananya adalah membuat Mesh dan melewati koordinat titik seperti atribut titik biasa + koordinat tekstur sebagai uvs. Render ini sekali di shader daripada cache.

Ada saran tentang implementasi?

Ivan, tidak yakin saya mengerti Anda dengan benar untuk RGB. Apakah ini dimaksudkan sebagai semacam kompresi untuk menyimpan data 3 kali lebih banyak?

@englercj @ivanpopelyshev beri tahu saya pendapat Anda tentang ini

https://github.com/PixelsCommander/pixi-sdf-text

Prioritas saat ini adalah rendering multiline dan kompatibilitas maksimal dengan Teks biasa.

PS @ivanpopelyshev menemukan apa yang Anda maksud untuk RGB. Dijadwalkan untuk pembaruan berikutnya.

RGB - ya.

apa e-mailmu? Saya akan mengundang Anda di kendur. Tidak apa-apa, menemukannya.

Tandai oleh @finscn

@englercj @ivanpopelyshev @PixelsCommander Apa kemajuan fitur ini saat ini? Jika tidak ada orang di sini baru-baru ini, saya bersedia menerima pekerjaan itu.
Saya penulis msdf-bmfont-xml yang bekerja dengan bantuan opentype.js dan node-canvas . Ini berjalan dengan baik pada Starling-Frameworks .
Ketika saya basah kuyup di Pixi.js baru-baru ini, saya menemukan bahwa teks msdf tidak diimplementasikan jadi saya hanya mengambil beberapa waktu untuk memperpanjang plugin hebat pixi-sdf-text untuk mengaktifkan SDF multi-saluran tanpa ketergantungan tambahan dan beberapa peretasan menjadi BitmapText dan Loader , di bawah ini adalah kemajuan saya saat ini:
pixi-msdf
efek stroke & dropshadow diimplementasikan tanpa drawcall tambahan.
Juga beberapa perbaikan dalam algoritma tata letak BitmapText (Implementasi saat ini di 4.7 agak bermasalah, dan parameter dasar bmfont penting tetapi tidak digunakan dalam tata letak BitmapText).

Saya telah membaca pembicaraan tentang v5 yang berubah dalam arsitektur dan shader, jadi saya tidak yakin ini saat yang tepat untuk mencoba membuat PR atau membiarkannya di plug-in mandiri.
Katakan apa yang Anda pikirkan teman-teman.

@soimy Ini adalah waktu yang tepat untuk melakukan PR ke v5 ( next branch). Terima kasih telah menjadi sukarelawan.

Perlu beberapa diskusi tentang modul parse TTF/OTF.
Saya sedang memikirkan perlunya run-time true-type font parser di pixi core. Ini akan menambah setidaknya 60k+ beban kode parser tetapi manfaat dari sumber daya ttf tampaknya tidak sama. Fitur ini harus diperlakukan sebagai devDependencies .

Katakan apa yang kamu pikirkan.
BTW: Adakah yang bisa mengundang saya ke pixi's slack? id kendur: [email protected]

Jika Anda membutuhkan bantuan dengan ini, Anda dapat melakukan ping ke saya.

Saya sebenarnya baru saja menulis kode ini untuk alat menggambar vektor web yang saya buat. Sayangnya, saya menulis semuanya dalam GWT, dan saat ini saya tidak memiliki siklus untuk menulis ulang semuanya dalam JavaScript murni untuk Pixi (mungkin, ketika Google merilis kompiler J2CL Java ke JS mereka tahun depan, saya hanya dapat mengkompilasi ulang untuk JS).

Dalam kasus saya, arsitektur yang saya gunakan adalah menggunakan Typr.js untuk mengurai file truetype saat runtime. Kemudian, ketika setiap karakter ditampilkan, saya menggunakan perender ttf khusus (yang sederhana sebenarnya tidak banyak kode) untuk membuat SDF dengan cepat hanya untuk karakter, dan memasukkannya ke dalam cache. Dan kemudian SDF ditampilkan ke layar. Semuanya cukup cepat dan ukuran kode tidak terlalu buruk, jadi saya tidak yakin apakah ada kebutuhan untuk menghitung SDF sebelumnya.

Kelemahan utama adalah dengan ukuran font. Untuk melakukan sesuatu dengan benar, Anda perlu mem-parsing file font ttf sendiri, tetapi kemudian Anda harus menggabungkan file font ttf ke dalam game Anda. File TTF hanya berukuran 50KB atau lebih untuk font khusus bahasa Inggris, tetapi dapat berukuran beberapa ratus KB untuk font Eropa, dan beberapa MB untuk font non-Eropa. Jadi saya tidak yakin seberapa praktis pendekatan ini untuk web/game seluler.

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.

Utas ini telah dikunci secara otomatis karena tidak ada aktivitas terbaru setelah ditutup. Silakan buka edisi baru untuk bug terkait.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat