كيفية عمل شيدر الجرعة في محرك يونيتي || PotionShader

unity

ها قد انتهيت من صنع اسلحة لعبتك الـ RPG ,وتفكر ما الذي يتوجب عليك فعله تاليا لتعزيز تجربة اللاعب ودمجه في عالم اللعبة حيث القرون الوسطى والفرسان هو كل شيء.
بعد قليل من التفكير  يبدو بديهيا انه ينقصك نظام ليعطي اللاعب قوة مؤقتة , وماذا سيكون أفضل من
ان تعطيه بعض الجرعات Potions.
يبدو أنك جئت للمكان المناسب ؛ فانت الان في طريقك لصنع هذه الجرعة السحرية, وعليك الآن أن تقرر شكل الزجاجة التي ستحوي هذا الاكسير, ويوجد بالطبع العديد من الأشكال لتختار منها, وما تراه هنا ليست الا مجرد امثلة.

1, 2, 3, 4

تجهيز المجسم

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

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

يمكنك ملاحظة المجسم الذي سيعبر عن سائل الاكسير فيما بعد, وهو الذي يقع على اليسار, واحرص ان تجعله أصغر بنسبة قليلة جدا عن زجاجه الاكسير نفسها؛ لكي لا يحدث اي تقاطع غريب فيما بعد بين المجسمين.

الآن يمكنك تصدير المجسم بصيغة fbx بان تحدد اولا كل المجسمات
ثم تذهب الى قائمة file
ثم export
ثم نختار fbx
وتأكد أن تغير إعدادات التصدير كما هو موضح بالصوره.

تجهيز المشروع

تذكر إضافة ماتيريال لكل جزء من الزجاجة عدا مجسم السائل؛ فهذا ما ستقوم بعمل الشيدر الخاص به.

وتأكد أن تقلل من قيمة ال alpha في اللون الخاص ماتيريال الزجاج التي ستطبقها على الزجاجة نفسها لقيمة مثل 15 مثلا.
حتى الآن كل شيء عادي, والان ستبدأ في عمل شيدر الاكسير نفسه, وستستعمل لهذا الغرض الشيدر جراف -ShaderGraph- ولهذا يجب ان يكون مشروع اليونيتي نفسه جاهزا لهذا, لذا اذا لم تكن قد جهزته بالفعل بال URP فلا مشكلة يمكنك فعل هذا حتى بعد إنشاء المشروع نفسه.
من قائمة Window ستقوم بفتح ال Package Manager , وستبحث عن Universal RP ثم تقوم بتحميله الى مشروعك.

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

الآن لماذا يبدو المشهد Scene عندي مختلفا ؟
هذا لاني مسبقا قمت بوضع  Terrain و Plan.
وقمت بتطبيق هذا الماتيريال على كليهما.

ليس عليك ان تقوم بفعل ما فعلته بالضبط؛ فالهدف فقط هو اضافة خلفية للمشهد.
بعد هذا كله ستقوم بتطبيق الـ post process عن طريق الذهاب الى نافذة الـ Hierarchy واضافة Global Volume ومن نافذة المشروع ستقوم بعمل Volume Profile

بعد هذا ستقوم بإضافة الـ Bloom والـ Vignette الي الـ Volume Profile.

ويمكنك اضافة اي تاثير اخر تريده ولكن هذا ما ستحتاجه هنا.
ثم ستقوم بتفعيل الـ Post Process في الكاميرا.

بدء العمل على شيدر سائل الاكسير:

الان حان وقت العمل الحقيقي لأنك ستبدأ الآن بعمل شيدر هذا الاكسير.
الان ستقوم بإنشاء Shader Graph من نوع الـ Unlit وتقوم بعمل ماتيريال له, ولا تنس تطبيق الماتريال الخاصة بزجاجة الاكسير .

الان يمكنك فتح الشيدر جراف لتبدأ بصنع الشيدر, وتاكد ان تغير اعدادات الشيدر لهذه الإعدادات.

