Go to Qiita Advent Calendar 2024 Top
LoginSignup
16
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Unity 2Advent Calendar 2016

Day 1
@YuukiOgino(雄季 荻野)

Unityでブループリントっぽいビジュアルスクリプト(Nottorus)をいじってみる

Last updated at Posted at 2016-11-30

Unity2 Advent Calendar 2016、12月1日の記事です。

ナンチャッテUnityエンジニアの荻野です。AdventCalendar初日の記事、パート２を書きます。

この一年間、私はUnrealEngine4のブループリントの影響でビジュアルスクリプト大好き人間になってしまいました。

個人的に感じているビジュアルスクリプトの利点は

・スクリプトの流れが視覚化されるのでわかりやすい
・デザイナー、アーティストといった今までスクリプトを扱ったことがない人でも直感でロジック制御が出来るようになる
・スクリプトの知識がないプランナー、ディレクターがプロトタイプを高速で作成、検証が出来るので面白いゲームを作れる可能性がグッとあがる
・エンジニアが別の集中すべきところに力を割くことができる

というところです。
プログラムの知識がない人間でもロジックが組みやすくなったことにより、プログラマーが居なくても少人数で高速でプロトタイプを作れるようになるのがありがたいです。

社内の新規作成でDとプランナーが毎日尋常じゃなくコロコロ仕様を変えてくるので、もうお前が作れよといいたくなってから何かないかと調査し始めた時にブループリントに出会ったのは内緒

unityでもビジュアルスクリプトがアセットで販売されていないか、ちょこちょこ調べていました。

そんな時、東ゲ部もくもく会でftvoidさんが、UnrealEngine4のブループリントみたいなアセットが販売されているということを発表していたので、ブループリント大好き人間な私も購入して少しいじってみました。

#Nottorus

1-1.png

こちらから購入できます。
お値段２５０ドルと大分お高いアセットです。

間違いなくブループリントを参考にしていると思われるデザインです。

sample.png

サンプルを開いてみるとますますブループリントっぽい。

Nottorus is a visual programming plugin for generating and debugging C# Unity scripts.
This plugin allows designers, artists and programmers without any limitation create C# scripts of any complexity, but requires basic programming skills. Without any limitation means you can create any code as well as programmers do. Even this plugin can be written on this plugin :) Really.

アセットの説明文にも書いてある通り、デザイナー、アーティストでも複雑なC#スクリプトを作りやすくはしますが、Unityの基本的なAPIは一通り把握しておく必要があります。
これを理解したうえでNottorusを使用すると開発効率がグッと上がると思います。

Script Editor Features:

  • Intuitive interface
  • Dynamic nodes database (more than 200,000 nodes generated runtime from reflection on default assemblies)
  • Contains all features of C# language;
  • Compiles into C # without any garbage;
  • Runtime Debugging;
  • Undo/Redo;
  • Integrated State Machine.
  • Description for each node (loaded from assemblies)
  • Unity Free and Pro.

エディタの基本機能を引用しました。
Unityで使用しているC#のプロパティ、メソッドはほぼ網羅している上、デバッグも視覚的でわかりやすくなるのでデバッグもしやすくなる利点もあります。

image

ここら辺もブループリントを参考にしていると思われます。

今後、バージョンアップによってアセット自体が非対応になる可能性は非常に高いですが、今のところ購入しても損はないかと思います。

ftvoidさんが定期的にNoottorusの実装状態をアップしているので、いじってみたいと思っている方は見てみるといいかもしれません。

Nottorusチュートリアル

デモ動画
Nottorus Plugin Demo

チュートリアル一式
Unity3D Plugin - Nottorus - Simple Inheritance
Unity3D Plugin - Nottorus - Simple 2D SideScroller
Unity3D Plugin - Nottorus - Simple Shmup
Unity3D Plugin - Nottorus - Simple Shooter Pt1 A [Props Hit Detection]
Unity3D Plugin - Nottorus - Simple Shooter Pt1 B [Scene Setup]
Unity3D Plugin - Nottorus - Simple Shooter Pt2 [Projectile Shooting]
Unity3D Plugin - Nottorus - Simple Shooter Pt3 [Raycast Shooting]
Nottorus Tutorial #2 - Counting Instances of Objects

