إذا فكرت في آخر عشرة العاب قمت بتجربتها, لا شك أن معظمها كان اللعب فيه بشخصية انسانية, حيوانية, أو حتى طائرة ورقية, وهذه الشخصية لابد أن تتواجد داخل بيئة ما تناسب الجو العام لأسلوب اللعب.
وكونك المتحكم بهذه الشخصية, لابد ان يكون التعرف عليها سهلا وسط حشد من التفاصيل الاخري علي شاشتك, وفي عالم تصميم الألعاب شيء كهذا أهميته كبيرة, و لتحقيقه هناك عدة طرق, منها ما نتطرق اليه اليوم عن طريق استعمال الـ Outline – الخط الخارجي.
رسم الخطوط الخارجية في الحقيقة ليس صعبا, طالما أنك مازلت داخل برنامج التصميم ثنائي الأبعاد, ولكن ماذا لو كنت بداخل المحرك نفسه, بالطبع لن يكون عمليا ان ترسم بداخله ان كان ممكنا, أو لنقل الرسم بالشكل المتعارف عليه.
ولكن إذا كنت على علم بما يسمى الشيدر فبمقدورك التخمين بالفعل أن هذا ما ستستفيد منه لتحقيق هذا التأثير, ولهذا فالغرض من هذه المقالة هو إنشاء الخطوط الخارجية لكائنات لعبتك بسرعة باستعمال الشيدر في محرك يونتي.
عناصر المقال
فكرة العمل
يعتمد هذا الشيدر بشكل أساسي على فكرة بسيطة جدا والتي تستغل فيها قناة ألفا – Alpha الموجودة بالفعل في صورة الكائن الذي تريد إنشاء الخطوط الخارجية له.
فإذا ازحتها قليلا في أحد الاتجاهات ثم أضفت الجزء المزاح الى قناة الشفافية يمكنك ان تري كيف أصبح حجم الكائن اكبر قليلا بالاتجاه الذي حددته, و بتكرار هذه العملية لباقي الاتجاهات ومن ثم تغيير لون الجزء الزائد تكون قد انهيت التأثير.
تجهيز المشروع
اولا جهز المشروع بتغيير نظام الرسومات فيه، لتصبح قادرا على استعمال محرر الشيدر.
من خلال قائمة 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 في الكاميرا.
و بالنسبه للشخصيه التي استعملها فهي من تصميم LuizMelo و بمقدورك ايجادها هنا, أما الخلفية فهي من تصميم Pixel Frog من هنا.
بناء اساس الشيدر
بما ان الشيدر مخصص للكائنات ثنائية الأبعاد فهذا يعني أن الشيدر سيكون من النوع الخاص بالصور – Sprite, لهذا يمكنك إنشاء واحد جديد من خلال قائمة Create >> Shader Graph >> URP >> Sprite Unlit Shader Graph.
ولكن في حالة كان اصدار المحرك عندك لا يتوافر به هذا الخيار, تستطيع اختيار Unlit Shader Graph من نفس القائمه, والفرق أن الشيدر هكذا يتطلب بعض الاشياء الاضافية والتي نتطرق اليها لاحقا.
والان بعد ان انتهيت من انشاء الشيدر, حان وقت بدء العمل عليه, وأول شيء تحتاج لاضافته هو المتغير الخاص بالكسوه ثنائية الابعاد – Texture 2D نفسها, ويفضل أن تسميه MainTex لكنه ليس إلزاميا, ولكن تأكد أن تكتب _MainTex في خانة المرجع – Reference، وهذا لأنه عند وضعك لهذا الشيدر على اي صورة – Sprite, يضع المحرك الصورة تلقائيا في المتغير الذي يحمل هذا المرجع.
والآن يمكنك توصيلها بعقدة معالجة الكسوة ثنائية الأبعاد – Sample Texture 2D, ومنها توصل RGBA بمخرج اللون – Color, و A بمخرج ألفا, وبهذا تصبح جاهزا للبدء بالجزئية الخاصة بالخط الخارجي.
إزاحة قناة الالفا
و كما ذكرنا في طريقة العمل, فالعمليه الاساسية التي نحتاجها هي إزاحة قناة ألفا لكل من الجهات الاربعه, ولتحقيق هذا تنسخ العقدتين السابقتين ومن ثم توصل عقدة التكرار والازاحة – Tilling And Offset بعقدة معالجة الكسوة ثنائية الأبعاد, وبهذا يمكنك تغيير قيمة الازاحة – Offset لازاحة قناة الالفا بنفس القيمة.
وبما أننا نريد هذا للاربع اتجاهات فما عليك سوى تكرار هذه الجزئية ثلاث مرات أخرى مع التأكد من تغيير اتجاه الإزاحة لكل مرة, بحيث اننا نريد مره في الاتجاه الافقي الموجب, السالب, الرأسي الموجب, والرأسي السالب كما هو موضح بالصورة.
لكن بمقدورك ملاحظة أن هذا تكرار كثير وسيصبح فوضويا بمرور الوقت, لهذا تستطيع اختصار مركبة واحدة منه, وهذا بتحديد العقد التي تريدها, ومن ثم بالضغط على الزر الأيمن للفأرة يمكنك اختيار Convert To >> Sub-graph
ومن داخل الشيدر الفرعي – Sub-graph, تأكد من أن مداخل عقدة المخرج – Output هي واحدة فقط من نوع رقم عشري – Float, ومن ثم يمكنك اضافة متغيرين, احدهما لأتجاه الإزاحة ومن نوع متجه ثنائي – Vector2, والآخر رقم عشري ليعبر عن سمك الخط الخارجي, والآن تضرب قيمة الإزاحة بالسمك وتوصلهم في مدخل الازاحة لعقدة التكرار والإزاحة, وبهذا تكون انتهيت من هذه الجزئية الخاصة بمركبة الإزاحة.
والان بالعودة للشيدر الأول تستطيع استخدام المركبات التي انتهيت توا منها بنفس الطريقة, ثم تكريرها 4 مرات, مع مراعاة وضع الاتجاه الصحيح لكل عقدة منهم, وبعد هذا ما عليك سوي جمعهم ومن ثم توصيل الناتج بعقدة Saturate, والتي تحد من اي قيمه داخله بها كي لا تتعدى الـ1.
ولكن هذا يعني انك تحتاج لاضافة كل هذا في كل مرة تريد بها اضافة خاصية الخطوط الخارجية لأي شيدر لديك, ولهذا يمكنك اختصار كل هذا في شيدر فرعي جديد, وبالنسبه للمداخل والمخارج فهي نفسها للشيدر الفرعي السابق لكن بدون متغير اتجاه الإزاحة.
والان تستطيع العودة للشيدر الأساسي ومنه توصل الشيدر الفرعي بمخرج الألفا, ومن ثم يمكنك تجربته على أي كائن لديك مع الحرص على جعل قيمة السمك صغيره جدا – 0.0007 على سبيل المثال -, وبهذا تلاحظ انه اصبح اكبر قليلا لكن الالوان مشوهة قليلا.
ما حصل هنا انك كبرت منطقة الظهور للكائن بعد ازاحتك لقناة ألفا في الاربع اتجاهات ومن ثم جمعهم, ولكن لا يمكنك التحكم بلون المنطقة الزائدة بعد.
ولكن تستطيع فعل هذا بتغيير بسيط, فعن طريق إضافة عقدة الاستيفاء الخطي – Lerp, ومن ثم توصيل قناة ألفا في مدخل الزمن – T, وقناة RGBA في مدخل B واللون الذي تريده للخط الخارجي في A وبعدها توصيل ناتج الاستيفاء الخطي في مخرج اللون, يصبح بمقدورك الآن رؤية أن لون الخط الخارجي يتغير بالفعل تبعا لما تريده.
لكن يمكنك ملاحظة مشكلة ما, وهي أن سمك الخط الخارجي ليس منتظما, وهذا يرجع لاختلاف حجم الصورة نفسها, ولحل هذه المشكلة ما عليك سوى الرجوع للشيدر الفرعي الأول ومن ثم قسمة ناتج ضرب اتجاه الإزاحة والسمك علي حجم الكسوه ثنائية الابعاد.
وبهذا تستطيع الرجوع للمشهد وملاحظة أن سمكة أصبح منتظما, ولكن كونك تقسم الان علي حجم الصورة فعليك التأكد من زيادة قيمة السمك لكي تلاحظ الفرق.
تنبيهات مهمة
كما رأيت فإن هذا الشيدر يستغل فكرة وجود قناة ألفا مسبقا ويمددها للسمك الذي تريده, ولكن هذا يعني أن سمك الخط الخارجي لن يكون قابلا للزيادة عن حدود الصوره نفسها, وهذه ليست بالمشكله الكبيره طالما انك لم تصمم الشخصية ملاصقة للحواف.
وبذكر الحواف, لابد أن تتأكد من عدم ملاصقة الكائن لأي حافة بالصوره, فبهذه الحالة لن تجد اي مساحه للخط الخارجي, ويمكنك هنا رؤية ما يحدث عند زيادة قيمة السمك بقيمة كبيرة, بحيث يتوقف عن التمدد عند بلوغه حافة الصوره.
الاضافات للـUnlit Shader
تستطيع الان اعتبار الشيدر منتهيا, ولكن في حالة كنت قد اخترت الشيدر الغير مضاء – Unlit Shader في البداية, فستواجه مشكله صغيره, وهي انه اذا غيرت اللون الخاص بالصوره من مركبة مصيير الصورة – Sprite Renderer فلن يتغير معك شيء.
ولاصلاحها ما عليك سوى الرجوع للشيدر وضرب ناتج الاستيفاء الخطي بلون الرأس عن طريق عقدة Vertex Color, ومن ثم توصيله بمخرج اللون.
بعد ذلك تضرب قناة الالفا للون الرأس مع الشيدر الفرعي, ومن ثم توصيل الناتج بمخرج الالفا, وبهذا يمكنك العودة للمشهد و تجربة تغيير لون الصوره لترى ان المشكله قد حلت.
وبهذا تكون قد انتهيت من تطبيق تأثير الخط الخارجي، والذي بطبيعة الحال ليس مثاليا, ولكنه فعال بشكل كبير لتوفير الكثير من الوقت والجهد الذي قد تحتاجه في برامج الرسوميات التقليدية.
و بفضل هذه التقنية، تستطيع بسهولة إبراز الشخصيات والعناصر المهمة في لعبتك، مما يسهل على اللاعبين تمييزها وسط التفاصيل الكثيرة في عالم لعبتك.
و تذكر دائمًا أن الخط الخارجي ليس محصورا على هذا الشكل, بل يمكنك تعديله بطرق متنوعة لتناسب الأسلوب الفني والهدف الذي تسعى لتحقيقه.