初心者がUE4でルービックキューブ風なものを作って強化学習用のライブラリにしたい #2

前回に引き続き初心者がUE4を絡めたPythonライブラリを作れないか色々進めていく記事です。

前回の記事 : [#1](https://qiita.com/simonritchie/items/e8d84c2941b5bd2862f5)

回転制御の検証のところから再開していきます。

# 回転制御をどう組もうか考える

前回、各立方体の位置の値が取れるようにしたり、ピボットポイント的なところを考えたりしていました。
とりあえず実装自体はなんとかなりそうではありますが、考えるべきことが結構あります。

必要な回転ば、オレンジ面での各列を縦方向に回すか、横方向に回すかと、側面（例えば黄色の面）で縦方向に回すか・・・の3パターンあると思います。
それぞれが3列あるので、以下のようなパターンでしょうか。

- rotateX1 -> オレンジ面から見て、上のブロックを水平方向に回転
- rotateX2 -> オレンジ面から見て、真ん中のブロックを水平方向に回転
- rotateX3 -> オレンジ面から見て、下のブロックを水平方向に回転
- rotateY1 -> オレンジ面から見て、左のブロックを垂直方向に回転
- rotateY2 -> オレンジ面から見て、真ん中のブロックを垂直方向に回転
- rotateY3 -> オレンジ面から見て、右のブロックを垂直方向に回転
- rotateZ1 -> 黄色の面から見て、左のブロックを垂直方向に回転
- rotateZ2 -> 黄色の面から見て、真ん中のブロックを垂直方向に回転
- rotateZ3 -> 黄色の面から見て、右のブロックを垂直方向に回転

また、それぞれ左右・上下などの方向が必要なので、さらに2倍の数が必要になってきます。
ある程度引数とかで抽象化しつつ、それぞれの関数をレベルのブループリントに追加していきます（関数名は適宜調整）。

# 基底クラスに名称の変数を追加しておく

少し横道に反れますが、回転制御などを造り込む際に、今どの立方体を扱っているのかが分かりやすいようにするため、識別用の名前を基底クラスに追加しておきます。
ブループリント名自体が取れたりするのかな？と思いましたが取れない？ようで・・・

参考 : [How can I get a blueprints name? or a class reference to self in a blueprint?](https://forums.unrealengine.com/development-discussion/blueprint-visual-scripting/1493083-how-can-i-get-a-blueprints-name-or-a-class-reference-to-self-in-a-blueprint)

![20190918_23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/77eddab1-e817-3b94-ea44-a3200617ff6f.png)

この追加した変数にサブクラス側でブループリント名に準じた名前（Orangeなど）を設定していきます。

![20190918_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/9f6a8f34-85d5-d612-cd7e-8eefc6f225bd.png)

他の一通りのサブクラスにも同様に名前を付けておきます。

## 名称設定のチェック処理を入れておく

こちらも手作業で設定しているので、うっかりミスをしていないか確認するための関数を追加しておきます。
少し前に追加したものと同様に、forEachLoopで回していきます。

![20190919_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/218152e0-3652-190e-0698-ef0ff34b1e5c.png)

1次元目のループで、設定した名前が空（未設定）のものが無いかチェックしています。

![20190919_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/2673fad5-4c35-5cb2-fade-b9afa204fdf8.png)

もし空のものが残っていれば、対象の立方体の配列のインデックスをログ出力するようにしました。
また、赤文字部分や表示時間は統一するため定数化しました（TEXT_COLOR_ERRORとDURATION_ERROR_TEXT）。

![20190919_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/e72eb350-9db1-df1e-b1e8-a16b514cbf55.png)

色の設定は便利なことにColorクラスが用意されているようです。

![20190919_5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/90db88cb-8eea-512e-66f8-a1e8db338dcb.png)

ここで用意した定数は既存の他のエラーログ表示の箇所にも反映しておきます。

一旦確認で、ゲーム開始直後に実行されるようにしておいて、nameの値が未設定のものが無いかを確認しておきます。

![20190919_6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/ec4bdead-ace9-8013-df6e-80718d9816ee.png)

試しに、1つのブループリントクラスでわざと名前の設定を切り落としてプレイしてみます。

![20190919_7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/fab7a790-645d-3a34-68c5-e2f1409defa6.png)

無事エラーメッセージが出ました。大丈夫そうです。

続いて2次元目のループで、以下のような処理を作っていきます。

- 比較同士の立方体が同一のものじゃない場合に処理を実行（1つ目のBranch）
- それぞれのnameが同じ場合にエラーメッセージを出力（2つ目のBranch）

![20190919_8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/7beab3df-44c3-2824-8e60-e1e10744756a.png)

文字列設定とPrint String部分は今までとほぼ同じです。

![20190919_9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/e88bbb4a-40d1-eae1-ac50-31173f0147c0.png)

![20190919_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/ae59ae33-34e8-2e9d-de2d-f0efcc3c56eb.png)

俯瞰してみるとこんな感じになっています。

![20190919_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/afd856b1-ff4b-1895-d555-d925ebbe2cab.png)

試しにわざとBP_GreenのnameをOrangeにしてみて、エラーメッセージが出るか確認します。

![20190919_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/10535ded-17e2-19d6-9268-fc9d5728ca3d.png)

想定した感じにメッセージが出力されました。
なお、今更ですが、本当はこういったチェック、機能テスト的に切り分けてテストを動かす時のみ実行されるみたいな方が良さそうな気配がしますし、なにやらAssert○○というブループリントのノードがあったので、恐らくテストのための機能も用意されているのでしょう。
しかし、大した処理負荷ではないのと、どんな感じにブループリントでテストするのがベストプラクティスなのか良く分かっていない点、仕事ではないので厳密な感じじゃなくても良さそうなので実装しやすさ優先で引き続き進めていきます。

※追記 : 途中から、チェック用の関数がvalidate○○よりもassert○○の方がしっくり来るように感じてきたので、assertの方にリネームしてあります。今後の追加もassertの方を使っていきます。
IDE的に、リネームすると参照しているところも自動で修正してくれるのは楽でいいですね。

# 位置の値から対象の立方体を算出する関数を作る

回転制御をする上で、回転対象となる立方体の参照を位置の情報から算出する必要があるので、その関数を作っていきます。

引数にはXYZの3つの値、返却値には対象の立方体のブループリントの参照を返すようにします。

![20190919_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/a4fba258-bdcf-f466-cfbf-63f5afb5e793.png)

![20190919_14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/3b94a445-4849-f987-ddf0-60f2cd8454cf.png)

ループで各立方体に対して回して、XYZの位置情報の値でベクトルを作ります。

![20190919_15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/53925e64-4b13-1adb-963d-bb2c4cac84ab.png)

また、引数で指定されているXYZの値からもベクトルを作っておきます。

![20190919_16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/e93f3972-3ae2-e204-e188-ff6e52a3efab.png)

用意した2つのベクトルを比較して、一致していればその立方体の参照を返却するようにしておきます。

![20190919_17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/ea81d159-8953-9f2a-7160-d4cdc47b61e0.png)

俯瞰すると以下のようになりました。

![20190919_18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/be581e34-f18d-280f-8cd7-ca5b22dedf14.png)

## 立方体の取得結果の動作確認用の関数を追加しておく

テスト的に、特定の位置を指定して取得された結果をチェックする関数を作っておきます。
これもゲーム開始時に実行されるようにしておきます。

オレンジ・赤・緑・白の面を持つ立方体を取得してみて結果がちゃんと合っているか、といった感じに対応します。

引数でチェック対象の立方体を渡して、初期位置情報を取得しておきます。

![20190920_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/586849a2-84b2-da6a-b6a3-04014a21bb61.png)

続いて関数軽油で取得されたアクターと引数に指定されたアクターを比較して、もち一致していない場合にエラーメッセージを表示します。

![20190920_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/c1f8f68e-398f-ccd7-232c-51eeb147a623.png)

エラーの時にそれぞれの立方体がどれになってしまっているのかの確認で、それぞれnameの値を取得します。
エラーメッセージ回りは今まで通りです。

![20190920_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/e1c6f502-67f5-9d22-4103-9c1e4be006ec.png)

俯瞰すると以下のようになっています。


![20190920_5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/785b9939-a546-87bb-bac7-2402a6eb4fef.png)

プレイ開始の箇所に追加しておきます。
オレンジ・赤・緑・白の面を持つ各ブループリントのものをそれぞれ実行するために連結しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/94af730e-2c29-fde3-af8c-2228b8f08ac5.png)

一度ゲームをスタートしてみて問題ないことを確認します。

# エラーメッセージ表示の関数を調整

チェック用の関数が増えてきたのはいいですが、記述が少し重複していて煩雑なのと、どの関数なのかが分かりやすいようにするため、この辺りの処理を関数化しておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/f448ec9a-d926-cbe9-7dd5-f79f597e1362.png)