ここの動画を見れば一通り使い方は分かると思います。

iTween等、外部のスクリプトを使用する方法
Nottorus with 3rd party addons - iTween interaction tutorial

スクリプトの生成

Nottorusをインポートしたら、早速スクリプトを生成しましょう

メニュー.png

右上のメニューにToolsが追加されているので、そこから「Nottorus Script Editor」を選択します。
初めてNottorusを起動した場合は認証画面が表示されます。

image

認証コードは取引ページ(もしくはCredit Card / PayPalで取引)で確認が出来ます。

認証番号.png

説明の上にある＃より後ろの数字が認証コードです。

認証成功したら以下のような画面が開きます。

image

NewScriptを開いてノードベースのスクリプトを作成します。

image

次に継承するスクリプトタイプを選択します。ここではMonobehaviourを選択します。

image

スクリプトタイプを選択したらCreateScriptをクリックします

image

フォルダが開くので、適当な名前、位置で保存します。

image

保存するとエディタ画面が開きます。ここから処理を実装していきます。

※Nottorusで開けるのはntsファイルのみです！C#スクリプトは開けません。

スクリプト実装（簡単な移動処理）

とりあえずコントローラーの上下左右を押すと移動するだけのスクリプトを作成します。

nottorus.png
こんな感じでUpdateメソッドに移動処理を書いてみました。

何回かUnityスクリプトを実装した人であればなんとなく処理のイメージが沸くと思います。

それでは早速実装していきましょう。
まずは左のClassFunctionsでUpdateを選択しましょう。

image

※小ネタ ClassFunctionsの操作

ClassFunctionを追加したい場合は左の+をマウスオーバーすると「+Function」選択すると増えます

image

Funciton名をクリックすると名称を変更できます。
カスタムメソッドを作る場合はこうして作成していきましょう。

image

メソッドを削除する場合は該当のFunctionを右クリックして、Deleteを選択すると削除されます。

image

まずは入力の値を取得するようにしましょう。Input.GetAxisです。

エディタの空いてるところに右クリックするとNodesListが開きます。
image

ここから取得する処理を選択します。
検索入力欄にGetAxisと入力すると、InputにGetAxisが出てくるのでクリックします。

image

するとInput.GetAxisが追加されます。

image

とりあえず上下の入力値を取りたいので、axisNameに"Vertical"と入力します。

image

これで

Input.GetAxis("Vertical");

と書いたことになります。
同じくHorizontalも追加します。

input.png

ここでローカル変数のVector3dを作成しましょう。

image

LocalVariablesの+をマウスオーバーすると「+Local Variables」が出てくるのでクリックします。

image

するとローカル変数が追加されます。名前も適当に分かりやすい名前に変えましょう。
デフォルトだと、型がintになっているので、Vector3に変えましょう。
下にVariableTypeという項目があるので、プルダウンからVector3を選択します。

image

このローカル変数をエディタへドラッグ＆ドロップします。

image

するとこのようにローカル変数が追加されます。このローカル変数に値を入れましょう。

image

Updateの白矢印をクリックしたままドラッグすると線が伸びるので、ローカル変数の「Set」につなげます。

image

ローカル変数のセット上でドロップすると線がつながります。
これでローカル変数のセット処理を行うようになりました。

image

では新しいVector3を作成していきましょう。
ローカル変数のnew Vector3のチェックボックスをクリックしてチェックを入れます。

image

するとこのようにx,y,zをセットできるピンが表示されます。
ここのxとzにInput.GetAxisで取得した値をセットしましょう。
Input.GetAxisの緑ピン、Resultをクリックしてドラッグすると緑の線が表示されます。

image

これをローカル変数のX,Zの緑ピンに接続します。
このような感じです。
image

これでVector3のセットが終了しました。次はtrancformをいじくってキャラを移動する処理を追加します。
まず、trancesformを取り出しましょう。InheritedPropertiesにあります。

image

下から二番名にtransformがあるので、こいつをドラッグ＆ドロップします。

image

image