الان لابد انك تعرف ان كل السوائل تحافظ دائما على مستوى سطح ثابت, بمعني انك ان قمت بتدوير زجاجة ماء مثلا ستجد أن الماء بداخلها يحافظ علي نفس مستوي السطح, لهذا ستحتاج هنا احداثيات كل فيرتكس vertex في المجسم بالنسبة لنقطة الأصل في العالم, وليس بالنسبة لنقطة الأصل في المجسم نفسه.
الان عندما توصل عقده الـ Position وتحدد الـ Space الي World وتوصلها بعقدة الـ Split؛ لتحصل على الاحداثي الصادي أو الـ Y لكل فيرتكس من خلال مخرج الـ G .

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

الآن ستحتاج عقده Step -ووظيفتها هي مقارنة المدخلات, بحيث ان اي قيمه داخله الي الEdge وقيمتها أقل من قيمة In سيصبح لونها ابيض, اي قيمتها واحد, وأي قيمة أكبر من In ستصير سوداء أي قيمتها صفر- لتقوم بالتحكم بارتفاع السائل, و ستحتاج ايضا عمل متغير جديد من نوع الرقم العشري Float لهذا الغرض, ولتسمه بأي اسم تشاء, وبالنسبه لي ساسميه Elixir Height.

الان عندما تتفقد الاكسير مجددا ستجد انه يمكنك التحكم بارتفاعه عن طريق المتغير الذي قمت توا
باضافته في محرر الشيدر جراف.

وبما ان الان اصبح لديك لونين فقط وهما الأبيض والأسود, يمكنك الاستفادة من هذا بتوصيل المخرج من عقدة Step بال Alpha, وتجعل قيمة الـ Alpha Clip Threshold ب0.5, وهذا سيجعل اي جزء من المجسم قيمته اللونية اقل من 0.5 يختفي .
تتذكر عندما اخبرتك ان الالوان تعبر عن قيم؟ حسنا هنا بما ان الاسود يعبر عن صفر , وانت قمت بجعل قيمة الAlpha Clip Threshold تساوي 0.5 سيختفي أي لون اسود؛ لان قيمته أقل من 0.5.

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

وحل هذا الموضوع بسيط جدا؛ وهو فقط بأنك ستقوم بطرح موقع كل فيرتكس من موقع المجسم نفسه الذي يمكنك الحصول عليه بعقدة Object, وستجد أن المشكلة قد تم حلها.

الان حان وقت ان تضيف الدوران إلى سائل الشيدر خاصتك, وسيكون هذا باستخدام عقدة Rotate About Axis, وهذا سيكون في اتجاهي الـ X والـ Z, ولهذا ستحتاج استعمال هذه العقدة مرتين, وان تغير نوع الوحدة من Unit الي Degrees في كليهما, وفي مدخل Axis ستحدد في إحداهما قيمة X تساوي 1 والباقي اصفار, اما في الأخرى ستكون قيمة Z تساوي 1 والباقي اصفار, وهذا لأنك تريد جعل كل واحده مختصه بالدوران حول محور واحد فقط؛ لهذا ستكتب في المحور الذي نريده قيمة 1؛ لان اي شيء مضروب في الواحد الصحيح لا يتأثر, أما عند ضربه في الصفر فإنه يصبح صفرا أي بلا تأثير.
ثم بعد ذلك عليك ان تقوم بضرب عقدة الدوران حول محور بمتغيرين جديدين من نوع الأرقام العشرية, ولكن لاحظ ان المتغير الخاص بالدوران حول محور  X عليك ضربه مع عقدة الدوران حول محور التي قمت بجعل قيمة X فيها بواحد, وستقوم بطبيعة الحال بإدخال الشيء الذي تريد عمل دوران له حول المحور في مدخل In, مع تغيير الـ Space الي Object؛ هذا لأن الماء عندما تحركه لا يدور حول محور الكوكب او مركز الارض, بل يدور حول مركزه, سواء كنت وضعته في زجاجة او في كوب, ففي كلا الحالتين سيدور حول مركز هذه العبوه, ويمكنك تجربة جعل الـ Space الي World ومشاهدة ما الذي يحصل, لكن في هذه الحالة عليك ابعاد زجاجة الاكسير عن نقطة الاصل في العالم؛ لأن في هذه الحالة سيكون مركز العبوة هو نفسه نقطة الأصل, فلن تلاحظ حينها اي فرق.

