BluePrintsでゼロから作るタイムリバース機能

#このチュートリアルはUE5.0まで支持できます。
5.1以降のはいろんなバグが出てくる。（主にInputの方です）
時間があったら5.1より新しいバージョンのチュートリアルを書いてみる

## 先ずは最終結果を見てみましょう。
https://twitter.com/i/status/1572797020783644672

上手くタイムリバースな感じができましたね。
では、始めましょう！。

# ０.予備知識（上達者はスキップしてもいい）Blueprintsの種類
Blueprintsは山ほどあるが、今回使える四種類だけを紹介する
   ### 1. Actor
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/54c3236b-9bb6-a39a-1fd4-068aa3d53ef3.png)
     
　　名の通りアクターの意味、ゲーム世界を舞台に想像すればこの舞台の俳優達だね。Blueprintsの基本単位である。

   ### 2. Component
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/a5cad856-a633-7a98-8364-a56d14527b53.png)
     パーツの意味だね。Actorは一眼カメラだったらComponentはカメラのレンズみたいな感じ。でも一つのActorに複数のComponentを付けるのも可能。直接Actorにプログラムを導入するのも可能だが、プロジェクトが大きくなったらめんどくさくなるからあんまり勧めしないです。

   ### 3. Structure
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/eabc015a-1d0b-f605-d0d6-4531546dc8ac.png)
   「データを保存する時はこのストラクチャーで保存する」っで意味。まぁ、説明難しいけど、使えば分かれるので、後で直接使ってみよう。
   ### 4. Interface
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/8928981b-61f2-3a3b-3c6b-336d0b7013cd.png)
 ライングループのようなもの。同じInterface類に入るとデータのやりとりはより簡単にできる。

# 1.構想とプロジェクトの設定
### 1.タイムリバースを実現する方法
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/752f0d56-8241-c5ce-6295-bd5da31b89a3.png)
　　ある物は時間とともに動いてる。そして変化している物は　Location（位置），Rotation（回す），LinerVelocity（動く速度），AngularVelocity（回す速度）四つある。だから毎フレームでこの四つのデータを読んで記録すれば、この物の毎フレームの状態が復元できる。
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/64701def-10f4-4807-2a29-044ec2463707.png)
        
　　このようなデータ配列を作って、各フレームのLocation（位置），Rotation（回す），LinerVelocity（動く速度），AngularVelocity（回す速度）を記入して、タイムリバースする時は黄色の矢印のように最後から読み込めばタイムリバース機能ができる。
### 2.プロジェクトを新規作成
　　今度使うのはUE5ですが、UE4でもできるはずですよ。今回はFPSゲームをベースとして作りたいと思いますので、ゲームで新規作成しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/9ebb341b-f592-acc4-c75b-040d169ddcf3.png)
　　　
　　関数の名前やBlueprintsのターミナルも英語で作るので、エンジンの言語設定は英語がお勧め。
### 3.入力の設定
タイムリバースを発動するための設定
Edit→ProjectSetting
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/4de1f903-215f-3089-d921-f1ca67f9f8a1.png)
Input→ActionMappings
ここで好きな入力方法（私の場合はマウスの右クリック）を設定する。そしてTimeReverseという名前をつける。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/8f2a68b4-747b-30dc-0924-077849a74b4c.png)

これで事前準備を完成しました！さっさと本番の作成に入りましょう！


# 2.配列の作成と導入
### 1.配列の作成
　　Contents→FirstPerson→Blueprintsフォルダーをオープンして。空いてるところで右クリック→Blueprints→Structueを作成して、TimeInfoという名前を付けて保存。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/71984bb7-485e-e0a2-f84d-ff9e564541bd.png)

　　　ダブルクリックして、ストラクチャーをLocation（Vector），Rotation（Rotator），LinerVelocity（Vector），AngularVelocity（Vector）に設定する。この四つ以外に時間も記入しなければならないので、DeltaTime（Float）も設定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/0734fa5b-8daa-1cde-521b-ec0c39560bb5.png)

