【UE4】スパゲッティを綺麗なBPにする
手当たり次第にブループリントを作っていたら、いつのまにか見た目がスパゲッティになってしまっている事、ありませんか？
私はよく、ひらめきが消えないうちに……と急いでどんどこノードを追加していく癖があったので、
このような美味しそうな麺類が出来上がることが多かったのですが……
こうして技術ブログをちまちま書いたり、スライドを作ったりして説明する機会を頂いたりする時に、
「このままスクリーンショットを見せてもなんにも伝わらないし、そもそも恥ずかしい！！」
となってしまうので、ブループリントを綺麗に整理してみることにしました。
まず参考にするべきスライド
ブループリントを綺麗にするにあたって、まず参考にすると良いのがこちらの、
ヒストリアさんのスライドです。
ここにある通り、
Q：ブループリントを書くにあたって唯一にして絶対の正義とは？ A:見やすさ
であることを自分も実感しました……
まず、反省点
修正を始める前に、まずこのブループリントには大問題が有りました。
一時的に実装していたデバッグ用の機能などが、
「結構頑張って作ったしまた使うかもしれないから消すのはもったいない」
という理由でノードをつながれないまま残ってしまっていたのです。
なのでまず最初に、該当する部分のデバッグ用ノードなどは、
それぞれマクロに折りたたみました。
これで将来的に必要になったとき、マクロを置いて、そこにノードを繋ぐだけで確認ができるようになりますね。
左から右、上から下
次に配置の変更です。
先ほどのスライドを2つのルールに従う形で変更します。
・処理の流れは左から右へ
・分岐が発生したら上から下へ
これにしたがってノードを動かしていると、途中で混線してしまうこともあるので
「Rerouteノード」を使って形を綺麗にします。
その結果がこちらです。
こ……これはっ！！！
かなり見やすくなっているっ！！！！
処理するブロックごとにコメントを書く
ここまで修正できるとかなりテンションが上ってくるので、
ここからはさらにブロックごとにコメントを書いてわかりやすくします。
「ここではこんなことをしていますよ」という一連の流れをドラッグで囲んで、Cキーを押してコメントを設置します。
右クリックメニューなら「選択対象からコメントを作成する」をクリックします。
こうすることで、どこで何をしているかが非常にわかりやすくなります。
それと同時に、コメントを付けるともう一つ素敵な効果が生まれます。
それは、「ひとつの処理ブロックの長さ・複雑さがわかる」というところです。
外伝：長い処理をマクロにまとめる
たとえコメントをちゃんとつけたとしても、
（これは別のブループリントを使った例です）
これがどーんとイベントグラフの中に鎮座していたら、それはそれで見にくくなってしまいます。
なので、このような処理が複雑になっているブロックもマクロにします。
（先ほどのブループリントです）
シンプルな見た目になるし、マクロの中身をいじる＝その機能に手を加える事になるので、自分がどこをいじっているのかもはっきりします。
完成
ということで、修正とコメント作成の結果
こうなりました。
なんということでしょう……
Before
After
まとめ
・ブループリントを綺麗にして可読性を上げると、開発が捗る
・綺麗なブループリントは他人に見せる時に恥ずかしくない
・ブループリントを綺麗にするとテンションがすごく上がる
というわけで、ブループリントの整形はいい事ずくめなのでおすすめです。
ちなみに今回修正したブループリントは、次回の記事
「UE4でイントロ・アウトロ付きBGMループを実装する」（仮題）
で登場する予定です。よろしくお願いします。
