Pixi.js: إنشاء معالج خط SDF

تم إنشاؤها على ١٥ أكتوبر ٢٠١٦  ·  11تعليقات  ·  مصدر: pixijs/pixi.js

في الوقت الحالي ، يحتوي pixi فقط على نص مستند إلى لوحة الرسم وخطوط نقطية تم إنشاؤها يدويًا. أرغب أيضًا في دعم نص SDF مباشرةً من ملف الخط.

يتم الاستماع إلى تحليل خيارات المكتبة أدناه. المثالي هو صغير ، ليس لديه رمز تحميل (ليس هناك حاجة) ، يوزع ، ويخلق المسارات.

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

| مكتبة | النجوم | الحجم | الخطوط المدعومة | الأحمال | يوزع | ينشئ مسارات | تخطيط متعدد الخطوط | ملاحظات |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| opentype.js | 1136 | 288 كيلو | TTF ، OTF ، WOFF | ✓ | ✓ | ✓ | | تمت إضافة التخطيط باستخدام تخطيط النوع المفتوح |
| Typr.js | 271 | 60 كيلو | TTF ، OTF | | ✓ | ✓ | | تم إنشاؤه لحل بعض المشكلات مع opentype.js |
| fontkit | 85 | 379 كيلو | TTF ، OTF ، WOFF ، WOFF2 ، TTC ، DFONT | ✓ | ✓ | ✓ | | |
| النوع المفتوح | 63 | ؟ ك | TTF ، OTF ، WOFF ، WOFF2 | | ✓ | ✓ | | عقدة فقط؟ |
| webfontloader | 4961 | ؟ ك | ؟ | ✓ | | | | في الغالب مجرد مراقب لتحميل خطوط CSS |

Stale 🙏 Feature Request 🥶 Low Priority

التعليق الأكثر فائدة

englercjivanpopelyshevPixelsCommander ما هو التقدم الحالي في هذه الميزة؟ إذا لم يكن هناك أحد في هذا مؤخرًا ، فأنا على استعداد لتولي الوظيفة.
أنا مؤلف msdf-bmfont-xml والذي يعمل بمساعدة opentype.js و node-canvas . يعمل بشكل جيد على Starling-Frameworks .
عندما تبللت قدمي على Pixi.js مؤخرًا ، وجدت أن نص msdf لم يتم تنفيذه ، لذا فقد استغرقت بعض الوقت لتوسيع المكون الإضافي الرائع pixi-sdf-text لتمكين SDF متعدد القنوات بدون أي تبعيات إضافية وبعض الاختراقات إلى BitmapText و Loader ، فيما يلي تقدمي الحالي:
pixi-msdf
يتم تنفيذ تأثير السكتة الدماغية والتظليل بدون أي مكالمة إضافية.
أيضًا بعض الإصلاحات في خوارزمية تخطيط BitmapText (الأدوات الحالية في 4.7 هي عربات التي تجرها الدواب قليلاً ، ومعلمة خط الأساس bmfont مهمة ولكنها غير مستخدمة في تخطيط BitmapText).

لقد قرأت المحادثات حول تغيير v5 في الهندسة المعمارية والتظليل ، لذلك لست متأكدًا من أنه الوقت المناسب لمحاولة إنشاء علاقات عامة أو تركه في مكونات إضافية قائمة بذاتها.
قل لي ما رأيك يا شباب.

ال 11 كومينتر

هناك أشياء أخرى مع الخطوط. على سبيل المثال ، استخدم قنوات RGB كصفحات نقوش مختلفة لتغطية جميع الرموز الآسيوية.

مرحبًا englercj ، ivanpopelyshev ،

أنا مشغول حاليًا بهذا لأنه لم يتغير شيء منذ طلبي العام الماضي https://github.com/pixijs/pixi.js/issues/1679 .

لذا فإن الخطة هي إنشاء شبكة وإحداثيات نقاط المرور كسمات نقطية معتادة + إحداثيات نسيج مثل الأشعة فوق البنفسجية. جعل هذا مرة واحدة على تظليل من ذاكرة التخزين المؤقت.

أي اقتراحات بشأن التنفيذ؟

إيفان ، لست متأكدًا من أنني فهمتك بشكل صحيح بالنسبة لـ RGB. هل المقصود أن يكون نوعًا من الضغط للاحتفاظ بثلاث مرات أكثر من البيانات؟

englercjivanpopelyshev اسمحوا لي أن أعرف أفكارك حول هذا

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

الأولوية الحالية هي العرض متعدد الأسطر والتوافق الأقصى مع النص العادي.

اكتشف PSivanpopelyshev ما تعنيه لـ RGB. المجدولة للتحديثات القادمة.

RGB - نعم.

ما هو بريدك الإلكتروني؟ سأدعوك في سلاك. لا مانع ، وجدت ذلك.

