تقنيات العرض والرسومات في الفتحات الحديثة
1. إمكانية قراءة الرموز والمكاسب، 2. مستقر 60 FPS بدون ارتفاع درجة الحرارة، 3. حزمة سهلة وبداية سريعة، 4. «تأثيرات رائعة» دون حل وسط بصدق النتيجة (كل شيء مرئي على رأس النتيجة المحسوبة بالفعل).
يوجد أدناه دليل نظام للتكنولوجيا وخط الأنابيب والمقاييس.
1) تقديم المكدس: ما يتكون منه
2D/WebGL/Canvas - PixiJS, Phaser, in-house движки (HTML5/WebView).
2. 5D/3D - Unity (WebGL/mobile), PlayCanvas, Three. js.
WebGPU (يظهر) - نمو في الظلال/ما بعد العملية والتحكم في الذاكرة.
Audio/Timeline - WebAudio/Unity Audio + Animation Timeline (GSAP/Spine/Unity Timeline).
الأصول - أطالس سبريت، خطوط SDF/MSDF، Spine/DragonBones، ترميز الفيديو/الويب، قوام الضغط.
الأدوات - سبيكتور. js/DevTools/Unity Profiler, atlas packers, ASTC/ETC2/BCn compressors.
2) النماذج الرسومية: 2D، 2. 5D ومتوسطة ثلاثية الأبعاد
نقي ثنائي الأبعاد: براميل مسطحة وواجهة مستخدم على طبقات ومرشحات وأقنعة. سريع ويمكن التنبؤ به.
2. 5D: بكرات المنظور، التشابه، الميل/الجولة، ميزات ثلاثية الأبعاد على واجهة المستخدم ثنائية الأبعاد أفضل نسبة نجاح باهر/أداء.
ثلاثية الأبعاد كاملة: مشاهد إضافية/مقدمة، عجلات حظ، "كاميرا حولها. "يتطلب الانضباط: LOD، القيود المادية، laytinґ المبسطة.
التوصية: في الفتحة، تكون إمكانية قراءة المفتاح على طبقات 2D/UI ؛ 3D - للمقدمة والنادرة.
3) الظلال والآثار اللاحقة (آمنة واقتصادية)
وحدات التظليل النموذجية:- توهج/مخطط للرموز/المكاسب (SDF/ضبابية لجعل الهدف).
- تصنيف الألوان/HSV Shift للمراحل المواضيعية (النهار/الليل، المكافأة).
- التشويه/موجة الحر على الخلفية حتى لا تتداخل مع النص.
- جزيئات مضافة للألعاب النارية (رخيصة الثمن عند المزج).
- أقنعة/ستينسل لـ «نافذة» على الطبول، مع توفير السحب الزائد.
المستوى المعقول بعد العملية: الازدهار مع سلسلة العينات السفلية، Vignette، انحراف اللوني (الحد الأدنى). على الهاتف المحمول - تعطيل/تبسيط بواسطة LOD.
4) الرسوم المتحركة: الجداول الزمنية والظهور و «الشعور بالمكاسب»
التسلسل الزمني: آلة الدولة «Idle → Spin → Stop → Count → Celebrate»، الرسوم المتحركة - التي تحددها الزمن، والنتيجة معروفة بالفعل.
الرسوم المتحركة الهيكلية (Spine/DragonBones): أبطال/رموز التميمة، اقتصادية في الذاكرة، سهلة التغيير.
التغريد (GSAP/Animator): الرسوم المتحركة العددية للواجهة وعدادات الفوز (easeOutExpo لـ «الإحساس بالنمو»).
التزامن مع الصوت: اللحظات الرئيسية (توقف الأسطوانة/المجموعة) - من خلال العلامات في الجدول الزمني، وليس وفقًا لمنطق الإطار.
إمكانية الوصول إلى الحركة: وضع «حركة أقل»، إطفاء الأعناق/متوازي الرؤوس.
5) القوام والأطالس والضغط
أطالس سبرايت: أطالس كبيرة (2048-4096) لتقليل مفاتيح تبديل الملمس ؛ التجميع عن طريق المزج.
الضغط:- ASTC (iOS/Android الحديث)، ETC2 (Android)، BCn (سطح المكتب/WebGL2)، احتياطي WEBP/PNG.
- وفر مستويات mip للخلفيات ثلاثية الأبعاد والكبيرة (يقلل من التلألؤ).
- قناة ألفا قبل الولادة: الخلط الصحيح وعدد أقل من الهالات.
- خطوط MSDF/SDF: عناوين/أرقام واضحة مع مخطط/توهج بدون قوام ضخم.
6) الجسيمات (صديقة لوحدات معالجة الرسومات)
لوحات إعلانية مع تركيب أطلس + وحدة معالجة الرسومات (ثلاثية الأبعاد) أو تجزئة (ثنائية الأبعاد).
مادة مضافة/مزيج ألفا حسب الطبقة ؛ تحديد مدة الانبعاثات.
الجرعة الرقيقة: الجسيمات «توحي» بالنصر، لكن لا تتداخل مع الرموز.
تجميع الأجسام حتى لا تنتج مسامير GC.
7) تكوين المشهد وترتيب الرسم
: Back Reels Symbols FX UI Complay.
مبهمة أولاً، ثم شفافة.
أقنعة/مكبلات على الطبول - بحيث لا يتم تقديم الخلفية «تحت» مناطق شفافة.
امسح Z-order، مما يؤدي إلى تعطيل العمق في 2D بحيث لا توجد اختبارات غير ضرورية.
8) أصول خط الأنابيب والتحميل
Atlas generation (TexturePacker/Spine Export), automatic cluting, hash names ('icon. ab12. png ').
تأخر تحميل مشاهد المكافآت والعملات الأجنبية الثقيلة (كسول).
تنسيق الخط (MSDF)، وتصدير منحنيات الرسوم المتحركة.
CDN & cache basting: الأصول غير القابلة للتغيير، TTL قصيرة في البيان.
WebCodecs/WebAssembly لفك التشفير المعجل، OffcreenCanvas للعرض خارج الخيط الرئيسي (حيثما كان متاحًا).
9) الأداء: الأهداف والقياسات
الأهداف: 60 خدمة إطارية على الأجهزة المرجعية ؛ First Playable <5-10 s web/< 10 s mobile; درجة حرارة مستقرة.
المؤشرات القصوى الرئيسية:- ارسم المكالمات (المزيد من الجزار، عدد أقل من مفاتيح الملمس).
- السحب الزائد (خريطة الحرارة - تجنب «الأوراق» الشفافة).
- الإطار الزمني لوحدة معالجة الرسومات/وحدة المعالجة المركزية (توقيت العرض والمنطق بشكل منفصل).
- الذاكرة/VRAM (مسامير، تسريبات).
- حجم الحزمة وحمل الأصول p95.
- التلعثم/GC (الكمية والمدة).
الأدوات: سبيكتور. js, Chrome DevTools/Performance, Safari Web Inspector, Xcode/Android GPU Inspector, Unity Profiler/Frame Debugger.
10) التحسينات التي «تجعل الطقس»
التجزئة: مصنفة حسب المواد/الأطالس/المزج ؛ في Pixi - أنماط «حاوية الجسيمات »/« الهندسة».
LOD: إطفاء الظلال/الجسيمات الثقيلة على الأجهزة الضعيفة ؛ أطالس بديلة ذات دقة أقل.
مواضع Pixel المفاجئة والأعداد الصحيحة - عدد أقل من الضبابية عند تمرير البراميل.
تقليل الشفافية: استبدال موت ألفا الكبير بشبكات/أقنعة مسطحة.
نحن نخزن عرض الهدف (RTT) لتكرار الآثار.
خطوط مختصرة: مجموعة MSDF واحدة بأنماط ديناميكية بدلاً من عشرات خطوط PNG.
ما بعد العملية بنصف دقة (ربع/نصف قرار) + راقي ثنائي.
الرسوم المتحركة المضادة: مشابك الإطار (لا تزيد عن تحديثات N في الثانية).
الفيزياء المعقولة: لا توجد محاكاة «ثقيلة» - فقط منحنيات معدة مسبقًا.
11) اللون والجاما وسهولة القراءة
sRGB/العرض الخطي: الألوان الصحيحة والمزج.
تباين واجهة المستخدم: الأرقام الفائزة - التباين العالي والظلال/المخطط.
صديق لعمى الألوان: تجنب التركيبات الحرجة (الأحمر/الأخضر بدون شكل دوكود).
درجات الألوان ذات العلامات التجارية - بعناية، لا تقتل إمكانية قراءة الشخصيات.
12) تزامن الرسومات مع طريقة اللعب والصوت
يتم حساب نتيجة الدوران/المكافأة قبل الرسوم المتحركة ؛ الرسومات تعيد إنتاج النص فقط.
نقاط التصعيد (توقف الطبول، الفوز الضخم) - علامات الجدول الزمني ؛ الصوت والاهتزاز مرتبطان بهم.
ميزانية المدة: توقف الطبلة <1. 2–1. 6 s، عد المكاسب - بسرعة ومع إمكانية «التخطي».
13) اختبار جودة الرسومات
اللقطات المرئية (الانحدار): الرموز والخطوط والموقع.
مصفوفة الجهاز: ميزانية Android (مالي/أدرينو)، iPhone/iPad القديم، أجهزة الكمبيوتر المكتبية.
خرائط الحرارة الخام الزائدة وملامح وحدة معالجة الرسومات.
قابلية الاستخدام للقراءة: 3-5 مستجيبين، أقطار/سطوع مختلفة، ظروف وهج.
إمكانية الوصول: «حركة أقل»، CTAs كبيرة، وضع التباين العالي.
14) وصفات صغيرة (قوالب جاهزة)
أ. طبلة مع Pseudo-3D
شريط حرف مسطح + قناع نافذة.
خلفية مع تشابه سهل (قوام اثنين، سرعات مختلفة).
حواف «طلقات» الظل والظل الخفيف داخل النافذة.
تبديل حالات الرسوم المتحركة حسب الجدول الزمني، وليس بمنطق RNG.
باء - تأثير «الفوز الكبير»
ضربة رأس مرتدة (0. 9 → 1. 1 → 1. 0، easeOutElastic).
جزيئات مضافة من الألعاب النارية 0. 8–1. 2 ص.
توهج نص SDF + ازدهار ناعم بنصف دقة.
زر Skip متاح دائمًا.
جيم - الإيقاع التعاقبي «الرخيص»
صوت مركب واحد مع علامات ؛ الرسومات فقط «غمزات».
ينمو Counter X في الخطوات، مخطط الشخصية - من خلال مخطط MSDF.
يتم تعطيل التأثيرات اللاحقة بواسطة LOD على الأجهزة الضعيفة.
15) الأخطاء المتكررة وكيفية تجنبها
عفاريت شفافة ضخمة → السحب على المكشوف. الحل: قطع «في الشكل «/أقنعة/RTT.
الكثير من الخطوط/الأنماط → انفجارات VRAM. الحل: حزمة MSDF واحدة، أنماط في الظل.
فيديو بدون ضغط/توقف مؤقت → قطرات الإطار/التسخين. الحل: دورات قصيرة، بيترات منخفضة، توقف عند الطي.
عشوائية GC أثناء عد الفوز. الحل: برك الكائنات، بواعث ما قبل الحرب.
التوقيت حسب الإطارات بدلاً من الوقت → غير متزامن. الحل: ارتبط بـ «deltaTime »/الجدول الزمني.
زهر مشرق جدا → "صابون. "الحل: سلسلة العينات السفلية + حد الشدة.
آثار ثقيلة على الجميع. الحل: LOD/الأعلام حسب الجهاز.
16) قائمة التحقق من الإصدار الرسومي
الأداء
- 60 FPS على المراجع ؛ إطار الذروة <الميزانية المستهدفة
- توجيه المكالمات في الممر ؛ الساتان/تجزئة المواد
- السحب المفرط وليس «الأحمر» على البكرات وواجهة المستخدم
- الذاكرة/VRAM على الميزانية، لا تسريبات
الأصول
- Hash، Compression Atlases: ASTC/ETC2/BCn + redback
- خطوط SDF/MSDF، مجموعة واحدة لكل مشروع
- نسخ LOD من الآثار/مشاهد الخلفية
الرسوم المتحركة/الجدول الزمني
- جميع الأحداث الرئيسية - حسب العلامة، تخطي متاح
- مزامنة مع الصوت/الاهتزاز
- يتم تنشيط الوضع المخفض للحركة
اختبارات
- اللقطات المرئية خضراء
- ملفات تعريف وحدة معالجة الرسومات/وحدة المعالجة المركزية على مصفوفة الجهاز
- مشاهد التحميل (متعددة المكاسب ومتعددة الجسيمات)
التوزيع
- تم تسخين CDN، وعرض ذاكرة التخزين المؤقت يعمل
- مكافآت التحميل الكسول والعملات الأجنبية الثقيلة
- حزمة في الحد، أول تشغيل في الهدف
الرسومات في الفتحات هي توازن بين الجماليات والهندسة: الظلال والتأثيرات للعاطفة، والقطع والضغط من أجل السرعة، والجداول الزمنية للدراما المتحكم فيها، وإمكانية الوصول لجميع اللاعبين. تفوز الفرق عندما تصمم صورة مرئية تعتمد على البيانات، وتقيس كل شيء من مكالمات السحب إلى السحب الزائد، وتحافظ على الحزم خفيفة وتعطي اللاعب «نجاح باهر» دون فقدان FPS وقابلية القراءة. هكذا تولد الفتحات الحديثة: جميلة وسريعة وصادقة.