Cross Road

Unity、VR、MR、ARを中心とした技術ブログ

Visual Novel Tool Kitでビジュアルノベルを作ろう!

=====
(2018/4/25追記)
Visual Novel Tool KitはUnity Asset Storeから削除されていました。本記事は参考として残しておきます
=====

この記事はUnity アセット真夏のアドベントカレンダー 2014 Summer! - Unityアセット | Doorkeeperに参加しています。
昨日はUnity部さんによる「すべての開発者に捧げる「うに本」をコミケに出します!」でした。


本日は、Visual Novel Tool Kit (VNK)というアセットを紹介いたします。


概要は、HPからの引用の通りです。

引用:Visual Novel Tool Kitの紹介ページ, ソルトライブ株式会社
http://www.sol-tribe.net/vino/vino_j.html

Visual Novel Toolkitは、Unityを利用して簡単にヴィジュアルノベルやアドベンチャーの会話パートを作成できるUnityのアセットです。
汎用性、互換性はきわめて高く設計しているので、プロユースも耐えられますし、個人制作などのカスタマイズなども簡単にできる設計となっています。
過去のサウンドノベル制作で不満だった「こんな機能が欲しいなぁ」なんて部分も抑えてあります……、
た、と・え・ば、サウンドの演出を気軽に出来るように、サウンドエディターも搭載しました!
今後のアップデートでも、使いやすい機能などを入れていきたいと思っています!
是非、みなさんも使ってみて下さい!





AssetStoreより$30で購入可能ですが、このHPから無料版が入手できます。

まずはどんなものか確認するためならば、無料版で十分です。

しかし、無料版に機能制限はありませんが、以下にご注意ください。

[無料版と有料版の違い]

・バージョンが異なる。無料版(v1.004bFree)、最新の有料版(v1.10)。
・無料版は、アプリ化したときに「Visual Novel Tool Kit」のロゴが表示される


基本的な使い方は以下にあります。

http://www.sol-tribe.net/vino/pdf/UserGuide(Japanese).pdf

今回は、以下に沿ってVNKの使い方を紹介します。
すでにマニュアルにある程度説明があるのでそちらを使いつつ、私がはまった所を補足する形で説明していきます。

手順例1:会話シーンを作って、2つ以上のシーンを登録する
手順例2:シーンを実行できるようにする
手順例3:吉里吉里スクリプトを使って、シーンを実行できるようにする

手順例1:会話シーンを作って、2つ以上のシーンを登録する

Unityを開いてAssetをimportすると、Project Windowに以下のように多数のディレクトリが展開されます。

Unityで開いた状態

この後以下の手順(マニュアルより引用)に従ってシーンを作ります。

このように、テンプレートをベースとして、自分向けに変えるのがやりやすい感じでした。

無料版で公開されているマニュアルの一部


この状態でUnityから実行すると、サンプルシーンがGame Viewに表示され、クリックでテキスト送りができます。

サンプルシーンの実行例。テキスト送り可能


VNKでは、一つの背景で物語が進む単位を「シーン」と定義しているように見えます。

Templeteは1つのシーンのみ表示しているので、シーンの追加作成方法を紹介します。

この辺りが最初よくわからなかったので、補足を交えて説明します。

Visual Novel ToolKit初期設定手順の説明

1. Create Scene Dataを選択
2. 任意のシーン名(ここでは"scene1")を入力し、Resources/BGフォルダに入れた背景となる画像を指定する。
3. Createする。
4. Project ViewのAsset/A Converstaion/SceneLibraryを選択してInspectorViewに表示させた状態で、Asset/Scenesを選択する。
5. Project ViewのScenes/scene1(2 で作ったシーン名)を、SceneLibraryのElementにドラッグする。


2 の補足:背景画像は、Resources/BGフォルダに入れてください。
ここに入れないと正しく読み込まれません。また、画像を登録しないとシーンを作成できません。

5 の補足:登録するシーンを増やす場合、Elementを増やしてください。


この時点でUnityから実行しても、まだ新しいシーンは実行されません。もう一手間が必要です。

それを手順例2で説明します。

手順例2:シーンを実行できるようにする

Visual Novel ToolKitでシーンを実行する手順

