باختلاف عوالم الألعاب بين الخيالي والواقعي، الحديث والقديم، او حتي الفضائي والارضي، فلابد أن أحداثها تقع في مكان ما، أو لنقل بيئه ما، وهذه البيئة منها ما قد يكون داخل منشأ ما او خارجه، وهذه التي تقع خارجه تتكون من العديد من العناصر كالسماء، الأشجار، أو الأعشاب.
فإذا سبق وشاهدت إحدى المناظر الطبيعيه لابد انك لاحظت هذه العناصر بنسبة كبيرة، وخصوصا العشب، والذي يكاد يكون كأنه العنصر الخاص بملء الفراغ على الأرض.
فإذا كانت لعبتك تتضمن بيئه تكسوها الأعشاب، فبالتأكيد مجرد وضعها متحجرة هكذا غير واقعي على الإطلاق وممل، ولابد من إعطائه بعض الحركة لإضفاء الحيوية لبيئة لعبتك.
و قد يتبادر لذهنك طريقتان لتنفيذ هذا، إحداهما هي إنشاء رسوم متحركة لقطة بلقطة خاصة بالعشب، والتي تكلفك الكثير من الوقت أو بإعطاء الاشكال هيكلا عظميا خاصا ومن ثم تحريكه كما الأمر في الحركة ثلاثية الأبعاد، والتي تتطلب وقتا أقل من سابقتها.
لكن هناك طريقة ربما رأيتها صدفة مسبقا ولم تعرها اهتماما، وهي تحريك العشب بازاحة الرؤوس نفسها، والتي من بين باقي الطرق تتطلب أقل وقت ممكن، ولهذا ستقوم بتطبيقها الآن في محرك يونتي، وفكرة عملها كالتالي.
عناصر المقال
فكرة العمل
قبل أن نبدأ بالفعل بانشاء الشيدر الخاص بالعشب، لابد ان تعرف اولا مبدأ أساسيا فيه، وهو ما يدعي بازاحة الرؤوس – Vertex Displacement.
كما تعرف مسبقا، اي مجسم ثلاثي الأبعاد يتكون من مجموعة من الرؤوس، وهي التي تحركها من خلال الشيدر نفسه، ولهذا إن أخذنا في الاعتبار ورقة عشب واحدة، واردنا تبسيطها لتصبح مثل الصورة، فيمكنك ان ترى أنها تتكون من 3 رؤوس كأنه هيكل خاص بها، وبتحريك هذا الهيكل تتحرك الورقة تبعا له.
لذا فمن البديهي أنه إذا أردت تحريك هذه الورقة ما عليك سوي تحريك هذه الرؤوس، وفي الحقيقة هذه الرؤوس تتصرف تماما كما لو كانت علي شبكة الاحداثيات، والتي ربما درستها مسبقا اكاديميا، لذا اذا اردت ازاحة احدى هذه الرؤوس ما عليك سوى إضافة قيمة معينة لها لتزاح تبعا للقيمة المضافة.
ايضا اذكر انك تريد تحريك أعلى نقطة بنسبة كاملة، وما بعدها بنسبة أقل، وهكذا حتى أدني نقطة والتي يجب أن تبقى ساكنه.
ولكن هكذا تتحرك جميع الأعشاب بنفس النسبة، فتجد جميعها تتحرك لليمين اواليسار موازين لبعضهم، وهو ما ليس واقعيا، بل يجب أن تتحرك بعشوائية.
وحل ذلك يكمن في استخدام نسيج تشويش – Noise Texture، فتحدد لكل نقطة قيمة عشوائية من ذلك النسيج، وهكذا تظهر كانها تتحرك عشوائيا وغير مرتبطة بالبقية.
تجهيز المشروع
اولا جهز المشروع بتغيير نظام الرسومات فيه، لتصبح قادرا على استعمال محرر الشيدر.
من خلال قائمة Window >> Package Manager >> Universal RP ثم تقوم بتثبيته في مشروعك.
بعدها اصنع ملف URP Asset، وهو ملف للتحكم باعدادات نظام الرسوميات الجديد، وتجده من خلال قائمة الإظهار – Rendering في نافذة المشروع ثم اختيار URP Asset with Universal Renderer ، ثم تأكد من تفعيل نسيج البعد – Depth Texture ونسيج العتامة – Opaque Texture والـ HDR فيه.
بعد هذا تطبق المعالجة النهائية – Post Process، عن طريق نافذة التسلسل – Hierarchy، واضافة نطاق عام – Global Volume من خلال قائمة النطاق – Volume، ومن نافذة المشروع تقوم بإنشاء مُعرف النطاق – Volume Profile.
ثم إضافة تاثير الوهج – Bloom، والـ Vignette، الى مُعرف النطاق. ويمكنك اضافة اي تاثير اخر تريده.
اخيرا فعل المعالجة النهائية – Post Process في الكاميرا.
تكوين الشيدر واضافة اللون
بما أن العمل الآن مع البعد الثنائي – 2D ففي الغالب لن يحتاج هذا الشيدر لاستقبال أي بيانات للضوء لهذا نستعمل النوع الغير مضاء – Unlit وهذا عن طريق قائمة
Create >> Shader Graph >> URP >> Unlit Shader Graph،
وسميه بأي اسم يناسبك.
وفي البداية قد ترغب باعطائه الوانه الخاصة عن طريق إنشاء متغير جديد من نوع نسيج ثنائي الأبعاد – Texture 2D وتوصيلة بمخرج اللون والشفافية، وتأكد ان تكتب _MainTex في خانة المرجع – Reference، وهذا لأنه عند وضعك لهذا الشيدر علي اي صورة ثنائية الأبعاد، يضع المحرك الصورة تلقائيا في المتغير الذي يحمل هذا المرجع.
وبعد اعطائه لونه الخاص يمكنك الآن التركيز على تنفيذ الجزء الخاص بالحركة.
اضافة الحركة المبدئية
وبداية فكما رأيت في فكرة العمل تحتاج أن تحصل على بيانات موقع كل رأس، وتحصل عليه من خلال عقدة الموقع – Position، والتي تخرج متجه ثلاثي الابعاد – Vector3 بموقع كل الرؤوس في المجسم.
وبعدها عند تجربتك لإضافة قيمة لهذا الموقع من خلال متغير مؤقت Timer من نوع رقم عشري Float، وبعدها توصيله بمخرج الموقع – Position، والذي يستقبل متجه ثلاثي – Vector3،
ثم تجربة تغيير قيمة المتغير المؤقت من خلال المحرر، ،هكذا تلاحظ أن العشب – أو الشيء الذي قررت اعطائه الحركه – يتحرك بالفعل لكن بطريقة غريبة قليلا.
وما يحصل هو انك تضيف قيمة لكل رؤوسه في كل من الإحداثيات الثلاثة – وهذا هو سبب تغير حجمه، كونك تغير قيمة الـ Z، مما يغير بعده عن الكاميرا بالايجاب او السلب -،
وبهذا قد شاهدت بالفعل طريقة عمله الأساسية، وان اردت تحريكه بطريقة مستقلة في كل محور، ما عليك سوى تغيير نوع المتغير من رقم عشري إلى متجه ثلاثى.
ويمكنك ايجاد هذه الأصول هنا والتي صنعت بواسطة Maaot.
اضافة الحركة العشوائية
والان تبقى أن يتحرك تلقائيا، بالإضافة للعشوائية، وعندما تذكر كلمة التلقائية فإن أول ما تفكر به هو عقدة الزمن – Time، والتي تستعملها بجانب عقدة التكرار والإزاحة – Tiling And Offset بعد ضرب الزمن في متغير من نوع متجه ثنائي لتصبح قادرا على التحكم في سرعة الحركة افقيا ورأسيا.
ولكن حتى الآن هذا يحرك العشب فقط في اتجاه واحد بدون العودة لموقعه الأصلي، وذلك لانه ينقصه التشويش، وبما ان قيمته تتراوح بين الـ 0 والـ 1، سيسمح للعشب بأن يزاح بنسبة كاملة ثم يعود مجددا لنفس النقطة.
وفي نفس الوقت لن تكون هذه الحركة لصورة العشب بالكامل في نفس الوقت، وانما كل جزء منها يتحرك بعشوائية وهو ما نريده، ولا تنس انشاء متغير من نوع الرقم العشري ليتحكم بحجم التشويش.
التحكم بمنطقة الحركة
بالتأكيد لن ترى احد الاعشاب تطير في يوم من الأيام، لهذا تحتاج الآن للتحكم فيه بحيث يتحرك الجزء العلوي منه فقط، ومن ثم تقل نسبة الحركة تدريجيا حتى أدنى نقطة، وفي مثل هذه الحالة الحل هو ضرب الحركة بتدريج مناسب.
وحيث ان التدريج من 0 الى 1، فاي جزء مضروب في الـ 0 لن يتحرك بما أن حاصل الضرب يساوي الصفر، وبضربه مع الـ 1 يتحرك بنسبة كاملة.
لكن ستواجهك هنا مشكلة، وهي ان هذه الصوره ليست مفردة، وانما جزء صغير مقصوص بواسطة المحرك من اخري كبيره، لهذا ان ضربت الحركة بالتدريج مباشرة، ما يحصل في المحرك كما تراه هنا، وهذا بالتأكيد غير صحيح، فبهذا الشكل كل واحدة من هذه الأعشاب تتحرك بطريقة غير صحيحة بما ان التدريج عليها غير منضبط، ولهذا عليك انشاء نسيج تدريج خاص بها.
بعد أن تنتهي منها، أنشئ متغيراً جديد من نوع النسيج ثنائي الأبعاد، ثم أضربه في الجزء الخاص بالحركة، ولكن قد تواجهك مشكلة، وهي انه اذا جربت توصيل متغير النسيج بعقدة الضرب عن طريق عقدة الـ Sample Texture 2D كما المعتاد، لن تصبح قابلة للتوصيل في عقدة الضرب، وهذا لأنه عند تعاملك مع تحريك الرؤوس تحتاج لاستعمال عقدة أخرى وهي Sample Texture 2D LOD.
اضافة قوة الحركة
ولكن الآن ما تتحكم به هو سرعة الحركة فقط، ومازلت بحاجة لما يتحكم بقوتها، او بمعني اخر أقصى إزاحة ممكنة، ولتنفيذ ذلك تحتاج اولا متغيرا جديدا من نوع متجه ثنائي، وهكذا ليتيح لك التحكم بقوة الحركة بطريقة مستقلة لكل محور.
وأن ضربته مع التشويش يمكنك ملاحظة أنه يتحرك في الاتجاه الموجب فقط ثم يرجع لنقطة الاصل، وهذا لان التشويش تتراوح قيمته بين الـ 0 والـ 1، مما يعني انه يتحرك في الاتجاه الموجب باقصي إزاحة، وبعدها يعود لنقطة الأصل.
ولاصلاح المشكلة تحتاج ان تغير التشويش ليضم قيمة سالبة أيضا، و بعملية رياضية بسيطة وهي طرح 0.5 منه مما يحول قيمته لتترواح بين -0.5 و 0.5 وبعدها تستطيع ضربه مع متغير قوة الحركة ومشاهدة النتيجة.
فصل سرعة الحركة لكل اتجاه بشكل مستقل
لكن تبقى شيء، ففي حالة جربت ان تغير سرعة الحركة في اتجاه واحد فقط تجد ان سرعة حركة العشب تتأثر في الاتجاهين، وهذا لأن التشويش يخرج قيمة من نوع رقم عشري وليس متجه ثنائي.
لذا إن أردت التحكم بسرعة كل اتجاه بشكل مستقل تحتاج لأن تكرر كل ما قبل التشويش مرة أخرى، مع أخذ الجزء الخاص بحركة كل اتجاه من متغير سرعة الحركة بواسطة عقدة الفصل – Split،
هكذا يتحكم كل جزء بحركة محور واحد، وفي النهاية كون متجه ثنائي الأبعاد ووصله بعقدة الطرح مجددا، وتأكد أن تطرح 0.5 في الاتجاهين.
وشيء اخير، عند تجربتك لأكثر من نسخة لنفس نوع العشب تجدهم يتحركون كلهم بنفس الشكل تماما، وهذا لان جزئية الحركة لكل نسخه تقع في فضاء الكائن نفسه،
فأذا اردت حركتهم مختلفة، ما عليك سوى اضافة عقدة الموقع، وتحديدها للعالم – World،ثم توصيلها بعقد التكرار والازاحة.
ختاما
هكذا انتهيت اخيرا من العمل، وشيء اخير عليك الانتباه له، فعند تغيير أي من المتغيرات السابقة فيستحسن أن تكون ذات قيمة صغيرة نسبيا، والا ستبدأ بملاحظة تشوهات كبيرة.
في النهاية هذه الطريقة بالطبع ليست الطريقة المثالية لإضافة الحركة، وكأي طريقه لها مميزاتها وعيوبها، فباستخدامها يمكنك توفير وقت كبير جدا مقارنة بالطرق الأخرى مثل رسم الحركة كلها يدويا، وهو ما يعطيك التحكم الكامل في طريقة الحركة، لكن بالمقابل يتطلب مهارة في التحريك ووقتا طويلا.
وبالطبع هذا الشيدر ليس مقتصرا على العشب فقط، لذا لا تخف ان تعدله حتى يمكنك استعماله ليناسب العديد من عناصر البيئة الأخرى مثل الاشجار الكبيره والشجيرات الصغيرة او حتى أطراف النباتات المتدلية.