関数自体はシンプルですね。これで各チェック用の関数のエラーメッセージ出力の箇所を差し替えていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/2a31f0af-8556-a468-513e-7c48119c59a8.png)

# X軸方向への回転対象の立方体のリストを取得するための関数を追加する

回転処理の前に、追加でX方向への回転（rotateX1など）で対象となる立方体のリストを算出する関数を用意していきます。

最初からrotateX1、rotateX2、...と個別に作っていってもいいのですが、一段階抽象化した状態の関数で、引数にY位置の値を受け付けるような関数を用意します。

また、立方体の基底クラスで定義してある位置情報の定数を、便利なようにレベルのブループリントでもダイレクトにアクセスできるようにしておきます（若干、生成済みのアクターから持ってくるのが気持ち悪い気がしないでもないですが・・・ただ、逆にレベルのブループリント側で定義されているものを各立方体側のブループリントに持っていくというのも違う（レベル依存になる）ような気がするので、これはこれでいいのでしょうか・・？）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/5a484c37-bf2f-b4c8-2f47-34f389e138f8.png)

引数のY位置の値を、各所でアクセスしやすいように関数のローカル変数にしておきます。
UE4でローカル変数ってどう宣言するのだろう・・と少し調べていたら、そもそも関数の編集画面であればローカル変数のセクションがMy Blueprintウインドウに表示されるようです。気づかなかった・・

