Dans cette leçon, nous allons combiner notre moteur VFX avec de nombreux éléments que nous avons appris durant ce cours pour créer un jeu 3D simple : un sorcier combattant de vils orcs en utilisant des sorts et de la magie. 🧙‍♂️

Une base solide pour vos propres projets de développement de jeux web !

Projet de Départ

Le projet de départ contient :

• Une scène de terrain de jeu que j'ai préparée en utilisant le modèle Archway trouvé sur Poly Pizza par Poly de Google CC-BY
• Un Sorcier et des modèles d'Orc de Quaternius. Tous deux sont équipés et animés.
• Un cercle animé suivant le curseur de la souris
• Une configuration d'éclairage de base avec des ombres
• Un composant <UI /> presque vide réalisé avec Tailwind CSS
• Des effets sonores pour les sorts trouvés sur SoundEffectLab

Voici à quoi ressemble le projet de départ.

Prêt à commencer ? 🪄

Bienvenue à Poudlard 🏰

Avant de mettre en œuvre une quelconque logique de jeu, pratiquons nos compétences magiques à Poudlard en créant des sorts à l'aide du moteur VFX que nous avons construit dans la leçon dédiée.

Comme nous l'avons fait dans la leçon sur les feux d'artifice, nous pouvons utiliser la version publiée du moteur VFX. Ajoutons-le à notre projet :

Copy
yarn add wawa-vfx@^1.0.0

En utilisant @^1.0.0, nous nous assurons d'utiliser toujours la version majeure 1 du package tout en incluant les dernières versions mineures et correctives. De cette façon, nous pouvons profiter des dernières fonctionnalités et correctifs sans changements majeurs.

Maintenant, dans le fichier Magic.jsx, créons un composant <VFXS /> qui contiendra tous nos composants <VFXParticles /> pour notre projet.

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

Et à côté, un composant Spells qui contiendra la partie rendu de nos sorts.

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

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

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

J'aime mélanger plusieurs composants dans le même fichier lorsqu'ils sont étroitement liés. Cela facilite la compréhension de la logique du fichier. N'hésitez pas à les répartir dans des dossiers/fichiers séparés si vous préférez.

Préparons notre premier sort, le sort Void.

Sortilège du Vide

Créons un composant nommé Void qui sera rendu dans le composant Spells.

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

// ...

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

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

Le composant VFXEmitter émettra des particules de l'émetteur sparks que nous avons créé dans le composant VFXS.

Avec debug réglé sur true, nous aurons des contrôles visuels pour façonner l'effet que nous voulons obtenir.

Ok, créons un sort qui fera trembler les orcs !

Un bon effet VFX est une combinaison des bons réglages et du bon timing.

Décomposons ce que nous voulons réaliser avec le sort Void.

Tout d'abord, nous voulons une phase de montée en puissance. C'est lorsque l'énergie est accumulée avant que le sort ne soit lancé. Plus cette étape est bien réalisée, plus le joueur ressentira d'anticipation et plus le sort paraîtra puissant.

Notre montée en puissance sera composée de :

• Particules émises lentement vers le haut
• Une sphère en croissance
• Des runes écrites tournant sur le sol comme si le sort était en train d'être lancé

Ensuite, nous voulons la phase d'explosion. C'est lorsque le sort est lancé et que l'énergie est libérée. Plus cette étape est bien réalisée, plus le joueur se sentira satisfait.

Notre explosion sera composée de :

• La sphère qui explose (ce qui la fait disparaître)
• Des particules allant dans toutes les directions

Et pour chaque effet visuel, nous ajouterons un effet sonore pour rendre l'expérience plus immersive.

Jouons avec les paramètres du composant VFXEmitter pour obtenir l'effet souhaité pour les particules de montée en puissance.

Voici ce que j'ai conçu :

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

Nous pouvons voir les particules monter lentement vers le haut.

Au lieu de particules carrées, utilisons des triangles. Pour cela, nous pouvons utiliser une cone geometry avec les paramètres appropriés.

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

// ...

Les particules ressemblent maintenant à des triangles.

Ajoutons maintenant la sphère en croissance. Pour cela, nous devons ajouter un nouveau composant VFXParticles au composant 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],
        }}
      />
    </>
  );
};

En réglant le fadeSize à [0.7, 0.9], nous faisons en sorte que la sphère croisse lentement jusqu'à 70% de sa durée de vie et disparaisse rapidement au cours des 10% restants.