設置
消す
ボーダー
背景
ライン
文字
向き
クリア
引く
消す
ライン
太さ
クリア
カラー
太さ
濃さ
種類
クリア
開始
赤文字
消す
使用
クリア
カテゴリーカバー画像
プログラミング
最終更新日 : 2020/12/24
記事のサムネイル

ゲーム応用編 【sin cosを簡単に理解しよう】

前回の記事では 「 数学的な、単位円を使った解説 」 をしました。

今回はその続き、ゲーム開発に応用して任天堂が開発・発売しているマリオの中に出てくる上下に動く床を作っていきます!

ではさっそく、ゲームエンジンのUnityを使用してやっていきましょう。

Unityをインストールしている方は一緒に、そうでない方もきっと理解できるのでぜひ最後までご覧ください!

準備

その前に、前回の記事をまだご覧になっていない方は以下からどうぞ。
サムネイル

一般教科

数学編 【sin cosを簡単に理解しよう】

pv151 / up25日前

それではUnityプロジェクトの作成から初めましょう。

Unity Hubで下記の4つの設定を済ませて 「 」 ボタンをクリックします。

▼バージョン
2020.1.0a17

▼プロジェクト名
なんでもOK

▼保存先
どこでもOK

▼テンプレート
3D
プロジェクトが開いたら、Main Cameraを選択して

Inspector → Transform → PositionのZを-50に変更。
Inspector → Camera → Clear FlagsをSky BoxからSolid Colorに変更しましょう。
続いてCubeとC# Scriptを追加して、アタッチします。

追加したCubeのPositionが0, 0, 0になっていることを確認しておいてください。

C# Scriptのファイル名はSin_Cosとしました。

追加したC# ScriptをCubeのInspector内にドラッグ & ドロップでアタッチします。
アタッチしたら、Sin_Cosスクリプトをダブルクリックで開いて編集していきましょう!

UnityのMathfについて

Unityには、数学に特化した 「 Mathf 」 というとても便利は数学関数があります。

Mathfにはもちろん、今回のテーマである三角関数を扱うこともできます。

詳しくは
公式のスクリプトリファレンス
からご覧ください。

SinΘ、CosΘを実装したシンプルなコード

それではMathfの関数を使ってシンプルにコードを組んでいきます。

まず、以下の4つの変数を用意します。

「 Vector3 unit_circle = Vector3.zero; 」 は位置代入用、

float angle = 0f; 」 は角度加算用、

float speed = 90f; 」 は回転速度用、

「 float range = 5f; 」 は回転幅用です。

続いて、以下の4つの処理も追加しましょう。

angle += Time.deltaTime * speed; 」 は実際に角度を加算します。

Time.deltaTimeを使用している理由としては、1フレームではなく、1秒間でspeed (90f) ぶんangleの値が増えるようにするためです。

この手法はよく可変フレームレートに対応するために使用されるものですので、Unityを使用してる方は 「 そんなテクニックもあるんだな~ 」 程度で覚えておくと良いでしょう。

次に 「 unit_circle.x = Mathf.Cos(Mathf.Deg2Rad * angle) * range; 」 を追加して実際にangleに対するCosの値 X(1 ~ -1) をrange (5f) で大きくした値 X(5 ~ -5) を代入します。


「 unit_circle.y = Mathf.Sin(Mathf.Deg2Rad * angle) * range; 」 も同様に、angleに対するSinの値 Y(1 ~ -1) をrange (5f) で大きくした値 Y(5 ~ -5) を代入します。

rangeを使用する理由は、単純にCubeを大きく動かすためで、そっちの方が分かりやすいからです。

なのでrangeの値は1fでも10fでもOKで、小さくすれば小さな動きを、大きくすれば大きな動きをします。

最後に  「 transform.position = unit_circle; 」 を追加して、位置をセットします。