> ブループリントの作業時は、My Blueprint タブを使って 変数 を 追加することができます。関数内からは、[My Blueprint] タブに Local Variables 用の追加セクションが表示されます。 
> [ブループリントのベスト プラクティス](https://docs.unrealengine.com/ja/Engine/Blueprints/BestPractices/index.html)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/caad253f-9a38-7752-b34f-403ef4250ed2.png)

確かに左下にありました。こちらから追加するか、もしくは引数からノードを引っ張った際に、Promote to local variableというメニューが出るので、こちらからでも作れるようです（こちら経由の方がシンプルではあります）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/05967036-f569-3e9e-50c3-e252a25fe53f.png)

追記 : というより、普通に引数は変数化しなくても関数内であればどこでも参照できるようです。変数化要らなかった・・・

関数はcubeYという引数名でYの位置を受け付けるようにします。
また、見やすさのためにZの値に応じて処理のグループを分けるようにSequenceノードを使って3つに分割しておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/39a4cd8f-964a-5f10-047e-71bd3f965a12.png)

続いて1つ目のグループ（オレンジの面を基準に、手前の3つの立方体の取得処理）を作ります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/3c79d621-1244-47bc-e037-4ab9884ae004.png)

中央のグループも同様に対応します。真ん中の立方体の処理だけ特殊で、Yの値が1か3だったらノードを繋ぐ形に設定しています。これは、Y=2且つXとZも2の時の位置の立方体は存在しないためです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/b5d8d499-88ab-dda8-04a1-e7052276e701.png)

奥の位置にある立方体も同様に対応します。手前側の処理とほぼ同じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/ceb2f8bf-7c7b-7dfd-82b7-1d472138a1b6.png)

そして、取得した各立方体で配列を作ります。Yが2かどうかで配列の件数が変わるのですが、こういったケースの場合配列のRemove Indexなどで取り除くかどうかという実装をする方がスムーズか？と思って触っていましたが、Remove Indexしてもなんだか配列の件数が減らない？気配がしたので、単純に配列を分ける形で対応しています（使い方が悪いだけな気がするので後で調査）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/3bc6453f-084f-4e9e-f2af-97008d135ae5.png)

俯瞰するとこんな感じになっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/49155218-862e-fd3b-56c7-ce6b1371bfbd.png)

