مرحبًا بكم في عالم (غريب)
صفحة Google الرئيسية هي بيئة رائعة للبرمجة داخلها. وهي تشمل الكثير من القيود الصعبة، مثل التركيز بشكل خاص على السرعة ووقت الاستجابة، والحاجة إلى تلبية جميع أنواع المتصفحات والعمل في ظروف مختلفة، و... نعم، المفاجأة والمتعة.
بالحديث عن رسومات الشعار المبتكرة من Google، هي الرسوم التوضيحية الخاصة التي تحل أحيانًا محل شعارنا. وبالرغم من أنّ علاقتي بالأقلام والفُرش لطالما كانت لها هذه النكهة المميزة لالطلبات المقيدة، غالبًا ما أساهم في الأعمال التفاعلية.
كانت جميع رسومات الشعار المبتكرة التي برمجتها (Pac-Man وJules Verne وWorld’s Fair) والعديد من رسومات الشعار المبتكرة التي ساعدتني العديد من هذه الرسومات في المستقبل القريب
نتعلم الكثير من رسومات الشعار المبتكرة التفاعلية، ولم تكن لعبة "ستانيسلاو ليم" المصغّرة الأخيرة استثناءً في هذه اللعبة التي تضم 17,000 سطر من رمز JavaScript الذي يجرب عدة أشياء للمرة الأولى في تاريخ رسومات الشعار المبتكرة. أود أن أشارككم اليوم هذه التعليمة البرمجية - ربما ستجد شيئًا مثيرًا للاهتمام هناك، أو تشير إلى أخطائي - وأتحدث قليلاً عن ذلك.
عرض رمز رسومات الشعار المبتكرة لـ "ستانيسلاو ليم" »
هناك شيء يجب وضعه في الاعتبار وهو أن صفحة Google الرئيسية ليست مكانًا للعروض التوضيحية التقنية. من خلال رسومات الشعار المبتكرة التي نقدِّمها، نريد الاحتفال بأشخاص محدّدين وأحداث معيّنة، ونريد القيام بذلك باستخدام أفضل الفنون وأفضل التقنيات التي يمكننا استدعاءها، ولكن لا نحتفل أبدًا بالتكنولوجيا من أجل استخدام التكنولوجيا. وهذا يعني النظر بعناية إلى أي جزء من HTML5 المفهوم على نطاق واسع، وما إذا كان يساعدنا في تحسين رسومات الشعار المبتكرة بدون تشتيت الانتباه عنه أو حجبه.
إذًا، لنستعرض بعض تقنيات الويب الحديثة التي وجدت مكانها وبعضها لم تصل إلى مكانها في رسومات الشعار المبتكرة لستانيسلاو ليم.
الرسومات عبر DOM ولوحة الرسم
تتميز لوحة الرسم بأنها قوية وتم إنشاؤها لكل ما أردنا القيام به في رسومات الشعار المبتكرة هذه. على الرغم من ذلك، لا تتوافق بعض المتصفحات القديمة التي تهمّنا مع هذه الميزة، وعلى الرغم من أنّني أشارك مكتبًا مع الشخص الذي أعدّ لوحة الرسم ممتازة، إلا أنني قرّرت اختيار طريقة مختلفة.
لقد جمّعت محرك رسومات يختزل العناصر الأساسية للرسم والتي تُسمى "الأشكال"، ثم أعرضها باستخدام إما لوحة الرسم أو نموذج العناصر في المستند (DOM) إذا لم تكن لوحة الرسم غير متوفرة.
تأتي هذه الطريقة في بعض التحديات المثيرة للاهتمام - على سبيل المثال، يؤدي نقل كائن أو تغييره في نموذج العناصر في المستند (DOM) إلى عواقب فورية، في حين أنه بالنسبة إلى لوحة الرسم، يتم رسم كل شيء في الوقت ذاته. (قررت أن يكون لدي لوحة واحدة فقط، وأمسحها وأرسمها من البداية مع كل إطار. هناك عدد كبير جدًا من الأجزاء المتحركة من جهة، ومن ناحية أخرى، لا توجد تعقيدات كافية لتقسيمها إلى عدة لوحات متداخلة وتحديثها بشكل انتقائي).
للأسف، إنّ التبديل إلى لوحة الرسم ليس بمثل بساطة النسخ المطابق لخلفيات CSS باستخدام drawImage(): ستفقد عددًا من العناصر المتاحة مجانًا عند تجميع العناصر معًا
عبر DOM، والأهم من ذلك وضع طبقات مع فهارس z وأحداث الماوس.
لقد اختصارت مؤشر z بالفعل باستخدام مفهوم يسمى "الطائرات". وقد حددت
رسومات الشعار المبتكرة عددًا من الطائرات، بدءًا من السماء البعيدة في الخلف وحتى مؤشر الماوس أمام كل شيء، وكان على كل ممثل داخل الرسومات تحديد الرقم الذي ينتمي إليه (التصحيحات الصغيرة للزائد/الناقصين داخل الطائرة باستخدام planeCorrection).
عند العرض من خلال DOM، يتم ترجمة المستويات إلى فهرس z. ولكن إذا قمنا بالعرض عبر لوحة الرسم، فإننا بحاجة إلى فرز المستطيلات بناءً على مستوياتها قبل رسمها. ونظرًا لأن إجراء ذلك في كل مرة سيكون مكلفًا، فلا تتم إعادة احتساب الأمر إلا عند إضافة ممثل أو عند انتقاله إلى طائرة أخرى.
بالنسبة لأحداث الماوس، قمت بتلخيص ذلك أيضًا... نوعًا ما. بالنسبة إلى كل من نموذج العناصر في المستند (DOM) ولوحة الرسم، استخدمت عناصر DOM العائمة الإضافية الشفافة بالكامل ذات مؤشر z عالي، والتي تكمن وظيفتها في التفاعل مع تمرير الماوس فوقه/خارجه والنقرات والنقر فقط.
كان أحد الأشياء التي أردنا تجربتها مع هذه الرسومات كسر الجدار الرابع. سمح لنا المحرك أعلاه بدمج الجهات الفاعلة المستندة إلى لوحة الرسم مع الجهات الفاعلة المستندة إلى نموذج العناصر في المستند (DOM). على سبيل المثال، الانفجارات التي حدثت في النهاية هي في كل من اللوحات للكائنات في الكون وفي DOM لبقية صفحة Google الرئيسية. في العادة، يطير الطائر حولنا ويثبّته قناعنا المسنين مثل أي ممثل آخر، ويقرر الابتعاد عن المشاكل أثناء مستوى الرماية ويجلس على زر "ضربة حظ". في الطريقة التي يتم إجراؤها، يخرج الطائر من اللوحة ويصبح عنصر DOM (والعكس صحيح لاحقًا)، والذي آمل أن يكون شفافًا تمامًا للزوّار.
عدد اللقطات في الثانية
شكّلت معرفة عدد اللقطات الحالي في الثانية والتفاعل مع الحالات التي يكون فيها ببطء شديد (وسريع جدًا) جزءًا مهمًا من محرّك البحث. بما أنّ المتصفحات لا تُبلغ عن عدد اللقطات في الثانية، يتعين علينا احتسابه بأنفسنا.
لقد بدأت باستخدام requestAnimationFrame، والعودة إلى
الإصدار القديم من setTimeout في حال عدم توفّر الميزة الأولى.
يوفّر requestAnimationFrame بذكاء وحدة المعالجة المركزية (CPU) في بعض الحالات، وعلى الرغم من أنّنا ننفّذ بعضًا من ذلك بأنفسنا، كما هو موضّح أدناه، ولكنّنا أيضًا يتيح لنا الحصول على عدد لقطات أعلى في الثانية من setTimeout.
من السهل احتساب عدد اللقطات الحالي في الثانية، إلا أنّه يخضع لتغييرات جذرية، على سبيل المثال، يمكن أن ينخفض سريعًا عندما يستخدم تطبيق آخر الكمبيوتر لفترة من الوقت. لذلك، نحسب عدد اللقطات في الثانية "المتحرك" (المتوسط) فقط من خلال كل 100 علامة فعلية ونتّخذ القرارات بناءً على ذلك.
ما نوع القرارات؟
إذا كان عدد اللقطات في الثانية أعلى من 60 لقطة في الثانية، سن الحدّ من الحركة. في الوقت الحالي، لا يمكن ضبط حدّ أقصى على عدد اللقطات في الثانية في
requestAnimationFrameعلى بعض إصدارات Firefox، وما مِن حاجة إلى إهدار وحدة المعالجة المركزية (CPU). تجدر الإشارة إلى أنّنا نحدّ في الواقع إلى 65 لقطة في الثانية، بسبب أخطاء التقريب التي تجعل عدد اللقطات في الثانية أعلى قليلاً من 60 لقطة في الثانية على المتصفحات الأخرى، لذا لا نريد بدء تقييد ذلك عن طريق الخطأ.إذا كان عدد اللقطات في الثانية أقل من 10 لقطات في الثانية، يؤدي ذلك ببساطة إلى إبطاء المحرّك بدلاً من تجاهل اللقطات. يبدو أنّ الخسارة في اللعب، لكنني شعرت أنّ تخطّي اللقطات بشكل مفرط سيكون أكثر إرباكًا من مجرد اختيار لعبة أبطأ (ولكنّها متماسكة). هناك تأثير جانبي جميل آخر لذلك - إذا أصبح النظام بطيئًا بشكل مؤقت، فلن يواجه المستخدم قفزة غريبة إلى الأمام لأن المحرك في أمس الحاجة إليه. (لقد فعلت ذلك بشكل مختلف قليلاً لـ Pac-Man، لكن الحد الأدنى لعدد اللقطات في الثانية يعد نهجًا أفضل).
وأخيرًا، يمكننا التفكير في تبسيط الرسومات عندما ينخفض عدد اللقطات في الثانية بشكل خطير. نحن لا نفعل ذلك مع رسومات الشعار المبتكرة في رسومات الشعار المبتكرة من نوع "ليم" باستثناء مؤشر الماوس (المزيد حول ذلك أدناه)، لكن من الناحية الافتراضية، قد نفقد بعض الرسوم المتحركة الغريبة كي تبدو الرسومات سلسة حتى على أجهزة الكمبيوتر الأبطأ.
لدينا أيضًا مفهوم يشير إلى القراد الجسدي والقراد المنطقي. مصدر الصورة الأولى هو
requestAnimationFrame/setTimeout. وتبلغ النسبة في أسلوب اللعب العادي 1:1، ولكن بالنسبة إلى التقديم السريع، نضيف فقط المزيد من علامات التجزئة المنطقية لكل إشارة فعلية (تصل إلى 1:5). يتيح لنا ذلك إجراء جميع العمليات الحسابية اللازمة لكل علامة منطقية، ولكن تعيين آخر
واحد فقط ليكون هو الذي يقوم بتحديث الأشياء على الشاشة.
قياس الأداء
يمكن أن يتم الافتراض (وفي الواقع، تم في وقت مبكر) أن تكون اللوحة أسرع من DOM متى كانت متاحة. هذا ليس صحيحًا دائمًا. أثناء الاختبار، اكتشفنا أن Opera 10.0–10.1 في نظام التشغيل Mac وFirefox على نظام التشغيل Linux أسرع في الواقع عند نقل عناصر DOM.
في العالم المثالي، كانت رسومات الشعار المبتكرة تقيس تلقائيًا تقنيات رسومات مختلفة، مثل عناصر DOM التي يتم نقلها باستخدام style.left وstyle.top، والرسم على اللوحة، وربما حتى عناصر DOM التي تم نقلها باستخدام تحويلات CSS3.
ثم التبديل إلى الخيار الذي أعطى أعلى عدد للقطات في الثانية. لقد بدأت في كتابة التعليمات البرمجية لذلك، لكنني وجدت أن طريقتي في قياس الأداء كانت غير موثوقة إلى حد ما وتتطلّب الكثير من الوقت. الوقت الذي لا نملكه على صفحتنا الرئيسية - فنحن نهتم كثيرًا بالسرعة ونريد أن تظهر رسومات الشعار المبتكرة على الفور ويبدأ أسلوب اللعب بمجرد النقر أو الضغط.
في نهاية المطاف، يرتبط تطوير الويب أحيانًا بالاضطرار إلى فعل ما ينبغي لك
أن تفعله. نظرت خلف كتفي للتأكد من أنه لا أحد ينظر إلى الأمر، ثم لم تعد تعرف سوى Opera 10 وFirefox بلا إعلانات. وفي المستقبل، سأعود
كعلامة <marquee>.
وحدة المعالجة المركزية (CPU) للحفاظ على
أعلم أنّ الصديق الذي يأتي إلى منزلك ويشاهد ختام موسم Breaking Bad، يُفسدّره لك ثم يحذفه من مسجّل الفيديو الرقمي؟ أنت لا تريد أن تكون هذا الشخص، أليس كذلك؟
لذا، نعم، أسوأ تشبيه على الإطلاق. لكننا لا نريد أن نجعل رسومات الشعار المبتكرة هذا الشخص كذلك - حقيقة السماح لنا في علامة تبويب متصفح شخص ما هي امتياز، كما أن اكتناز دورات وحدة المعالجة المركزية أو تشتيت انتباه المستخدم سيجعلنا ضيفًا مزعجًا. لذلك، إذا لم يلعب أي شخص في رسومات الشعار المبتكرة (بدون نقرات أو نقرات على الماوس أو حركات الماوس أو ضغطات المفاتيح)، فإننا نريد أن يخلد إلى النوم في النهاية.
الموعد؟
- بعد 18 ثانية على الصفحة الرئيسية (ألعاب كلاسيكية تُعرف باسم وضع الجذب)
- بعد 180 ثانية إذا كان تركيز علامة التبويب
- بعد 30 ثانية إذا لم يتم التركيز على علامة التبويب (على سبيل المثال، انتقال المستخدم إلى نافذة أخرى، ولكنه ربما لا يزال يشاهد رسومات الشعار المبتكرة الآن في علامة تبويب غير نشطة)
- فورًا إذا أصبحت علامة التبويب غير مرئية (على سبيل المثال، عندما يتحوّل المستخدم إلى علامة تبويب أخرى في النافذة نفسها، لا يعني ذلك أي إضاعة في الدورات التدريبية إذا لم نتمكّن من رؤيتها)
كيف يمكننا معرفة ما إذا كانت علامة التبويب المعنية تركّز عليها حاليًا؟ ونُرفق على window.focus وwindow.blur. كيف يمكننا معرفة أنّ علامة التبويب مرئية؟ نستخدم واجهة Page visibility API الجديدة ونتفاعل مع الحدث المناسب.
إنّ المهلة المذكورة أعلاه أسهل من المعتاد بالنسبة إلينا. وقمت بتكييفهم مع هذه الرسومات بالتحديد، والتي تحتوي على الكثير من الرسوم المتحركة في البيئة المحيطة (خاصةً السماء والطائر). من الناحية المثالية، يتم تحديد وقت الاستراحة عند التفاعل داخل اللعبة - على سبيل المثال، بعد الهبوط مباشرةً، يمكن للطائر أن يبلغ مرة أخرى بعلمه بأنّه يمكنه النوم الآن، لكنني لم أنفذ ذلك في النهاية.
نظرًا لأن السماء تتحرك دائمًا، فعند النوم أو الاستيقاظ، لا تتوقف رسومات الشعار المبتكرة أو تبدأ فحسب - بل إنها تتباطأ قبل التوقف، والعكس بالعكس عند الاستئناف، أو زيادة أو خفض عدد المؤشرات المنطقية لكل علامة جسدية حسب الضرورة.
الانتقالات والتحولات والأحداث
لطالما كانت إحدى إمكانات HTML هي القدرة على تحسين الأداء بنفسك: إذا كان هناك شيء ليس جيدًا بما يكفي في المجموعة العادية من HTML وCSS، فيمكنك تحويل JavaScript لتوسيعه. لسوء الحظ، غالبًا ما يعني ذلك الاضطرار إلى البدء من الصفر. تُعد انتقالات CSS3 رائعة، ولكن لا يمكنك إضافة نوع انتقال جديد أو استخدام الانتقالات لإجراء أي شيء غير عناصر النمط. مثال آخر: تعتبر عمليات تحويل CSS3 رائعة بالنسبة إلى نموذج كائن المستند (DOM)، ولكن عندما تنتقل إلى لوحة الرسم، تكون بمفردك فجأة.
هذه الأخطاء وغيرها هي سبب تميّز Lem رسومات الشعار المبتكرة بآلية انتقالها وتحويلها من محرك بحث. نعم، كما أعلم أن العقد الأول من القرن الحادي والعشرين كان وما إلى ذلك، والإمكانات التي بنيتها ليست تقريبًا بنفس قوة CSS3، ولكن أيًا كان المحرك، فهو يعمل باستمرار ويمنحنا المزيد من التحكم.
لقد بدأت باستخدام نظام إجراءات بسيطة
(حدث)، وهو مخطط زمني يتم تنشيط الأحداث في المستقبل بدون
استخدام setTimeout، إذ يمكن أن ينفصل في أي وقت معيّن في تصميم الرسومات عن الوقت الفعلي، لأنّه يصبح أسرع (تقديم سريع) أو بشكل أبطأ
(انخفاض في عدد اللقطات في الثانية أو التوقف عن النوم لتوفير وحدة المعالجة المركزية) أو يتوقف تمامًا
(في انتظار انتهاء تحميل الصور).
الانتقالات هي مجرد نوع آخر من الإجراءات. بالإضافة إلى الحركات الأساسية والتدوير، نتيح أيضًا الحركات النسبية (مثل نقل عنصر بمقدار 10 بكسل إلى اليمين)، وأشياء مخصصة مثل الرعشة، والرسوم المتحركة في صور الإطار الرئيسي.
لقد ذكرت عمليات التدوير والتي يتم إجراؤها يدويًا أيضًا: لدينا إطارات شبكية لزوايا مختلفة للعناصر التي تحتاج إلى تدوير. السبب الرئيسي هو أنّ عمليات تدوير CSS3 ولوحة الرسم كانت تقدّم عناصر مرئية غير مقبولة، وفوق كل ذلك، تنوعت هذه العناصر حسب نظام التشغيل.
بما أنّ بعض الأجسام التي تدور في عجلة دوّارة تكون متصلة بأشياء أخرى دوّارة، مثل يد الروبوت المتصلة بالجزء السفلي من الذراع، والتي تكون نفسها مرتبطة بالذراع الدوّارة، يعني ذلك أنّني في حاجة أيضًا إلى إنشاء أصل تحويل لشخص فقير في شكل محوري.
يمثل كل هذا مقدارًا قويًا من العمل الذي يغطي في نهاية المطاف الأمور التي تم التعامل معها بالفعل باستخدام HTML5 - ولكن في بعض الأحيان لا يكون الدعم الأصلي جيدًا بما يكفي، وحان الوقت لإعادة ابتكار العجلة.
التعامل مع الصور والرموز المدمجة
لا يقتصر المحرك على تنفيذ الرسومات والرسومات فقط، بل يُستخدم أيضًا للعمل عليها. لقد شاركتُ بعض مَعلمات تصحيح الأخطاء أعلاه: يمكنك العثور على الباقي في
engine.readDebugParams.
الدمج أسلوب معروف، نستخدمها أيضًا في الرسومات. يُتيح لنا حفظ وحدات البايت وخفض أوقات التحميل، علاوة على تسهيل عملية التحميل المُسبق.
ومع ذلك، فإنها تجعل التطوير أكثر صعوبة - كل تغيير تم إجراؤه على الصور يتطلب إعادة التركيب (آلية إلى حد كبير، ولكنها لا تزال مرهقة). لذلك، يدعم المحرك تشغيل الصور الأولية للتطوير بالإضافة إلى تركيبات مدمجة للإنتاج عبر engine.useSprites، وكلاهما مضمّنان في رمز المصدر.
نتيح أيضًا تحميل الصور مسبقًا أثناء مواصلة العمل وإيقاف رسومات الشعار المبتكرة في حال عدم تحميل الصور في الوقت المناسب، كما يظهر شريط تقدّم زائف. (خطأ غير حقيقي، لأنه للأسف لا يمكن لـ HTML5 أن يخبرنا بالمقدار الذي تم تحميله من ملف الصورة).
بالنسبة إلى بعض المشاهد، نستخدم أكثر من نقش متحرك واحد لزيادة سرعة التحميل باستخدام الاتصالات المتوازية، ولكن يعود السبب في ذلك إلى الحد الذي يبلغ 3/5 مليون بكسل للصور على نظام التشغيل iOS.
أين يتوافق HTML5 مع كل هذا؟ ليس هناك الكثير من الأمثلة أعلاه، لكن الأداة التي كتبتها للدمج/الاقتصاص كانت بالكامل تكنولوجيا ويب جديدة، مثل لوحة الرسم، blobs، a[download]. من الأشياء المدهشة بشأن HTML هو أنه يستوعب تدريجيًا الأشياء التي كان يتعين القيام بها في السابق خارج المتصفح؛ والجزء الوحيد الذي نحتاجه هو تحسين ملفات PNG.
جارٍ حفظ الحالة بين الألعاب
شعر "ليم" دائمًا بعوالمه الكبيرة والحيوية والواقعية. وبدأت قصصه عادةً بدون الكثير من التفسيرات، فبدأت الصفحة الأولى بـ Medias res، وكان على القارئ العثور على طريقه.
لم يكن Cyberiad استثناءً لذلك وأردنا تكرار هذا الشعور للرسومات الشعار المبتكرة. نبدأ بمحاولة عدم الإفراط في شرح القصة. هناك جزء كبير آخر هو التوزيع العشوائي الذي وجدنا أنّه مناسب للطبيعة الميكانيكية لعالم الكتاب. لدينا عدد من الدوال المساعدة التي تتعامل مع العشوائية التي نستخدمها في عدة أماكن.
كما أردنا أيضًا زيادة إمكانية إعادة التشغيل بطرق أخرى. لذلك، نحتاج إلى معرفة عدد المرات التي تم فيها الانتهاء من رسومات الشعار المبتكرة من قبل. وعلى الرغم من أنّ الحل التقني لذلك هو استخدام ملفات تعريف الارتباط، إلا أنّ ذلك لا يتناسب مع صفحة Google الرئيسية، فكل ملف تعريف ارتباط يزيد من حمولة كل صفحة، ومرة أخرى، نحن نهتم كثيرًا بالسرعة ووقت الاستجابة.
لحسن الحظ، يمنحنا HTML5 سعة تخزين على الويب، وهي تافهة في الاستخدام، مما يسمح لنا بحفظ وتذكر عدد مرات التشغيل العام والمشهد الأخير الذي شغّله المستخدم - مع منح إمكانيات أكثر مما تسمح به ملفات تعريف الارتباط.
ماذا نفعل بهذه المعلومات؟
- نعرض زر تقديم سريع، ما يتيح الضغط على المشاهد القصيرة التي رآها المستخدم من قبل
- نعرض عناصر N مختلفة خلال النهاية
- نزيد قليلاً من صعوبة مستوى الرماية
- نعرض تنينًا صغيرًا لاحتمالية بيضة عيد الفصح من قصة مختلفة عن اللعبة الثالثة والمسرحيات اللاحقة.
هناك عدد من مَعلَمات تصحيح الأخطاء التي تتحكّم في ذلك:
?doodle-debug&doodle-first-run– تظاهر بأنها محاولة أولى?doodle-debug&doodle-second-run: هذه هي ضربة ثانية?doodle-debug&doodle-old-run– لا تفوِّت التجربة
الأجهزة التي تعمل باللمس
أردنا أن تبدو رسومات الشعار المبتكرة في منزلك على الأجهزة التي تعمل باللمس، فأكثرها حداثة تكون قوية بما يكفي لتشغيلها بشكل جيد، كما أن تجربة اللعب بالنقر أكثر متعة من النقر.
يلزم إجراء بعض التغييرات المسبقة على تجربة المستخدم. في الأصل، كان مؤشر الماوس الخاص بنا هو المكان الوحيد الذي يوضح حدوث جزء غير تفاعلي. أضفنا لاحقًا مؤشرًا صغيرًا في أسفل الجانب الأيمن، لذلك لم نضطر إلى الاعتماد على مؤشر الماوس وحده (نظرًا لأن هذه المؤشرات غير موجودة على الأجهزة التي تعمل باللمس).
| عادي | مشغول | يمكن النقر عليه | تم النقر على العنصر. | |
|---|---|---|---|---|
| جارٍ التنفيذ |  |
 |
 |
 |
