Visual Scripting （ビジュアルスクリプティング）

2021年5月7日2021年5月10日

Unityの開発で、ビジュアルのツールを使ったプログラムの作成ができる仕組みです。

ビジュアルスクリプティング

特徴

ビジュアルスクリプティングを通して、ノーコードから次のように学習やゲーム作成したりすることができます。

ノンプログラマー向けのスクリプティング

Unityのビジュアルスクリプティングは、チームメンバーがコードを手書きする代わりに、視覚的なドラッグ＆ドロップのグラフを使ってスクリプティングロジックを作成するのに役立ちます。また、プログラマー、アーティスト、デザイナーの間で、よりシームレスなコラボレーションが可能になり、プロトタイピングやイテレーションを迅速に行うことができます。

デザイナーおよびアーティスト向けのスクリプティング

デザイナーとアーティストにとって、Unity でアイデアをテストし、変更を加え、作品をもっと直接的に制御するための優れた選択肢です。また、プログラマー以外のユーザーも、技術知識のあるチームメンバーが作成したノードグラフを活用できます。

プログラマーの作業を効率化

ビジュアルスクリプティングシステムを使用すると、開発者のプロトタイピングとテストの速度が向上し、実行できない可能性のあるアイデアのために手書きのコードで無駄な労力を費やすことがなくなります。また、ビジュアル・スクリプティングは、既存のスクリプトにアクセスしやすくしたり、開発チームの他のメンバーが使用するツールを作成するのにも最適な方法です。

まとめると、

• インタラクティブなシステム（相互に作用するシステム）、アート、アニメーションなどの迅速な実現
• コードを書けない人でも理解しやすい
• C#のコンセプト（概念）を理解するための学習に役立つ
• テンプレートやツールを作成し、他のUnityユーザーと共有可能

コンポーネントの種類

フローグラフ

フローグラフは、プロジェクトでインタラクションを作成するための主要なツールです。ノードベースのアクションと値を使用して、すべてのフレームで、またはイベントが発生したときに、指定した任意の順序でロジックを実行できます。

ステートグラフ

ステートグラフを使用すると、特定の状態になったときに実行するアクションをオブジェクトに指示する、自己完結した動作を作成できます。ステートグラフは、AI の動作やシーンまたはレベルの構造、状態間で遷移する動作が必要とされるシーンのあらゆる側面に適しています。

バージョン2019/2020 LTSでは、Unity Asset Storeからビジュアルスクリプティングソリューションをダウンロードしてください。
バージョン2021.1以降、ビジュアルスクリプトはパッケージとしてデフォルトでインストールされます。パッケージマネージャーで確認することができます。

使ってみましょう

実際にチュートリアルを通して機能を確認していきましょう。
C#のコードで作成した時とは違いますが、コード行がそれぞれ「箱」になっている様子がわかると思います。

Unity Visual Scriptingは、ライブ編集ができます

Playモードでグラフに変更を加えると、ビジュアルスクリプトの更新をリアルタイムで確認できます。これにより、プロジェクトの変更を再コンパイルすることなく、アイデアの反復とテストをより迅速に行うことができます。

チュートリアル

玉転がし（Roll a Ball）を題材にします。
Sphere（球）を矢印キーで前後左右（Unityでは、z軸とx軸）に移動させるサンプルを作ります。
移動方法は、AddForceで Sphereに力を加えることによって実現します。

プロジェクトの作成

このチュートリアルでは、次の条件で進めていきます。

• Unityバージョン 2021.1以降
• テンプレート 3D
• プロジェクト名 RollABallVisualScripting

新規作成できたら次へ進みましょう。

ゲームオブジェクトの配置

次のキャプチャーを参考にオブジェクトを配置していきましょう
特に指定がない場合、デフォルト（初期設定）で進めていきましょう。
SphereのPositionYは、２つ目のチャプターの通り、0.5を設定してPlane上におくようにします。

Rigidbodyコンポーネントのアタッチ

物理的に力を加えるため、SphereにRigidbodyをアタッチします。
Riigidbodyの設定値はデフォルトのままです。

ここまでは、C#でコードを作成するのと同じですね。

Visual Script (Script Machine)コンポーネントのアタッチ

Rigidbodyコンポーネントをアタッチするように、インスペクターウィンドウのAddComponentボタンからアタッチします。

検索窓で絞り込んで、Script Machineを選択します。（ちなみにState Machineは、状態遷移をコントロールするものです。Animatorコンポーネントの設計で箱を矢印で繋ぐアレです）

Script Machineコンポーネントでグラフを新しく作ります。（内部では、ScriptableObjectが作られます。エディターではこのファイルを更新していきます）

名前をBallとしでファイル保存しておきましょう（下のキャプチャーはMacの画面サンプルになります）

ビジュアルで作成するエディターでグラフを開きましょう

ビジュアルエディターの起動

エディター画面が起動されます
StartとUpdateはC#スクリプトで扱うイベントと同じ機能のものです