### 2.配列の導入
　　空いてるところで右クリック→Blueprints Class→ActorComponentを作成して、TimeComponentという名前を付けて保存。これはタイムリバースを実現するための一番重要なコンポーネント、色々なプログラムはここに書く。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/5591f636-b454-1ab7-e6ce-41b6dc8df62f.png)
　　　　
　　TimeComponentのVariablesのところで新しい変数を作って、TimeFramesという名前を付ける。ここは物の運動データを保存するところので配列**Variable TypeをArrayに設定してください**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/dd1c97b5-1057-a397-b65f-c95702bd0e29.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/d747cb86-4095-3c45-f531-d2ab92ca9dac.png)

### 3.配列をActorへの導入
　　配列は既にTimeComponentに導入したので、TimeComponentをActorに付けばActorへの導入も完成できる。
　　先ずはActorを作りましょう。空いてるところで右クリック→Blueprints Class→Actorを作成して、MyActorという名前を付けて保存。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/b7bf5b77-d76b-5b90-2fe8-17ea74bc607d.png)

　　MyActorをダブルクリックして、Add→TimeComponentを付ける。Variables→ComponentのところでTimeComponentを見えるなら導入成功。
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/9dc77d7c-f89f-7e08-be21-8651d30b9128.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/6102fd81-3223-1e29-20ae-86c881b68f51.png)
　　このActorの実体→StaticMeshを作成しよう、作成したらStaticMeshをDefaultSceneRootのところにDragAndDropする。こうしたらStaticMeshはこのActorの一番偉い物になる、StaticMeshの動きはこのActorの動きになる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/57c3af20-20e3-20a3-ff98-913b93cb4c09.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/5a63d279-2b59-690b-36f0-1999a04f914f.png)
     StaticMeshのところでこの青い箱を選択してください。
     そしてSimulatePhysicsのところのチェックボックスをYesにしてください。
　　　　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/906028b9-3365-e142-9faf-aaa3c31464b4.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/486e3143-be5d-1868-fa0d-85d92b6f2867.png)



# 3.Interfaceの作成と導入
### 1.Interfaceの作成
　　空いてるところで右クリック→Blueprints→Blueprint Interfaceを作成して、BI_Timeという名前を付けて保存。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/1127f615-e3c8-0481-ba63-78560a61f4d5.png)

　　ダブルクリックして、新しい関数を作ってUpdateTimeReverseという名前を付けて、**InputのところでIsTimeReversing**という変数を作成する。　ここの変数はメッセージを送るや受ける時に読み込めるデータである。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/e7d8890b-fbcc-273d-499c-d24978b61e6a.png)
### 2.Interfaceの導入
　　BP_FirstPersonCharacterを開いてClassSettingでInherited InterfaceのところでAdd→BI_Timeで、先ほど作ったInterfaceを導入する。BP_FirstPersonCharacterはプレイヤー操作するキャラクターなので他のActorへのメッセージをここから発信する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/20757b40-ef2e-4a29-3c60-d78e3c8f229c.png)
　　同じ操作でTimeComponentにもBI_Timeを導入する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/efc7687b-dd89-a985-de09-3c4e81fc7406.png)
　　今回のプロジェクトには発信者と受信者一人つづで、発信するBlueprintsと受信するBlueprintsも分けてるが、実際に**複数のBlueprintsをお互いに発信、受信はできる**。背景知識のところに書いていたようにライングループのようだね。
### 3.Interfaceをテストする。
テストとは言え、ここで描いたBlueprintsは本番にも使うから　**スキップしないでください**。
　　先ずはBP_FirstPersonCharacterのところでTimeCubeという変数を作り、TimeCubeという名前を付け、データタイプはMyActor（青いやつ）。**VariableTypeをArryにしてください**。
　　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/475d774e-701e-041b-e526-276de6db721e.png)
　　このようなBlueprintsを書いてください。Blueprintsの書き方はマウスを右クリックして、そしてターミナルの名前を入力すれば正しいターミナルを出る。そして線を繋がるでオッケ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/36541e72-9eb1-0814-90ee-1a70cf7115dd.png)
　　ここのBlueprintsの意味はこのBlueprintsを動き始める時、シーンの中の全部のMyActorというActorの連絡先をTimeCubeに保存する。
　　＊実際に保存したのは連絡先ではなくて、Actorのコピーである（ここはあくまでも理解しやすいために不適切な例えをした）。今回のプログラムには連絡先として働いているが、実際にこの変数でできることがもっとある。

