ゲーム開発者のための三角関数入門

小学生レベルの算数しか知らなくても大丈夫！視覚的に理解する三角関数の基礎

ゲーム開発に興味があるけど、「三角関数って何？」「数学が苦手だからゲームは作れない？」と思っていませんか？安心してください！この記事では、難しい数式は使わず、視覚的に理解できる形で三角関数の基礎と、それがゲーム開発でどう役立つかを解説します。

この記事を読めば、以下のことができるようになります：

  • sin, cos, tanの基本的な意味を理解する
  • ゲーム開発での三角関数の実際の使い方を知る
  • 簡単なコードで三角関数を使ったエフェクトを作る

1. なぜゲーム開発に三角関数が必要なの？

ゲームの世界では、キャラクターが動いたり、敵が追いかけてきたり、弾が飛んだりしますよね。これらの「動き」を表現するときに三角関数が大活躍します！

ゲーム開発での三角関数の使い所

キャラクターの回転

プレイヤーがマウスを動かした方向にキャラクターが向きを変える時に使います。

円形の動き

敵が円を描いて移動する、惑星がプレイヤーの周りを回るなど。

波のような動き

浮遊感のある動き、水面の表現、キャラクターのアイドルモーションなど。

弾道計算

弾や矢が放物線を描いて飛ぶ、ジャンプの軌道を計算するときに使います。

敵の追跡

敵がプレイヤーに向かって進む角度を計算するときに使います。

2. 三角関数の基本：sin, cos, tan

三角関数とは、「角度」と「長さ」の関係を表すものです。小学生の時に習った「直角三角形」を思い出してください！

まずは直角三角形で考えよう

sin: 0.5
cos: 0.866
tan: 0.577

三角関数の簡単な覚え方

  • sin（サイン）：「高さ」の比率 - 上下の動きに使う
  • cos（コサイン）：「横幅」の比率 - 左右の動きに使う
  • tan（タンジェント）：「傾き」の比率 - sin ÷ cos で計算できる

単位円で考えるとさらにわかりやすい

三角関数は「単位円」（半径1の円）で考えるとゲーム開発でより使いやすくなります。

sin: 0.0
cos: 1.0
X座標: 1.0
Y座標: 0.0

重要ポイント：単位円では、角度θの点の座標は (cos θ, sin θ) になります！これがゲーム開発で大活躍します。

3. どんな場面で使うのか？具体例で見てみよう

例1: キャラクターを円運動させる

// キャラクターを円運動させるコード function moveInCircle(centerX, centerY, radius, angle) { // cosとsinを使って円周上の座標を計算 let x = centerX + radius * Math.cos(angle); let y = centerY + radius * Math.sin(angle); // キャラクターをその位置に配置 character.x = x; character.y = y; } // ゲームループ内で毎フレーム角度を更新 angle += speed; moveInCircle(300, 150, radius, angle);

例2: プレイヤーの方向を向く敵

画面上でマウスを動かすと敵がプレイヤー（マウス）の方向を向きます

// 敵がプレイヤーの方向を向くコード function facePlayer(enemy, player) { // プレイヤーと敵の位置の差を計算 let dx = player.x - enemy.x; let dy = player.y - enemy.y; // arctanを使って角度を計算（Math.atan2がこれに相当） let angle = Math.atan2(dy, dx); // 敵の向きを設定 enemy.rotation = angle; }

例3: 波のような動き

// 波のような動きを作るコード function sineWaveMotion(baseY, amplitude, time, frequency) { // sinを使って上下に動く値を計算 return baseY + amplitude * Math.sin(time * frequency); } // ゲームループ内で毎フレーム時間を更新 time += 0.1; object.y = sineWaveMotion(150, amplitude, time, 0.1);

4. 三角関数を使った便利なテクニック

角度とラジアンの変換

JavaScriptの三角関数は「ラジアン」という単位を使います。度数法（私たちが慣れ親しんだ0〜360度）からラジアンに変換する必要があります。

// 度数法からラジアンへの変換 function degreesToRadians(degrees) { return degrees * (Math.PI / 180); } // ラジアンから度数法への変換 function radiansToDegrees(radians) { return radians * (180 / Math.PI); }

よく使う角度の値

角度 ラジアン sin cos
0° 0 0 1
90° π/2 1 0
180° π 0 -1
270° 3π/2 -1 0
360° 2π 0 1

覚えておくと便利なこと：

  • sinは0°→90°→180°→270°→360°の順に、0→1→0→-1→0と変化します
  • cosは0°→90°→180°→270°→360°の順に、1→0→-1→0→1と変化します
  • これらの値を使えば、上下左右の動きを簡単に組み合わせることができます

5. まとめと次のステップ

今回学んだこと

  • 三角関数（sin, cos, tan）の基本的な意味
  • 単位円と三角関数の関係
  • ゲーム開発での具体的な使い方（円運動、追跡、波動）

次に試してみること

  • この記事のデモを改造して、スピードや動きを変えてみる
  • 複数のオブジェクトに波動効果を適用してみる
  • 円運動と波動を組み合わせて、より複雑な動きを作ってみる

三角関数は一度理解すると、ゲーム開発で様々な動きを表現するための強力なツールになります。難しく考えず、「cosは横、sinは縦」というシンプルな理解から始めて、少しずつ実験してみてください！