تحت غطاء محرك المقبرة: كيف يتم تنفيذ التأثيرات الرسومية

مرحبا بالجميع! طوال 4 سنوات كاملة لم أكتب في حبر. كانت سلسلتي الأخيرة من المنشورات حول مختلف الأدوات والحيل التي استخدمناها في لعبتنا الأخيرة (تطويرها على Unity). منذ ذلك الحين ، أطلقنا اللعبة بنجاح ، وأصدرنا أيضًا لعبة جديدة. حتى الآن يمكنك التنفس قليلاً وكتابة بعض المقالات الجديدة التي قد تكون مفيدة لشخص ما.


اليوم أريد أن أتحدث عن الحيل والحيل الرسومية التي استخدمناها لإنشاء الصورة التي تراها في ملف GIF أعلاه.

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

بادئ ذي بدء ، سأذكر بإيجاز ما ستكون الصورة في لعبتنا:

1. ضوء محيط متغير - تغيير عادي في الإضاءة اعتمادًا على الوقت من اليوم.
2. تصحيح لون LUT - مسؤول عن تغيير درجة لون الصورة اعتمادًا على الوقت من اليوم (أو نوع المنطقة).
3. مصادر الإضاءة الديناميكية - المشاعل والمواقد والمصابيح.
4. الخرائط العادية - مسؤولة عن إعطاء الحجم للأشياء ، خاصة عند تحريك مصادر الضوء.
5. رياضيات توزيع الضوء ثلاثي الأبعاد - مسؤولة عن التأكد من أن مصدر الضوء في وسط الشاشة يضيء بشكل صحيح كائنًا أعلى ، ولكنه لا يضيء كائنًا أقل (أي يتجه نحو الكاميرا مع الجانب غير المضاء).
6. الظلال - مصنوعة من العفاريت ، وتدور وتستجيب لموقف مصادر الضوء.
7. محاكاة ارتفاع الأشياء - للعرض الصحيح للضباب.
8. مصممون آخرون: المطر والرياح والرسوم المتحركة (بما في ذلك الرسوم المتحركة تظليل أوراق الشجر والأعشاب) ، إلخ.

الآن بمزيد من التفصيل.

ضوء محيط متغير

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

يبدو هذا:

تصحيح اللون LUT

LUT (جدول البحث) - جداول تبديل الألوان. بشكل تقريبي ، هذا هو مصفوفة RGB ثلاثية الأبعاد حيث توجد في كل عقدة قيمة لون ، والتي يجب استبدالها بالنظيرة المقابلة. أي أنه إذا كانت هناك نقطة حمراء موجودة عند الإحداثيات (1 ، 1 ، 1) ، فهذا يعني أنه سيتم استبدال كل اللون الأبيض في الصورة باللون الأحمر. إذا كانت الإحداثيات (1 ، 1 ، 1) بيضاء (R = 1 ، G = 1 ، B = 1) ، فلن يكون هناك أي تغيير. وفقًا لذلك ، فإن LUT بدون تغييرات لها لون لكل إحداثيات تقابل هذه الإحداثيات نفسها. على سبيل المثال عند النقطة (0.4 ، 0.5 ، 0.8) هو اللون (R = 0.4 ، G = 0.5 ، B = 0.8).

حسنًا ، تجدر الإشارة إلى أنه من أجل الراحة ، يقدمون نسيجًا ثلاثي الأبعاد على أنه ثنائي الأبعاد. على سبيل المثال ، هذا هو شكل LUT "الافتراضي" (بدون تغيير تجسيد اللون):



يتم تنفيذها بشكل أساسي ، وتعمل بسرعة وسهولة.

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

في حالتنا ، علق الفنان قليلاً وخلق ما يصل إلى 10 LUTs مختلفة لأوقات مختلفة من اليوم (الليل ، الشفق ، المساء ، إلخ). هكذا يبدو إعدادهم:


ونتيجة لذلك ، بناءً على الوقت من اليوم ، يبدو الموقع نفسه مختلفًا:



هنا ، تتغير شفافية الضوء من النوافذ أيضًا اعتمادًا على الوقت من اليوم.

مصادر الضوء الديناميكية والخرائط العادية

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


يتم رسم هذه المعايير الطبيعية ببساطة شديدة. يرسم الفنان ضوءًا تقريبًا بفرشاة من 4 جوانب:


ثم سينتقل هذا النص البرمجي إلى الخريطة العادية:


إذا كنت تبحث عن جهاز تظليل (وبرنامج) يقوم بذلك ، يمكنك البحث في اتجاه Sprite Lamp.

محاكاة ضوء ثلاثي الأبعاد

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

انتبه لهذه الصورة:


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

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

الظلال

الظلال مصنوعة من العفاريت تدور حول نقطة. حاولت إضافة المزيد من الضغط (الانحراف) إليها ، ولكن تبين أنها غير ضرورية.

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



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

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

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

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


ليست مثالية. هذا ما يبدو عليه إذا جعلت نقش السور نفسه شفافًا:


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

محاكاة الضباب والارتفاع

هناك ضباب في اللعبة. يبدو أن هذا (أعلاه هو الإصدار العادي ، أدناه هو ضباب شديد 100 ٪ لإثبات التأثير).



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

الريح

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

اخترنا خيار التشويه باستخدام تظليل. يبدو هذا:


إذا قمت بتطبيق هذا التظليل على نسيج متقلب ، يصبح من الواضح ما يحدث:


من الجدير بالذكر أيضًا أننا لا ننقل التاج بالكامل ، ولكن فقط الأوراق الفردية:


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


يتم استخدام نفس التظليل أيضًا لخلق تأثير هزاز القمح والعشب عندما يمر لاعب من خلالها.


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

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

PPS: أغتنم هذه الفرصة لأقول أننا نريد الآن العثور على العديد من الأشخاص الأكفاء في الفريق (مبرمج ، PM ، KM ، فنان). التفاصيل موجودة على موقع الاستوديو. آمل أن تكون هذه العبارة لم تنتهك القواعد.