　　次はこのようなBlueprintsを書いてください。
　　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/b0e03300-38ba-cfce-8f99-acef3b33de92.png)
　　意味はTimeCubeの中に記録したActor（始める時このシーンの中の全部のActor）を一つつづ読んでMyActorに付けたTimeComponentを受信者としてUpdateTimeReverse関数を利用して、IsTimeRersingという変数を送る。
　　
　　次はTimeComponentでこのようなBlueprintsを書いてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/7701ddb0-e023-0829-6601-e64138a106de.png)
　　意味はUpdateTimeReverse関数が動く時、この関数のIsTimeRersing変数を読んでPrintする
　　完成したら、両方Compileして。**Alt+P**でゲームを実行してみよう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/ef295b08-36c8-04f7-6a94-ab66523b9555.png)
　　画面の左上にマウスの右キーを押した場合Tureを見えて、外した場合はFalseを見えたらInterfaceの導入は成功した。



# 4.TimeReverseプログラムの作成
　　いよいよプログラムの作成に入った。
　　では復習として、やるべきことをもう一度確認しよう。
　　　　1.物の動きを読み込んで、配列に記録する。
　　　　2.配列を最後から読み込んで、物の状態を変える。
では、やりましょう！
### 1.事前準備
　　TimeComponentを開いて、下のスクリーンショットのように変数と関数を作成する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/1d6f4567-95b9-46b6-efbd-c560b53a9048.png)
　　ここで変数と関数の意味を説明する：
    　　**変数**
　　*TimeFrames*：これはもう作ったもの。
　　*IsTimeRersing*：Tureの場合は配列を最後から読み込んで、物の状態を変えるする、Falseの場合は物の動きを読み込んで、配列に記録する。
　　*IsOutData*：記録したデータは全部読んだかどうか。（こう読むと全然意味わからんかも知らないが、後で使う時に詳しく説明する）。
　　*RecordTimeLength*：記録したデータ最初から最後までの長さ（例えば「ここまで5秒のデータが記録した」の５を保存する場所）。
　　*Owner*：TimeComponentの所有者（TimeComponentを付けられたActor）。
　　*IsInited*：プログラムの安全性のため付けた。このプログラムがイニシャライズされたかを記録する変数。
    　　**関数**
　　*RecordTimeInfo*：物の動きを読み込んで、配列に記録する関数。
　　*ExcuTimeInfo*：配列を最後から読み込んで、物の状態を変える関数。

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
　　そしてTimeComponentのEventGraphにこのように書いてください。
　　先ずこのプログラムはイニシャライズされたかを判断する、もしイニシャライズされたらなんもしない、されなかった場合はIsInitedをTrueにして（イニシャライズ完了で意味）、そして所有者よ読み込んで、Ownerに設定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/f70664a5-ff75-44dc-c713-7a9d824597d0.png)
　　そしてこのように書いてください。EventTickの意味はフレームつづする事件。最初はイニシャライズされたかどうかを判断して。された場合はIsTimeRersingを判断して、Falseの場合は*RecordTimeInfo*を実行する（ここでRecordTimeのInputのところ新しい変数を作成する）。Tureの場合は先ずIsOutDataで配列のデータは全部読んだかを判断する、まだ全部読んでない場合は*ExcuTimeInfo*を実行する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/d42aab85-85e9-0917-4abb-c1102f1a82d7.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/e749cc6b-1926-66f0-a755-6bee7c643d83.png)
　　RecordTimeInfoに送ったDeltaSecondsの意味はこのフレームの時間（10fpsの場合は一フレーム0.1秒）。


