はじめに

ブロック崩しゲームで実装した、魔法詠唱時の魔法陣回転エフェクトをThree.jsの3D空間に移植してみました。

魔法陣はプレイヤーを中心に回転し、さらに魔法陣自身も回転、点滅するエフェクトが加わっています。

2Dで実装した際と同様に、平面上を回転するアニメーションなので実装の仕方は基本的に同じです。

キャラクター座標を中心に Math.cos(angle)　 Math.sin(angle) で回転させるシンプルな処理です。

その他、先日実装したキャラクターの散歩アニメーションを新しく設置した建物内に移動するように作りこんでみました。

あと３人ぐらいキャラクターを増やしてフィールド内を動かすと賑やかになるかもです。

Three.jsは、色々できて面白いですね。

1. 魔法陣の配置と回転

魔法陣をキャラクターの周りに配置し、円周上を回転させる方法について説明します。まず、魔法陣を4つの位置（上下左右）に配置し、プレイヤーの周りを回転させるために Math.cos と Math.sin を使いました。

let rotationAngle = 0;

function updateMagicCirclesPosition() {
  const rotationSpeed = 0.01; // 回転速度を調整

  // 回転角度を更新
  rotationAngle += rotationSpeed;

  magicCircles.forEach((magic, index) => {
    const angle = rotationAngle + (index * Math.PI) / 2; // 各魔法陣の位置をずらす
    const radius = 2; // 回転半径

    // キャラクターの周りを回転させる
    magic.position.set(
      config.player.box.position.x + Math.cos(angle) * radius, // x座標
      0.2, // 高さは固定
      config.player.box.position.z + Math.sin(angle) * radius // z座標
    );
    magic.rotation.z += 0.015; // 回転速度を調整
  });
}
  • rotationAngle を毎フレーム更新し、魔法陣がプレイヤーを中心に回転します。
  • Math.cos と Math.sin で、円周上に魔法陣を配置します。

2. 魔法陣自身の回転

魔法陣自体にも回転を追加しました。これにより、魔法陣は回転しながらプレイヤーの周りを回るようになります。

magic.rotation.z += 0.015; // 回転速度を調整

magic.rotation.z を増加させることで、魔法陣が自身の軸で回転します。

3. 魔法陣の点滅エフェクト

透明度（opacity）を変更して、魔法陣に点滅エフェクトを加えました。点滅の速さや透明度の最小値・最大値を調整することで、より視覚的にダイナミックな演出ができます。

if (magic.material.opacity < 1 && !config.magicCirclePlayer.isOpacity) {
  magic.material.opacity += 0.008;
} else {
  config.magicCirclePlayer.isOpacity = true;
  magic.material.opacity -= 0.008;
  if (magic.material.opacity < 0.1) config.magicCirclePlayer.isOpacity = false;
}
  • magic.material.opacity を増減させることで、魔法陣が点滅します。
  • config.magicCirclePlayer.isOpacity を使って、透明度の増減の方向を管理します。

4. アニメーションループの更新

最後に、requestAnimationFrame を使ってアニメーションをループさせ、魔法陣の動きがスムーズに描画されるようにしました。

function animate(timestamp) {
  if (!config.lastTime) config.lastTime = timestamp;
  requestAnimationFrame(animate); // アニメーションを実行
  const deltaTime = (timestamp - config.lastTime) / 1000; // 秒単位での経過時間
  config.lastTime = timestamp;

  updateMagicCirclesPosition(); // 魔法陣の位置更新

  config.renderer.render(config.scene, config.camera);
}
animate();

5. まとめ

今回の実装では、以下のポイントを実現しました：

  • 魔法陣の回転: プレイヤーを中心に4つの魔法陣が回転します。
  • 魔法陣自身の回転: 魔法陣自体も自軸で回転します。
  • 点滅エフェクト: 魔法陣が透明度を変化させて点滅します。
  • アニメーションループ: requestAnimationFrame を使ってスムーズにアニメーションを実行します。

これにより、プレイヤーを中心に回転し、魔法陣自体も回転しながら点滅するエフェクトが実現できました。さらに、このアプローチは簡単にカスタマイズできるので、回転速度や点滅のパラメータを変更することで、様々な演出を作成できます。