وضع علامة بواسطةfinscn

englercjivanpopelyshevPixelsCommander ما هو التقدم الحالي في هذه الميزة؟ إذا لم يكن هناك أحد في هذا مؤخرًا ، فأنا على استعداد لتولي الوظيفة.
أنا مؤلف msdf-bmfont-xml والذي يعمل بمساعدة opentype.js و node-canvas . يعمل بشكل جيد على Starling-Frameworks .
عندما تبللت قدمي على Pixi.js مؤخرًا ، وجدت أن نص msdf لم يتم تنفيذه ، لذا فقد استغرقت بعض الوقت لتوسيع المكون الإضافي الرائع pixi-sdf-text لتمكين SDF متعدد القنوات بدون أي تبعيات إضافية وبعض الاختراقات إلى BitmapText و Loader ، فيما يلي تقدمي الحالي:
pixi-msdf
يتم تنفيذ تأثير السكتة الدماغية والتظليل بدون أي مكالمة إضافية.
أيضًا بعض الإصلاحات في خوارزمية تخطيط BitmapText (الأدوات الحالية في 4.7 هي عربات التي تجرها الدواب قليلاً ، ومعلمة خط الأساس bmfont مهمة ولكنها غير مستخدمة في تخطيط BitmapText).

لقد قرأت المحادثات حول تغيير v5 في الهندسة المعمارية والتظليل ، لذلك لست متأكدًا من أنه الوقت المناسب لمحاولة إنشاء علاقات عامة أو تركه في مكونات إضافية قائمة بذاتها.
قل لي ما رأيك يا شباب.

soimy هذا وقت رائع لوضع العلاقات العامة على الإصدار 5 (فرع next ). شكرا على التطوع.

بحاجة إلى بعض المناقشة حول وحدة تحليل TTF / OTF.
أفكر في ضرورة وجود محلل خط من النوع الحقيقي في وقت التشغيل في قلب pixi. سيضيف هذا ما لا يقل عن 60 ألف + تحميل من كود المحلل اللغوي ولكن يبدو أن فائدة موارد ttf ليست متساوية. يجب التعامل مع هذه الميزة على أنها devDependencies .

قل لي ما هو رأيك.
راجع للشغل: هل يمكن لأي شخص أن يدعوني إلى سلاك بيكسي؟ معرف الركود: [email protected]

إذا كنت بحاجة إلى مساعدة في هذا الأمر ، يمكنك الاتصال بي.

لقد كتبت للتو هذا الرمز بالضبط لأداة رسم متجه على الويب أقوم بصنعها. لسوء الحظ ، لقد كتبت كل شيء في GWT ، وليس لدي حاليًا دورات لإعادة كتابة كل شيء في JavaScript خالص لـ Pixi (ربما ، عندما تصدر Google مترجم J2CL Java إلى JS العام المقبل ، يمكنني فقط إعادة تجميعها لـ JS).

في حالتي ، كانت البنية التي استخدمتها هي استخدام Typr.js لتحليل ملفات truetype في وقت التشغيل. بعد ذلك ، عندما يتم عرض كل حرف ، أستخدم عارض ttf مخصصًا (واحد بسيط ليس كثيرًا في الواقع رمزًا) لإنشاء SDF سريعًا للشخصية فقط ، وإلصاقها في ذاكرة التخزين المؤقت. وبعد ذلك يتم عرض قذائف SDF على الشاشة. كل ذلك سريع بشكل معقول وأحجام الكود ليست سيئة للغاية ، لذلك لست متأكدًا مما إذا كانت هناك حاجة لإجراء حساب مسبق لقوات الدفاع الذاتي مسبقًا.

العيب الرئيسي هو أحجام الخطوط. للقيام بالأشياء بشكل صحيح ، تحتاج إلى تحليل ملفات خط ttf بنفسك ، ولكن بعد ذلك يتعين عليك تجميع ملف خط ttf في لعبتك. ملفات TTF هي 50 كيلو بايت فقط أو نحو ذلك للخطوط الإنجليزية فقط ، ولكن يمكن أن تكون عدة مئات من كيلو بايت للخطوط الأوروبية ، وعدة ميغا بايت للخطوط غير الأوروبية. لذلك لست متأكدًا من مدى عملية هذا النهج لألعاب الويب / الأجهزة المحمولة.

تم وضع علامة على هذه المشكلة تلقائيًا على أنها قديمة نظرًا لعدم وجود نشاط حديث لها. سيتم إغلاقه إذا لم يحدث أي نشاط آخر. شكرا لمساهماتكم.

تم قفل سلسلة الرسائل هذه تلقائيًا نظرًا لعدم وجود أي نشاط حديث بعد إغلاقه. الرجاء فتح قضية جديدة للأخطاء ذات الصلة.

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات