このレッスンでは、VFXエンジンを使用してコース中に学んだ多くのことを組み合わせ、簡単な3Dゲームを作成します。それは、呪文と魔法を使用して邪悪なオークと戦うウィザードです。🧙‍♂️

あなた自身のウェブゲーム開発プロジェクトのための確固たる基盤です！

スタータープロジェクト

スタータープロジェクトには以下が含まれています：

• Poly Pizzaで見つけたArchwayモデルを使用したプレイグラウンドシーン（GoogleのPolyによる CC-BY）
• Quaterniusからのウィザードとオークモデル。どちらもリギングされており、アニメーションされています。
• マウスカーソルを追従するアニメーション化された円
• 影を伴う基本的な照明設定
• ほぼ空の <UI /> コンポーネント（Tailwind CSSで作成）
• SoundEffectLabで見つけた呪文用の効果音

スタータープロジェクトの外観はこちらです。

準備はできましたか？🪄

ホグワーツへようこそ 🏰

ゲームロジックを実装する前に、専用のレッスンで構築したVFXエンジンを使ってホグワーツで魔法スキルを練習してみましょう。

花火のレッスンで行ったように、公開されているVFXエンジンを使用できます。プロジェクトに追加しましょう：

Copy
yarn add wawa-vfx@^1.0.0

@^1.0.0を使用することで、パッケージのメジャーバージョン1を常に使用し、最新のマイナーおよびパッチバージョンを含めることができます。これにより、互換性を壊すことなく、最新の機能やバグ修正の恩恵を受けることができます。

では、Magic.jsxファイルで、プロジェクトのすべての<VFXParticles />コンポーネントを保持する<VFXS />コンポーネントを作成しましょう。

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 Spell

SpellsコンポーネントでレンダリングされるVoidという名前のコンポーネントを作成しましょう。

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

// ...

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

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

VFXEmitterコンポーネントは、VFXSコンポーネントで作成したsparksエミッターからパーティクルを放出します。

debugをtrueに設定すると、目指すエフェクトを形作るためのビジュアルコントロールを提供します。

さあ、オークたちを震え上がらせる呪文を作りましょう！

良いVFXエフェクトは、適切な設定とタイミングの組み合わせによるものです。

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%で急速に消えます。