يوم جيد للجميع habrozhitel. أريد أن أخبركم كيف عدت إلى مطور لعبة الهواة بعد 3 سنوات أو أكثر ، وتغيير الأداة بشكل جذري (وعلى طول الطريق - نظرتي للعالم) ، وماذا جاء منها. تحت خفض لك:
- التصرف وجيزة من جميع الحقائق في بداية الرحلة. مثل الصورة "قبل" في الإعلان عبر الإنترنت الرخيصة "قبل" و "بعد".
- الغوص التطوعي في الواجهة الحديثة بأسلوب "أين هو المال ، Lebowski؟!"
- حكة بسيطة عند نقطة حميمة ، تتحول إلى رغبة ملحة لتعلم شيء جديد عن طريق فعل شيء قديم.
- الوعي بالعجز
- التغلب
- نهاية جميلة ، كما هو الحال في هذه الأفلام لك.
تنصل
كانت هذه المقالة في شكل مسودة على جيثب لمدة عامين ، وكُتبت نسختها الكاملة تقريبًا في نهاية عام 2017 في المطاردة الساخنة للأحداث.
المواطن ، عرف عن نفسك!
في مقالتي السابقة ( https://habrahabr.ru/post/244417/ ) كتبت القليل عن نفسي ، وبشكل أكثر تحديدًا حول كيفية اتصالي و gamedev. بحكم القانون - على أي حال ، بحكم الواقع - أنا أكتب الألعاب والمحركات للمتعة والمشاركة في المسابقات الدافئة والمصباح. منذ ذلك الحين ، لم يتغير شيء يذكر.
للحصول على مزيد من السرد وفرض الأجواء اللازمة ، من المهم أنه في بداية هذه القصة ، أنا مطور محترف على شبكة الإنترنت. صافي يمكنه استخدام html5 و css3 و ... مسجّل. لتعزيز "هذا منعطف" غير المتوقع ، نضيف أن هناك عدم ثقة وكراهية لجافا سكريبت محنك بـ:
- سوء فهم صريح لكل هذه الضجة حول اللغة ؛
- مجموعة من النكات حول الكتابة ، التقادم المتسارع للأطر ، عدد + سلسلة المفاجآت ، وأكثر من ذلك. كما تعلمون ، فإن مجموعة المطورين المعيارية تمامًا والتي تستخدم لغة أقدم وأكثر رسوخًا (مهلا ، أعرف أن منصة .net أصغر من js ، لكن ليس "بالغًا" بالمعنى الحرفي).
تعال جنبا إلى جنب!
أيلول (سبتمبر) 2017. بدأت مهمة جديدة للدفء والمصباح باستخدام حزمة تقنية جديدة (.net core web api + angular 4) وكانت مهمتي هي الواجهة الخلفية فقط. كلمة Angular بدا أنها مسيئة بالنسبة لي ، ارتبطت npm و nodejs بقوة مع العصائر ودراجة نارية صغيرة. عندما علمنا هذا Timlid وفهمه ، درسني دورة قصيرة حول كيفية إطلاق كل هذه الشيتانية. تماما كما في تلك النكتة عن تشوكشي والكلاب في الفضاء. أتذكر أسماء الخفافيش التي أحتاج إليها للبدء (تذكر بدء تشغيل npm ، لقد وجدت أنه من غير الضروري للغاية بالنسبة لطبيعتي اللطيفة) ، وانغمس في جو دافئ مصباح الصمام. صافي الأساسية.
أكتوبر 2017. الجرس الأول. يقول Timlid أن موظفنا في الخطوط الأمامية يخيطون 4 مشاريع على الفور ويعرضون قص جزء من منطقة المشرف إلي. يقولون إن الدافع وراء ذلك هو أنه من السهل هناك ، ما عليك سوى تكرار الطريقة التي تم بها للكيان N ، والآن فقط من أجل M. إلى ضحكة مكتومة من الزملاء يفرون للحصول على دراجة نارية صغيرة و vape بالنسبة لي ، وأنا أقرأ على عجل بعض البرامج التعليمية القصيرة على Angular ، عن طريق نسخ ولصق الحظ ، أنجب بعض الأقسام التي ، مع التحفظات ، يعمل. Timlid راضٍ ، أنا في حالة صدمة ، ويبدو أن المهام على الواجهة الخلفية ظهرت على اللوحة ...
لكن لا. هناك الكثير من الدعم الخلفي ، وهناك بالفعل عدد قليل من المهام لهم ، وحقل غير محروث هو في الجبهة. مهمة جديدة ، بالفعل مباشرة على البوابة ، تجعلني أتعامل مع الأمر بجدية. يسعى الزملاء جاهدين لسرقة سروالي وأخذي إلى صالون حلاقة ، وأغوص لمدة أسبوع في قراءة مواد على Angular و TypeScript و npm و webpack والمزيد. بالمناسبة ، ساعدت المقالة حول Javascript الحديثة للديناصورات - https://habrahabr.ru/company/mailru/blog/340922/ .
بعد مرور بعض الوقت ، تمكنت من إغلاق المهام الأمامية البسيطة ، وأشعر أنني حارس البوابة في غياب خادمة. لا يزال يضحك على النكات حول الواجهة الأمامية ، أقترح أن يجتمع زملاؤنا من أصحاب الظهير الخلفي ويستمعون إلى تجربة فراولة الموز. يضحك الجميع ، ولكن سراً يريد الجميع أن يفهموا نوع الفقاعة التي تحدث في هذه الواجهة الأمامية السريعة (في الواقع ، لا).
دون مزيد من اللغط ، أقوم بإعادة سرد المقالة أعلاه من هبر ، حيث قمت بتتبيلها بمعرفتي الأساسية بالزاوي. Mitap يأتي مع اثارة ضجة ، وبالتالي أقضي سلسلة من هذه - حول الواجهة الأمامية للواجهة الخلفية ، والتي ، مع ذلك ، ليست مهمة للغاية بالنسبة لقصتنا. الشيء الوحيد المهم هو أن تنفيذها قادني إلى دراسة أعمق للمجموعة الحديثة من التقنيات الأمامية.
حكة
في العمل ، تحول كل شيء ، وجاء وقت هادئ إلى حد ما في الحياة الأسرية ، وظهرت الحكة. هذا ، كما تعلمون ، صغير ، لا يزال هشًا للغاية ويعيش في مكان ما على حدود اللاوعي. ويقولون ، إن الأفكار خفتت في رأسي ، قبل ثلاث سنوات ، توقفت تمامًا عن لعب ألعاب هوايتي الخاصة بالبرمجة. ولكن ماذا لو كنت تجمع بين المعرفة الجديدة و؟ ..
نظرت إلى WebGL لفترة طويلة ، لكن في وقت سابق شعرت بالخوف من عدم وجود أي مساعدة (الكتابة ، الإكمال التلقائي) عند استخدامه. وهنا ، رجاءً - رصاصة فضية غير موجودة في الجسد ، نفس المطرقة ، عندما يتم التقاطها ، يصبح كل شيء أظافرًا. نسخة مطبوعة على الآلة الكاتبة.
بالنسبة لي ، باعتباري الشخص الذي يعرف الألم مع الجحيم رد الاتصال ، var الذاتي = هذا ، ربط (هذا) ، غير محدد ليست وظيفة ... لذلك ، بدا لي TypeScript ليس حتى نفسا من الهواء النقي ، ولكن نوع من المعالج على سفينة فضائية زرقاء ، والتي ، تنحدر من السماء ، ألقيتني كسولاً - يا إبن ، انسى كل ما تعرفه عن شبيبة من قبل ، وسأريك مدى عمق حفرة الأرانب. هل التشبيه يبدو فوضويًا وبصورة عامة نوعًا من hodgepodge من القياسات الأخرى؟ صحيح ، مثل TypeScript نفسه في لمحة.
فصول ، واجهات ، والكتابة ، غير المتزامن ، وأخطاء تجميع والأخطاء المطبعية ، واستكمال التعليمات البرمجية ، والعمل دون الدف ، والسلوك مفهومة بدلا من تثبيط يمارس الجنس مع فارق فار. بالطبع ، بعد فترة من الوقت ، أدركت أن الراعي لمعظم هذه السعادة ليس برنامج TypeScript على الإطلاق ، ولكن JavaScript نفسه ، في نسخته الحديثة (ES6 وما فوقها). لكن في تلك اللحظة بدا أنني وجدت نبيًا من شأنه أن يؤدي إلى الواجهة الأمامية إلى مشرق ، شيوعي المستقبل. أضف إلى هذا التقدم الجاد بما فيه الكفاية من IDEs المختلفة في مجال Intellisense ومساعدة المطور ، وربما سوف تفهم فرحة جرو بلدي.
العجز
أول ضربة خطيرة تحت أنفاسي كانت TypeScript نفسها. جعلتني محاولات ربطه بمشروع فارغ جعلني أفهم - لا أستطيع أن أفهم شيئًا غير ملائم خارج الزاوي وعلم الزاوي ، وهو ما يؤدي الكثير من العمل القذر بالنسبة لي. هل أحتاج إلى مترجم؟ حسنًا ، قم بتثبيته في package.json ، قم بتثبيت npm ، وقم بتشغيل tsc و ... لا شيء. آه ، هل تحتاج إلى تثبيته حتى الآن على مستوى العالم؟ بحذف التفاصيل المملة لحربتي مع كل هذه الأشياء ، سأقول أنني في وقت لاحق تعلمت تحويل main.ts إلى main.js. ولكن أمامي كان تدوين مع webpack.
نعم ، الآن أدرك أنه كان من الممكن الاستغناء عنه. ولكن عندما تكون بين يدي Typescript الخرقاء ، يبدو كل شيء من حوله مثل الزاوي. لقد تعلمت بالفعل بعد تنفيذ حزمة الويب أن برنامج التحويل البرمجي لـ TypeScript قادر على "مراقبة" التغييرات في الملفات ، بحيث يمكن حل مشكلة الاستيراد / التصدير بدون حزمة الويب.
التغلب
بعد أسبوع تقريبًا ، تمكنت من إنشاء مشروع كتبت فيه رمز TypeScript ، ثم نقرت فوق "حفظ" ، وظهر كل شيء كما يجب - أعادت حزمة الويب تلقائيًا إعادة تجميع كل ملفاتي في حزمة واحدة ، ثم تشغيل برنامج التحويل البرمجي لـ TypeScript أولاً ، ثم إسقاط الإنشاء إلى مجلد منفصل حيث قمت بنسخ أشياء ثابتة أخرى ، وفي المتصفح في تلك اللحظة ، قام الخادم الخفيف بإعادة تحميل الصفحة. قلت أن كل شيء حدث تلقائيا؟ لا ، حدث كل شيء تلقائيًا . لم يعرف Joy أي حدود ، وجلست لأكتب مطلق النار على الساحة.
من أين يبدأ؟ مسقط الرأس هي اللعبة بالنسبة لي؟ بالطبع ، مع الأشياء الأساسية مثل ناقلات الرياضيات والمصفوفات. لقد نجحت في التغلب على متلازمة "لم يخترع هنا" في العمل ، لكن في الهواية لم تختف. لم أكن أريد مكتبات جاهزة ، لذا جلست لأكتب رياضياتي. لا ، هذا يقال بصوت عالٍ للغاية. لقد فتحت إطار FreePascal السابق ( https://github.com/perfectdaemon/tiny-glr/ ) وبدأت في تحويل الرياضيات من هناك.
بالنظر إلى المستقبل ، سأقول أنه ، بشكل عام ، فإن الإطار الجديد بالكامل هو تحويل القديم من Free Pascal إلى TypeScript. بالنظر إلى أكثر من ثلاث سنوات توقف في تطوير اللعبة ، لم أستطع التوصل إلى بنية أفضل ، أو حتى تذكر ما كانت عليه السلبيات في الماضي.
بعد بعض الوقت ، بدأت في النفاد: الدافع انخفض بشكل طبيعي ، وزيادة عبء العمل. وبعد ذلك أعلن igdc مسابقة أخرى. وصدقوني ، تعتبر المنافسة حافزًا خارجيًا ممتازًا يحدد الحدود المواضيعية والتقنية والوقت.
منافسة
قلت بالفعل في مقالتي الأخيرة ما هو جنون igdc ، لكنني سأكرر هنا باختصار - إنه مجتمع دافئ ومصباح له مسابقات قصيرة أو متوسطة الطول لتطوير ألعاب حول موضوع معين. بدون جوائز نقدية ، والجهات الراعية الشهيرة وضمانات الأمن الوظيفي. أوه نعم ، حتى من دون الإعلان والحماس وبمشاركة تبرع طوعي للاستضافة والمجال. وكذلك لمدة 15 عامًا تقريبًا.
موضوع المنافسة - لعبة القمامة . إعطاء حزمة واسعة ومتنوعة من الموارد الرسومية. مهمة المشاركين هي جعل اللعبة تستخدمها فقط. النوع والموضوع ليسا محددين ، ويسمح باستخدام أي أصوات وموسيقى ، لأن الرسومات هي فقط في الحزمة. هناك قيود فنية تاريخية مرتبطة بالبدء في وضع عدم الاتصال بشكل صارم ، بدون أدوات التثبيت والتنزيل والمزيد.
المشكلة الأخيرة مشكلة صغيرة ، لأن Chrome والشركة تحظران الكثير من الأشياء عندما يفتح المستخدم ملف html محليًا. قد لا يتم تشغيل WebGL ، ولن ترغب النصوص البرمجية في سحبها ، ناهيك عن الموارد الرسومية. هناك طريقة للخروج - نحن نصنع خادم ويب محليًا صغيرًا للغاية ونصًا لبدء التشغيل للمستخدم الذي سوف يستلمه ويفتح متصفح المستخدم المفضل على العنوان المطلوب.
المهمة بسيطة ، حصلت على إكس 6 كيلوبايت في C # واللقب الخفافيش في مكان قريب ، والذي يحدد المجلد الجذر للخادم والمنفذ.
ولكن ، هذا يكفي لإعاقة هذا الهدف الكبير والنظيف - كتابة لعبة للمنافسة.
لعبة المنافسة
بالنظر إلى الموارد ، أدركت أن مطلق النار على الساحة مع استخدامها سيتبين أنه قوي.
بعد أن أكملت الأشياء الأساسية ، انتقلت إلى اختيار الموارد التي أحتاجها. تشريح النهائي في شكل أطلس نسيج يشبه هذا:
بالمناسبة ، بعض الأشياء المخبوزة على الأطلس لم تستخدم قط في اللعبة. بعد تحميل الموارد ، بدأتُ وظيفية جديدة بنفسي - الرسوم المتحركة المتحركة. كنت سعيدًا كطفل عندما ظهر كل شيء:
الفيزياء الخاصة
إن ربط فيزياء الآخرين بالرغبة الجامحة في اختراع كل ما عندي بدا تجديديًا على الأقل ، ويبدو لي أنه لم يكن حتى من قبل كائن حي متحمس (لقد هزمت الرسوم المتحركة العفريت فقط ، تذكر؟). أيضًا ، ما الذي قد يكون من الصعب في معالجة التصادم البسيطة استنادًا إلى المستطيلات (المربع المحيط المحاذي للمحور ، AABB) والدوائر؟ الكثير من الأشياء. ابدأ من الحصول على شخصية عالقة في الزوايا غير المرئية وتنتهي بحقيقة أنك تجلب جميع الكائنات في عالمك إلى مستطيلات ودوائر.
لم يكن من الممكن حل جميع المشاكل ، ولكن ظهرت بعض الفيزياء:
الأصوات
تكهن المتوقع أن يكون صعبا. في الواقع ، اتضح بطريقة أو بأخرى بسيطة وفعالة بشكل مثير للريبة. لقد أنشأنا سياقًا صوتيًا ، وقمنا بإنشاء مخزن مؤقت للصوت ، ووضع الموسيقى / الأصوات هناك بأي تنسيق مقبول للمتصفح (اعتدت wav) ، وقمنا بإنشاء عقدة وقلنا أي مخزن مؤقت لنقوم بتشغيله.
الأصوات التي أنشأتها باستخدام bfxr ( https://www.bfxr.net/ ).
كاكي
العكازات ، والقرارات المخصصة ، podhachivaniya - من الصعب العثور على شخص لا يعرف هذه الكلمات إلا من خلال الإشاعات. بحلول نهاية المسابقة ، قمت بإدخال بضع نسخ احتياطية بارزة.
لم يكن هناك إخراج النص - تستخدم لغة تأشير النص الفائق
بحلول نهاية المسابقة ، أصبح من الواضح أنه لن يكون لدي وقت لنقل عرض النص إلى المحرك. حتى بدون مولد. كان هناك العديد من الخيارات ، إليك أربعة خيارات رئيسية:
- تقديم نص على قماش ثنائي الأبعاد شفاف يقع أعلى اللوحة القماشية باستخدام WebGL.
- اصنع لعبة بدون نص
- خبز الكلمات اللازمة واستخدامها كعفاريت
- هود الإخراج في هتمل
وفقًا لشروط المسابقة ، كان من الممكن استخدام خط البيكسل المخصص فقط ، لذلك تم إسقاط الخيار الأول (تقديم النص على لوحة ثنائية الأبعاد). يمكن تقديم قماش باستخدام خطوط النظام فقط. الخطوط المحملة في المغلق عبر fontface تعمل بشكل غير مستقر للغاية.
اللعب بدون نص هو خيار رائع ومبدع. إنه لأمر مؤسف أنه مع الإبداع في تلك اللحظة كنت أشعر بالفعل سيئة.
الحد الأدنى المطلوب من المفردات كبير وتضخم حجم الأصول. بالإضافة إلى ذلك ، لا يزال عرض الأرقام يتطلب منطقًا معينًا.
وأخيراً ، وصلنا إلى العكاز الحقيقي ، الذي استخدمته - لقد قمت للتو بتطبيق HUD كعلامة html تحت اللوحة القماشية ، وربطfontface بـ css ، ونظمت التحديث من خلال DOM API القياسي (getElementById).
إعادة تشغيل اللعبة - document.location.reload ()
عندما يموت لاعب ، يريد إغلاق اللعبة أو بدء تشغيلها مرة أخرى. لسوء الحظ ، إذا لم تقم بتوفير بعض آليات إعادة التشغيل منذ البداية وتلطخ حالة اللعبة بأكملها في مجموعة من الفصول سيئة التنظيم ، فلن تحصل على أي إعادة تشغيل لطيفة. سيكون هناك دائمًا مكان سحري لم تتم إعادة تعيينه إلى الصفر.
وكان عكاز ممتازة في هذه الحالة إعادة تحميل صفحة عادي من خلال رأس document.location.reload () المذكورة في الرأس. نظرًا لصغر حجم الإنشاء النهائي (أقل من 300 كيلو بايت ، بما في ذلك جميع الموارد) وحقيقة أن اللعبة تعمل محليًا ، يمكن إهمال سرعة إعادة التشغيل.
ماذا حدث
يمكنك تجربتها على الإنترنت هنا: https://perfectdaemon.imtqy.com/151/index.html
رابط إلى المستودع: https://github.com/perfectdaemon/ts-game
نسخة مستودع التخزين مع الكود المصدري لهذه اللعبة: https://github.com/perfectdaemon/ts-game/releases/tag/0.1.0
الاستنتاج هو نهاية سعيدة.
في الختام ، أود أن أوجز بإيجاز إيجابيات وسلبيات ذاتية لكتابة الألعاب على WebGL + TypeScript.
الأشياء الجيدة
- اكتب مرة واحدة ، لعب / تصحيح في كل مكان. من الرائع أن أتمكن من وضع اللعبة على imtqy.com ، ويمكن لأي شخص تشغيلها من أي جهاز باستخدام مستعرض. بطبيعة الحال مع عدد من التحفظات.
- بعد إعدادات معينة وإضافة TypeScript ، فإن العمل مع JS الحديثة ليس سيئًا للغاية.
- ملائم لإنشاء السياق (مقارنة بـ Win API و OpenGL)
- هناك أداة ملائمة (Visual Studio Code) ، وهي مجهزة جيدًا بالمكونات الإضافية وتساعد حقًا في كتابة التعليمات البرمجية من خلال النصائح والمقتطفات والملاحظات حول مناطق المشكلات.
سلبيات
- جافا سكريبت يعمل في موضوع واحد. والمشكلة ليست حتى أنك تريد النظر في الفيزياء أو المنطق في تيارات منفصلة. أظهر التوصيف أن مكالمات WebGL تمنع ، أي ينتظرون عنصر التحكم للعودة من برنامج تشغيل بطاقة الفيديو قبل متابعة تنفيذ التعليمات البرمجية بشكل أكبر. على الرغم من أن معظم مكالمات WebGL لا تُرجع إلا الفراغ. تقوم تطبيقات OpenGL لسطح المكتب (في بعض برامج التشغيل) للعديد من الوظائف بإرجاع التحكم على الفور ، مما يزيد بشكل كبير من سرعة التجسيد.
- خطوة صغيرة يسار / يمين - وأنت وحدك تمامًا. تواجه مشكلة مع الزاوي و Typescript؟ أول اثنين من الروابط لتكدس الفائض سوف تساعدك. كانت هناك رغبة في تكوين صداقات مع Typescript بشكل منفصل ونشأ خطأ / سؤال غريب؟ الاستعداد لحقيقة أنك قد تكون وحيدا. بالطبع ، باعتباري شخصًا كتب سابقًا على المكدس الشائع جدًا لـ (FreePascal + OpenGL) ، اعتدت على ذلك. ولكن في حالة اللغة الناضجة مثل C ++ ، سيكون هناك دائمًا هندي حل بالفعل مثل هذه المشكلة. ثم الصينيين ، الذين قاموا بحلها باستخدام وحدة التحكم من Guitar Hero و Arduino.