はじめに
どうも！伸び代しかない新米Unityエンジニアのあつあつ(@kaidoatsuya)です！
今回はGraphViewというノードベースツールを作るUnityの機能でBlackboradという機能の紹介とTipsをまとめてみたいと思います！
GraphViewとは
GraphViewはShaderGraphのようなノードベースのツールを制作するためのAPI群です。
実際にゲーム開発現場でも使用されています！詳しくは以下の記事をご覧くださいっ！
Blackboardとは
ShaderGraphには変数機能が存在します。
下のようなUIみたことありませんか？これをBlackboardといいます。
追加の仕方
BlackboardをGraphViewのWindowに追加するには以下のコードを記載すればOKです。
// 独自のグラフビューのクラスの中という前提
// コンストラクタやInitializeメソッドの中での初期化処理を想定
var blackboard = new Blackboard();
Add(blackboard);
簡単ですね。Blackboard自体もGraphElementというGraphViewのノードなどが継承しているクラスを継承しているため、扱いとしてはノードと大きく変わりません。
今回は紹介しませんがBlackboardはGraphViewと別のWindowとしても作成できます。
GraphViewBlackboardWindowなどを参照してください。
Blackboardのために用意されたGraphElement
Blackboard用に提供されているGraphElementが3つ存在します。
- BlackboardRow
- BlackboardField
- BlackboardSection
それぞれ、みていきましょう。
BlackboardRow
以下のC#コードでGraphViewに追加してみます。
var space = new BlackboardRow(new Button() { text = "item"}, new Button(){text = "propertyView" });
blackboard.Add(space);
見た目はこのようになります。
このGraphElementはいくつかの変数をひとまとめするのに使えそうですね。
ほかのGraphElementと組み合わせるとさらにそれっぽくなります。あとで紹介します。
BlackboardField
以下のC#コードでGraphViewに追加してみます。
var field = new BlackboardField()
{
text = "Field",
typeText = "TypeText"
};
blackboard.Add(field);
見た目はこのようになります。
みたことありますね。あれです。あれ。
ダブルクリックをするとFieldと書いてある部分が編集できたり、あれの機能がもともとからあるのは嬉しいですね。
後から紹介しますが、ドラッグ＆ドロップの機能も存在します。
BlackboardSection
以下のC#コードでGraphViewに追加してみます。
var row = new BlackboardSection() {title = "Section"};
blackboard.Add(row);
見た目はこのようになります。
はい。Sectionでした。特に何もいうことはありません。
組み合わせてみる
以下のようなコードでFieldとRowを組み合わせてみます。
var field = new BlackboardRow(new BlackboardField()
{
text = "村人A",
typeText = "Person"
}, personProperty);
見た目はこのようになります。
それっぽくなってきましたね！
このようにRowとFiledを組み合わせると凄く整ったUIになるように設計されています。
Tips
ここからは触って気がついたTipsについて紹介していきます！
BlackboardFieldをGraphViewへドラッグ＆ドロップをしたい
通常のドラッグ＆ドロップのフローとほぼ同じです。
ただし、DragAndDrop.GetGenericData(KEY);で行うデータ取得にポイントがあります。
もともとBlackboardFieldにはドラッグ&ドロップ機能があるため、KEYがこちら側で設定できません。
キーは"DragSelection"という文字列で固定されています。またデータはBlackboradFieldのGraphElementが返ってくるので、VisualElement.userDataにノード用の情報を格納しておくと、生成が楽かもしれませんね。
BlackboardのプラスボタンからFieldを追加したい！
こちらは、GenericMenuを利用すれば可能です。本題からそれるため詳しくは説明しませんが、コンテキストメニューを作ることが可能なAPIです。
おわりに
最近、記事を書いておらずでしたが、久々にBlackboardがあることを個人開発中に知ったので、キャッチアップしてみました。
ついでに記事を執筆！最高〜！
最近は内定者アルバイトや個人開発で、キャッチアップが疎かになっていますが、少しずつ並行できる力をつけていきたいです