出張ヒストリア ブループリントを書くにあたって大切なこと

ブループリントを書くにあたって大切なこと たったひとつのシンプルな答え 2016/07/18 馬場俊行 historia Inc. 1

自己紹介 株式会社ヒストリア 馬場俊行 プログラマー／レベルデザイナー 業界歴8年目 UE3歴約３年（コンシューマー、アーケード、モバイル） UE4歴約２年（コンシューマー、モバイル） historia Inc. 2

まず、ブループリントとは？ historia Inc. 3

【ブループリントとは？】 • 特別なアセットで、アクタの種類を新規作成するために 使う直観的かつノードベースのインターフェース • デザイナーおよびゲームプレイプログラマーは、 新しく コードを書かなくても、アンリアル エディタからゲーム プレイの作成およびイタレーションをすぐに実行するこ とができる 出典：アンリアルエンジン4のドキュメントブループリント入門 historia Inc. 4

【ブループリントとは？】 • そんな事は知っている！ • もうある程度ブループリントは書ける • ノードをガシガシ繋げていけばいいんでしょ？ 今回はそんな人を対象に、一歩踏み込んだ内容です historia Inc. 5

ブループリントを書くにあたって 大切なこと historia Inc. 6

【ブループリントを書くにあたって大切なこと】 Q.ブループリントを書くにあたって 唯一にして絶対の正義とは？ historia Inc. 7

【ブループリントを書くにあたって大切なこと】 A.見やすさ historia Inc. 8

【ブループリントを書くにあたって大切なこと】 • 悪い例 historia Inc. 9

【ブループリントを書くにあたって大切なこと】 • 実行ルートがあっちこっちに迷走している – 流れがわかりにくい • ルート同士が交差していたりノードと重なっている – ピンがどこに接続されているのかわからない • ノードとノードの距離が近すぎる – 全体的に見えにくい • コメントが一切無い – 何をやっているかよくわからない historia Inc. 10

【ブループリントを書くにあたって大切なこと】 • ソースコードの可読性以上に視認性の重要さは大きい • ノードを綺麗に整理することは見た目以上に保守のしや すさに気づく • 特に大人数による開発では絶対的な正義となる historia Inc. 11

【ブループリントを書くにあたって大切なこと】 では、どうすれば見やすくなるのか？ historia Inc. 12

【ブループリントを書くにあたって大切なこと】 • ノードの配置を整理して処理の流れを見やすくする historia Inc. 13

【ノードの配置を整理して処理の流れを見やすくする】 • 処理の流れは左から右、上から下へ historia Inc. 14

【ノードの配置を整理して処理の流れを見やすくする】 • 出来るだけルート同士が交差しないようにする historia Inc. 15

【ノードの配置を整理して処理の流れを見やすくする】 • ノード同士の距離はある程度離す 知らない間に… historia Inc. 16

【ノードの配置を整理して処理の流れを見やすくする】 • ノード同士の距離はある程度離す – ノードの大きさはアクター名や関数名の変更、 引数の追加などである程度変化する – エディタの言語設定を変更してもノードの大きさは変わる 言語を切り替えても ノードの大きさを変えない 設定があるので活用 historia Inc. 17

【ノードの配置を整理して処理の流れを見やすくする】 • ノード同士の距離はある程度離す ノード同士の間隔は、ある程度余裕をもって！ とはいえ、離れすぎると今度は 全体を把握しづらくなるので注意 historia Inc. 18

【ノードの配置を整理して処理の流れを見やすくする】 ここでブループリント小話を一つ…… 「この処理の間にこの処理を入れてください」 「他のノード動かすのメンドクサイお」 「ノードとノードの間に無理やり入れるお」 「入りきれないからこの辺に置いておくお」 ∧＿∧ （ ﾟωﾟ ） ノード配置は任せろー ﾊﾞﾘﾊﾞﾘＣ□l丶l丶 / ( ) やめて！ （ノ と、 ｉ しーJ historia Inc. 19

【ノードの配置を整理して処理の流れを見やすくする】 その結果…… こうした繰り返しによって悲劇は生まれます…… historia Inc. 20

【ノードの配置を整理して処理の流れを見やすくする】 「どうせまた後で修正が入るかも」 「とりあえずの仮処理かもしれないし…」 その気持ち、すごくわかります！ とは言え、常に綺麗に保つことを心掛けましょう – ノードは複数選択する事で簡単にまとめて移動できる – 後述するコメント枠を活用することで、枠単位で移動できる ね、整理するのは簡単でしょ？ historia Inc. 21

