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

historia Inc.

たったひとつのシンプルな答え

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

2016/07/18 馬場俊行1

historia Inc.

自己紹介

株式会社ヒストリア

馬場俊行

プログラマー／レベルデザイナー

業界歴8年目

UE3歴約３年（コンシューマー、アーケード、モバイル）

UE4歴約２年（コンシューマー、モバイル）

2

historia Inc.

まず、ブループリントとは？

3

historia Inc.

【ブループリントとは？】

• 特別なアセットで、アクタの種類を新規作成するために使う直観的かつノードベースのインターフェース

• デザイナーおよびゲームプレイプログラマーは、新しくコードを書かなくても、アンリアルエディタからゲームプレイの作成およびイタレーションをすぐに実行することができる

出典：アンリアルエンジン4のドキュメントブループリント入門

4

historia Inc.

【ブループリントとは？】

• そんな事は知っている！

• もうある程度ブループリントは書ける

• ノードをガシガシ繋げていけばいいんでしょ？

今回はそんな人を対象に、一歩踏み込んだ内容です

5

historia Inc.

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

6

historia Inc.

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

Q.ブループリントを書くにあたって唯一にして絶対の正義とは？

7

historia Inc.


8

A.見やすさ

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

ノード同士の間隔は、ある程度余裕をもって！

historia Inc.


ここでブループリント小話を一つ……

「この処理の間にこの処理を入れてください」

「他のノード動かすのメンドクサイお」

「ノードとノードの間に無理やり入れるお」

「入りきれないからこの辺に置いておくお」

19

∧＿∧（ﾟωﾟ）ノード配置は任せろー

ﾊﾞﾘﾊﾞﾘＣ□l丶l丶/ ( ) やめて！（ノと、ｉ

しーJ

historia Inc.


その結果……

こうした繰り返しによって悲劇は生まれます……

20

historia Inc.


「どうせまた後で修正が入るかも」

「とりあえずの仮処理かもしれないし…」

その気持ち、すごくわかります！

とは言え、常に綺麗に保つことを心掛けましょう

–ノードは複数選択する事で簡単にまとめて移動できる

–後述するコメント枠を活用することで、枠単位で移動できる

ね、整理するのは簡単でしょ？

21

historia Inc.


• リルートノードを活用する

22

historia Inc.

【リルートノードを活用する】

• ルートがノードで隠れないように配置ができる

• 別のルート同士の重なり合いも解消できる

23

historia Inc.


• ルートを枝分けして複数のピンに接続できる

24

historia Inc.


• 複数の実行ルートを合流させることができる

25

historia Inc.


リルートノードの作成自体はルート上でダブルクリックするだけで簡単に追加できる

26

右クリックからだと「AddRerouteNode」を選択すれば追加できる

historia Inc.


• コメントを活用する

27

historia Inc.

【コメントを活用する】

• コメントグループを使う

–複数ノードをまとめて囲う事で、関連処理が視覚的に分かる

–コメントグループを移動させると中身をまとめて移動できる

– EventGraph内で各イベントごとに囲うのも有効

28

historia Inc.

【コメントグループを使う】

色を変えることによってより分かりやすく

29

historia Inc.

【コメントグループを使う】

コメントグループの作成自体はCキーを押すだけ

30

historia Inc.


• ノードコメントを使う

–手軽にコメントを挿入することができる

–やりすぎると見にくくなる場合もある

–ちょっとしたメモ程度で使う感覚の方がよいかも

31

historia Inc.

【ノードコメントを使う】

32

ノードを選択して右クリックし、「ノードのコメント」欄に直接入力する

historia Inc.


• 説明/ツールヒント機能を使う

–変数や関数にカーソルを合わせると出る説明文

33

変数の場合は「ツールヒント」

関数の場合は「説明」

historia Inc.


• ノードの簡略化を活用する

–関数化やマクロ化する以外でもノードをまとめる事が可能

34

複数のノードを一つのノードにまとめる事ができる