transformのpositionプロパティを使用したいので、transformピンをクリック後、適当な位置で離します。

image

するとNodesListが開くので、positionを入力してプロパティを探しましょう。

image

ありました。positionをクリックします。

image

するとpositionプロパティがtransformピンに接続された状態で表示されます。

image

これはスクリプトで書くと、

trancform.position;

となります。これに先ほどの入力値を加えた上でpositionにセットしましょう。

まず、ローカル変数のGetピンを引いた上で適当な場所にドロップして、開いたNodesListにaddを検索します。
image

Vector3にAddというのが表示されているので、これをクリックします。

image

するとVector3.Addノードが追加されます。bにpositionピンを接続します。
image

これをスクリプトで書くと

velocity + trancform.position;

となります。ただ、これはただ単に足しただけなので、positionの値が変更されたわけではありません。
この値をもう一度transform.positionにセットする必要があります。

エディタの空いている部分でドラッグすると青い四角が表示されるので、tranceformとpositionノードをかぶせましょう。これで選択状態になります。

image

選択された状態でCtrl+Cでコピーし、適当な位置でCtrl+vで貼り付けます。

image

今度はローカル変数の白矢印から、複製したpositionのsetピンに接続します。

image

次にVector3.AddのResultピンを複製したpositionピンのpositionに接続します。

image

これをスクリプトで書くと

trancform.position = velocity + trancform.position;

になります。これで変数の代入が出来ました。
以上で移動処理の実装が終了したので、最後にUpdateのReturmピンに接続します。

image

これで一通りの実装が終了しました。ただこれではプレハブにスクリプトが貼り付けないので、コンパイルしてC#スクリプトを生成します。

image

上にCompileというボタンがあるので、これをクリックします。
エラーがなければ黄色い？から緑のチェックに変わります。

image

ntsファイルを保存したところに同名のC#スクリプトがあるはずです。

image

これでスクリプトの生成が終了しました。
プレハブにアタッチしてちゃんと動くか確認しましょう。

image

無事動きました！
生成されたC#スクリプトを見てみましょう。

PlayerScript.cs
public class PlayerScript : UnityEngine.MonoBehaviour
{


	void Start()
	{
	}
	void Update()
	{
		UnityEngine.Vector3 velocity;

		velocity = new UnityEngine.Vector3(UnityEngine.Input.GetAxis("Horizontal"), 0f, UnityEngine.Input.GetAxis("Vertical"));
		transform.position = velocity + transform.position;
		return;
	}
}

ある程度ちゃんとしたスクリプトが生成されていることに驚きです。
これぐらいなら別にノードスクリプトでなくてもOKですが、視覚的に処理が分かりやすいのがノードベースのよさなので、初心者はAPIを見ながら実装すると覚えやすいかもです。

#コメントのつけ方

Nottorusではコメントもつけられます。
まずはコメントを付けたい部分を選択します。

image

選択したノードの上で右クリックをします。
Actionsが開くので、Create commentary for nodesを選択しましょう。
image

するとコメントノードが展開されます。

image

適当にコメントを付けます。

image

コメントノードに入れられたノードは、コメントノードをドラッグすると一緒にドラッグされます。
これで見やすいように位置調整しましょう。

image

こんな感じにしました。この状態でスクリプトをコンパイルすると、コメントが付きます。

PlayerScript.cs
public class PlayerScript : UnityEngine.MonoBehaviour
{


	void Start()
	{
	}
	void Update()
	{
		UnityEngine.Vector3 velocity;

		///Inputの値をローカル変数にセット
		velocity = new UnityEngine.Vector3(UnityEngine.Input.GetAxis("Horizontal"), 0f, UnityEngine.Input.GetAxis("Vertical"));
		///Positionにセット
		transform.position = velocity + transform.position;
		return;
	}
}

スクリプトのほうも分かりやすくなったと思います。

#デバッグ
スクリプトをデバッグ用でコンパイルすると、Nottorus内で処理の流れをリアルタイムで視覚化した状態でデバッグできます。
これが個人的に非常にありがたい機能でもあり、ビジュアルスクリプトを好むようになった理由でもあります。

