⚠️ This lesson is not yet translated in your language, it will be available soon!

In this lesson we will combine our VFX engine to many things we've learned during this course to create a simple 3D game: A wizard fighting vile orcs using spells and magic. 🧙‍♂️

A solid foundation for your own web game development projects!

Starter Project

The starter project contains :

• A playground scene I prepared using the Archway model found on Poly Pizza by Poly by Google CC-BY
• A Wizard and an Orc models from Quaternius. Both rigged and animated.
• An animated circle following the mouse cursor
• Basic lighting setup with shadows
• An almost empty <UI /> component made with Tailwind CSS
• Sound effects for the spells found on SoundEffectLab

Here is what the starter project looks like.

Ready to start? 🪄

Welcome to Hogwarts 🏰

Before implementing any sort of game logic, let's practice our magic skills at Hogwarts by creating spells using the VFX engine we built in the dedicated lesson.

Like we did in the fireworks lesson, we can use the published version of the VFX engine. Let's add it to our project:

Copy
yarn add wawa-vfx@^1.0.0

By using @^1.0.0, we ensure that we always use the major version 1 of the package but including the latest minor and patch versions. This way, we can benefit from the latest features and bug fixes without breaking changes.

Now in the Magic.jsx file, let's create a <VFXS /> component that will hold all our <VFXParticles /> components for our project.

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

And next to it a Spells component that will hold the rendering part of our spells.

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

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

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

I like to mix multiple components in the same file when they are closely related. It makes it easier to understand the logic of the file. Feel free to split them into separate folders/files if you prefer.

Let's prepare our first spell, the Void spell.

Void Spell

Let's create a component named Void that will be rendered in the Spells component.

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

// ...

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

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

The VFXEmitter component will emit particles from the sparks emitter we created in the VFXS component.

With debug set to true we will have visual controls to shape the effect we want to achieve.

Ok, let's create a spell that will make the orcs tremble!

A good VFX effect is a combination of the right settings and the right timing.

Let's decompose what we want to achieve with the Void spell.

First, we want a build-up phase. This is when the energy is gathered before the spell is cast. The best it's done, the more anticipation the player will feel, and the more powerful the spell will look.

Our buildup will be composed of:

• Particles emitted slowly upwards
• A growing sphere
• Rotating written runes on the floor as if the spell was being cast

Then, we want the blast phase. This is when the spell is cast and the energy is released. The best it's done, the more satisfying the player will feel.

Our blast will be composed of:

• The sphere exploding (making it disappear)
• Particles going in every direction

And for each visual effect, we will add a sound effect to make it more immersive.

Let's play with the settings of the VFXEmitter component to achieve the desired effect for the buildup particles.

Here is what I came up with:

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

We can see the particles slowly going upwards.

Instead of squared particles let's use triangles. To do it we can use a cone geometry with the appropriate settings.

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

// ...

The particles look like triangles now.

Now let's add the growing sphere. To do that we need to add a new VFXParticles component to the VFXS component:

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

By setting the fadeSize to [0.7, 0.9] we make the sphere grow slowly until 70% of its lifetime and then quickly disappear during the last 10%.