1. Hierarchy Viewで、A_Converstaion/START/1_Dialogを選択する
2. Inspector Viewで緑色の"+"をクリックする(画像はクリック後)
3. ID_Xが一つ増えるので、増えた場所で"Enter Scene"を選択する。
4. ウインドウが出てくるので、さっき作ったシーン名(ここではscene1)を選択する。


これでUnityから実行し、Game Viewでクリックすると、サンプルシーン(Hello, Good byeのセリフが出る)が終わった後に画面が暗転し、さっき作った背景が表示されます。


手順例2の2を使ってID_Xを増やし、必要なデータを登録すると、背景の切り替えや、キャラクター登場/退場などができます。

私の場合、スクリプトの方がやりやすかったので、実際はスクリプトで制御しています。しかし、スクリプトに関する説明はマニュアルにはあまりなく、リファレンスとサンプルがあるのみでした。そこで、次はスクリプトを使用例を解説します。

手順例3:吉里吉里スクリプトを使って、シーンを実行できるようにする

テンプレートの内容から自動生成してくれる機能が付いています。

まずはここからひな形を入手し、必要に応じて変更していくのがよいと思います。


ひな形の入手方法

会話登録手順

1. Hierarchy Viewの A_Conversationを選択する
2. Inspector ViewのSave as Scenario Scriptをクリックする
3. Project ViewのAssetsフォルダ直下に"A_Conversation"というファイルが生成されているのを確認する。
(拡張子はtxt)

以下が生成されたスクリプトファイルの中身です。

 *A_Conversation
 *A_Conversation/START
 *A_Conversation/START/0_Scene
[enterscene name=Scene1 destroy=true fade=true]
 *A_Conversation/START/1_Dialog
[cm]
[current layer=TextBox]

[enteractor name=Sachi position=middle_right ]
[enteractor name=Maiko position=middle_left ]


[settext text=Sachi textbox=TextBox_Name]
Hello. I am Sachi.[p]

[settext text=Maiko textbox=TextBox_Name]
Hi. Sachi.[p]

[settext text=Sachi textbox=TextBox_Name]
Bye Bye ![p]

[settext text=Maiko textbox=TextBox_Name]
Bye Bye ![p]

[exitscene fade=true]


[enterscene name=scene1 fade=true]

手順例2の流れの代わりに、"[enterscene]"と"[exitscene]"を使うことでシーンを実行可能にしています。


私自身は吉里吉里スクリプトについてよく知らなかったのですが、上記のサンプルとリファンレンスにより大体の内容は理解できそうでした。

基本的に、コマンドは[]で囲まれた範囲であり、第一の単語がコマンドを示しています。それ以降の単語は全部引数です。

冒頭に"*"の付いている行は自動生成されたときに付いたもので、なくても動作します。コメントは";"を冒頭に付けます。

また、[p]を使うと、クリックしてページ送りとなることを示しています。


その他、細かいところは、下記のコマンドリファレンスをご確認ください。シーンの切り替え、BGMの再生・停止、キャラクターの表情変化など、やりたいことは大概できるようになっています。

http://www.sol-tribe.net/vino/html/TagReference(Japanese).htm

また、もしオリジナルのコマンドを追加したい場合は、VNKのスクリプトに追加します。
追加箇所は、

VisualNovelToolKit/Scripts/ViNO/Interpreter/KAGTagParser.cs

です。

引数なしの[dblog]というコマンドを作る場合は以下のように記述します。

public class KAGTagParser{
		static public int m_SelectionIndex = 0;
		static public string m_CurrentMessageTarget = "TextBox";
  (省略)
switch( tag ){
	case "wait" :			KAGTagParser.OnWaitTag( attrTable , byteList ); break;
  (省略)
        case "dblog":			KAGTagParser.OnDblogTag(attrTable, byteList);    break;
//新規追加
  (省略)

//新規追加
	static public void OnDblogTag( Hashtable attrTable ,List<byte> byteList ){
			Debug.Log("test command dblog");
	}
//

これで、スクリプトに[dblog]と書くと、dblogコマンドが実行されたときにDebug.Logが呼ばれます。

明日は、kyubunsさんによる「ユニティちゃんとコードを書こう!」です。よろしくお願いします