動作確認用の関数を書いていきます。
全部のパターンは確認しませんが、大雑把に以下のパターンを試していきます。

- Y=1を指定してみて、長さ9の配列が返却されること。
- Y=2を指定してみて、長さ8の配列が返却されること。
- Y=2を指定したときの、返却される立方体が想定通りになっていること。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/97897428-63e4-4911-82ec-6bc1296c7b10.png)

まずはCUBE_Y_1を指定した時の返却される配列の長さが9にちゃんとなっていることを確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/1547c7fe-cf5e-448c-601a-898dd7d3acdd.png)

エラーメッセージの表示部分はほぼ今まで通りです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/1234e448-e414-f434-9b7d-7dd8e291ccfe.png)

CUBE_Y_2を指定した時の配列の長さ（8想定）に関しても同様に対応します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/3b84a4a7-f759-186a-c903-f65bc6d3cbbc.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/dbe23657-ba8c-5086-4239-c2157a901f51.png)

続いて配列内の立方体のアクターが想定したリストになっているのかの確認を進めます。
配列でFINDのメソッドが用意されているようなのでそちらを利用します（見つからなければ-1が返るので、-1が含まれていないことを確認します）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/4e81fec9-b5b1-bd7e-9434-e4e28955fce6.png)

Make ArrayでFINDの結果の配列を作り・・・

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/d913ac7c-635f-ba5c-6bdb-1fb3cae4c7a7.png)

ForEachLoopでループを回して、-1が含まれていないことをチェックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/1d5c87a8-6e5c-362b-b0e0-21dbaa72dba4.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/75ac6464-39cd-be82-5b36-0cfcaba32c3d.png)

俯瞰 :

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/41de1008-9c0d-e658-34df-7ef7d379fbb6.png)

他と同様、ゲーム開始時にチェックされるようにしておきます。
なお、最終的にはエラーメッセージ無く通ることを確認していますが、その過程で何度かつまづいています（あれ、この関数配列の長さ減らないの？とか、配列のピンに処理が通らないようにしていても長さは固定になってしまうのか、etc）。

若干単体テストみたいなことをしていますが、不慣れな技術なので、想定した動作になっているのかのチェック大事だな・・・と感じています（後々のデバッグの負担を減らしたいというのもありますが・・）。

# 基準点制御用の不可視の立方体を追加しておく -> 試してみてうまくいかず

回転の際のピボットポイントをずらすための不可視の立方体を基底クラスに追加しておきます。
とりあえず位置は回転タイミングで毎回変更するので、あまり気にせずにとりあえず隣に配置します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/6f626c74-aa48-d05c-553a-7cacf7cbb172.png)

配置後、Visibleのチェックを外して不可視にしておきます。
しかし、ここでうまくいかず。回転の基準点がずれてくれませんでした。どうやら、レベル上で立方体を追加してグループ化した時と異なり、ブループリント上で追加する形だと基準点がずれてくれない模様です・・・
※分かりやすいように一旦可視化してあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/f51a2c33-b129-9bb3-2e1e-a29e4f4240cf.png)

どうしようか・・・と考えていましたが、[UE4 - Rotate Actor Around Point Tutorial](https://www.youtube.com/watch?v=64Q80zS88aY)や[How to rotate Actor around non-pivot Location?](https://forums.unrealengine.com/development-discussion/blueprint-visual-scripting/103925-how-to-rotate-actor-around-non-pivot-location)を少し眺めていた感じ、何だか自分で書いてしまってもいい気がしてきました。

> You need to do some vector math, ie calculate new location and rotation of actor.

というより、基準点関係を扱わなったり三角関数的なことを考えなくても、向きの回転と座標の一定値ごとのアニメーションくらいで問題ないような気もしてきました（若干アニメーションがルービックキューブっぽくないですが、そもそもUE4に慣れるのと強化学習用のシミュレーション環境を作るという目的から考えると）。

且つ、一つの軸だけで考えると簡単ですが、複数の軸で回転を考えると結構面倒くさい（横方向に回転させた後に縦方向に回転させるなど）ですし、時間もかかりそうです。
そこに時間かけるのも何だか微妙な気がしてきたため、基準点を考慮しない形のアニメーションで進めようと思います（結構長くなりそうなので、最初からこだわっていると終わらなくなりそうな気配もあるため・・）。

# 横軸・左方向への回転の関数を作る

少し考えた結果、回転方向ごとに関数を分けるようにしました。
まず最初に横軸の左方向への回転の関数を作るようにします。
関数名はrotateXLeftとし、引数に対象のキューブの縦方向の位置を指定するようにします（回転対象が1行目なのか2行目なのかetc）。

キューブの基底クラスに追加します。まずはじめに自身の縦軸の位置が引数に指定された価と一致しているかをチェックしています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/4d82bc58-4bdc-186b-d189-a714bf4edb87.png)

