アークタンジェントの罠！モバイル対応したスティックで向きを算出する方法（自由回転）

スターター作品

なし

今回の完成サンプル

なし

スーパーアルティメットにマニアックなチュートリアルへようこそｗ

こんなチュートリアル読む人おる？という気持ちもあるけど、一応書いておこうかなって思ってる。もしここにたどり着いた人がいるなら、ウェルカム、君のために書いたと言っても過言ではないぜ。

で、結論から言うとatanアークタンジェントという関数を使うと便利。

これね。アークタンジェントって中二病キャラの必殺技みたいな名前で草。

今回ももちろんモバイル対応スティックを使っていくよ。

今回の目的「スティックに合わせて、自由回転するプレイヤーの向きを変える」

回転が左右だけなら、スティックXがプラスかマイナスかで向きを変えればいいだけなんだけど、自由回転する場合はいっきに複雑になる。そこをatanを使って強引に算出していく。

まずは実現する動きを動画でチェックしてみてね↓

これを作るよ。今回はこの動きだけ作るからブロック数は少なめ！

メインループを作る

じゃあ緑の旗から始めようか。

スクラッチキャットの回転方法を「自由に回転」にしておこう。

メインループを設置しよう。

この中で向きの計算をしていくよ。

準備

スティックの場所に合わせて向きを算出する処理、今回の目的部分だね！

バックパックからスティックを導入して、あとは分かりやすくブロック定義と変数も作るよ。そうすれば別の作品にも使いやすいだろうし。

スティックを導入する

バックパックからスティックをドラッグアンドドロップしよう。

スティックを開く必要はないよ。スクラッチキャットを開いておいてね。

ブロック定義を作る

スクラッチキャットにブロック定義「_向きを算出する」を作ろう。再描画せずに実行するよ。パッと見で分かるように接頭語にアンダーバーを付けておくね。

変数を作る

変数「向き」を作るよ。

atanを使ってみる

では練習でアークタンジェントを使ってみよう。一般的にはatan(Y / X)のように、atanにはY÷Xを与えるっぽい。

Xがプラスのとき

いくつかサンプルを見ながらatanがどういう解をくれるのかチェックしていこうか。

右上を向きたい

仮にYが1でXも1の場合を考えてみよう。

スティックの位置が↓こんなかんじになってる状態ね。

スティックが右上にあるときは、スプライトも右上を向いてくれたらバッチリだよね。

じゃあatanでYが1でXが1の状態を作ってみよう！

おお！見事に45っていう数値が出てきたね。

右を向きたい

では真横に動くようなケースではどうだろうか。

Yが0で、Xが1のときだね。

スティックは↓こんな感じ。

スプライトの向きは90になってほしい。

atanに入れてみよう。

あれ？違うね……。うまくいかない。

右下を向きたい

次はYが-1で、Xが1のときはどうかな。

スティックは↓こんな状態だね。

スプライトの向きは135になってほしい。

atanで作ってみると……。

あらら、これも違うみたいだね。

上を向きたい

Y = 1、X = 0。だからスティックは↓こう。

ほしいのは↓みたいに0°。

atanの解は……。

90°になってしまった……いったいどうなってるんだ！？

ズレに法則性がある

ズレてる、atan使えねぇ……そう諦める前にズレ方に注目してほしい。

	ほしい角度	atanの解
右上：◯	45	45
右：✗	90	0
右下：✗	135	-45
上：✗	0	90

なーんか法則性がある気がする。ためしに色々な数字を掛け合わせてみたところ「90 - atanの解」をするとズバッと欲しい角度が取れた。

	ほしい角度	atanの解	90 - antaの解
右上：◯	45	45	90 - 45 = 45
右：◯	90	0	90 - 0 = 90
右下：◯	135	-45	90 - (-45) = 135
上：◯	0	90	90 - 90 = 0

くっ、よく考えたら当たり前だったんだけど、一応図解しておくぜ！

合ってたケース（右上）

たまたま合っててぬか喜びした。

計算結果が合わないケース（上）

右上以外ダメじゃん、って気づいた。

よく考えたらそもそも90°ズレてた

試行錯誤して0°のケースを自分なりに図にしてみたら、そもそもatanが算出してくれる角度って、スクラッチの向きと90°ズレてるじゃんって気づきました、本当にありがとうございました。

↓のピンクの先の部分。90°ズレてるよね、うん。

だから90からatanの値をマイナスすると上手いこと計算が合ってたというカラクリでした。

Xがマイナスのとき

さらに数学オンチな僕を混乱させてくれたのは、Xがマイナスのときな！

左上を向きたい

たとえばY = 1でX = -1のとき。

ほしい角度は-45°。

atanの解は……。

合ってるんかい！でも90からマイナスすることにしたから、90 - (-45) = 135になってしまう！く……。

左を向きたい

Y = 0、X = -1のときだね。

ほしい角度は-90°！

atanの解は……。

ゼロぉ！！！なんだそれぇ！！！

atanは負の象限を返してくれない

調べたよ、ウィキペディアで。そしたらatanは負の象限は返さないって感じのことが書いてあった。

よく分からないから更にググったら、atanで無理やり負の象限を出したいときは180°マイナスしたらいいと書いてあった。

いや、atanの解は0でほしいのは-90だから、シンプルに-180したらダメじゃん……っと思って気づいた。

そこでXがプラスのときと同じようにいったん90 - atanの解をしてから、更にマイナス180してみたところ。

取れたぁ！！-90獲ったどぉ！！

久しぶりに数学的なモヤモヤで脳みそが千切れそうになったぜ……やるな、スクラッチ！

コーディングしていく

よし、atanの基本的な解答とスクラッチのクセを組み合わせるロジックは見えた。あとはコーディングしていくだけだ！イケる気がする！

基本的なatan演算

まずは基本形を作ろう。

YをXで割るという順番だけ注意しよう。

90から引く

スクラッチの向きは上が0°であるのに対して、atanでは右が0°という想定なので、このズレを補正するべく90からatanの解答を引くようにする。

向きにセットする

変数「向き」にセットしよう！

Xがマイナスのときに反転させる

さらにatanでは負の象限を返してくれないので、Xがマイナスなら強引にマイナス180°しよう。

条件分岐をおいて……

スティックXがマイナスなら……

マイナス１８０しよう！

向きを割り当てて完成！

ではメインループに戻って、このブロック定義を呼び出して向きを変えてみよう。

変数「向き」を向きに割り当てる……書くと意味不明ｗ

動けぇ！

OK！

分かりづらい解説によく付いてきてくれた！ありがとう！これでグリグリ回る仕組みが整ったね！

実はスプラトゥーンをモバイル対応してみようとしてた

そう、この回転をやろうと思ったきっかけはFunnyAnimatorJimTVさんのスプラトゥーンをリミックスしたいなっていう動機だったんだよ。

グリグリ回るし、歩くのもできたんだけど、iPadでテストしようとしたらスプラトゥーンのプロジェクトが大きすぎてiPadでロードできなかったｗ

モバイル対応しても意味ないじゃんって気づいて、せっかくだからこの自由回転のロジックだけでも世に出してあげたいと思って書き上げた記事でした！読んでくれてありがとう♪