全スライドをDocswellで公開中！ https://www.docswell.com/s/historia_Inc/ZRG73K-ss-64773800 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 2016年7月18日に東京蒲田で行われたイベント「出張！　ヒストリア」で行われた「ブループリントを書くにあたって大切なこと」のスライドです。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

44. historia Inc.
【関数・マクロを活用する】
44
＼＼ ＼＼＼＼ ..／´: : : : : : : : : : : : : : : : : ｀:＼、 ／／／ ＿＿
＼＼＼＼ ＼ ＼ ／: : : : : : : : : : : : : : : : :ヽ: : : : : : : :｀＼ ／ ヽ ／
＼ ＼＼ ／: : : : : : : : : : : : :: : : : ∧、:ヽ: : : : : : : : :＼ ／ ／／ ﾉ
＼ ＼ /: : : : : : : : : : : : : : ／/: / ヽ: : : : : : : : : : : : ／ ＿|＿
＼＼＼＼ ＿_/: : : : : : : : : : イ: ／ .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 ＼＼ ＼ ＼＼ || .||
.○ ○

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

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

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

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

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

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

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

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

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

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

55. historia Inc.
【ブループリントを書くにあたって大切なこと】
ブループリントはすぐに汚くなるわけではありません。
少しずつ少しずつ汚れていき、
気がついたら大変な状態になる場合はよくあります。
55
三 三三
/;:"ゝ 三三 f;:二iュ どうしてこんなになるまで放っておいたんだ！
三 ＿ゞ::.ﾆ! ,..'´￣｀ヽﾉﾝ
／.;: .:}^（ <;:::::i:::::::.::: :}:} 三三
〈::::.´ .:;.へに)二/.::i :::::::,.イ ﾄ ヽ__
,へ;:ヾ-､lｌ＿＿/.:::::､:::::f＝ｰ‘＝＝､`ｰ-=“⌒ヽ ←ブループリント
. 〈::ﾐ/;;;iーﾞii====|:::::::.｀ Y￣￣￣,.シ'=llー一'";;;ド'
};;;};;;;;!￣ll￣￣|:::::::::.ヽ＼-‐'"´￣￣ll

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

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