In questa lezione combineremo il nostro motore VFX con molti degli argomenti appresi durante questo corso per creare un semplice gioco 3D: Un mago che combatte orchi malvagi usando incantesimi e magia. 🧙‍♂️

Una solida base per i tuoi progetti di sviluppo giochi web!

Progetto Iniziale

Il progetto iniziale contiene:

• Una scena di playground che ho preparato utilizzando il modello di Archway trovato su Poly Pizza da Poly by Google CC-BY
• Un modello di Mago e un Orco da Quaternius. Entrambi riggati e animati.
• Un cerchio animato che segue il cursore del mouse
• Configurazione di illuminazione di base con ombre
• Un componente <UI /> quasi vuoto realizzato con Tailwind CSS
• Effetti sonori per gli incantesimi trovati su SoundEffectLab

Ecco come appare il progetto iniziale.

Pronto per iniziare? 🪄

Benvenuti a Hogwarts 🏰

Prima di implementare qualsiasi tipo di logica di gioco, esercitiamoci nelle nostre abilità magiche a Hogwarts creando incantesimi utilizzando il motore VFX che abbiamo costruito nella lezione dedicata.

Come abbiamo fatto nella lezione sui fuochi d'artificio, possiamo utilizzare la versione pubblicata del motore VFX. Aggiungiamolo al nostro progetto:

Copy
yarn add wawa-vfx@^1.0.0

Utilizzando @^1.0.0, ci assicuriamo di utilizzare sempre la versione principale 1 del pacchetto includendo le versioni più recenti minori e delle patch. In questo modo, possiamo beneficiare delle ultime funzionalità e correzioni di bug senza cambiamenti radicali.

Ora nel file Magic.jsx, creiamo un componente <VFXS /> che conterrà tutti i componenti <VFXParticles /> per il nostro progetto.

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

E accanto a esso un componente Spells che conterrà la parte di rendering dei nostri incantesimi.

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

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

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

Mi piace mescolare più componenti nello stesso file quando sono strettamente correlati. Questo rende più facile capire la logica del file. Sentiti libero di separarli in cartelle/file distinti se preferisci.

Prepariamo il nostro primo incantesimo, l'incantesimo Void.

Incantesimo del Vuoto

Creiamo un componente chiamato Void che verrà renderizzato all'interno del componente Spells.

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

// ...

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

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

Il componente VFXEmitter emetterà particelle dall'emettitore sparks che abbiamo creato nel componente VFXS.

Con debug impostato su true avremo controlli visivi per modellare l'effetto che vogliamo ottenere.

Ok, creiamo un incantesimo che farà tremare gli orchi!

Un buon effetto VFX è una combinazione delle giuste impostazioni e del tempismo corretto.

Scomponiamo ciò che vogliamo ottenere con l'incantesimo Void.

Per prima cosa, vogliamo una fase di accumulo. Questo è il momento in cui l'energia viene raccolta prima che l'incantesimo venga lanciato. Più è fatta bene, più anticipazione sentirà il giocatore e più potente sembrerà l'incantesimo.

Il nostro accumulo sarà composto da:

• Particelle emesse lentamente verso l'alto
• Una sfera crescente
• Rune scritte e rotanti sul pavimento come se l'incantesimo stesse venendo lanciato

Poi vogliamo la fase di esplosione. Questo è quando l'incantesimo viene lanciato e l'energia viene rilasciata. Più è fatta bene, più soddisfazione sentirà il giocatore.

La nostra esplosione sarà composta da:

• La sfera che esplode (facendola scomparire)
• Particelle che vanno in ogni direzione

E per ogni effetto visivo, aggiungeremo un effetto sonoro per renderlo più immersivo.

Giochiamo con le impostazioni del componente VFXEmitter per ottenere l'effetto desiderato per le particelle di accumulo.

Ecco cosa ho deciso di utilizzare:

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

Vediamo le particelle salire lentamente.

Invece di usare particelle quadrate, utilizziamo triangoli. Per farlo possiamo usare una cone geometry con le impostazioni appropriate.

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

// ...

Le particelle ora sembrano triangoli.

Aggiungiamo ora la sfera crescente. Per farlo dobbiamo aggiungere un nuovo componente VFXParticles al componente 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],
        }}
      />
    </>
  );
};

Impostando il fadeSize a [0.7, 0.9], facciamo crescere lentamente la sfera fino al 70% della sua vita per poi farla rapidamente scomparire durante l'ultimo 10%.