ぐーるらいふ

底辺。

【Unity】xNodeの使い方 初心者向け

お疲れ様です。ぐーるです。
ビルの件の高速化の記事を進めているのですが、めっちゃ長いので、気長にちまちま加筆してます。

というわけで気分転換でxNodeについて書きます。
普段真っ黒いコンソールしか見てない自分としては
ビジュアルスクリプティングというのに興味がありまして、
Playmakerとか触ってみたいなと思ってたんですが、有料なのかぁと二の足を踏んでいました。

先日勉強会でxNodeってのがあるという話を聞きまして、早速触ってみました。
初心者向けですごーく初歩的な内容ですがメモとしてまとめておこうと思います。

xNodeの導入

xNodeはAssetStoreにもありますが、githubで公開されています。
github.com

cloneしても良いですが、unitypackageが公開されているので、それを利用しました。
https://github.com/Siccity/xNode/releases

xNode_1.6.unitypackage

をDLして、unityのプロジェクトで

Assets > Import Package > Custom Package

でimportします。

xNodeの最もシンプルな構成

シンプルに考えるとxNodeは二つのクラスしかありません。

f:id:ghoul_life:20190304173735p:plain

NodeとNodeGraphです。

XNode.Node

これは単一のノードを指します。
f:id:ghoul_life:20190304184225p:plain
値を持ったり、値によって振る舞いを変えたりといった事が出来ます。

XNode.NodeGraph

これはNodeを管理するScriptableObjectを作れるクラスです。

f:id:ghoul_life:20190304185452p:plain

このようにNodeを複数グループ管理するイメージです。
内部ではnodesというリストを持っていて、ここで各ノードを保持しています。

早速作ってみる

今回はNovelゲームを題材にして、そのNovelゲームの会話処理をノード化し、
会話の流れをビジュアル的に捉えやすくするイメージで作ってみます。

NodeGraphの作成

まずxNodeのウィンドウを出すため、NodeGraphを作成します。

using UnityEngine;
using XNode;

[CreateAssetMenu(fileName = "NovelGraph", menuName = "Node Graph/NovelGraph")]
public class NovelGraph : NodeGraph { 
}

menuNameなどは適宜変えてください。
間違いでもなんでもなく、本当にこれだけでOKです。
最小限で良ければ何にも要らないです。

Nodeの作成

ノードを作成します。

f:id:ghoul_life:20190304190706p:plain

using System.Collections.Generic;
using UnityEngine;
using XNode;

public class NovelNode : Node {

    public Sprite _novelSprite;

    [TextArea(3, 5)]
    public List<string> _messageList;

    [Input] public NovelNode _beforeNode;
    [Output] public NovelNode _nextNode;
}

表示したい立ち絵スプライト画像と文字列リストを持ちます。
ノード同士を連結させるために前と後ろの参照を持っておきます。
[Input]というAttributeを付与するとノード連結を受け入れることが出来、
[Output]なら逆にノード連結を出力することが出来ます。

[Output] -> [Input]

の関連になります。
f:id:ghoul_life:20190304193526p:plain
コードはこれで準備完了です。

NodeGraphとノードエディタ

f:id:ghoul_life:20190304214330p:plain
(他も見えますが、気にせず)

Project > Create > Node Graph > NovelGraph

でScriptableObjectを生成し、それをダブルクリックします。
f:id:ghoul_life:20190304215104p:plain
xNodeエディタウィンドウが開くので、右クリックでNodeを追加出来ます。
f:id:ghoul_life:20190304215326p:plain

後は好きな値を入れます。
[Input][Output]を繋げる時は直感的にドラッグすればOKです。
f:id:ghoul_life:20190304215912p:plain

NodeGraphの使い方

使う側は簡単です。

public class NovelGraphController : MonoBehaviour
{
    [SerializeField] NovelGraph _novelGraph;
    private int _nodeIndex = 0;
    // ~~
    // nodesに入っているのでそこからアクセス出来ます
    var novelNode = _novelGraph.nodes[_nodeIndex] as NovelNode;

}

こんな感じで自由にアクセス出来ます。
NovelGraphには上で作成したScriptableObjectを紐づければOKです。

ノベルゲーム風に使ってみた

こんな感じでデータを入れて

f:id:ghoul_life:20190304172553p:plain

こんな感じに会話が進む感じにしてみました。

f:id:ghoul_life:20190304222134g:plain

TextFaderというライブラリをちょっとお借りしてカスタムして使用してます。
会話の流れがビジュアル的に捉えやすいですね。
会話の入れ替えやデータのミスの把握などが直感的に行えそうです。

baba-s.hatenablog.com