بلاغ من القيادة. خريطة النجوم هي قلب X-Wars - لكنها بدأت على الهواتف تبدو كأنك تجر لوحة ثقيلة بدلًا من التحليق عبر الفضاء. أطلق اليوم عارضًا افتراضيًا جديدًا مبنيًا على WebGL (عبر PixiJS)، مع إبقاء الضباب ومناطق السيطرة مرئيين عند التصغير، والإبقاء على المسار القديم كمفتاح تعطيل طارئ إلى أن يثبت الجديد جدارته في بيئة الإنتاج.
لماذا بدت الخريطة بطيئة
خريطة النجوم الحية ليست صورة واحدة. إنها كاميرا متحركة فوق عالم متنامٍ: شبكات مربعات، وضباب استكشاف، وألوان مناطق سيطرة المنارات، وشموس، ورسومات كواكب، وعلامات أساطيل، ومسارات عبور، وحلقات مسح، ومعاينات لإمكانية الوصول. كان النهج القديم يبدو جيدًا غالبًا على الحواسيب المحمولة. لكنه كان يتلعثم على أجهزة Android وiOS متوسطة الفئة - خصوصًا مع مناطق السيطرة الكبيرة أو نطاقات الاستكشاف الواسعة. كان السحب والضم يستجيبان متأخرين. ليست هذه مشكلة محتوى، بل ضريبة يفرضها العارض.
كيف يُخزن كون هائل من دون إغراق المتصفح
الكون شاسع عن قصد. لا ينزل القادة كل مربع كسطر من JSON. يتعاون الخادم والعميل عبر بُنى متناثرة - فلا يُرسل إلا ما كشفته أو اكتشفته أو تحتاج إليه في العرض الحالي.
ضباب الاستكشاف كخرائط بتية
ضباب الحرب ليس قائمة بكل مربع مظلم. تُخزن المساحة المكشوفة في خرائط بتية مقسمة إلى كتل - مربعات ثابتة الحجم من الكون مضغوطة في صورة بتات. تتسع كتلة من 64 في 64 مربعًا في بضع مئات من البايتات. يتلقى المتصفح الكتل التي تتقاطع مع حدود خريطتك، لا رواية طويلة من الإحداثيات. عندما يستطلع أسطول نطاقًا، نضبط البتات ونرسل الرقع. هكذا تظل تكلفة تخزين الضباب منخفضة حتى بعد شهور من الاستكشاف.
مناطق السيطرة كنطاقات، لا كمربعات ورق جدران
تستخدم أراضي المنارات مسافة تشيبيشيف - القيمة القصوى بين القيمتين المطلقتين لـ dx وdy - ولذلك يكون نطاق التغطية حرفيًا مربعًا محاذيًا للمحاور على شبكة المربعات. توسع المستويات ذلك المربع من نطاقات دوريات صغيرة إلى مناطق سيطرة هائلة (بعشرات المربعات على كل ضلع، وصولًا إلى نحو 100 لأثقل الوحدات). لا تحتاج اللعبة إلى تخزين كل مربع خاضع للسيطرة كمستند مستقل. يُعاد بناء الملكية من مراكز المنارات النشطة وأنصاف أقطارها، مع استثناء مربعات أجسام الكواكب من منطقة السيطرة. تظل التداخلات بين مناراتك بلون موحد واحد، لا كومة من الطبقات الداكنة.
ما الذي ترسله واجهة API للخريطة فعليًا
تحميل الخريطة هو لوحة علامات، لا أطلس أنسجة للكون: أنظمة تعرفها، وأساطيل تملكها أو ترصدها، ومنارات تتقاطع تغطيتها مع ضبابك أو نطاق استطلاعك، وحطام اضمحلال عثرت عليه، وحدود واسعة بما يكفي لاحتواء نقاط الارتكاز تلك. وتصل كتل الاستكشاف معها. يقرر العميل بعد ذلك ما يرسمه للكاميرا الحالية. هذا الفصل - حالة عالم متناثرة عبر الشبكة، وبكسلات كثيفة لإطار العرض وحده - هو السبيل الوحيد كي تظل خريطة النجوم في لعبة MMO عبر المتصفح صادقة عند هذا النطاق.
العارض القديم - مراجعة صريحة لما بعد الإيقاف
كانت خريطة النجوم السابقة عالمًا من عناصر DOM عبر React: طبقة هائلة تتحرك باستخدام CSS translate وscale، وعلامات على هيئة أزرار وصور موضوعة، وضباب ومناطق سيطرة على هيئة مستطيلات SVG. كان ذلك الخيار الأول المناسب لمرحلة ألفا - تفاعليًا، وسهل التصحيح، وسريع التكرار. لكنه لم يصمد جيدًا مع اتساع مناطق السيطرة والضباب المستكشف.
- يُجبر تغيير مقياس طبقة بحجم العالم باستخدام CSS المتصفح على تركيب شجرة هائلة من العقد في كل إطار أثناء السحب.
- كانت مناطق السيطرة تُرسم كمستطيل SVG واحد لكل مربع خاضع للسيطرة داخل إطار العرض، بعد توسيع نطاقات تشيبيشيف الكاملة في JavaScript - صحيح، لكنه مكلف.
- استخدم الضباب مستطيلات SVG مدمجة فوق لوحة الرسم المحملة - أفضل من عقدة لكل مربع، لكنه ظل مثقلًا بعناصر SVG مع اتساع المساحة المكشوفة.
- كانت علامات الكواكب والأساطيل عناصر DOM حقيقية مزودة بمرشحات وحلقات ومناطق تفاعل - مناسبة بالعشرات، ومكلفة بالمئات تحت عنصر أب يخضع للتحويل.
- كان التصغير يلغي الضباب ومناطق السيطرة بالكامل كي يبقى العرض الشامل قابلًا للاستخدام - ما أخفى المعلومات الاستخباراتية التي تحتاج إليها بشدة عند معاينة مسرح العمليات.
العارض الجديد - WebGL مع PixiJS
ترسم خريطة النجوم الآن داخل لوحة بحجم إطار العرض عبر PixiJS، الذي يتواصل مع WebGL (مع مسار احتياطي آمن عند الحاجة). لم يعد العالم صفحة DOM بمليار بكسل. بل أصبح مصفوفة كاميرا فوق استدعاءات رسم ملائمة لوحدة معالجة الرسومات. تظل لوحات HUD ومربعات الحوار وواجهة القيادة في React - ولم ينتقل سوى سطح الخريطة الحي.
كاميرا من دون معاقبة React
أثناء السحب أو الضم، يُحدّث تحويل الكاميرا مسرح Pixi فورًا. ولا يزال React يتلقى معلومات التركيز وحدود الاستبعاد بوتيرة أهدأ - خطوات تركيز مكمّاة ونهاية الإيماءة - كي لا نعيد بناء الكون مع كل بكسل تقطعه إصبعك. تعيش الأساطيل المتحركة ومسارات العبور في طبقة ديناميكية يمكن تحديثها دوريًا من دون إعادة تركيب الشموس والضباب.
طبقات تظل مفيدة عند التصغير
لا تزال مستويات التفاصيل موجودة، لكنها تغير طريقة التمثيل - لا وجود الضباب ومناطق السيطرة. عند التكبير تحصل على شبكات المربعات ورسومات الكواكب والعلامات الواضحة. وعند التصغير تحصل على شبكات أقل دقة وتجمعات شمسية وعلامات أبسط - فيما تبقى مربعات السيطرة وضباب الاستكشاف ظاهرين كي لا تصبح الصورة الاستراتيجية فارغة.
- الخلفية: الشبكة، والضباب، وألوان مناطق السيطرة، وحدود النطاقات (ربط المنارات، ورصد الأساطيل، وإمكانية الوصول بالحركة، ورادار المسح).
- الأجرام: الشموس، والكواكب، وعلامات المنارات، وعلامات الحطام.
- الديناميكي: علامات الأساطيل، ومسارات العبور، ومعاينات خطط السفر، وأسهم الدمج.
لماذا تهم نطاقات تشيبيشيف في الرسم
لأن نطاق تشيبيشيف مربع، يمكن رسم منطقة السيطرة كرباعي واحد لكل منارة بدلًا من آلاف مستطيلات المربعات. لا يزال الضباب يستخدم مناطق مكشوفة مدمجة، لكن فقط لما يحتاج إليه إطار العرض. هذا هو الفرق بين تغطية الجدار بورق الجدران وختمه بالأختام.
ما ينبغي أن تلاحظه بصفتك قائدًا
- سحب وضم أكثر سلاسة على الهواتف، خصوصًا فوق المساحات الخاضعة للسيطرة أو المستكشفة جيدًا.
- يظل الضباب ومناطق السيطرة قابلين للقراءة عند التصغير للتخطيط للممر التالي.
- يُرسم نطاق رصد الأسطول المحدد ومعاينات تغطية المنارات كمربعات واضحة على الخريطة.
- قواعد اللعب نفسها - هذا تغيير في العارض، وليس إعادة تصميم للضباب أو المنارات أو الأساطيل.
مفتاح التعطيل والشفافية في مرحلة ألفا
Pixi هو الخيار الافتراضي. إذا حدث خطأ في بيئة الاستخدام الفعلية، يمكنني إعادة الخيار الافتراضي المباشر إلى مسار DOM القديم من دون إعادة بناء كاملة. تحتفظ تبويبات الخريطة المفتوحة بالفعل بالعارض الحالي إلى أن تعيد تحميلها. أُبقي المسار القديم عمدًا خلال فترة اختبار قصيرة - نحو أسبوع من اللعب الفعلي - ثم أنوي إزالته حين أثق بالواجهة الجديدة.
إذا ظلت الخريطة تتعثر على جهاز محدد بعد التحديث، فأبلغني عبر مرحّل القيادة مع ذكر الجهاز والمتصفح والموقع التقريبي الذي كنت تنظر إليه. الهدف بسيط: يجب أن تعود خريطة النجوم إلى الإحساس بالفضاء - خفيفة تحت الإصبع، وكثيفة بالمعلومات الاستخباراتية، وجاهزة للمعارك المقبلة. - القيادة