image

上にあるデバッグがoffになっているので、選択してonにしましょう。
クリックするとDebugObjectが出るので、選択してデバッグしたいオブジェクトを選択します。

image

image

数も少ないので、Any objectを選択しました。
これでコンパイルした上でGameを起動します。

image

するとこのように、処理の流れ、出力値が視覚化されるのでおかしな値になっている部分が探しやすくなります。
ただ、Debugをonにした状態でコンパイルしたスクリプトはかなりすごいことになっているので、リリースする時はちゃんとDebugをoffにして再コンパイルしましょう。

PlayerScript.cs
public class PlayerScript : UnityEngine.MonoBehaviour
{


	void Start()
	{
	}
	void Update()
	{
		UnityEngine.Vector3 velocity;

#if UNITY_EDITOR
#if NottorusDebug
		BP_Utils.InvokeSequenceNode(103, 113, this, "PlayerScript", null, false);//Debug sequence
#endif
#endif
		///Inputの値をローカル変数にセット
		var _TempVar_112_1 = UnityEngine.Input.GetAxis("Horizontal");
		
#if UNITY_EDITOR
#if NottorusDebug
		BP_Utils.InvokeSequenceNode(112, 0, this, "PlayerScript", _TempVar_112_1, true);// Debug Pin value
#endif
#endif
		var _TempVar_111_2 = UnityEngine.Input.GetAxis("Vertical");
		
#if UNITY_EDITOR
#if NottorusDebug
		BP_Utils.InvokeSequenceNode(111, 0, this, "PlayerScript", _TempVar_111_2, true);// Debug Pin value
#endif
#endif
		velocity = new UnityEngine.Vector3(_TempVar_112_1, 0f, _TempVar_111_2);
#if UNITY_EDITOR
#if NottorusDebug
		BP_Utils.InvokeSequenceNode(113, 120, this, "PlayerScript", null, false);//Debug sequence
#endif
#endif
		///Positionにセット
		
#if UNITY_EDITOR
#if NottorusDebug
		BP_Utils.InvokeSequenceNode(119, 0, this, "PlayerScript", transform, true);// Debug Pin value
#endif
#endif
		
#if UNITY_EDITOR
#if NottorusDebug
		BP_Utils.InvokeSequenceNode(113, 0, this, "PlayerScript", velocity, true);// Debug Pin value
#endif
#endif
		
#if UNITY_EDITOR
#if NottorusDebug
		BP_Utils.InvokeSequenceNode(114, 0, this, "PlayerScript", transform, true);// Debug Pin value
#endif
#endif
		
#if UNITY_EDITOR
#if NottorusDebug
		BP_Utils.InvokeSequenceNode(115, 0, this, "PlayerScript", transform.position, true);// Debug Pin value
#endif
#endif
		var _TempVar_116_3 = velocity + transform.position;
		
#if UNITY_EDITOR
#if NottorusDebug
		BP_Utils.InvokeSequenceNode(116, 0, this, "PlayerScript", _TempVar_116_3, true);// Debug Pin value
#endif
#endif
		transform.position = _TempVar_116_3;
#if UNITY_EDITOR
#if NottorusDebug
		BP_Utils.InvokeSequenceNode(120, 104, this, "PlayerScript", null, false);//Debug sequence
#endif
#endif
		return;
	}
}

#まとめ

Nottorusの簡単な使い方を記述しました。かなり素晴らしいアセットであるといえます。
ただし、UE4のブループリントと比べると割と処理落ちしたり、ノードがまとめる機能が見当たらなかったり、検索部分が弱かったりするのでちょっともの足りない部分があります。
Nottorus実装で苦労した点は３日目の記事で紹介します。

それでもビジュアルスクリプトは開発の効率化を図る上で非常に有効だと思うため、皆様も是非Nottorusを買って素敵な面白いゲームを効率よく開発しましょう。

あとUnityでデフォルトでビジュアルスクリプトが使えることを個人的に願っています。

明日はRyu8179さんが、公式の「Best Practices > Optimizing Unity UI」の中から何かを翻訳した記事を書くそうです。
期待しています！

16
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
16
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?