historia Inc.

【ノードの簡略化を活用する】

複数のノードを選択した状態で、右クリックし

「ノードを折りたたむ」をクリックする

35

historia Inc.


マクロのノードをシンプルにすることも可能

普段使っている演算子のノード（＋やーなど）と同じ機能

36

historia Inc.


マクロの詳細設定にて「コンパクトノードタイトル」に

表示する内容を記入する

37

historia Inc.


• 整理する

– EventGraphを分ける

–関数や変数、マクロにはカテゴリを設定する

38

historia Inc.

【整理する】

増えがちなイベントは内容によってEventGraphを分ける

39

historia Inc.

【整理する】

カテゴリで関数やマクロをまとめておくと

右クリックのノード一覧も整理された状態で表示される

40

historia Inc.

【整理する】

• これらの整理作業は、最初のうちはあまり必要ない

• 開発が進むにつれ、実装内容が増えてきた時に有効

• とくに開発後期になると大量のイベントや関数、マクロなどが増えるため、整理していると作業効率はよくなる

41

historia Inc.


• 関数、マクロを活用する

–同じような処理の流れはマクロを使用する

–似たような機能は関数にする

42

historia Inc.

【関数・マクロを活用する】

こんな事していませんか？「うーん、ここから先の処理の流れはこっちと一緒だな…」「よし、だったらここでこっちのノードに繋げて――」

「これで完成だ！」

43

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 ＼＼＼＼＼ || .||

.○○

historia Inc.


• 関数もしくはマクロを使いましょう

45

historia Inc.


46

ところで…関数とマクロの違いって把握してますか？

historia Inc.


それぞれで出来ること、できない事

47

入出力ピン Latentノード継承先のクラス

関数追加できない使えない呼び出せる（オーバーライドも可能）

マクロ追加できる使える呼び出せない

historia Inc.


• つまりどういうこと？

–マクロは、実行ピンを増減でき、処理待ち用のLatentノードが使えるため、処理の流れを簡潔にまとめることができる

–関数は、継承先でのクラスでも使用でき、中身の処理を継承先でも上書きできるため、同じような機能をまとめることで効力を発揮する

48

historia Inc.


• マクロ使用の具体例

–フェード処理などで、フェードの開始直後と終了後のタイミングをどちらも取得したい場合に簡単に実装できる

49

historia Inc.

【マクロ使用の具体例】

フェード用マクロの中身

50

historia Inc.


• 関数使用の具体例

–移動処理の機能を関数化して実装

51

historia Inc.

【関数使用の具体例】

派生先で移動処理の実装を専用のものに書き換える

52

historia Inc.


もしくは派生先で、さらに専用の処理を追加する

53

historia Inc.


54

関数を使用する側はどちらの実装なのか知る必要はない

ただ移動を行う機能という事だけ知っていれば良い

historia Inc.


ブループリントはすぐに汚くなるわけではありません。

少しずつ少しずつ汚れていき、

気がついたら大変な状態になる場合はよくあります。

55

三三三/;:"ゝ三三 f;:二iュどうしてこんなになるまで放っておいたんだ！

三＿ゞ::.ﾆ! ,..'´￣｀ヽﾉﾝ／.;: .:}^（ <;:::::i:::::::.::: :}:} 三三〈::::.´ .:;.へに)二/.::i :::::::,.イﾄヽ__,へ;:ヾ-､lｌ＿＿/.:::::､:::::f＝ｰ‘＝＝､`ｰ-=“⌒ヽ ←ブループリント

. 〈::ﾐ/;;;iーﾞii====|:::::::.｀ Y￣￣￣,.シ'=llー一'";;;ド'};;;};;;;;!￣ll￣￣|:::::::::.ヽ＼-‐'"´￣￣ll

historia Inc.


56

これらを上手く活用し、見やすいブループリントを書くよう心掛けましょう！

historia Inc.

おわり

57

ご清聴ありがとうございました

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

Engineering

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

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

Engineering

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

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

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