في هذا الدرس، سنقوم بدمج محرك VFX الخاص بنا مع العديد من الأمور التي تعلمناها خلال هذه الدورة لإنشاء لعبة ثلاثية الأبعاد بسيطة: ساحر يقاتل الأورك الشرير باستخدام التعاويذ والسحر. 🧙‍♂️

أساس قوي لمشروعات تطوير الألعاب الخاصة بك على الويب!

مشروع البداية

مشروع البداية يحتوي على:

• مشهد ملعب أعددته باستخدام نموذج الباب المقوس الموجود على Poly Pizza من Poly by Google CC-BY
• نماذج الساحر و الأورك من Quaternius. كلاهما مجهز بالهيكل العظمي ومتحرك.
• دائرة متحركة تتبع مؤشر الفأرة
• إعدادات إضاءة أساسية مع ظلال
• مكون <UI /> شبه فارغ مصنوع باستخدام Tailwind CSS
• مؤثرات صوتية للتعاويذ موجودة على SoundEffectLab

إليك كيف يبدو مشروع البداية.

مستعد للبدء؟ 🪄

مرحبًا بكم في هوجورتس 🏰

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

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

Copy
yarn add wawa-vfx@^1.0.0

باستخدام @^1.0.0، نضمن أننا نستخدم دائمًا الإصدار الرئيسي 1 من الحزمة مع تضمين أحدث الإصدارات الثانوية والإصلاحات. بهذه الطريقة، يمكننا الاستفادة من أحدث الميزات وإصلاحات الأخطاء دون تغييرات تتسبب في كسر الكود.

الآن في ملف Magic.jsx، دعونا نقوم بإنشاء مكون <VFXS /> الذي سيحتوي على جميع مكونات <VFXParticles /> لمشروعنا.

Copy
import { VFXParticles } from "wawa-vfx";

export const Magic = ({ ...props }) => {
  // ...

  return (
    <group {...props}>
      <VFXS />
      {/* ... */}
    </group>
  );
};

const VFXS = () => {
  return (
    <>
      <VFXParticles
        name="sparks"
        settings={{
          nbParticles: 100000,
          renderMode: "billboard",
          intensity: 3,
          fadeSize: [0.1, 0.1],
        }}
      />
  );
};

وبجواره مكون Spells الذي سيحتوي على جزء العرض الخاص بتعاويذنا.

Copy
// ...
export const Magic = ({ ...props }) => {
  // ...

  return (
    <group {...props}>
      <VFXS />
      <Spells />
      {/* ... */}
    </group>
  );
};

const Spells = () => {
  return <></>;
};

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

دعونا نستعد لأول تعويذة لنا، وهي تعويذة Void.

تعويذة الفراغ

دعونا نقوم بإنشاء مكون باسم Void ليتم عرضه في مكون Spells.

Copy
// ...
import { VFXEmitter } from "wawa-vfx";

// ...

const Spells = () => {
  return (
    <>
      <Void />
    </>
  );
};

const Void = ({ ...props }) => {
  return (
    <group {...props}>
      <VFXEmitter debug emitter="sparks" />
    </group>
  );
};

مكون VFXEmitter سيصدر جسيمات من المصدر sparks الذي أنشأناه في مكون VFXS.

مع تعيين debug إلى true سنحصل على أدوات تحكم بصرية لتشكيل التأثير الذي نريد تحقيقه.

حسنًا، لننشئ تعويذة ستجعل الأورك يرتجفون!

التأثير البصري الجيد هو مزيج من الإعدادات المناسبة والتوقيت الصحيح.

لنفكك ما نريد تحقيقه مع تعويذة Void.

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

تحضيرنا سيكون مكوّنًا من:

• جسيمات تصدر ببطء للأعلى
• كرة تنمو تدريجيًا
• أحرف مكتوبة تدور على الأرض كما لو كانت التعويذة تُلقى

ثم، نريد مرحلة الانفجار. هذه هي اللحظة التي تُطلق فيها التعويذة وتتحرر الطاقة. كلما كان الانفجار أفضل، زاد الشعور بالرضا لدى اللاعب.

انفجارنا سيكون مكوّنًا من:

• انفجار الكرة (جعلها تختفي)
• جسيمات تتحرك في كل الاتجاهات

ولكل تأثير بصري، سنضيف تأثير صوتي لنجعله أكثر غمرًا.

دعونا نلعب بإعدادات مكون VFXEmitter لنحقق التأثير المطلوب للجسيمات التحضيرية.

إليكم ما توصلت إليه:

Copy
<VFXEmitter
  emitter="sparks"
  settings={{
    duration: 0.5,
    delay: 0,
    nbParticles: 20,
    spawnMode: "time",
    loop: false,
    startPositionMin: [-0.5, 0, -0.5],
    startPositionMax: [0.5, 1, 0.5],
    startRotationMin: [0, 0, 0],
    startRotationMax: [0, 0, 0],
    particlesLifetime: [0.5, 1],
    speed: [0, 1],
    directionMin: [0, 0, 0],
    directionMax: [0, 0.1, 0],
    rotationSpeedMin: [0, 0, 0],
    rotationSpeedMax: [0, 0, 0],
    colorStart: ["#4902ff"],
    colorEnd: ["#ffffff"],
    size: [0.1, 0.4],
  }}
/>

نرى الجسيمات ترتفع ببطء إلى الأعلى.

بدلاً من الجسيمات المربعة، دعونا نستخدم المثلثات. لتحقيق ذلك، يمكننا استخدام cone geometry مع الإعدادات المناسبة.

Copy
// ...

const VFXS = () => {
  return (
    <>
      <VFXParticles
        name="sparks"
        geometry={<coneGeometry args={[0.5, 1, 8, 1]} />}
        settings={{
          nbParticles: 100000,
          renderMode: "billboard",
          intensity: 3,
          fadeSize: [0.1, 0.1],
        }}
      />
    </>
  );
};

// ...

تبدو الجسيمات مثل المثلثات الآن.

الآن دعونا نضيف الكرة المتزايدة. لتحقيق ذلك نحتاج إلى إضافة مكون جديد VFXParticles لمكون VFXS:

Copy
const VFXS = () => {
  return (
    <>
      {/* ... */}
      <VFXParticles
        name="spheres"
        geometry={<sphereGeometry args={[1, 32, 32]} />}
        settings={{
          nbParticles: 1000,
          renderMode: "mesh",
          intensity: 5,
          fadeSize: [0.7, 0.9],
          fadeAlpha: [0, 1],
        }}
      />
    </>
  );
};

من خلال ضبط fadeSize إلى [0.7, 0.9] نجعل الكرة تنمو ببطء حتى 70% من حياتها ثم تختفي بسرعة خلال آخر 10%.