また、回転中の指定になっているかどうかの真偽値をクラスの変数に追加しました。
1～3で回転対象のキューブがどれなのかという指定をしています（上のキューブを回転させようとしているのか真ん中が対象なのかetc）。

今回の関数で扱ういずれかの真偽値がTrueになっていることをチェックする処理を加えておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/a36df662-040e-2fd7-ba47-4e33ac464499.png)

その後のシークエンスノードで、以下の3つの処理を順番に実行しています。なお、この関数はアニメーションや回転が終わるまで繰り返し実行する想定のため、1フレーム分の計算といったように組んでいきます。

1. キューブの移動制御
2. キューブの回転処理
3. 回転前の位置情報の保持（回転開始時の1回のみ）

## キューブの移動のアニメーション設定

現在のキューブの位置に応じた、キューブの移動アニメーションの方向や移動の設定をしていきます。
ルールでいけそうな気もしないでもないですが、対した量でもないので一つ一つ設定した方が早そうな印象を持ったため、単純に分岐させて設定していきます。
cubeYの値は引数で指定されているので、cubeXとZの位置情報に応じて分岐させていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/09e7cbc3-10dd-38e5-6ad1-b3ac4734f164.png)

位置情報が該当した場合に、目標とする座標にアニメーションするように、1フレーム分のアニメーション設定をします。
回転が色々な軸に対して実行されるので、移動方向の制御が面倒くさくない？と思いましたが、ちゃんと世界の軸方向を規準とした移動の関数があるようです（AddActorWorldOffset）。
そのため、アクターが回転し続けていても、同じ方向に対して同じ量の移動をしてくれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/bfdacc54-1400-21d1-0753-90a8425149b1.png)

`200 / 90`や`100 / 90`といった計算をしていますが、これはキューブの大きさが100で、キューブ1つ分の移動であれば100、2個分であれば200といった具合で設定してます。また、90という値は、回転を1フレーム辺り1度を想定しており、一度の回転で90度回転が必要なため、90フレームかけてアニメーションします。そのため、移動のアニメーションも回転と同じタイミングで完了するように90分割して1回の関数で移動するようにしています。

これを、各位置の組み合わせでそれぞれ作ります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/cdf31f0f-87f8-b394-503b-fee17997335f.png)

## キューブの回転制御

続いて回転の方も作っていきます。
前述の通り、関数1回につき1度回転するようにしておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/b27eeb7c-f838-3b59-5c60-16a25100fe9a.png)

また、現在の回転量を1～90で変数に保存しておくようにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/258159ad-ead4-f271-9f41-4cf1cb40c03b.png)

もし回転量が90になっていたら、回転の各処理を停止するようにするため、判定の分岐を追加しておきます。まずは回転量の値を0にリセットさせます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/caac47d5-59b0-61b2-e863-fce71c8a676a.png)

回転指定の真偽値もFalseにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/b2cc1fcf-bfdb-bf4f-47e8-bf9b91745aef.png)

各組み合わせによる位置情報を、移動後の位置に合わせてアップデートします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/04e034c7-2413-41fe-7671-490c5e55f14e.png)

この分岐も各パターンで作っておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/27bc084f-a1ad-e698-6c52-6c1a7d96377b.png)

## 回転完了前に、アニメーション開始時の位置情報を保持しておく

回転量が1の時（=最初のアニメーション時）に、アニメーション開始時の位置情報を保持するようにしておきます。
クラスの変数にbeforeCubeXなどの値を追加しておいて、その値を別の関数でアップデートするようにしておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/684cee70-7c78-176e-713c-9337ff863d47.png)