【ブループリントを書くにあたって大切なこと】 • リルートノードを活用する historia Inc. 22

【リルートノードを活用する】 • ルートがノードで隠れないように配置ができる • 別のルート同士の重なり合いも解消できる historia Inc. 23

【リルートノードを活用する】 • ルートを枝分けして複数のピンに接続できる historia Inc. 24

【リルートノードを活用する】 • 複数の実行ルートを合流させることができる historia Inc. 25

【リルートノードを活用する】 リルートノードの作成自体はルート上でダブルクリック するだけで簡単に追加できる 右クリックからだと 「AddRerouteNode」 を選択すれば追加できる historia Inc. 26

【ブループリントを書くにあたって大切なこと】 • コメントを活用する historia Inc. 27

【コメントを活用する】 • コメントグループを使う – 複数ノードをまとめて囲う事で、関連処理が視覚的に分かる – コメントグループを移動させると中身をまとめて移動できる – EventGraph内で各イベントごとに囲うのも有効 historia Inc. 28

【コメントグループを使う】 色を変えることによってより分かりやすく historia Inc. 29

【コメントグループを使う】 コメントグループの作成自体はCキーを押すだけ historia Inc. 30

【コメントを活用する】 • ノードコメントを使う – 手軽にコメントを挿入することができる – やりすぎると見にくくなる場合もある – ちょっとしたメモ程度で使う感覚の方がよいかも historia Inc. 31

【ノードコメントを使う】 ノードを選択して右クリックし、「ノードのコメント」欄 に直接入力する historia Inc. 32

【コメントを活用する】 • 説明/ツールヒント機能を使う – 変数や関数にカーソルを合わせると出る説明文 関数の場合は「説明」 変数の場合は「ツールヒント」 historia Inc. 33

【ブループリントを書くにあたって大切なこと】 • ノードの簡略化を活用する – 関数化やマクロ化する以外でもノードをまとめる事が可能 複数のノードを一つのノードに まとめる事ができる historia Inc. 34

【ノードの簡略化を活用する】 複数のノードを選択した状態で、右クリックし 「ノードを折りたたむ」をクリックする historia Inc. 35

【ノードの簡略化を活用する】 マクロのノードをシンプルにすることも可能 普段使っている演算子のノード（＋やーなど）と同じ機能 historia Inc. 36

【ノードの簡略化を活用する】 マクロの詳細設定にて「コンパクトノードタイトル」に 表示する内容を記入する historia Inc. 37

【ブループリントを書くにあたって大切なこと】 • 整理する – EventGraphを分ける – 関数や変数、マクロにはカテゴリを設定する historia Inc. 38

【整理する】 増えがちなイベントは内容によってEventGraphを分ける historia Inc. 39

【整理する】 カテゴリで関数やマクロをまとめておくと 右クリックのノード一覧も整理された状態で表示される historia Inc. 40

【整理する】 • これらの整理作業は、最初のうちはあまり必要ない • 開発が進むにつれ、実装内容が増えてきた時に有効 • とくに開発後期になると大量のイベントや関数、マクロ などが増えるため、整理していると作業効率はよくなる historia Inc. 41

【ブループリントを書くにあたって大切なこと】 • 関数、マクロを活用する – 同じような処理の流れはマクロを使用する – 似たような機能は関数にする historia Inc. 42

【関数・マクロを活用する】 こんな事していませんか？ 「うーん、ここから先の処理の流れはこっちと一緒だな…」 「よし、だったらここでこっちのノードに繋げて――」 「これで完成だ！」 historia Inc. 43

