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

جعل سبلاش مع تأثيرات مائية ديناميكية 2D

by
Difficulty:IntermediateLength:LongLanguages:

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

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



ملاحظة: على الرغم من كتابة هذا البرنامج التعليمي باستخدام C و XNA ، يجب أن تكون قادرًا على استخدام نفس الأساليب والمفاهيم في أي بيئة تطوير ألعاب.


معاينة النتيجة النهائية

إذا كان لديك XNA ، يمكنك تنزيل الملفات المصدر وتجميع العرض التوضيحي بنفسك. بخلاف ذلك ، تحقق من الفيديو التوضيحي أدناه:

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


صنع الأمواج

ولصنع الأمواج ، سنقوم بتصوير سطح الماء كسلسلة من الينابيع الرأسية ، كما هو موضح في هذا المخطط:

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

الينابيع وقانون هوكي

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

القوة التي يوفرها الربيع منصوص عليها في قانون هوك:

\[
F = -kx
\]

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

ثابت الربيع ، k ، يحدد صلابة الربيع.

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

\[
F = ma
\]

هنا ، F هي القوة ، m هي الكتلة و التسارa. وهذا يعني أن القوة تدفع بقوة إلى الجسم ، وأخف الجسم ، كلما تسارعت.

الجمع بين هذين الصيغتين وإعادة الترتيب يعطينا:

\[
a = -\frac{k}{m} x
\]

هذا يعطينا التسارع لجزيئاتنا. سنفترض أن جميع جسيماتنا ستكون لها نفس الكتلة ، لذا يمكننا دمج k/m في ثابت واحد.

لتحديد الموقف من التسارع ، نحن بحاجة إلى تحقيق التكامل العددي. سنستخدم أبسط أشكال التكامل العددي - كل إطار نقوم ببساطة بعمل ما يلي:

وهذا ما يسمى طريقة أويلر. إنه ليس النوع الأكثر دقة للتكامل العددي ، ولكنه سريع وبسيط وملائم لأغراضنا.

بوضع كل ذلك معًا ، ستقوم جسيمات سطح الماء لدينا بتنفيذ كل إطار:

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

التوتر والتلطيف

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

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

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

\[
a = -\frac{k}{m} x - dv
\]

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

جعل الأمواج تنتشر

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

سأعرض التعليمة البرمجية أولاً ، ثم أطلع عليها:

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

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

هناك قيمة واحدة قابلة للتعديل هنا تسمى Spread. يتحكم في مدى سرعة انتشار الموجات. يمكن أن يأخذ القيم بين 0 و 0.5 ، مع قيم أكبر مما يجعل الأمواج تنتشر بشكل أسرع.

لبدء حركة الأمواج ، سنقوم بإضافة طريقة بسيطة تسمى Splash().

في أي وقت تريد فيه جعل موجات ، اتصل بـ Splash(). تحدد معلمة الفهرس في أي الربيع يجب أن تنشأ البداية ، وتحدد معلمة السرعة مدى حجم الموجات.

طريقة العزف

سنستخدم فئة XNA PrimitiveBatch من XNA PrimitivesSample. تساعدنا فئة PrimitiveBatch على رسم الخطوط والمثلثات مباشرة مع وحدة معالجة الرسوميات GPU. كنت تستخدم ذلك مثل:

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

ليس من الضروري أن يكون هناك ربيع لكل بكسل للعرض. في العرض التجريبي استخدمت 201 زنبركاً منتشرة عبر نافذة بعرض 800 بكسل. هذا يعطي 4 بيكسلات بالضبط بين كل ربيع ، مع أول ربيع عند 0 والأخير عند 800 بكسل. ربما يمكنك استخدام عدد أقل من الينابيع ولا تزال تبدو المياه على نحو سلس.

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

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

وهنا النتيجة:


صنع البقع

تبدو الأمواج جيدة ، لكنني أرغب في رؤية النبضة عندما تصطدم الصخور بالماء. آثار الجسيمات هي مثالية لهذا.

آثار الجسيمات

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

أول شيء نحتاجه هو طبقة الجسيمات لدينا:

هذه الفئة تحمل فقط الخصائص التي يمكن أن تحتويها الجسيمات. بعد ذلك ، نخلق قائمة من الجسيمات.

كل إطار ، يجب علينا تحديث ورسم الجسيمات.

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

أدناه هو نسيج كنت تستخدم للجسيمات.

الآن ، كلما أنشأنا لطخة ، نجعل حفنة من الجسيمات.

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

(إرجاع GetRandomVector2 (40 متجه مع اتجاه عشوائي وطول عشوائي بين 0 و 40. نريد إضافة القليل من العشوائية إلى المواضع بحيث لا تظهر كل الجسيمات في نقطة واحدة. FromPolar() إرجاع Vector2 مع اتجاه محدد وطول.

وهنا النتيجة:

استخدام Metaballs كما الجسيمات

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

تبدو Metaballs شبيهة بالسوائل بالطريقة التي تندمج فيها مع بعضها البعض ، مما يجعلها مباراة جيدة للبقع السائلة. لجعل metaballs ، سنحتاج إلى إضافة متغيرات فئة جديدة:

التي نبدأ بها مثل:

ثم نستخلص metaballs:

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

إليك ما يبدو عليه:

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

قم بإضافة التعليمة البرمجية التالية إلى الأسلوب أعلاه قبل السطر GraphicsDevice.SetRendertarget (خالية):

الآن سوف تندمج الجسيمات مع سطح الماء.

مضيفا تأثير الميل

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

للقيام بذلك ، نريد التقاط جسيمات metaball في هدف تقديم جديد. سنقوم بعد ذلك برسم ذلك الهدف مرة واحدة لكل لون.

أولاً ، أعلن عن RenderTarget2D جديد تمامًا كما فعلنا في metaballs:

ثم ، بدلاً من رسم metaballsTarget مباشرةً إلى backbuffer ، نريد أن نرسمه على particlesTarget. للقيام بذلك ، انتقل إلى الطريقة التي نرسم بها metaballs وقم ببساطة بتغيير هذه السطور:

...إلى:

ثم استخدم التعليمة البرمجية التالية لرسم الجسيمات ثلاث مرات بصبغات وتغييرات مختلفة:


خاتمة

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

لجعل العرض التجريبي يبدو أجمل قليلاً ، ذهبت إلى opengameart.org وجدت صورة للصخرة وخلفية السماء. يمكنك العثور على الصخور والسماء على http://opengameart.org/content/rocks و opengameart.org/content/sky-backdrop على التوالي.

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.