アニメーションと演出

エンジンは、ノードのプロパティを滑らかに変化させるアニメーション機能と、画面シェイクやフラッシュなどの演出効果を提供します。

基本のアニメーション

engine.animate(id, props, config)

ノードのプロパティを指定時間かけて変化させます。await で完了を待てます。

// 移動
await engine.animate('player', { x: 300, y: 100 }, { duration: 500, easing: 'easeOutQuad' });

// フェードアウト + 拡大
await engine.animate('enemy', { alpha: 0, scaleX: 2, scaleY: 2 }, { duration: 300 });

アニメーション可能なプロパティは x, y, alpha, scaleX, scaleY, rotation, tintAmount です。

アニメーション設定

プロパティ	型	デフォルト	説明
duration	number	必須	持続時間（ミリ秒）
easing	EasingName	'easeOutQuad'	イージング関数
delay	number	0	開始までの遅延（ミリ秒）

イージング一覧

イージング名	動き
linear	等速
easeInQuad	ゆっくり始まる
easeOutQuad	ゆっくり止まる（汎用、おすすめ）
easeInOutQuad	ゆっくり始まってゆっくり止まる
easeInCubic / easeOutCubic / easeInOutCubic	Quad より強い加減速
easeOutBack	行き過ぎてから戻る（ポップイン演出に）
easeOutElastic	バネのように揺れる
easeOutBounce	バウンドする

TIP

迷ったら easeOutQuad を使えば大抵自然に見えます。UI のポップアップには easeOutBack が気持ちいいです。

---

複数アニメーションの組み合わせ

タイムライン: engine.timeline(steps)

宣言的にアニメーションの順序を記述できます。

await engine.timeline([
  // 1. 敵が左に移動
  { type: 'animate', id: 'enemy', props: { x: 100 }, config: { duration: 200 } },
  // 2. 少し待つ
  { type: 'wait', ms: 300 },
  // 3. コールバック実行
  { type: 'call', fn: () => engine.update('label', { text: 'Hit!' }) },
  // 4. 複数ノードを同時にフェードアウト
  {
    type: 'parallel',
    steps: [
      { type: 'animate', id: 'a', props: { alpha: 0 }, config: { duration: 200 } },
      { type: 'animate', id: 'b', props: { alpha: 0 }, config: { duration: 200 } },
    ],
  },
]);

ステップ type	説明
animate	ノードアニメーション
wait	指定ミリ秒の待機
call	任意の関数を実行
parallel	複数ステップを同時実行

順次実行: engine.sequence(...fns)

関数を順番に実行します。

await engine.sequence(
  () => engine.animate('a', { x: 100 }, { duration: 200 }),
  () => engine.animate('b', { x: 200 }, { duration: 200 }),
);

同時実行: engine.parallel(...fns)

複数の関数を同時に実行し、すべて完了するまで待ちます。

await engine.parallel(
  () => engine.animate('a', { alpha: 0 }, { duration: 200 }),
  () => engine.animate('b', { alpha: 0 }, { duration: 200 }),
);

待機: engine.wait(ms)

ゲームループに連動した待機です。

await engine.wait(500); // 500ms 待つ

---

画面効果

画面シェイク

被弾や爆発の際に画面を揺らす演出です。

engine.shake(); // デフォルト: 強度 8px、300ms
engine.shake(12, 500); // 強め、500ms

パラメータ	デフォルト	説明
intensity	8	揺れの大きさ（px）
duration	300	持続時間（ms）

画面フラッシュ

撃破やダメージ時に画面を一瞬光らせます。

engine.flash(); // デフォルト: 白、200ms
engine.flash('#ef4444', 150); // 赤フラッシュ
engine.flash('#f97316', 300); // オレンジ（大爆発）

パラメータ	デフォルト	説明
color	'#fff'	フラッシュの色
duration	200	持続時間（ms）

---

パーティクル

爆発や魔法のエフェクトに使えるパーティクルシステムです。

// 爆発エフェクト
engine.emitParticles({
  x: 300,
  y: 200,
  count: 15,
  colors: ['#f97316', '#ef4444', '#fbbf24'],
  speed: 150,
  lifetime: 500,
  size: 4,
});

// 上方向に噴き出す演出
engine.emitParticles({
  x: 200,
  y: 400,
  count: 20,
  colors: ['#60a5fa', '#93c5fd'],
  speed: 200,
  lifetime: 800,
  size: 3,
  direction: -Math.PI / 2, // 上方向
  spread: Math.PI * 0.5, // 90 度の扇形に拡散
  gravity: 200, // 重力で落下
});

パーティクル設定

プロパティ	型	デフォルト	説明
x, y	number	必須	発生位置
count	number	12	パーティクル数
speed	number	150	初速（px/秒）
lifetime	number	600	寿命（ms）
size	number	4	サイズ（px）
colors	string[]	['#fff']	ランダムに選ばれる色の配列
spread	number	Math.PI * 2	拡散角度（ラジアン）
direction	number	0	中心方向（ラジアン）
gravity	number	0	重力（px/秒²）

INFO

direction と spread を組み合わせることで、全方向に飛び散る爆発（デフォルト）や、特定方向に噴き出す演出（噴水・火柱など）を表現できます。

---

実践的な演出の組み合わせ例

ダメージ演出

// 赤点滅 + シェイク + パーティクル
engine.update('player', { tint: '#ff0000', tintAmount: 0.6 });
engine.shake(6, 200);
engine.emitParticles({
  x: playerX,
  y: playerY,
  count: 8,
  colors: ['#ef4444'],
  speed: 100,
  lifetime: 300,
});
await engine.animate('player', { tintAmount: 0 }, { duration: 400 });

撃破演出

// フラッシュ + パーティクル + フェードアウト
engine.flash('#fff', 100);
engine.emitParticles({
  x: enemyX,
  y: enemyY,
  count: 20,
  colors: ['#f97316', '#ef4444', '#fbbf24'],
  speed: 200,
  lifetime: 600,
});
await engine.animate('enemy', { alpha: 0, scaleX: 1.5, scaleY: 1.5 }, { duration: 300 });
engine.remove('enemy');