Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Game Art Effects
Gamedevelopment

كيفية توليد تأثيرات ضوئية جيدة 2D البرق في الوحدة (JavaScript)

by
Difficulty:IntermediateLength:LongLanguages:

Arabic (العربية/عربي) translation by Dzu Al-Faqqar (you can also view the original English article)

هناك الكثير من الاستخدامات لتأثيرات البرق في الألعاب ، من الأجواء الخلفية أثناء العاصفة إلى هجمات البرق المدمرة للساحر. في هذا البرنامج التعليمي ، سأشرح كيفية إنشاء تأثيرات البرق الباهرة 2D بشكل برمجي: البراغي ، والفروع ، وحتى النص.

هذا البرنامج التعليمي مكتوب خصيصًا لـ Unity ، مع كل مقتطفات الشفرة في JavaScript. نفس البرنامج التعليمي متاح أيضًا مع كود C. إذا كنت لا تستخدم Unity ، فقم بإلقاء نظرة على هذا الإصدار بدون تعريفات من نفس البرنامج التعليمي ؛ هو مكتوب ل XNA ، ولكن يجب أن تكون قادرا على استخدام نفس التقنيات والمفاهيم في أي محرك gamedev ومنصة.

عرض

تحقق من العرض التوضيحي أدناه:

انقر على كائن الوحدة ، ثم استخدم مفاتيح الأرقام للتبديل بين العروض التوضيحية. تتطلب بعض العروض التوضيحية النقر في موقع واحد أو موقعين لتنشيطهم.

الإعداد الأساسي

للبدء ، ستحتاج إلى إنشاء مشروع ثنائي الأبعاد جديد في Unity. سمها ما شئت. في Unity ، أنشئ أربعة مجلدات: Materials ، Prefabs ، Scripts ، و Sprites.

بعد ذلك ، انقر فوق الكاميرا الرئيسية وتأكد من تعيين Projection الخاص بها إلى Orthographic. اضبط حجم الكاميرا على 10.

انقر بالزر الأيمن على المجلد المواد وحدد إنشاء > مواد. أعد تسميته إلى مضافة. قم بتحديد هذه المواد وتغيير تظليل للجسيمات > المضافة. هذا سوف يساعد الخاص بك البرق "بوب" في وقت لاحق.

الخطوة 1: رسم خط متوهجة

كتلة الإنشاء الأساسية ونحن بحاجة إلى جعل البرق من خط مستقيم. ابدأ بفتح المفضلة صورة برامج تحرير ورسم خط مستقيم من البرق مع تأثير توهج. هنا هو ما يشبه الألغام:

أننا نريد لرسم خطوط ذات أطوال مختلفة، حيث أننا سوف يقتطع قطعة خط ثلاث قطع كما هو مبين أدناه (اقتصاص الصورة الخاصة بك حسب الضرورة). وهذا سيتيح لنا على امتداد الجزء الأوسط لأي طول نحب. نظراً لأننا نريد أن تمتد في الجزء الأوسط، نحن حفظه فقط بكسل واحدة سميكة. أيضا، كما قطع اليمين واليسار صور مرآة لبعضها البعض، نحن بحاجة فقط لإنقاذ واحد منهم؛ نحن انعكاس ذلك في التعليمات البرمجية.

