ここではゲーム数学をDXライブラリのコードと合わせて学びます。
DXライブラリの設定方法はこちら→DXライブラリ置き場 HOME
サンプルソース
実行結果

注目してほしいのはこの行です。
プレイヤーのXとY座標に難しそうな値を入力していますね。でも大丈夫です。僕も昔はこれに四苦八苦したので、できるだけ分かりやすくご説明します。
まず、斜めに移動させるために角度をつけることが必要ですね。
しかしプログラミングの世界では、マウスで引っ張って角度をつけることはできません。
なので数学の力を借りましょう。数学という単語で身構えないで下さいね、きっとできるようになりますから。
この三角形を見て下さい。

「え? 斜め移動なのにどうして三角形が出てくるの?」
と思った方もいると思います。しかしよく見てみて下さい。

よく見ると、三角形の一番長い辺は、斜めに描かれていますね。
つまり三角形を利用することで、斜めの辺を表現できそうです。
では具体的に三角形の斜めの辺はどのように決まるのでしょうか。
実は……横と縦の線で決まります。

三角形は必然的に、横と縦が決まれば斜めの辺も決まるので、縦横同時にキャラクターを移動させる
ことで、斜めを表現できます。つまり
PlayerX += 2.0f;
PlayerY += 1.0f;
DXライブラリの設定方法はこちら→DXライブラリ置き場 HOME
サンプルソース
実行結果

注目してほしいのはこの行です。
// プレイヤーを30度の角度をつけて移動させる
PlayerX += cos(30.0f * DEGTORAD);
PlayerY += sin(30.0f * DEGTORAD);
プレイヤーのXとY座標に難しそうな値を入力していますね。でも大丈夫です。僕も昔はこれに四苦八苦したので、できるだけ分かりやすくご説明します。
まず、斜めに移動させるために角度をつけることが必要ですね。
しかしプログラミングの世界では、マウスで引っ張って角度をつけることはできません。
なので数学の力を借りましょう。数学という単語で身構えないで下さいね、きっとできるようになりますから。
この三角形を見て下さい。

「え? 斜め移動なのにどうして三角形が出てくるの?」
と思った方もいると思います。しかしよく見てみて下さい。

よく見ると、三角形の一番長い辺は、斜めに描かれていますね。
つまり三角形を利用することで、斜めの辺を表現できそうです。
では具体的に三角形の斜めの辺はどのように決まるのでしょうか。
実は……横と縦の線で決まります。

三角形は必然的に、横と縦が決まれば斜めの辺も決まるので、縦横同時にキャラクターを移動させる
ことで、斜めを表現できます。つまり
PlayerX += 2.0f;
PlayerY += 1.0f;
これでもいいわけです。しかしもっと正確な角度で指定する方法があります。それがこれです。
ここで分かりやすくするために、三角形の辺に名前をつけてあげます。

斜めの辺はr、X軸に被っている辺はx、Y軸に被っている辺はyとしました。
まずはcos(コサイン)から説明します。
みなさん、モンキー・D・ルフィはご存じでしょうか、全身がゴムでできているので、腕も足も自由自在に伸縮できるあのルフィです。あのルフィを思い浮かべて下さい。

ルフィが上空の敵に向かってゴムゴムのピストルを繰り出すとします。

この時、敵との距離が遠ければ遠いほど、rの値は大きくなり、同時にxの値も大きくなるのはお分かりでしょうか?

このように、rの値とxの値は連携しています。すなわち、比例しているのです。
ではcosとは、いったいなんなのでしょうか。

cosとは、xをrで割った値です。
これだけではいまいちピンとこないと思いますので実際に使ってみましょう。
あなたはシューティングゲームを開発しているとします。そこで、30度の角度で移動するプレイヤーを実装することにしました。なお、プレイヤーは1秒につき2m進みます。
これを図で表すと……

こうなりますね? しかし実際にプログラムに落とし込むときには、X軸にどの位進むのか、Y軸にどの位進むのかをプログラミングしなければなりません。

そこで役に立つのがcosです。

この式に把握している情報を当てはめていきましょう。
今回は30度の角度をつけたいので、cos30°、rには2をあてはめます。すると……こうなりますね。

さて、私たちが求めたいのはxです。なので両辺に2を掛けて、X=の形にします。

するとどうでしょう! X軸にどの位加算すればよいのかがわかります!

ちなみにcos30の値は0.8660です。
つまりX軸には1.732m加算すればよいということですね。

なお、cosの値は覚える必要がありません。なぜなら、math.hにあるcos()関数で取得できるからです。ただし、取得するには私たちが普段使っている度数表記(DEG)ではなく、ラジアン表記(RAD)で引数を渡してあげる必要があります。
※DEGTORADは、度数表記をラジアン表記に変更するために掛ける定数です。(0.017453293)
つまりこのように書くことで30度の角度に動いた場合のXの値を求めることができるのです。
ただし、このままではr=1なので、rの値をちゃんと書いてやれば、任意のスピードにできます。
しかしこれだけではX軸にしか移動しません。Y軸にも加算してあげなければなりませんね。
そこで使用するのがsinです。
sinもcosと同様に使います。
ルフィが上空の敵に向かってゴムゴムのピストルを撃つとします。すると、rに対応してyも伸びますね。