### 2.RecordTimeInfoを書く
　　先ずはこのように書いてください。
　　意味はRecordTime関数が実行された場合、先ず所有者からStaticMeshを読んで、安全性のために有効かどうかを確認する。有効の場合だけで次にいく。そしてRecordTimeLengthを設定した値（ここの値はタイムリバース可能の一番長い時間、私のように１０に設定した場合は10秒前までリバース可能っで意味）より小さいかどうかを判断する。Trueの場合は**OwnerのStaticMeshのLinerVelocity，AngularVelocity**と**OwnerのLocation（位置），Rotation（回す）**読み込んで、TimeFrames配列の中に新しい要素を以上のデータで作成して、配列に書き込み。そして、RecordTimeInfoからInputされたNewParam（これはこのフレームに掛かった時間）も要素に書き込んでから、RecordTimeLengthと加算する（これで今まで記録した時間がわかる。）最後はIsOutDataをFalseに設定する（配列の中にまだ読んだことがないデータがあるを示す）。
　　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/964b5c0f-73d0-99f4-910e-42602e99c2a0.png)
　　**「画像が小さかった場合は画像をクリックして見たら？」**
　　次はRecordTimeLengthは10秒より長い場合（Falseの場合）を書く
　　先ずはTimeFrames配列の長さを最後索引に引いて（結果はこの配列の中に一番古い要素の索引）、一番古い要素のDeltaTimeを読んでRecordTimeLengthに引く（これでRecordTimeLengthは消した要素分短くなった）。そこでTimeFrames配列で一番古い要素を消す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/6f8765cc-d6a0-cd00-9467-0b047c009404.png)
　　この処理をしたら判断のところに戻して新しいデータを書き込む
　　*RecordTimeInfo*関数の全体的のBlueprintsはこういう感じのはず。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/82225e81-43c6-a38e-0b95-a0708f705db0.png)
### 3.ExcuTimeInfoを書く
　　先ずはTimeFrames配列の長さを読んで、０<=の場合はTimeFrames配列の中にデータがもうないの意味だから、IsOutDataをTureにするだけで終わる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/99826d0d-cdc3-0ef8-4eee-39ed7edb277b.png)
　　0より大きいの意味はTimeFrames配列の中にデータがある、タイムリバースが可能だから、TimeFrames配列の中のLastIndex（最新のデータ）を読んで、一対一対応して**OwnerのStaticMeshのLinerVelocity，AngularVelocity**と**OwnerのLocation，Rotation**に設定すればいい。全部設定したら先読んだフレームの時間をRecordTimeLengthに引いて、データ（TimeFrames配列の中のLastIndex）を消せば終わり
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/033abeb0-d6af-4369-de63-9270e65c3dcd.png)

# 5.遊んでみよう！
　　先ほど作ったMyActor以外にも、他のActorにTimeComponentを付けばタイムリバースができる。そしてMyActorを複数シーンの中に放置してもいいだから、色々やってみよう！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987248/9bb321e2-d6da-e41a-a9da-750434d6b0e5.png)
　　**色々Bugが出る可能性があるが、それは私のプログラムの問題かも知れないので、課題として自分で解決してみよう！**
　　又は何かわからないところがあるもしくBugが発見された場合は私と連絡してみよう　Twitter：DrunkSouzan
# 6.リファレンス
　　このゲームのプログラムは@游戏人YRのビデオ（中国語）を参考しながら作ったので。中国語ができる人はこのビデオがおすすめだね。
　　https://www.bilibili.com/video/BV1de4y187nZ/?spm_id_from=333.337.top_right_bar_window_custom_collection.content.click