اسحب ملفات الصور الخاصة بك إلى مجلد العفاريت في لوحة المشروع. هذا سوف استيراد ملفات الصور إلى مشروع الوحدة. انقر فوق العفاريت عرضها في لوحة التفتيش. تأكد من تعيين "نوع النسيج" إلى (Sprite(2D \ uGUI، وتعيين "العلامة التعبئة" للخط.

العلامة التعبئة سوف تساعد الوحدة حفظ رسم المكالمات عند رسم لنا البرق، ولذلك تأكد من يمكنك إعطاء كل العفاريت نفس "العلامة التعبئة"، وأﻻ فإنها لن تحسن الأداء.

الآن، دعنا بتعريف فئة جديدة للتعامل مع أجزاء خط الرسم:

A و B هي النهاية للخط. بالقياس وتدوير قطعة الخط، ونحن رسم خط أي سمك وطول، واتجاه.

أضف الأسلوب التالي ()Draw إلى الجزء السفلي من LIneJS لينيجس:


الطريقة التي يمكننا وضع الجزء الأوسط والقبعات سيجعل منهم الانضمام بسلاسة عندما نوجه لهم. وضع الغطاء ابدأ عند النقطة أ، يتم تمدد الجزء الأوسط إلى العرض الذي تريده، ونهاية سقف استدارة 180 درجة ورسمها في النقطة باء

الآن نحن بحاجة إلى خلق الجاهزة للصف لينيجس للعمل مع. في الوحدة، من القائمة، حدد جاميوبجيكت > "إنشاء فارغة". وسوف يظهر الكائن في لوحة التسلسل الهرمي الخاص بك. تسميته إلى LineJS واسحب البرنامج النصي لينيجس على ذلك. ينبغي أن ننظر شيئا مثل الصورة أدناه.

سنستخدم هذا الكائن كحاوية لقطعة من لدينا خط مستقيم.

الآن نحن بحاجة لإنشاء كائنات لقطعة من لدينا خط مستقيم. إنشاء العفاريت الثلاثة عن طريق تحديد جاميوبجيكت > إنشاء أخرى > العفريت من القائمة. أعد تسميتها إلى StartCap ، الشريحة المتوسطة ، ونهاية النهاية. اسحبها إلى كائن LineJS بحيث تصبح أطفالها - يجب أن يبدو هذا مثل الصورة أدناه.

تذهب من خلال كل طفل وموادها في "العارض العفريت" للمواد المضافة التي أنشأنا في وقت سابق. قم بتعيين كل طفل العفريت المناسبة. (قبعات اثنين يجب أن تحصل على العفريت كاب ويجب أن تحصل على الجزء الأوسط العفريت خط).

انقر فوق الكائن لينيجس حيث يمكنك أن ترى البرنامج النصي في لوحة التفتيش. تعيين الأطفال إلى فتحاتها المناسبة وثم اسحب الكائن لينيجس إلى المجلد بريفابس لإنشاء الجاهزة لذلك. يمكنك الآن حذف الكائن لينيجس من لوحة التسلسل الهرمي.

الخطوة 2: إنشاء الخطوط المتعرجة

البرق يميل إلى تشكيل الخطوط المتعرجة، حيث أننا سنحتاج خوارزمية لتوليد هذه. سوف نقوم بذلك باختيار النقاط بشكل عشوائي على طول خط، وتشريد لهم عشوائي بعيداً عن الخط.

استخدام إزاحة عشوائية تماما يميل إلى جعل الخط خشنة جداً، حيث أننا سوف سلسة النتائج عن طريق الحد من مدى أبعد من كل النقاط الأخرى المجاورة يمكن أن المشردين-انظر الفرق بين الأسطر الثاني والثالث في الشكل أدناه.

ونحن على نحو سلس السطر بوضع النقاط عند إزاحة مشابهة للنقطة السابقة؛ يسمح هذا السطر ككل يهيم صعودا وهبوطاً، مع منع أي جزء منه من يجري خشنة جداً.

دعونا إنشاء فئة LightningBoltJS للتعامل مع إنشاء خطوطنا الخشنة.

قد تبدو الشفرة مرعبة بعض الشيء ، ولكنها ليست سيئة للغاية بمجرد فهمك للمنطق. قبل أن نستمر في العمل ، نفهم أننا قد اخترنا تجميع أجزاء الخط في البراغي (حيث أن عملية إنشاء وتدمير الأشياء باستمرار يمكن أن تكون مكلفة في الوحدة).

  • سوف يطلق مرة واحدة على كل صاعقة الدالة ()Initialize وسوف تحدد كم عدد أجزاء الخط كل الترباس هو السماح باستخدام.
  • سيتم تنشيط وظيفة ()activateLine خط مستقيم باستخدام بيانات موقف معين.
  • سيتم إلغاء تنشيط وظيفة ()DeactivateSegments أي أجزاء الخط النشط في أعمالنا الترباس.
  • الدالة ()ActivateBolt سوف تتعامل مع خلق لدينا خطوط خشنة وسيتم استدعاء الدالة ()activateLine لتنشيط جهودنا أجزاء الخط في المواقف المناسبة.

لإنشاء لدينا خطوط خشنة، نبدأ بالحوسبة المنحدر بين لدينا نقطتين، فضلا عن ناقلات الأمراض العادية إلى هذا المنحدر. نحن ثم اختر عدد من مواقع عشوائية على طول الخط وتخزينها في قائمة المواقع لدينا. نحن تحجيم هذه المواقف بين 0 و 1، 0 يمثل بداية السطر ويمثل 1 بنقطة النهاية.، ثم قم بفرز هذه المواقف للسماح لنا بسهولة إضافة أجزاء الخط بينهما.

تمر الحلقة عبر النقاط المختارة عشوائياً وتزيحها بطول المعتاد بمقدار عشوائي. عامل المقياس موجود لتجنب الزوايا الحادة بشكل مفرط ، ويضمن الشريح أن البرق ينتقل فعليًا إلى نقطة الوصول عن طريق الحد من النزوح عندما نكون قريبين من النهاية. الفارق هو المساعدة في التحكم في مدى انحراف القطاعات عن ميل خطنا ؛ سيعطيك انتشار 0 بشكل أساسي خطًا مستقيمًا.

لذا ، كما فعلنا مع صف LineJS لدينا ، دعونا نجعل ذلك في مكان مسبق. من القائمة ، حدد GameObject> Create Empty. سيظهر الكائن في لوحة التسلسل الهرمي. قم بإعادة تسميته إلى BoltJS ، واسحب نسخة من البرنامج النصي LightningBoltJS عليه. وأخيرًا ، انقر فوق كائن BoltJS وقم بتعيين الخاصية الخطية لـ LineJS ، من مجلد Prefabs ، إلى الفتحة المناسبة في البرنامج النصي LightningBoltJS. بمجرد الانتهاء من ذلك ، قم ببساطة بسحب كائن BoltJS إلى مجلد Prefabs لإنشاء تهيئة مسبقة.

الخطوة 3: إضافة الرسوم المتحركة

يجب أن تضيء البرق بسرعة ثم تتلاشى. هذا هو ما لدينا وظائف التحديث() ورسم() في LightningBoltJS هي ل. استدعاء ()update سيجعل الترباس تتلاشى. استدعاء ()Draw سيتم تحديث الألوان الترباس على الشاشة. ()IsComplete وسوف أقول لكم عندما الترباس قد تﻻشى تماما.

الخطوة 4: إنشاء الترباس

والآن بعد أن حصلنا على فصل LightningBoltJS ، دعنا نستخدمه جيدًا وننشئ مشهدًا تجريبيًا سريعًا.

سنستخدم تجمع عناصر لهذا العرض التوضيحي ، لذا سنرغب في إنشاء كائن فارغ لاستيعاب مسامير التثبيت النشطة وغير النشطة الخاصة بنا (ببساطة لأغراض تنظيمية). في Unity ، من القائمة ، حدد GameObject > Create Empty. سيظهر الكائن في لوحة التسلسل الهرمي. قم بإعادة تسميته إلى LightningPoolHolder.

انقر على الحق في مجلد البرامج النصية، وحدد إنشاء > جافا سكريبت. اسم البرنامج النصي الخاص بك ديموسكريبتجس وفتحه. وإليك بعض التعليمات البرمجية سريعة للحصول على أنك بدأته:

كل هذه التعليمات البرمجية تعطينا طريقة لإنشاء مسامير باستخدام تجميع الكائنات. هناك طرق أخرى يمكنك إعدادها ، لكن هذا ما سنقوم به! بمجرد إعداده ، كل ما عليك فعله هو النقر مرتين لإنشاء مسمار على الشاشة: مرة واحدة لوضع البداية ومرة واحدة لموضع النهاية.

سنحتاج إلى كائن لوضع DemoScriptJS على. من القائمة ، حدد GameObject > Create Empty. سيظهر الكائن في لوحة التسلسل الهرمي. قم بإعادة تسميته إلى DemoScript واسحب البرنامج النصي DemoScriptJS إليه. انقر على كائن DemoScript حتى نتمكن من مشاهدته في لوحة المفتش. قم بتعيين البنية الجاهزة BoltJS ، من مجلد Prefabs ، إلى الفتحة المطابقة في DemoScriptJS.

ينبغي أن يكون كافياً تحصل على الذهاب! تشغيل المشهد في الوحدة وجربة!

الخطوة 5: إنشاء فرع البرق

يمكنك استخدام فئة LightningBoltJS ككتلة بناء لخلق تأثيرات البرق أكثر إثارة للاهتمام. على سبيل المثال ، يمكنك جعل البراغي تتفرع كما هو موضح أدناه:

لجعل فرع البرق ، نختار نقاطًا عشوائية على طول صاعقة البرق وإضافة مسامير جديدة تتفرع من هذه النقاط. في الشفرة أدناه ، نقوم بإنشاء ما بين ثلاثة وستة فروع منفصلة عن البرغي الرئيسي بزاوية 30 درجة.

يعمل هذا الرمز بشكل مشابه جدًا لفئة LightningBoltJS الخاصة بنا باستثناء أنه لا يستخدم تجميع الكائنات. ()Calling Initialize هو كل ما ستحتاج إلى القيام به لإنشاء أداة ربط متفرعة؛ بعد ذلك ، ستحتاج فقط إلى استدعاء ()Update ورسم (). سأوضح لك بالضبط كيفية القيام بذلك في DemoScriptJS في وقت لاحق في البرنامج التعليمي.

ربما لاحظتم أن الإشارة إلى دالة GetPoint() في فئة لايتنينجبولتجس. نحن لم تكن قد نفذت فعلا تلك الوظيفة حتى الآن، لذلك دعونا تأخذ الرعاية من ذلك الآن.

إضافة الدالة التالية في الجزء السفلي من فئة LightningBoltJS:

الخطوة 6: إنشاء نص البرق

أدناه هو شريط فيديو لتأثير آخر يمكنك أن تجعل من البراغي البرق:

سوف نحتاج إلى القيام بإعداد أكبر قليلاً لهذا واحد. أولاً، من فريق المشروع، حدد إنشاء > رينديرتيكستوري. إعادة تسمية RenderText وتعيين حجمه إلى 256 × 256 بكسل. (لا يجب بالضرورة أن يكون هذا الحجم بالضبط ، ولكن كلما كان أصغر ، كلما زادت سرعة تشغيل البرنامج).

من القائمة، حدد تحرير > إعدادات المشروع > العلامات والطبقات. ثم، في لوحة المفتش، قم بتوسيع قطره الطبقات الأسفل، وإضافة نص إلى 8 طبقة المستخدم.

ثم سوف نحتاج إلى إنشاء كاميرا ثانية. من القائمة، حدد جاميوبجيكت > إنشاء أخرى > الكاميرا. تسميته إلى تيكستكاميرا، وتعيين الإسقاط العامودي وبه "إشارات واضحة" إلى "لون خالص". تعيين لون الخلفية في أن (r: 0, g: 0، ب: 0، ج: 0) وتعيين "قناعها إعدام" إلا أن النص (الطبقة أنشأنا فقط). وأخيراً، تعيين في "النسيج المستهدف" إلى رينديرتيكست (رينديرتيكستوري أنشأنا في وقت سابق). سوف تحتاج على الأرجح للعب حولها مع حجم الكاميرا في وقت لاحق، من أجل الحصول على كل شيء لاحتواء على الشاشة.

الآن سوف نحتاج إلى إنشاء النص الفعلي بأننا سوف يكون الرسم مع لدينا البرق. من القائمة، حدد جاميوبجيكت > إنشاء أخرى > نص واجهة المستخدم الرسومية. حدد الكائن النص واجهة المستخدم الرسومية من التسلسل الهرمي للفريق وتعيين النص إلى البرق والربط به إلى مركز الوسط، وانحيازها مركز. ثم عين في الطبقة على طبقة النص أنشأنا في وقت سابق. ربما عليك أن تلعب حولها مع "حجم الخط" من أجل احتواء النص على الشاشة.

الآن حدد الكاميرا الرئيسية وقم بتعيين Culling Mask ليكون كل شيء ما عدا طبقة Text الخاصة بنا. سيؤدي ذلك إلى اختفاء نص GUI الخاص بنا من الشاشة ، ولكن يجب رسمه على RenderTexture الذي أنشأناه في وقت سابق: اختر RenderText من لوحة Project ، وستتمكن من رؤية كلمة LIGHTNING في المعاينة في أسفل اللوحة .

إذا لم تستطع رؤية كلمة LIGHTNING ، فستحتاج إلى اللعب مع تحديد الموضع وحجم الخط وحجم الكاميرا (النص). لمساعدتك في تحديد موضع النص ، انقر فوق TextCamera في لوحة التسلسل الهرمي ، وقم بتعي Target Texture على None. ستتمكن الآن قادرة على مشاهدة نص واجهة المستخدم الرسومية الخاصة بك إذا أنها مركز على تيكستكاميرا. وبمجرد الانتهاء من كل شيء المتمركزة، تعيين "مادة الهدف" تيكستكاميرا العودة إلى رينديرتيكست.

الآن بالنسبة للتعليمات البرمجية! سوف نحتاج إلى الحصول على بكسل من النص الذي نحن الرسم. يمكننا أن نفعل هذا بالرسم نصنا إلى رينديرتارجيت وقراءة البيانات بكسل مرة أخرى في aTexture2D مع ()Texture2D.ReadPixels ثم ، يمكننا تخزين إحداثيات البكسل من النص كقائمة. List.Vector2

هنا هو رمز للقيام بذلك:

ملاحظة: سيكون لدينا لتشغيل هذه الوظيفة كورتني في بداية برنامجنا من أجل تعمل بشكل صحيح.

بعد ذلك ، كل إطار ، يمكننا اختيار أزواج من هذه النقاط عشوائياً وإنشاء صاعقة بينهما. نحن نريد تصميمه بحيث تكون نقطتين أقرب إلى بعضهما البعض ، كلما كانت الفرصة أكبر هو أن نوجد مسمارًا بينهما.

هناك تقنية بسيطة يمكننا استخدامها لتحقيق ذلك: سنختار النقطة الأولى بشكل عشوائي ، ثم سنختار عددًا ثابتًا من النقاط الأخرى عشوائيًا ونختار الأقرب.

إليك رمز ذلك (سنقوم بإضافته إلى DemoScriptJS لاحقًا):

سيؤثر عدد نقاط الترشيح التي نختبرها على مظهر النص البرق ؛ إن التحقق من عدد أكبر من النقاط سيسمح لنا بالبحث عن نقاط قريبة جداً لربط البراغي ، مما سيجعل النص أنيقًا ومقروءًا ، ولكن مع عدد أقل من البراغي الطويلة بين الحروف. ستجعل الأرقام الأصغر حجم النص الباهر أكثر وضوحًا ولكن أقل وضوحًا.

الخطوة 7: حاول اختلافات أخرى

لقد ناقشنا إنشاء فرع من البرق والنص البرق ، ولكن هذه بالتأكيد ليست التأثيرات الوحيدة التي يمكنك القيام بها. دعونا ننظر إلى بعض الاختلافات الأخرى على البرق قد ترغب في استخدامها.

تتحرك البرق

قد ترغب في كثير من الأحيان في صنع مسمار صاعق. يمكنك القيام بذلك عن طريق إضافة مسمار قصير جديد لكل إطار في نقطة نهاية مسمار الإطار السابق.

انفجار البرق

يقدم هذا الاختلاف تأثيرًا كبيرًا يطلق البرق في دائرة من نقطة المركز:

خطوة 8: وضع كل ذلك معا في ديموسكريبتجس

ستحتاج إلى أن تكون قادرًا على تجربة جميع هذه التأثيرات الرائعة التي أنشأناها حتى الآن ، لذلك دعونا نضعها جميعًا في DemoScriptJS التي قمنا بها في وقت سابق. ستتمكن من التبديل بين التأثيرات من خلال ضرب مفاتيح الأرقام على لوحة المفاتيح الخاصة بك لتحديد التأثير ، ثم النقر مرتين مثلما فعلنا مع البراغي السابقة.

هنا هو رمز كامل:

الاستنتاج

البرق هو تأثير خاص كبير لتجميع الألعاب الخاصة بك. تعتبر التأثيرات الموضحة في هذا البرنامج التعليمي نقطة بداية جيدة ، ولكنها بالتأكيد ليست كل ما يمكنك القيام به مع البرق. مع قليل من الخيال يمكنك أن تجعل جميع أنواع تأثيرات البرق المذهلة! قم بتنزيل شفرة المصدر وقم بتجربتها بنفسك.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.