الرسم باستخدام أهداف العرض في محرك غير واقعي

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

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

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

في هذا البرنامج التعليمي سوف تتعلم ما يلي:

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

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

للوصول إلى العمل

لنبدأ بتنزيل مواد هذا البرنامج التعليمي (يمكنك الحصول عليها هنا ). قم بفك ضغطها ، انتقل إلى CanvasPainterStarter وافتح CanvasPainter.uproject . إذا قمت بالنقر فوق تشغيل ، سترى ما يلي:


المربع في المنتصف (قماش) هو ما سنعتمد عليه. ستكون عناصر واجهة المستخدم على اليسار الملمس الذي سنرسمه وحجمه.

أولاً ، دعونا نلقي نظرة على الطريقة المستخدمة للرسم.

طريقة الرسم

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

على سبيل المثال ، إذا كانت اللوحة تحتوي على ربط مثالي لإحداثيات الأشعة فوق البنفسجية ، فإن التقاطع في المركز سيعيد القيمة (0.5 ، 0.5) . إذا تجاوز الخط اللوحة القماشية في الزاوية اليمنى السفلية ، فسوف نحصل على القيمة (1 ، 1) . ثم يمكنك استخدام حسابات بسيطة لحساب مكان الرسم.


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

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

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

أولاً ، سنقوم بإنشاء مادة تجعل هدف التجسيد.

إنشاء مادة قماشية

انتقل إلى مجلد المواد وافتح M_Canvas .

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


في الوقت الحالي ، لا تقلق بشأن اختيار مادة - سنفعل ذلك لاحقًا في المخططات. انقر فوق تطبيق ثم قم بإغلاق M_Canvas .

الخطوة التالية هي إنشاء هدف تقديم ، وبعد ذلك نستخدمه كمادة قماشية.

إنشاء هدف التقديم

هناك طريقتان لإنشاء هدف تقديم. أولاً: الإنشاء في المحرر بالضغط على Add New \ Materials & Textures \ Render Target . تتيح لك هذه الطريقة الرجوع بسهولة إلى هدف العرض نفسه إلى جهات فاعلة متعددة. ومع ذلك ، إذا كنا بحاجة إلى العديد من اللوحات ، فسيتعين علينا إنشاء هدف تجسيد يدويًا لكل لوحة.

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

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


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


بعد ذلك تأتي العقدة Clear Render Target 2D . يمكننا استخدام هذه العقدة لتعيين لون هدف التجسيد. اضبط Clear Color على (0.07 ، 0.13 ، 0.06) . في هذه الحالة ، سيتم ملء هدف التجسيد بالكامل باللون الأخضر.


نحتاج الآن إلى عرض هدف التجسيد على الشبكة القماشية.

عرض هدف العرض

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


أولاً ، دعنا ننتقل إلى العقدة إنشاء مثيل مادة ديناميكية وتعيين قيمة الأصل إلى M_Canvas . لذا سننشئ نسخة ديناميكية من M_Canvas .


بعد ذلك ، انتقل إلى العقدة Set Texture Parameter Value واضبط اسم Parameter Name على RenderTarget . لذا سنقوم بتمرير هدف التجسيد إلى معلمة النسيج التي تم إنشاؤها سابقًا.


الآن سيتم عرض هدف التقديم على شبكة قماش الرسم. انقر فوق ترجمة والعودة إلى المحرر الرئيسي. انقر على " تشغيل" لترى كيف يتغير لون اللوحة.


الآن لدينا اللوحة ، نحتاج إلى إنشاء مادة يمكن استخدامها كفرشاة.

إنشاء مادة الفرشاة

انتقل إلى مجلد المواد . قم بإنشاء المادة M_Brush وافتحها . قم أولاً بتعيين وضع المزج إلى Translucent . هذا سيسمح لنا باستخدام القوام بشفافية.


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


انقر فوق تطبيق ، ثم أغلق M_Brush .

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


بعد ذلك ، انتقل إلى العقدة إنشاء مثيل مادة ديناميكية وقم بتعيين الأصل إلى M_Canvas .


لقد أنشأنا مادة الفرشاة ، والآن نحتاج إلى وظيفة للرسم بالفرشاة على هدف التجسيد.

رسم الفرشاة على هدف التقديم

إنشاء وظيفة جديدة وتسميتها DrawBrush . نحتاج أولاً إلى المعلمات: الملمس المستخدم وحجم الفرشاة ومكان الرسم. قم بإنشاء الإدخال التالي:

