GLFontRenderer
1.0.0
يتيح لك هذا الرمز تقديم نص عالي الأداء في تطبيق OpenGL الخاص بك. تم تصميم مكتبة تقديم الخطوط مع سهولة الاستخدام وتقديم الأداء في الاعتبار. لقد كتبته في ~ 2010 وقمت بتحديثه بين الحين والآخر. تتبع ملفات الخط التي تقرأها هذه المكتبة التنسيق الذي تم تطويره لمولد BM Font: http://angelcode.com/products/bmfont/. يرافق ملف الخط ملف نسيج. تدعم المكتبة قوام RGBA القياسي ، وكذلك SDF القناة الفردية ، وحتى SDFs متعددة القنوات.
ابقوا متابعين.
تنقسم مكتبة الخط إلى الملفات التالية:
تقوم استدعاء وظيفة الربو بما يلي: تتلقى سلسلة → سلسلة من التحليلات → إنشاء قائمة من الكواد → يترجم ذلك إلى صفيف العازلة قمة -> يرسم جميع المثلثات المحكم. أثناء التحليل ، يتم فحص السلسلة التي يمكن رسمها للأحرف التي لا يمكن رسمها بواسطة الخط الحالي ، وسيتم رسم تلك العربات كعلامات استفهام. لكل حرف في السلسلة ، يتم إنشاء رباعي وإضافته إلى قائمة الربع النهائي ، ويحتوي هذا الربع على معلومات حول الموضع والحجم على الشاشة (2D ، متعامد!) وتنسيق الملمس لهذا الحرف الواحد داخل خط الصورة النقطية. يعتمد موضع رباعي على موضع البداية للسلسلة وموضع الحرف السابق. تسمى العلاقة المحددة بين تباعد حرف واحد والآخر kerning. يحتوي ملف تكوين الخط على جدول يحتوي على جميع معلومات Kerning لهذا الخط المحدد. على سبيل المثال ، يمكن أن يكون الأمر ، إذا كان "A" يتبع "M" ، فيجب أن يكون بكسل واحد ، ولكن عندما يتبع "O" "M" ، فهو ناقص بكسل واحد ، أو بكسل صفر. يتم تخزين هذه المعلومات داخليًا في صفيف ثنائي الأبعاد للوصول السريع. لجعل هذا الرسم سريعًا بما فيه الكفاية ، يتم تحميل جميع المعلومات حول الأحرف وعلاقات الأحرف (مثل Kerning) ، وكذلك القوام المحملة في بدء البرنامج. يمكن تخزين النصوص بحيث لا يتعين إنشاء مخازن مؤقتة في كل تكرار حلقة.
أسهل طريقة للتحقق من كيفية عمل المكتبة وكيف يمكنك استخدامها في مشروعك هي عن طريق التحقق من تطبيق المثال المقدم مع هذا الريبو. في حال كنت بحاجة إلى مزيد من المعلومات ، يرجى قراءة بقية هذا الفصل.
ستحتاج إلى نسخ الملفات العشرة المذكورة في الإلقاء نظرة على مجلد المشروع الخاص بك.
في الكود الخاص بك ، قم بإنشاء كائن مكتبة خطوط عالمي ، قبل فتح سياق تقديم ، مثل ذلك:
// load openGL fonts
m_fontLibrary = new CFontLibrary(<PathToFontFolder>);
if (!m_fontLibrary-> ParseAllFontsInFolder ())
return; // no fonts found!سيؤدي ذلك إلى تحميل جميع الخطوط المخزنة في المجلد الذي حددته كمعلمة إدخال. بعد إنشاء سياق التقديم ، تحتاج القوام إلى تحميلها ، مثل ذلك:
// init font library from the current rendering context!
theApp.m_fontLibrary-> InitGLFonts ();يمكن القيام بذلك في وظيفة init لمرة واحدة من سياق العرض على سبيل المثال. ضع في اعتبارك أنه لا يمكنك مشاركة القوام بين سياقين أو أكثر مع هذه المكتبة (لم أقم بتطبيقها لأنه في ذلك الوقت لم تكن هناك طريقة فعالة للقيام بذلك ، إلا أن بعض بطاقات NVIDIA فقط يمكنها ونوعًا فقط). لذلك عليك استدعاء هذا لكل سياق عرض جديد. بمجرد الانتهاء من ذلك ، أصبحت مكتبة الخط جاهزة للاستخدام ، مما يعني أنه يمكنك استدعاء طريقة الرباط () من كائن Fontlibrary.
(ملاحظة: يحتاج هذا الفصل إلى إصلاح شامل ، إنه صحيح تقريبًا ، بعض معلمات الوظائف مفقودة ، ولكن في الغالب توضيحي ذاتي على أي حال) يقرأ رأس استدعاء السحب:
void DrawString ( const std::string& textToDraw, int x, int y, float color[ 4 ], const std::string& font, float scale = 1 . 0f );تم وصف المعلمات أدناه في الجدول.
| المعلمة | وصف |
|---|---|
| const std :: string & texttodraw | يتم رسم السلسلة التي ترسمها كـ std :: string ، غير معترف بها على أنها "؟". أي شخصيات صالحة تعتمد على الخط المستخدم ويمكن تعريفه عند إنشاء bitmap font. |
| int x | X-Position من بداية السلسلة في إحداثيات الشاشة. 0 - العرض |
| int y | y الموضع من بداية السلسلة في إحداثيات الشاشة. 0 - الارتفاع |
| لون تعويم [4] | صفيف تعويم يحتوي على معلومات اللون التي سيتم استخدامها لتعديل الملمس. معلومات اللون هي قيم من 0.0 إلى 1.0 (شاملة) ، بالترتيب القياسي التالي: {r ، g ، b ، alpha} من الواضح .. |
| const std :: string & font | تحدد هذه المعلمة نوع الخط للاستخدام. يمكن استخدام أنواع الخطوط فقط الموجودة في المجلد وكانت هناك في وقت التحميل. يمكنك تمرير اسم ملف هذا الخط ، بدون امتداد أو لمزيد من قابلية قراءة الرمز والسلامة ، استخدم التعريف من الملف: fontlibrary.h. ملاحظة: إذا كنت ترغب في طباعة BOLD أو ITALIC ، فيجب عليك استخدام خط يتم إعداده للقيام بذلك. |
| مقياس تعويم | بالنسبة لقوام RGBA ، يوصى بشدة باستخدام الافتراضي: 1.0F. يمكنك توسيع نطاق أو لأسفل ، ولكن يجب أن يكون واضحًا أن هذا سيؤدي إلى طمس. ومع ذلك ، مع SDF و MSDF ، يجب أن تكون قادرًا على التوسع والأسفل قبل رؤية القطع الأثرية. |
لاحظ أن هناك المزيد من الوظائف مع ميزات إضافية ، مثل فواصل الخط التلقائي. انظر ملف رأس مكتبة الخط. لاحظ أيضًا أنه سيتم قطع السلسلة التي يجب رسمها بعد 10922 حرفًا. إذا كنت بحاجة إلى المزيد من الأحرف لأي سبب غريب ، فما عليك سوى استخدام مكالمات سحب إضافية وقم بتقسيم السلسلة إلى أجزاء.
يهتم هذا الفصل بإضافة خطوطك إلى مكتبة الخط.
لاحظ أنني أركز على الخطوط غير SDF هنا. خطوات خطوط SDF متشابهة تمامًا ، ولكن BM-Font-Gen لا يكفي. لا يزال بإمكانك استخدام هذه الأداة ، ولكن ستحتاج إلى إجراء خطوة معالجة ما بعد مع أدوات مثل ImageMagick. البرنامج التعليمي أدناه.
من الضروري فقط ثلاث خطوات لدمج خط جديد: 1. قم بإنشاء خط FONT-CONFIG و FONT-BITMAP باستخدام BM-FONT-GERERATOR 2. انسخ الملفان الناتجان إلى مجلد الخطوط 3.
في القسم التالي ، يتم وصف استخدام مولد BM-Font بالتفصيل ، ولكن أولاً بعض الملاحظات. يحتوي كل ملف خط الذي تنتجه على خط بحجم ثابت فقط ، كما أنه يتم تعريفه بالفعل بواسطة الملف سواء كان جريئًا أو مائلًا ، إلخ
لإنتاج خط Font-Config بالإضافة إلى صورة نقطية للخطوط الفعلية ، أستخدم "Gitmap Font Generator" من AngelCode. التي يمكن الحصول عليها من موقعه على الويب: http://angelcode.com/products/bmfont/ بعد التثبيت ، افتح البرنامج ، يجب أن يبدو في الشكل التالي.
كخطوة أولى ، افتح تحديدات الخطوط ، من خلال النقر على خيارات → إعدادات الخط أو عن طريق ضرب [F] ، والتي ستفتح نافذة جديدة ، كما هو موضح في الشكل التالي.
بعد إجراء هذه الإعدادات ، أغلق نافذة إعدادات الخط وانتقل إلى الخطوة التالية.
مرة أخرى في النافذة الرئيسية للبرنامج ، يمكنك الآن تحديد مجموعات الأحرف التي ترغب في تضمينها. يمكنك إما تحديد مجموعات كاملة أو تحديد أحرف محددة فقط من مجموعة. على سبيل المثال ، انظر الشكل التالي.
كقاعدة أساسية ، حدد فقط الأحرف التي من المحتمل أن تستخدمها ، وهذا يوفر وقت المعالجة ، والأهم من ذلك كله الذاكرة ، ليس فقط حرفًا واحدًا ، ولكن أكثر من ذلك بكثير (Kerning ، حجم صورة نقطية ، أحجام الصفيف في الكود لدينا ، إلخ). بعد تحديد جميع الأحرف التي يجب تضمين خطك ، انتقل إلى القسم التالي.
لقد حان الوقت الآن لتصدير الخط باعتباره صورة نقطية وإنشاء ملف تكوين له. افتح خيارات التصدير الخاصة بي إما [t] ، أو النقر فوق خيارات التصدير. يجب أن تظهر نافذة جديدة ، تبدو كما في الشكل التالي.
بمجرد الانتهاء من هذه الإعدادات ، أغلق النافذة وانتقل إلى الخطوة التالية.
للتأكد من أن نسيجك ليس كبيرًا جدًا أو صغيرًا جدًا ، ضرب [V] أثناء وجوده في النافذة الرئيسية أو النقر فوق خيارات → التصور. إذا كان عنوان النافذة يقول أي شيء سوى "معاينة 1/1" ، فإن نسيجك صغير جدًا بالنسبة لجميع شخصياتك وسيقوم البرنامج بإنتاج أكثر من صورة نقطية واحدة. في هذه الحالة ، افتح خيارات التصدير وزيادة حجم الملمس. ملاحظة: لا يلزم أن تكون مربعة أو قوة اثنين بعد الآن ، وكان هذا فقط في OpenGL الإصدار 1 ، العلبة. ومع ذلك ، ما زلت أوصي به لجعله على هذا النحو ، لأن بعض الوظائف المتعلقة بالملمس قد لا تزال محسنة لذلك. لا تتعامل المكتبة الوطنية عن قصد عن أكثر من "صفحة" أو نسيج ، لأن هذا قد يعني ربط/إلغاء ربط الملمس أثناء مكالمة الرباط ، وهو بطيء! لذا اجعلها صفحة واحدة بالضبط. إذا رأيت من ناحية أخرى أن الأحرف تملأ جزءًا من صورة نقطية فقط ، فقم بتقليل حجم الملمس ، إن أمكن ، ولكن هذا ليس مهمًا مثل العكس. بمجرد أن تشعر بالرضا عن استخدام مساحة الملمس ، انتقل إلى الخطوة التالية.
الآن بعد أن تم إجراء جميع الإعدادات ، حان وقت تصدير الخط. انقر على الخيارات → احفظ صورة نقطية مثل ... سيؤثر اسم الملف الذي تحدده هنا على اسم الخط في مكتبة الخط ، لذلك اختره بحكمة. لأسباب الراحة وقابلية القراءة ، أقترح اتفاقية التسمية التالية:
< مائل؟ > <bold> <_ المحدد؟ الحجم؟>
فيما يلي بعض الأمثلة:
ضرب حفظ لإكمال العملية. كل ما يجب القيام به الآن ، هو نسخ الملفتين لهذا الخط في المجلد الخطوط في البرنامج. يمكنك تحويل TGA إلى PNG باستخدام أداة أخرى ، فقط تذكر تغيير ملحق الملف في ملف FNT بشكل صحيح.
هذه عملية 3 خطوات.
أولاً ، استخدم مولد BMFONT كما هو موضح أعلاه. ومع ذلك ، استخدم الإعدادات التالية التي قد تختلف مع ما استخدمته من قبل.
أخيرًا ، تحتاج إلى استخدام ImageMagick (https://imagemagick.org/index.php) أو أداة مماثلة لتحويل ملف الملمس إلى SDF. بمجرد تثبيت ImageMagick قم بتشغيل ما يلي من سطر الأوامر (مثال على Windows Power Shell ، ولكنه مشابه جدًا لـ UNIX):
magick convert --% Arial400_0.tga -filter Jinc ( +clone -negate -morphology Distance Euclidean -level 50%,-50% ) -morphology Distance Euclidean -compose Plus -composite -level 45%,55% -resize 25% Arial400_0.png
بعد ذلك ، نحتاج إلى تحرير ملف FNT. أضف ما يلي إلى رأس FNT يدي قبل تعريف Chars:
fieldType=sdf
سيخبر هذا الخط lib باستخدام قناة SDF Shader المفردة عند استخدام هذا الخط.
بالنسبة إلى SDFs متعددة القنوات ، لا يمكنك استخدام مولد BM Font ، بدلاً من ذلك ، استخدم: https://soimy.github.io/msdf-bmfont-xml/ مع هذه الأداة ، يجب أن تبدأ من ملف TTF ، لكنك ستتلقى FNT PLUS PLIS PNG. بمجرد التثبيت ، قم بتشغيل ما يلي من سطر الأوامر:
msdf-bmfont -o multisdf.png cour.ttf
لاحظ أنه يمكنك توفير حجم الخط والمعلمات الأخرى من خلال سطر الأوامر أيضًا.
هذا اختياري: قم بعمل تعريف لكل خط جديد تضيفه إلى fontlibrary.h ، هذا يجب أن يجعل الترميز أسهل!
// font type defines, string must match the filename without extension in your fonts folder!
# define GLFONT_COURIER42_MSDF " Courier42_msdf "
# define GLFONT_ARIAL20 " Arial20 "
# define GLFONT_DINNEXTLTPROMED_SDF " DINNextLTProMED_SDF ".. أضف تعريفك هنا!
