単位ベクトル（正規化）

概要

ベクトルの長さを1にして方向情報だけを取り出すことで、どの方向でも一定速度で移動するキャラクター制御を実現する方法を学びます。

単位ベクトルとは

単位ベクトル（unit vector）は、長さが1のベクトルのことです。方向の情報だけを持ち、大きさは常に1です。

任意のベクトルを単位ベクトルに変換する操作を正規化（normalization）と呼びます。各成分を元の長さで割ることで、方向はそのまま、長さだけを1にします。

キャラクターの移動を実装する際、「斜め移動が速くなる」「方向はそのまま、速度だけ変えたい」といった問題に遭遇します。単位ベクトルを使うと、これらの問題を解決できます。

デモ: 単位ベクトルがないと斜め移動が速くなる

単位ベクトルを使わないと、斜め移動が真横移動より速くなってしまいます。デモで確認してみましょう！

単位ベクトルの作り方（正規化）

任意のベクトルを単位ベクトルに変換するには、各成分を元の長さで割ります。この操作を正規化と呼びます。

数式での表現

基本の式:

これを成分ごとに書くと:

計算例:

ベクトル $(3, 4)$ を正規化すると：

単位ベクトルになったか確認：

→ 長さが1になった！これが単位ベクトルです。

単位ベクトルの使い方

単位ベクトルは方向のみを表すので、これに速度（スカラー値）を掛けることで、最終的な移動量を決定します。

基本パターン:

実用例

方向を保ったまま長さを1にすることで、速度を一定に保ちながら自由に方向を変えられます。

どんな方向でも同じ速さで移動

const direction = { x: 3, y: 4 };
const length = Math.hypot(direction.x, direction.y);  // 5
const normalized = { 
  x: direction.x / length,  // 0.6
  y: direction.y / length   // 0.8
};
// → どの方向でも長さ1（同じ速さ）

方向と速度の独立制御

// 入力から方向を取得
const input = { x: 1, y: 1 };  // 右上
const direction = normalize(input);  // 長さ1に正規化

// 速度を自由に設定
const speed = 10;
const velocity = {
  x: direction.x * speed,
  y: direction.y * speed
};
// → 右上に速度10で移動（斜め移動も速すぎない）

単位ベクトルの生成

// 特定の方向を向くベクトル（長さ1）
const rightVector = normalize({ x: 1, y: 0 });    // (1, 0)
const upVector = normalize({ x: 0, y: 1 });       // (0, 1)
const diagonalVector = normalize({ x: 1, y: 1 }); // (0.707, 0.707)

デモ: 様々な方向のベクトルを単位ベクトルに

下のデモで、どんなベクトルも正規化すると長さ1の単位ベクトルになることを確認しましょう！

if (length === 0) {
  return { x: 0, y: 0 };
}