• BrushTexture: حدد نوع Texture 2D
  
• حجم الفرشاة: حدد نوع تعويم
  
• DrawLocation: حدد نوع Vector 2D

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


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


ستبدأ ميزة Draw Canvas إلى Render Target المحرك في معرفة أننا نريد أن نبدأ في التقديم إلى هدف عرض معين. يتيح لك رسم المواد رسم المواد في موقع محدد بالحجم والتدوير المحددين.

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


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


ثم نربط كل شيء على النحو التالي:


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


الآن ، في كل مرة يتم تنفيذ DrawBrush ، سيقوم أولاً بتعيين المادة المرسلة كمادة لمادة BrushMaterial . ستقوم بعد ذلك بعرض BrushMaterial في RenderTarget ، باستخدام الموضع والحجم الذي تم تمريره.

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

تتبع الكاميرا مباشرة

قبل الرسم على القماش ، نحتاج إلى تحديد نسيج الفرشاة وحجمها. انتقل إلى مجلد المخططات وافتح BP_Player . ثم قم بتعيين متغير BrushTexture إلى T_Brush_01 ، ومتغير BrushSize إلى 500 . لذلك نقوم بتعيين صورة فرشاة لقرد بحجم 500 × 500 بكسل.


بعد ذلك ، تحتاج إلى تتبع الخط. حدد موقع InputAxis Paint وقم بإنشاء الرسم التخطيطي التالي:


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

الآن نحتاج إلى التحقق مما إذا كانت اللوحة المستقيمة متقاطعة. أضف العقد المحددة:


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

لكي تعمل العقدة Find Collision UV ، نحتاج إلى تغيير معلمتين. أولاً ، انتقل إلى العقدة LineTraceByChannel وقم بتمكين Trace Complex .


ثانيًا ، انتقل إلى Edit \ Project Settings ، ثم إلى Engine \ Physics . قم بتشغيل Support UV From Hit Results وأعد تشغيل المشروع.


بعد إعادة التشغيل ، لرسم على اللوحة ، انقر فوق تشغيل وانقر بزر الماوس الأيسر .


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


في القسم التالي ، نقوم بتنفيذ وظيفة تغيير حجم فرشاة اللاعب.

تغيير حجم الفرشاة

افتح BP_Player وابحث عن العقدة InputAxis ChangeBrushSize . تم تكوين ربط المحور هذا لاستخدام عجلة الماوس . لتغيير حجم الفرشاة ، يكفي أن نغير قيمة BrushSize وفقًا لقيمة المحور . للقيام بذلك ، قم بإنشاء المخطط التالي:


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

انقر فوق ترجمة والعودة إلى المحرر الرئيسي. قم بتدوير عجلة الماوس لتغيير حجم الفرشاة أثناء الرسم.


في القسم الأخير ، سنقوم بإنشاء وظيفة تسمح للاعب بتغيير نسيج الفرشاة.

تغيير نسيج الفرشاة

أولاً ، نحتاج إلى صفيف لتخزين القوام الذي يمكن للاعب استخدامه. افتح BP_Player وقم بإنشاء متغير صفيف . حدد نوع Texture 2D له وتسميته Textures .


ثم قم بإنشاء ثلاثة عناصر في القوام . قم بتعيين القيم التالية لهم:

• T_Brush_01
• T_Brush_02
• T_Brush_03

ستكون هذه هي المواد التي يمكن للاعب رسمها. لإضافة مواد جديدة ، ما عليك سوى إضافتها إلى هذا الصفيف.

بعد ذلك ، نحتاج إلى متغير لتخزين الفهرس الحالي للصفيف. إنشاء متغير صحيح وتسميته CurrentTextureIndex .


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


سيؤدي هذا النظام إلى زيادة CurrentTextureIndex في كل مرة تنقر فيها بزر الماوس الأيمن . إذا وصل الفهرس إلى نهاية المصفوفة ، فسيتم إعادة تعيينه إلى 0 . أخيرًا ، يقوم BrushTexture بتعيين النسيج المناسب.

انقر على Compile وأغلق BP_Player . انقر فوق تشغيل وانقر بزر الماوس الأيمن للتبديل بين الأنسجة.

إلى أين أذهب بعد ذلك؟

يمكن تنزيل المشروع النهائي من هنا .

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

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