ジョイスティック入力を追加していきます。（キーボードでは矢印キーを使います）
何もないところで右クリックすると作成メニューが現れますので、検索窓でgetaxisと入力してみましょう。これは選択候補の窓なのでヒットしやすいワードを入力すればいいです。１文字入力するたびに候補が絞られていきます。

Input: Get Axis(Axis Name)を選択します。

箱が1つ増えましたね。
これがジョイスティック入力になります。

Axis Nameに[Horizontal]と入力しましょう。これは、C#で次のようにコードを記述するのに該当します。

Input.GetAxis("Horizontal");

Horizontal（水平）入力ができました。これは、Unityのx軸方向に入力です。値は-1から1までです。

同様にVertical（垂直、z軸）も作成するのですが、コピーをして作成してみましょう。
Input GetAxisを右クリックして、Duplicateを選択します。（Ctl + DでもOK)

同じものができますので少し下にD&Dで移動し、Axis Nameを[Vertical]と変更します。

できましたね。
これで上下の矢印入力の値が取れるのですが、-1から1では小さすぎるのでpower変数分を掛け算してあげます。

何もないところで右クリック、Add Unitから検索窓でmulと入力。（掛け算の英単語multiply）

適当な場所に移動します。

今度は、掛け算する変数（power）を作成します。
今回の変数は、Inspecterからでも変更ができるようにもしたいので、Objectタイプ（ゲームオブジェクト内、つまりコンポーネントがアクセス範囲）にします。

変数の作成は、画面左（画面位置の変更は可能）のBlackboardからObjectタブをクリック、新しく次のように作成します。

• 変数名 (Name) power
• 型 （Type）float
• 値 （Value）5

変数をドラッグしながら適当は場所にドロップします。

このpower変数の値(5)と、GetAxis（-1から1）を掛け合わせます。
次のように線を接続しましょう。

もう1つの軸も同じようにしましょう。今回は掛け合わせる値は同じなのでpowerは両方に接続します。

何もないところで右クリック、AddUnitからrigidbody.addと検索（rigidbodyの選択から、addへと検索をつづけてもいいです）
候補からRigidbody: Add Force (X, Y, Z)を選択

AddForceが作成されます。

X軸とZ軸に対して力を加えるので次のように接続。

次に入力情報のタイミングを設定します。
物理入力なので、FixedUpdateイベントループとします。これはC#スクリプトにもありますが、定期的（デフォルトでは20msごと）に呼び出されるものです。

では新規で作成してみましょう。
何もないところで右クリック、Add Unitからfixedと検索入力、Fixed Updateを選択します。

Fixed UpdateからAddForceにタイミングを接続します。

実行

それでは実行してみましょう

いかがでしょうか？
C#スクリプトのコードイメージがビジュアルに反映されているのがわかると思います。
Visual Scriptingを理解し使いこなすためにもC#の学習は大事ですね。

C#スクリプトで置き換えてみると・・・

サンプルでは、変数はobject型です。これはアクセス範囲がそのゲームオブジェクトのコンポーネント全てなので、少し違いますが、次のような代替えコードになるでしょう。
こちらの方がいいな・・と思うかもしれませんね。
C#の勉強をしているかどうかで、その辺りの感じ方は変わリます。イメージとして動作を掴むにはビジュアルも理解を助けますね。（両方使いこなせるのがベスト！）

using UnityEngine;

public class BallCSharp : MonoBehaviour
{
    public float power;

    void FixedUpdate()
    {
        float h = Input.GetAxis("Horizontal");
        float v = Input.GetAxis("Vertical");

        GetComponent<Rigidbody>().AddForce(new Vector3(h * power, 0, v * power));
    }
}

また、ここでは触れていませんが、ステート（状態遷移）もビジュアル管理できます。
そちらの方がビジュアルスクリプティングの恩恵を得られるのではないかと思います。
ちょうど、Animatorの作成をする感覚です。トランジション（遷移）の条件をセットすることで、次のフェーズ（ステート）に移行するような感じをビジュアルに確認できます。複雑化したステート管理はコードより直感で把握しやすいですね。

Inspectorでの変数の確認、変更

object型の場合、オブジェクトを選択したコンポーネント（inspectorウィンドウ）で確認、変更することも可能です。

その他の変数

• グラフ（グラフのエディタ）内で有効なGraph型
• 現在のシーンのみ有効なScene型
• シーンを跨いで有効なApp型
• Unityを終了しても消えないSaved型

（参考）Scene型変数の場合

シーン全体で有効な変数

(参考)　コンソールにデバッグ情報を表示するサンプル

ビジュアルエディター

Debug.Logユニットがあります。
このサンプルでは、ユニットからラインを伸ばし自動的に接続先のユニットの選択をする手順で作成しています。

実行

参考資料

今では、さまざまな技術資料やビデオチュートリアルが出ていますので学習の参考にしてみましょう

概要

ビデオデモ

For文

Switch文