【関数・マクロを活用する】 ＼＼ ＼＼＼＼ ..／´: : : : : : : : : : : : : : : : : ｀:＼、 ／／／ ＿＿ ＼＼＼＼ ＼ ＼ ／: : : : : : : : : : : : : : : : :ヽ: : : : : : : :｀＼ ／ ヽ／ ＼ ＼＼ ／: : : : : : : : : : : : :: : : : ∧、:ヽ: : : : : : : : :＼ ／ ／／ ﾉ ＼ ＼ /: : : : : : : : : : : : : : ／/: / ヽ: : : : : : : : : : : : ／ ＿|＿ ＼＼＼＼ ＿_/: : : : : : : : : : イ: ／ .i: / .ヽ: ﾍ: : : : : : : : : ヽ ／ | | ── . . ─. | | ￣｀|: : : : : : :/ |:/ ／.|:/ ヽ:| ヽ: :i: : : : : : :ヽ ／ ／ ／ ＿／ ─＞: : : : : :｀} | .|: : : : i: / レ´ |/ N＼＿＿:∧: : : : : : :i | ＝＝: : : : : : /──: : : : :|:/／￣￣ヽ ／￣ヽ ∨ヽ: : : : : :卜 卜三三三: : : / i: /__ }: /|v| /´￣｀iヾ ./´￣ヽヽ ∧: : : N N: ＼ ＝＝≡≡ | ≡＝─: :/ 〉/ 〉i: i ﾐ| { ||| .| | ||| } |´ i: : : : :i: : : : : :Z ＝≡＿|＿ | | V N: N | |::i ヽ＿ ノ .ヽ＿ノ ´ .i: ノ∧ﾉ: : : : : :| | ＿ 彡彡 ＼ .|: .| 卜: 丿: : : : :ノN .| ＿ ／ ヽi:─ し N＼＿＿＿＿ {:::i .N∨ |＿ ／／ |ﾍ: ヽ ／ N }ヽ| ＼＼ ＼ ＼＼ .| ／ ／／／ ／ wNヽ/ i ＼／ ﾉ ＼ ＼＼ ＼＼ ◯＼ ／／／ ／ ／ ／／ / ＼＼─＿＿＿＿＿ ／＼＼ ＼ ＼＼ ＼＼＼＼ つ ／／ ／ ／／ / ＼＼／ミﾐY彡//／ ＼＼ ＼ ＼ ＼ ＼ |.| |.| ／／ ／／ / 〉７NV∧ ｒ〈 i ＼＼ ＼ ＼＼ || .|| .○ ○ historia Inc. 44

【関数・マクロを活用する】 • 関数もしくはマクロを使いましょう historia Inc. 45

【関数・マクロを活用する】 ところで… 関数とマクロの違いって把握してますか？ historia Inc. 46

【関数・マクロを活用する】 それぞれで出来ること、できない事 入出力ピン Latentノード 継承先のクラス 関数 追加できない 使えない 呼び出せる （オーバーライドも可能） マクロ 追加できる 使える 呼び出せない historia Inc. 47

【関数・マクロを活用する】 • つまりどういうこと？ – マクロは、実行ピンを増減でき、処理待ち用のLatentノードが 使えるため、処理の流れを簡潔にまとめることができる – 関数は、継承先でのクラスでも使用でき、中身の処理を継承先 でも上書きできるため、同じような機能をまとめることで効力 を発揮する historia Inc. 48

【関数・マクロを活用する】 • マクロ使用の具体例 – フェード処理などで、フェードの開始直後と終了後のタイミン グをどちらも取得したい場合に簡単に実装できる historia Inc. 49

【マクロ使用の具体例】 フェード用マクロの中身 historia Inc. 50

【関数・マクロを活用する】 • 関数使用の具体例 – 移動処理の機能を関数化して実装 historia Inc. 51

【関数使用の具体例】 派生先で移動処理の実装を専用のものに書き換える historia Inc. 52

【関数使用の具体例】 もしくは派生先で、さらに専用の処理を追加する historia Inc. 53

【関数使用の具体例】 関数を使用する側はどちらの実装なのか知る必要はない ただ移動を行う機能という事だけ知っていれば良い historia Inc. 54

【ブループリントを書くにあたって大切なこと】

ブループリントはすぐに汚くなるわけではありません。
少しずつ少しずつ汚れていき、
気がついたら大変な状態になる場合はよくあります。
三

三三
/;:"ゝ 三三 f;:二iュ どうしてこんなになるまで放っておいたんだ！
三
＿ゞ::.ﾆ!
,..'´￣｀ヽﾉﾝ
／.;: .:}^（
<;:::::i:::::::.::: :}:} 三三
〈::::.´ .:;.へに)二/.::i :::::::,.イ ﾄ ヽ__
,へ;:ヾ-､lｌ＿＿/.:::::､:::::f＝ｰ‘＝＝､`ｰ-=“⌒ヽ ←ブループリント
. 〈::ﾐ/;;;iーﾞii====|:::::::.｀ Y￣￣￣,.シ'=llー一'";;;ド'
};;;};;;;;!￣ll￣￣|:::::::::.ヽ＼-‐'"´￣￣ll
historia Inc.

55

【ブループリントを書くにあたって大切なこと】 これらを上手く活用し、 見やすいブループリントを書くよう心掛けましょう！ historia Inc. 56

おわり ご清聴ありがとうございました historia Inc. 57