Dalam pelajaran ini, kita akan menggabungkan mesin VFX kita dengan banyak hal yang telah kita pelajari selama kursus ini untuk membuat permainan 3D sederhana: Seorang penyihir melawan orc yang jahat menggunakan mantra dan sihir. 🧙‍♂️

Fondasi yang kuat untuk proyek pengembangan permainan web Anda sendiri!

Proyek Awal

Proyek awal ini berisi:

• Sebuah playground scene yang saya siapkan menggunakan model Archway yang ditemukan di Poly Pizza oleh Poly by Google CC-BY
• Model Penyihir dan Orc dari Quaternius. Keduanya dilengkapi dengan rig dan animasi.
• Lingkaran animasi yang mengikuti kursor mouse
• Pengaturan pencahayaan dasar dengan bayangan
• Komponen <UI /> yang hampir kosong dibuat dengan Tailwind CSS
• Efek suara untuk mantra yang ditemukan di SoundEffectLab

Berikut tampilan proyek awalnya.

Siap untuk memulai? 🪄

Selamat Datang di Hogwarts 🏰

Sebelum menerapkan logika permainan apa pun, mari kita berlatih keterampilan magis kita di Hogwarts dengan membuat mantra menggunakan mesin VFX yang kita buat di pelajaran khusus.

Seperti yang kita lakukan pada pelajaran kembang api, kita dapat menggunakan versi yang sudah dipublikasikan dari mesin VFX. Mari tambahkan ke proyek kita:

Copy
yarn add wawa-vfx@^1.0.0

Dengan menggunakan @^1.0.0, kita memastikan bahwa kita selalu menggunakan versi utama 1 dari paket tersebut namun termasuk versi minor dan patch terbaru. Dengan cara ini, kita dapat memanfaatkan fitur terbaru dan perbaikan bug tanpa perubahan yang merusak.

Sekarang dalam file Magic.jsx, mari kita buat komponen <VFXS /> yang akan menampung semua komponen <VFXParticles /> untuk proyek kita.

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],
        }}
      />
  );
};

Dan di sebelahnya sebuah komponen Spells yang akan menampung bagian render dari mantra kita.

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

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

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

Saya suka menggabungkan beberapa komponen dalam file yang sama ketika mereka sangat terkait. Ini mempermudah pemahaman logika file. Silakan memisahkan mereka ke dalam folder/file terpisah jika Anda lebih suka.

Mari kita siapkan mantra pertama kita, yaitu mantra Void.

Void Spell

Mari kita buat komponen bernama Void yang akan dirender di komponen Spells.

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

// ...

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

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

Komponen VFXEmitter akan memancarkan partikel dari emitter sparks yang kita buat di komponen VFXS.

Dengan debug diatur ke true kita akan memiliki kontrol visual untuk membentuk efek yang ingin kita capai.

Ok, mari kita buat mantra yang akan membuat orc gemetar!

Efek VFX yang baik adalah kombinasi dari pengaturan yang tepat dan waktu yang tepat.

Mari kita uraikan apa yang ingin kita capai dengan mantra Void.

Pertama, kita ingin fase build-up. Ini adalah saat energi dikumpulkan sebelum mantra dilemparkan. Semakin baik dilakukan, semakin banyak antisipasi yang akan dirasakan pemain, dan semakin kuat mantra akan terlihat.

Build-up kita akan terdiri dari:

• Partikel yang dipancarkan perlahan ke atas
• Lingkaran yang membesar
• Rune tertulis yang berotasi di lantai seolah-olah mantra sedang dilemparkan

Kemudian, kita ingin fase ledakan. Ini adalah saat mantra dilemparkan dan energi dilepaskan. Semakin baik dilakukan, semakin puas pemain akan merasa.

Ledakan kita akan terdiri dari:

• Lingkaran meledak (menyebabkannya menghilang)
• Partikel yang bergerak ke segala arah

Dan untuk setiap efek visual, kita akan menambahkan efek suara untuk membuatnya lebih mendalam.

Mari kita mainkan pengaturan komponen VFXEmitter untuk mencapai efek yang diinginkan untuk partikel build-up.

Berikut adalah apa yang saya hasilkan:

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],
  }}
/>

Kita dapat melihat partikel perlahan naik ke atas.

Alih-alih partikel persegi mari kita gunakan segitiga. Untuk melakukannya kita dapat menggunakan cone geometry dengan pengaturan yang sesuai.

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],
        }}
      />
    </>
  );
};

// ...

Partikelnya sekarang terlihat seperti segitiga.

Sekarang mari kita tambahkan lingkaran yang membesar. Untuk melakukan itu kita perlu menambahkan komponen VFXParticles baru ke komponen 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],
        }}
      />
    </>
  );
};

Dengan mengatur fadeSize ke [0.7, 0.9] kita membuat lingkaran tumbuh perlahan sampai mencapai 70% dari umur partikel dan kemudian dengan cepat menghilang selama 10% terakhir.