| النتيجة النهائية |  v |
 |
 |
 |
تمت معظم الأشياء بنجاح بطريقة غير تقليدية. ومع ذلك، أظهرت اختبارات قابلية الاستخدام المرتجلة السريعة لتجربة اللمس لدينا مشكلتين: كان الضغط على بعض الأهداف صعبًا للغاية، وتم تجاهل النقرات السريعة لأننا تجاوزنا أحداث النقر بالماوس.
ساعد وجود عناصر DOM الشفافة المنفصلة والقابلة للنقر كثيرًا هنا، حيث يمكنني تغيير حجمها بشكل مستقل عن العناصر المرئية. قدمت مساحة متروكة إضافية بمقدار 15 بكسل للأجهزة التي تعمل باللمس واستخدمتها كلما تم إنشاء عناصر قابلة للنقر. (لقد أضفت مساحة متروكة تبلغ 5 بكسل لبيئات الماوس أيضًا، لجعل Mr. Fitts سعيدًا.)
أما بخصوص المشكلة الأخرى، فقد حرصت على إرفاق معالِجات البداية والنهاية المناسبة للمس واختبارها، بدلاً من الاعتماد على النقر بالماوس.
ونستخدم أيضًا خصائص أكثر حداثة لإزالة بعض ميزات اللمس التي تضيفها متصفحات WebKit بشكل تلقائي (النقر على "تمييز"، "انقر على وسيلة شرح").
وكيف يمكننا اكتشاف ما إذا كان الجهاز المعين الذي يشغل رسومات الشعار المبتكرة يتيح اللمس؟ كسول. فبدلاً من معرفة الأمر أولاً، استخدمنا فقط تقنيات الذكاء الاصطناعي المدمجة لاستنتاج أن الجهاز يدعم اللمس... بعد أن نحصل على حدث بدء اللمس الأول.
تخصيص مؤشر الماوس
لكن لا يعتمد كل شيء على اللمس. كان أحد مبادئنا التوجيهية هو وضع أكبر عدد ممكن من الأشياء داخل عالم رسومات الشعار المبتكرة. واجهة المستخدم للشريط الجانبي الصغير (التقديم السريع، علامة الاستفهام)، والتلميح، وحتى مؤشر الماوس.
كيف يمكن تخصيص مؤشر الماوس؟ تتيح بعض المتصفحات تغيير مؤشر الماوس عن طريق الارتباط بملف صورة مخصص. ومع ذلك، لا يتم دعم ذلك بشكل جيد كما أنه محدود إلى حد ما.
إذا لم يكن كذلك، فماذا؟ حسنًا، لماذا لا تجعل مؤشر الماوس هو ممثل آخر في رسومات الشعار المبتكرة؟ هذا مفيد، ولكن يأتي مع عدد من المحاذير، أبرزها:
- التمكن من إزالة مؤشر الماوس الأصلي
- يجب أن تكون جيدًا في الحفاظ على مزامنة مؤشر الماوس مع المؤشر "الحقيقي"
الأول خادع. تسمح CSS3 باستخدام cursor: none، ولكنها
غير متاحة أيضًا في بعض المتصفحات. احتجنا إلى اللجوء إلى بعض الجمباز: استخدام ملف .cur فارغ كإجراء احتياطي، وتحديد السلوك الملموس لبعض المتصفحات، وحتى إجراء ترميز ثابت للإطارات الأخرى
بعيدًا عن التجربة.
بينما الآخر تافه نسبيًا على وجهه، ولكن نظرًا لأن مؤشر الماوس ليس سوى جزء آخر من عالم رسومات الشعار المبتكرة، فإنه سيكتسب جميع مشكلاته أيضًا. ما أكبرها؟ إذا كان معدل الإطارات في رسومات الشعار المبتكرة منخفضًا، فسيكون عدد اللقطات في الثانية لمؤشر الماوس منخفضًا أيضًا، وهذا له عواقب وخيمة لأن مؤشر الماوس، والذي يعد امتدادًا طبيعيًا لليد، يحتاج إلى الاستجابة بغض النظر عن أي شيء. (الأشخاص الذين استخدموا Commodore Amiga في ماضيهم يهمون الآن بشدّة).
أحد الحلول المعقدة إلى حد ما لهذه المشكلة هو فصل مؤشر الماوس عن حلقة التحديث المنتظمة. لقد فعلنا ذلك للتو - في عالم بديل حيث لا أحتاج إلى النوم. هل هناك حل أبسط لهذا؟ مجرد العودة إلى مؤشر الماوس الأصلي في حالة انخفاض معدل عرض الإطارات إلى أقل من 20 لقطة في الثانية. (هذا هو المكان الذي يكون فيه معدل الإطارات العجلية مفيدًا. فإذا تفاعلنا مع عدد اللقطات الحالي في الثانية، وإذا حدث تغيُّر في الثانية بمعدّل 20 لقطة في الثانية، سيرى المستخدم مؤشر الماوس المخصّص مختبئًا ويظهر طوال الوقت). وهذا يقودنا إلى:
| نطاق عدد اللقطات في الثانية | السلوك |
|---|---|
| >10 لقطات في الثانية | يجب إبطاء أداء اللعبة لعدم إسقاط المزيد من اللقطات. |
| من 10 إلى 20 لقطة في الثانية | استخدام مؤشر الماوس الأصلي بدلاً من المؤشر المخصَّص. |
| من 20 إلى 60 لقطة في الثانية | التشغيل الطبيعي. |
| >60 لقطة في الثانية | التقييد بحيث لا يتجاوز عدد اللقطات في الثانية هذه القيمة |
ومؤشر الماوس الخاص بنا معتم على جهاز Mac، فيما يظهر باللون الأبيض على الكمبيوتر الشخصي. ما السبب؟ لأن حروب المنصات تحتاج إلى تحفيز حتى في العوالم الخيالية.
الخلاصة
وهذا ليس محركًا مثاليًا، لكنه لا يحاول أن يكون واحدًا. وقد تم تطويره جنبًا إلى جنب مع رسومات الشعار المبتكرة في قرية "ليم" وهو خاص بها للغاية. لا بأس. "التحسين المبكر هو جذور كل الشر"، كما قاله "دون نوث" في القول المشهور، ولا أعتقد أن كتابة المحرك بمعزل عن الآخر أولاً، وتطبيقه لاحقًا فقط يكون منطقيًا، لأن الممارسة توجه النظرية كما توجه النظرية إلى الممارسة. في حالتي، تم تجاهل التعليمات البرمجية، وإعادة كتابة العديد من الأجزاء مرارًا وتكرارًا، وملاحظة العديد من القطع الشائعة، بدلاً من الوقائع السابقة. في النهاية، سمح لنا ما لدينا هنا بفعل ما أردناه، ألا وهو الاحتفال بمسيرة "ستانيسواف ليم" ورسومات "دانييل ماروز" بأفضل طريقة يمكن أن نفكر بها.
آمل أن يسلط ما سبق الضوء على بعض خيارات التصميم والمقايضات التي كنا بحاجة إلى إجرائها - وكيف استخدمنا HTML5 في سيناريو معين من الحياة الواقعية. الآن، استخدم رمز المصدر، وجربه ودعنا نعرف رأيك.
لقد فعلت ذلك بنفسي - كان هذا أدناه مباشرًا في الأيام الأخيرة، العد التنازلي حتى الساعات الأولى من يوم 23 تشرين الثاني (نوفمبر) 2011 في روسيا، والتي كانت أول منطقة زمنية تظهر فيها رسومات شعار "لم". ربما يكون لشيء أحمق، ولكن مثلما الحال في رسومات الشعار المبتكرة، للأشياء التي تبدو غير مهمة أحيانًا ما يكون لها معنى أعمق - لقد كان هذا العدّاد "اختبار إجهاد" جيدًا للمحرك.
وهي إحدى طرق النظر إلى حياة رسومات الشعار المبتكرة في Google - أشهر من العمل، وأسابيع من الاختبار، و48 ساعة من الخبز، وكل ذلك من أجل شيء يلعبه الأشخاص لمدة خمس دقائق. نأمل أن يتم قضاء هذه الدقائق الخمس وقتًا بشكل جيد في جميع آلاف سطور JavaScript. استمتع.