スカラー倍

記号の意味

: ベクトル- 矢印付きの文字
: 長さ- ベクトルの大きさ
: 単位ベクトル- 長さ1のベクトル
: 内積- 2つのベクトルから数値を計算
: シータ- 角度を表すギリシャ文字
: 余弦- 角度から比率を求める関数

概要

ベクトルに数値を掛けることで、速度の増減や方向の反転を実現し、ダッシュやスローモーションなどの動きを制御する方法を学びます。

スカラーとは

スカラー倍を理解する前に、まずスカラーとベクトルの違いを押さえましょう。
スカラー（scalar）は、方向を持たない単なる数値です。

	スカラー	ベクトル
持つ情報	大きさのみ	大きさ + 方向
表現	1つの数値	複数の成分
例	温度: 25°C 倍率: 2倍「時速50km」	速度: (35, 35) 力: (10, 0) 「北東に時速50km」
コード	`const k = 2;`	`const v = { x: 3, y: 4 };`

なぜスカラーをベクトルに掛けるのか？

ゲーム開発では、「方向は変えずに大きさだけ調整する」という操作が頻繁に必要です。

ダッシュ: 移動方向はそのまま、速度を2倍に
スローモーション: 移動方向はそのまま、速度を0.5倍に
後退: 移動方向を反転（-1倍）

この「大きさだけを変える」操作がスカラー倍です。

スカラー倍の基本

スカラー倍は、ベクトルに単なる数値（スカラー）を掛ける操作です。スカラーとは「方向を持たない数値」のことで、2倍、0.5倍、-1倍といった倍率を表します。

ゲームでキャラクターを「ダッシュさせる」「ゆっくり歩かせる」「後ろに下がる」といった動作を実現する時、ベクトルにスカラーを掛けるだけで速度を自由に調整できます。

デモ: スカラー倍で速度を変える

スカラー値を変更すると、移動速度がどう変化するか観察しましょう！

スカラー値（速度倍率）

現在の倍率: 1.0倍

数式での表現

$k \times (x, y) = (kx, ky)$

パラメータの意味

$k$ : スカラー（倍率を表す数値）
$(x, y)$ : 元のベクトル
$(kx, ky)$ : 結果のベクトル

計算例:

$2 \times (3, 4) = (2 \times 3, 2 \times 4) = (6, 8)$

元のベクトル $(3, 4)$ を2倍すると $(6, 8)$ になります。

1元のベクトルを確認

計算したいベクトル $(x, y)$ を用意する

2各成分にスカラーを掛ける

$x$ 成分: $x \times k = kx$
$y$ 成分: $y \times k = ky$

3結果のベクトルを得る

スカラー倍した結果は $(kx, ky)$

スカラー値の選び方

実現したい効果	使うスカラー値	例
加速・拡大	$k > 1$	$2 \times (3, 4) = (6, 8)$
減速・縮小	$0 < k < 1$	$0.5 \times (4, 6) = (2, 3)$
そのまま	$k = 1$	$1 \times (3, 4) = (3, 4)$
停止	$k = 0$	$0 \times (3, 4) = (0, 0)$
逆方向・反転	$k < 0$	$-1 \times (3, 4) = (-3, -4)$

JavaScriptでの計算例

JavaScript

const vector = { x: 3, y: 4 };
const scalar = 2;

// スカラー倍の計算
const result = {
  x: vector.x * scalar,  // 3 * 2 = 6
  y: vector.y * scalar   // 4 * 2 = 8
};

console.log(result);  // { x: 6, y: 8 }

デモ: スライダーで倍率を変えてベクトルの変化を観察

下のデモで、スカラーの値を変更してベクトルがどう変化するか観察してみましょう！元のベクトル（青・破線）とスカラー倍した結果のベクトル（赤・実線）を比較できます。

元のベクトル（青・破線）

X: 3

Y: 2

スカラー（倍率）: 1.0

-3 (逆方向3倍)0 (停止)3 (3倍速)

元のベクトル

解説

スカラー倍

解説

➡️ 等速（変化なし）