アップデートの関数自体は以下のようなシンプルな内容になっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/58e528e4-8367-9e05-5838-32da63929d89.png)

これで横軸の左方向への回転の関数は完了です。
若干煩雑な箇所がある気が・・しないでもないですが、関数分割したりしてもそこまで変わらなそうな気配もするので、一旦このまま進めます（他も実装していて、あまりに気になったら抽象化とかもう少し考えます）。

俯瞰 :

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/5d06173f-aead-c39a-1718-72f6b6ad3866.png)

# チェック用の関数を追加しておく

回転の関数の挙動のチェック用の関数をレベルのブループリントに追加しておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/a585e7e7-d6b5-cb98-fe39-2f459e01c8e1.png)

アニメーション完了時の実行を想定するため、回転量の値が0になっている時のみ実行されるようにしておきます。
また、その後のシークエンスノードで、以下の3つの条件でチェックします。

- 回転制御用の真偽値がFalseにリセットされていること。
- cubeYの位置情報がアニメーション前と後で、変わっていないこと（横方向の回転なため）。
- 各位置情報の組み合わせに応じた、アニメーション後の位置情報が想定した値になっていること。

順番に対応していきます。

### 回転制御用の真偽値がFalseにリセットされていることを確認する

シンプルに、各真偽値の変数がFalseになっていることを確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/a6e6d3d0-0848-9ce0-b6f6-1f9da1b42a3e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/a5b448f3-ef2b-b4dd-81ad-0a07b9b81189.png)

### cubeYの位置情報がアニメーション前と後で、変わっていないことを確認する

上中下とそれぞれチェックする必要があるので、配列を作っておいてループで回してチェックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/0f00d4ce-68c0-f082-9221-9568faacdb43.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/cc3a658d-9413-0a48-116f-3ba6b44c0bfd.png)

後は、アニメーションの前のcubeYの値やアニメーション後の後のcubeYの値が引数に指定されたものになっているかを確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/dc881354-4ff7-0893-12c9-28d0f7a9b2e7.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/e359ed3f-6f4b-840a-b26c-f6380fcd1ce9.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/99fda822-8b1a-7bf2-e943-e44a5a1c89a2.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/6eed1183-3d89-8009-eb5c-f35f1851a8c8.png)

### 各位置情報の組み合わせに応じた、アニメーション後の位置情報が想定した値になっていることを確認する

チェック用のデータで、ブループリントで多次元配列を作ろうとしたら、ストレートに作れない？気配があります(擬似的には使えるっぽい)。

> BPは使えるデータ構造が少なく1次元配列しか使えません。1次元配列だけでも組むこと自体はもちろん可能ですが、せめて2次元配列ぐらいは欲しい所です。
> [UE4 BPで2次元配列を実現する](http://katze.hatenablog.jp/entry/2016/06/25/144111)

そのため、多次元配列ではなく4つの1次元配列の組み合わせでチェックしていきます。
チェック対象のX位置・Ｚ位置の組み合わせで、想定している移動後のXとZの位置の値を格納した配列を用意して進めていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/1c0b97da-c610-5c33-4140-35c24832fa06.png)

ループでアニメーション開始時の位置の値を参照して、対象の組み合わせを探します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/55d0620b-0bf7-275f-2f95-56e92e0f60b0.png)

アニメーション後のcubeXの位置情報が想定したものになっていることを確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/2a2fd250-fbbc-b07f-6a74-de2c084dbd07.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/934e291a-bb4b-0390-4030-3c02106a5ebb.png)

同様にアニメーション後のcubeZの位置情報が想定したものになっていることを確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/5eb2b617-2e7b-9ed4-e6e6-2259ec69fd3f.png)

これでチェック用の関数も一旦完了です。

# 縦軸・上方向への回転の関数を作る

同様に縦軸の上方向への回転の関数も作っていきます。
といっても、軸が変わることによって、引数の値が変わったり、各参照や結果の位置などの値が変わるだけで、実装の流れはほぼ同じなので、大部分は省略します。

回転の関数 :

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/3dd4017e-7e3b-1f2d-3766-c1e0e520f607.png)