▼ 全体像としてはこのようになりました。
▼ コードのコピーはこちらから。
C#
using System.Collections; using System.Collections.Generic; using UnityEngine; public class Sin_Cos : MonoBehaviour {     Vector3 unit_circle = Vector3.zero;     float angle = 0f;     float speed = 90f;     float range = 5f;     void Start()     {              }     void Update()     {         angle += Time.deltaTime * speed;         unit_circle.x = Mathf.Cos(Mathf.Deg2Rad * angle) * range;         unit_circle.y = Mathf.Sin(Mathf.Deg2Rad * angle) * range;         transform.position = unit_circle;     } }
このコードを実行すれば、Cubeが4秒間で1週するようになっていると思います。

ちなみに 「 angle += Time.deltaTime * speed; 」 を 「 angle = 30f; 」 にすれば、Cubeの位置のXは4.330127、Yは2.5となり、この2つの値は角度が30°の時のCos Sinの値を5倍したものとなっています。

▼ 動画で確認

Sin波とCos波

Cubeがこのような動きをする理由はSinCosが関係しています。

Sin波は上下の動き、Cos波は左右の動きとなり、その二つの動きが合わさってCubeがくる~りと回転しているのです。

例えばSin波であれば下記のような、上下の波のようになるのです。

・角度が0°     ~ SinΘ =  0.0
・角度が30°   ~ SinΘ =  0.5
・角度が60°   ~ SinΘ =  0.866...
・角度が90°   ~ SinΘ =  1.0
・角度が120° ~ SinΘ =  0.866...
・角度が150° ~ SinΘ =  0.5
・角度が180° ~ SinΘ =  0.0
・角度が210° ~ SinΘ = -0.5
・角度が240° ~ SinΘ = -0.866...
・角度が270° ~ SinΘ = -1.0
・角度が300° ~ SinΘ = -0.866...
・角度が330° ~ SinΘ = -0.5
・角度が360° ~ SinΘ =  0.0
・~
・~
・~

▼ 動画で確認
さてここで本題に入ります!

マリオの上下に動く床の作り方なのですが、勘の良い人ならもう気づいているかもしれませんね!

マリオの上下に動く床はSin波を使う

そうです!

マリオの上下に動く床を作るには、Sin波を使えば良いのです!

それでは最後に、少しだけ変更を加えてゲームっぽくしてみましょう。

▼ 全体のコード
▼ コードのコピーはこちらから
C#
using System.Collections; using System.Collections.Generic; using UnityEngine; public class Sin_Cos : MonoBehaviour {     [SerializeField] float angle;     Vector3 unit_circle = Vector3.zero;     float speed = 90f;     float range = 5f;     void Start()     {         unit_circle.x = transform.position.x;     }     void Update()     {         angle += Time.deltaTime * speed;         unit_circle.y = Mathf.Sin(Mathf.Deg2Rad * angle) * range;         transform.position = unit_circle;     } }
▼ 動画で確認

まとめ

最後で一気にゲームっぽくなりましたね!

前回の記事では 「 数学的な、単位円を使った解説 」 を

今回の記事では 「 マリオの中に出てくる上下に動く床を作る 」 の2部構成でSin Cosについて解説しました。

学生であれば、最近三角比を習ったという方もいるのではないでしょうか。

とっくに習ったという方でも、sin cosを簡単に理解しようシリーズで、マリオの上下に動く床のような 「こんな使い道があったのか! 」 という気持ちになれたと思います。

少しでもSin Cosについて理解を深めることができたならとても嬉しいです!

それではまた!
サムネイル一般教科

数学編 【sin cosを簡単に理解しよう】

pv1.2K / up1年前

  • 準備
  • UnityのMathfについて
  • SinΘ、CosΘを実装したシンプルなコード
  • Sin波とCos波
  • マリオの上下に動く床はSin波を使う
  • まとめ

この記事を書いたユーザー

ユーザーカバー画像 ユーザーアイコン

かっと

記事 : 5

登録 : 3 (Subscription : 0)

コメント

キャンセル
コメント

記事を報告

報告
キャンセル