ولكن الآن عند خروجك وتجربة الدوران ستلاحظ شيئا غريبا عند محاولتك عمل دوران حول محور X, وهذا لأنه في حقيقة الأمر أنت تقوم بعمل دوران حول محور Y وليس X, لانك منذ قليل قمت بتحديد الـ Space في عقدة Position الي Object, فحينها سيقوم بأخذ المحاور الخاصة بالمجسم نفسه, وهذا سبب المشكله؛ لان المحاور في بلندر مختلفة عن يونيتي, وحل هذا بسيط جدا, فعليك فقط ان تعود الى بلندر وتقوم بتحديد كل شيء, واختيار وضع تحريك نقطة الأصل, ثم تقوم بتدويرها حول محور X بزاوية 90.

الان يمكنك التحكم في ارتفاع السائل, وكذلك في دورانه, لكن انت لن تذهب للاعب كل مره يفتح اللعبه لتحركه له بنفسك, لهذا ستقوم الآن بجعل حركة السائل تلقائية باستخدام كود برمجي مخصص لهذا, ويمكنك الحصول عليه من هنا وهو من صنع Joyce ثم اضافته الى المحرك بشكل طبيعي, وبعد ذلك اضفه الي المجسم الخاص بسائل الاكسير, واجعل المتغيرات كما في الصوره, ويمكنك التعديل في المتغيرات الي ما يناسبك فيما بعد ثم بعد ذلك عليك العودة للشيدر جراف لتقوم بتعديل كل Reference في المتغيرات الخاصة بالتحكم في دوران السائل.

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

تهانينا, لقد انهيت توا كل العمل علي ما يتعلق بـ فيزيائية وحركة السائل, ويتبقى الجزء السهل وهو إعطائه بعض الألوان.

اضافة الالوان للاكسير

اولا ستحتاج ان تقوم بعمل متغيرين من نوع اللون, أحدهما للون الداخلي, وآخر للخارجي, ثم بعد ذلك ستحتاج عقدة Is Front Face – التي تقوم بإخراج Boolean بقيمة True اذا كان الوجه المعروض هو وجه امامي, وتخرج قيمة False اذا كان الوجه المعروض وجه خلفي – ثم بعد ذلك ستقوم بتوصيلها بعقدة Branch – التي تقوم باختيار اخراج قيمتين, استنادا الي حاله مدخل الـ Boolean فيها – ونوصل كل هذا بالـ Base Color, وعندما تجرب مشاهدة ماذا حصل, ستجد ان المجسم يبدو وكأنه تلون بالأسود من الداخل, وبالابيض من الخارج

 والآن ستستغل هذا للتحكم باللون الذي سيتم إظهاره بالداخل, واللون الذي سيظهر بالخارج عن طريق عمل متغيرين من نوع اللون, إحداهما للون الداخلي مع تغيير نوعه الي HDR, والأخر للون الخارجي, وتقوم بتوصيلهما بعقدة الـ Branch .

والآن ستقوم بإضافة تأثير فرنيل Fresnel, بإضافة عقدة Fresnel Effect, وعمل متغيرين احدهما من نوع الرقم العشري؛ للتحكم بقوة تأثير فرنيل, والآخر من نوع اللون؛ للتحكم باللون, مع جعله من نوع HDR, ثم ستقوم بتوصيل المتغير الخاص بقوة التأثير مباشرة بعقدة الفرنيل, وتقوم بضرب عقدة فرنيل بمتغير اللون الذي قمت بعمله توا, ومن ثم ستحتاج لإضافة كل هذا لناتج عقدة Branch الذي قمت بعملها منذ قليل, ثم إعادة توصيل هذا بالـ Base Color .

ثم يمكنك الان القاء النظره النهائية علي اكسيرك الذي اهنئك لانتهائك من صنعه.

 والان بقي فقط ان تقوم باعطائه اللون الذي تراه يناسب عالم لعبتك السحري .
وبالنسبه لي فقط قررت اعطائه اللون الازرق.

ماذا بعد

الآن لقد تعلمت فكرة هذا الشيدر وكيفية تطبيقه والآن يمكنك البدء بصنع اي اكسير يخطر علي بالك لاجل عالمك الاسطوري, ولا تنس ان هذه فقط مجرد بداية. ويتبقى عليك ان تقوم باضافة لمساتك الخاصة لكي تكون لعبتك مميزة كما تريدها .

0 0 votes
Article Rating
Subscribe
نبّهني عن
guest

0 تعليقات
Inline Feedbacks
View all comments