回転の関数の俯瞰 :

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/a56b5729-e032-fe4f-96b3-9d5154e11b50.png)

チェック用の関数 :

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/23c08800-f37a-40a8-2fc2-08a932359dda.png)

チェック用の関数の俯瞰 :

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/2e57c7c1-5795-3e52-c30e-6f89015bf307.png)

俯瞰 :

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/1150f160-dad2-5be9-bf9f-7372bcefebbd.png)

# 回転させてみる

縦方向と横方向への回転を最低限のものを追加したので、少し動かしてみます。

タイマーによる各フレームでキューブの数だけループする処理を追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/5faede6c-51bd-0814-77c4-a554be61e408.png)

用意した2の回転の関数ごとにノードを分けつつ、さらに3つの位置によってさらに分岐するようにしておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/abef3470-c59d-e8c5-54f3-50c338ef00c1.png)

もし対象のキューブが回転するための真偽値設定になっていたら、用意した関数を実行するようにしておきます。また、関数の後にアニメーション結果が問題ないかの確認として、追加したチェック用の関数を追加しています。

横軸・左への回転 :

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/dd92f44d-cfe9-ce56-b487-35728b06c1d2.png)

縦軸・上への回転 :

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/46372daf-d8e5-e429-b455-37596cc1e21a.png)

また、一時的な記述ですが、機動後に一定の遅延を挟みつつ、回転設定の真偽値を有効にして回転がされるようにしておきます。以下のように繋げていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/597618dd-ab96-1f4f-2ab2-c14e450e58b8.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/26abe496-1abe-37e8-970b-92d1610cc0db.png)

プレビューしてみると、大分それっぽい感じで回転してくれています:smiley:（Ubuntuで作業しているので、gifアニメとかのツールを入れていないのでアニメーションは割愛します・・）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/4a5e4e07-75e7-aae0-a8ec-627c18276dc3.png)

まだまだ先は長いですが、一旦本記事はこの辺で区切って次の記事に回します。

# 余談メモ1 : アニメーション後の値の確認は、シミュレートを使うと便利だった

回転や移動後のデバッグで数値を確認などしていたのですが、その際にエディタ上のPlayのオプションでSimulateを選択してPlayを押すと、編集中のようにアクターの選択ができたり、Detailウインドウで値が確認できたりと便利でした（作業中、わずかに数値がずれた際に調査などで使いました）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/f6447336-c5b7-047b-25f0-7c4067e1791c.png)

# 余談メモ2 : 途中からライトを4方向からのスポットライトに変更

配置位置などをちゃんとした値にし、且つライトの種類をスポットライトに調整しました。
なんだかフォトショのレイヤースタイルを使っているような感じで、若干グラデーションっぽくなりましたがこれはこれでいいでしょう・・。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228778/5e9bddce-bfb6-e30a-1000-c1368709f90a.png)

# 余談メモ3 : 変数名の規則

- UE4の動画を見ていて、関数内のローカル変数のプリフィクスにLと付けているのを見かけました。確かにローカル変数の区別としてそういった名前の付け方のルールの方が良かった感が・・・今回は、付けずに進めてしまっているので、そのまま統一して付けない形で進めます。
- 同様に、動画で変数名などをSampleVarといったような命名規則で付けられていたのですが、今回のものだとsampleVarといったように先頭を小文字で進めています。ブループリント界隈だと、どちらが一般的なのでしょう・・・

# 参考文献

- [How can I get a blueprints name? or a class reference to self in a blueprint?](https://forums.unrealengine.com/development-discussion/blueprint-visual-scripting/1493083-how-can-i-get-a-blueprints-name-or-a-class-reference-to-self-in-a-blueprint)
- [ブループリントのベスト プラクティス](https://docs.unrealengine.com/ja/Engine/Blueprints/BestPractices/index.html)
- [UE4 - Rotate Actor Around Point Tutorial](https://www.youtube.com/watch?v=64Q80zS88aY)
- [How to rotate Actor around non-pivot Location?](https://forums.unrealengine.com/development-discussion/blueprint-visual-scripting/103925-how-to-rotate-actor-around-non-pivot-location)
- [UE4 BPで2次元配列を実現する](http://katze.hatenablog.jp/entry/2016/06/25/144111)