もちろんrとyは連携しています。そしてsinとはyをrで割った値です。

理屈として、sinもcosもほとんど同じようなもので、対応する辺がy軸かx軸かの違いしかありません。cosを理解できた方は、sinはy軸バージョンとお考え下さい。
なので式変形することで、y = sin30° × 2とすることができます。
なので、先ほどと同様にrの値を1以外にしてスピードを変えることもできます。
このように、XとYの値をcosとsinを用いて変化させることで、きっちり30度の角度でプレイヤーを移動させることができるわけです。
なお、DXライブラリは0度がなぜか上ではなく、右に向いているので、サンプルプログラムでは斜め右下に移動します。
いかがでしたでしょうか、この記事がいいと思ったら、下にソーシャルボタンを用意しているので、
ぜひ共有をお願いします。この記事に関して要望などございましたらTwitterまでお願いします。
https://twitter.com/dmsbot
// プレイヤーを30度の角度をつけて移動させる
PlayerX += cos(30.0f * DEGTORAD);
PlayerY += sin(30.0f * DEGTORAD);
ここで分かりやすくするために、三角形の辺に名前をつけてあげます。

斜めの辺はr、X軸に被っている辺はx、Y軸に被っている辺はyとしました。
まずはcos(コサイン)から説明します。
cos物語 ~ rが伸びれば、xが伸びる。~
みなさん、モンキー・D・ルフィはご存じでしょうか、全身がゴムでできているので、腕も足も自由自在に伸縮できるあのルフィです。あのルフィを思い浮かべて下さい。

ルフィが上空の敵に向かってゴムゴムのピストルを繰り出すとします。

この時、敵との距離が遠ければ遠いほど、rの値は大きくなり、同時にxの値も大きくなるのはお分かりでしょうか?

このように、rの値とxの値は連携しています。すなわち、比例しているのです。
ではcosとは、いったいなんなのでしょうか。

cosとは、xをrで割った値です。
これだけではいまいちピンとこないと思いますので実際に使ってみましょう。
あなたはシューティングゲームを開発しているとします。そこで、30度の角度で移動するプレイヤーを実装することにしました。なお、プレイヤーは1秒につき2m進みます。
これを図で表すと……

こうなりますね? しかし実際にプログラムに落とし込むときには、X軸にどの位進むのか、Y軸にどの位進むのかをプログラミングしなければなりません。

そこで役に立つのがcosです。

この式に把握している情報を当てはめていきましょう。
今回は30度の角度をつけたいので、cos30°、rには2をあてはめます。すると……こうなりますね。

さて、私たちが求めたいのはxです。なので両辺に2を掛けて、X=の形にします。

するとどうでしょう! X軸にどの位加算すればよいのかがわかります!

ちなみにcos30の値は0.8660です。
つまりX軸には1.732m加算すればよいということですね。

なお、cosの値は覚える必要がありません。なぜなら、math.hにあるcos()関数で取得できるからです。ただし、取得するには私たちが普段使っている度数表記(DEG)ではなく、ラジアン表記(RAD)で引数を渡してあげる必要があります。
// プレイヤーを30度の角度をつけて移動させる
PlayerX += cos(30.0f * DEGTORAD);
※DEGTORADは、度数表記をラジアン表記に変更するために掛ける定数です。(0.017453293)
つまりこのように書くことで30度の角度に動いた場合のXの値を求めることができるのです。
ただし、このままではr=1なので、rの値をちゃんと書いてやれば、任意のスピードにできます。
// プレイヤーを30度の角度をつけて移動させる(倍速)
PlayerX += cos(30.0f * DEGTORAD) * 2;
しかしこれだけではX軸にしか移動しません。Y軸にも加算してあげなければなりませんね。
そこで使用するのがsinです。
sinもcosと同様に使います。
sin物語 ~ rが伸びれば、yも伸びる。~
ルフィが上空の敵に向かってゴムゴムのピストルを撃つとします。すると、rに対応してyも伸びますね。

もちろんrとyは連携しています。そしてsinとはyをrで割った値です。

理屈として、sinもcosもほとんど同じようなもので、対応する辺がy軸かx軸かの違いしかありません。cosを理解できた方は、sinはy軸バージョンとお考え下さい。
なので式変形することで、y = sin30° × 2とすることができます。
// プレイヤーを30度の角度をつけて移動させる
PlayerY += sin(30.0f * DEGTORAD);
なので、先ほどと同様にrの値を1以外にしてスピードを変えることもできます。
// プレイヤーを30度の角度をつけて移動させる(倍速)
PlayerX += sin(30.0f * DEGTORAD) * 2;
このように、XとYの値をcosとsinを用いて変化させることで、きっちり30度の角度でプレイヤーを移動させることができるわけです。
// プレイヤーを30度の角度をつけて移動させる
PlayerX += cos(30.0f * DEGTORAD);
PlayerY += sin(30.0f * DEGTORAD);
なお、DXライブラリは0度がなぜか上ではなく、右に向いているので、サンプルプログラムでは斜め右下に移動します。
いかがでしたでしょうか、この記事がいいと思ったら、下にソーシャルボタンを用意しているので、
ぜひ共有をお願いします。この記事に関して要望などございましたらTwitterまでお願いします。
https://twitter.com/dmsbot
コメント