Home » Blog » プログラミング » Unity » Unity会話作成用エディタNovelEditor

Unity会話作成用エディタNovelEditor

2022年11月30日

Unityでノベルゲームを簡単に作れるエディタ拡張をとりあえずベータ版として無料で公開しました。対応バージョンはUnity2021.3.11f以上です

※Unity2022でUIのバグを確認しています
　2024年三月末までに修正予定です

現状機能増やしすぎてバグ潰しできている自身がないのでバグがあれば下記のフォームから報告をお願いします

配布先

usagi-meteor.booth.pm

【Unityエディタ拡張】NovelEditor - うさぎ流星群 - BOOTH

https://usagi-meteor.booth.pm/items/4356788

Unityで簡単に会話パートやノベルゲームを作れるエディタ拡張のベータ版ですグラフを使って会話のデータを作成することができます【機能】・立ち絵の位置の設定・立ち絵、背景の設定。イラストの切り替わり方の指定・セリフごとにSEやBGMを設定。流す秒数、ループ回数(無限ループ可)、指定したセリフで再生を止める/音を変更する、再生開始/終了時のフェード・セリフごとのフォントの色・大きさ変更・名前の有無によって台詞枠を名前なし用・あり用に変更・選択肢の設定。選択肢によってループする、異なる選択肢で同じ会話に...

機能について

ノードを使用して選択肢による分岐を簡単に作成できます。セリフごとに背景・立ち絵や音楽、フォント、エフェクトなどを細かく設定することができます。

サンプル動画のように、ノベルゲームだけでなく3Dゲームの会話パートや、脱出ゲームのセリフ、チュートリアルの説明用など幅広く使うことができます。現在TextMeshProのみに対応しています。フォントのベイクの手間がかかるのでそのうちLegacyTextにも対応するかも…?

細かい機能についてはこちらに書いています。

うさぎ流星群

NovelEditor機能

https://usagi-meteor.com/noveleditor-feature

このUnityでノベルゲームを簡単に作れるエディタ拡張の機能紹介です。データ作成グラフを使用して視覚的にデータを作成できます。選択肢によってループする、異なる選択肢で一回異なる会話を挟んでから同じ会話にたどり着く、同じ選択肢を複数用意するなどを複雑な会話を簡単に設定できます．UI設定セリフ枠やボタンに好みのイラストを設定し、好きな位置に動かすことで自由にカスタマイズできます。また、使用するNovelDataで背景を指定しないことで脱出ゲームや3Dゲームなどにも使用することができます。ノード・セリフごとの設定・...

使い方

1. 導入

使用する上でUniTaskとTextMeshProの導入をする必要があります。

先にUniTaskの導入をします。こちらからUniTask.◯.◯.◯.unitypackageパッケージをダウンロードしてインポートします。

GitHub

Releases · Cysharp/UniTask

https://github.com/Cysharp/UniTask/releases

Provides an efficient allocation free async/await integration for Unity. - Cysharp/UniTask

次にTextMeshProの導入をします。UnityのWindow>TextMeshPro>Import TMP Essential Resourcesをクリックし、ライブラリをインポートします

最後にをダウンロードしたNovelEditorのUnityパッケージをインポートします。

2. UIの配置、見た目の設定

ヒエラルキーで右クリックし、UI>NovelPlayerをCanvasの子に配置します。(サンプルや動画ではCanvasはScale With Screen Size、アスペクト比は16:9に設定しています)

子オブジェクトにあるセリフ枠のスプライトやテキストなどの大きさを自由に決めます。UIはオブジェクトを消したり非アクティブにしたりしなければどこに配置しても大丈夫です。

①DialogueSprite…ここにセリフ枠が表示されます。実際に使用するセリフ枠を設定して大きさを調整してください。

②DialogueText…ここにセリフが表示されます。デフォルトのフォントと大きさを設定しておきます。

③NameText…ここに名前が表示されます。大きさを設定しておきます。

④BackGround…ここに背景画像が表示されます。大きさを設定しておきます

⑤UI…この下に設置したUIはセリフ枠の非表示機能を使う時に一緒に消すことができます

3Dゲームへの使用などで背景が不要な場合でもBackGroundオブジェクトは消さないでください。 データで背景を設定していない、かつPlayOnAwakeがオフのときに勝手に非表示になります。UIを調整するときに非表示にしたい場合は、BackGroundのImageのColorを透明にしてください

UI達はゲーム再生と同時にリセットされるので、確認のために設定したスプライトを消したりしなくて大丈夫です

最後に、NovelPlayerの「使用するセリフ枠」に名前あり用のセリフ枠のSpriteを、「名前なし用のセリフ枠」に名前なし用のセリフ枠のSpriteを指定してください。どちらかだけでokな場合は、両方同じものを指定してください

3. ボタンの設定

選択肢を作らない場合は飛ばしても大丈夫。ボタンを作ります。

ChoiceManagerの下にUI>ChoiceButtonを配置します。

適当にスプライトや文字色の設定をしたら、プレハブにします。

ChoiceManagerの下に複数ボタンを設置して、GridLayoutGroupやContent-SizeFitterなどで好みの配置になるように調整しておきます。(配置したボタンも再生時にリセットされるので消さなくて大丈夫)

作成したプレハブを、NovelPlayerオブジェクトのNovelPlayerコンポーネントのButtonのところに登録します。

…Unity2021.3でGridLayoutGroupの設定をしているときにCtr+Zしたらクラッシュするバグを見つけているので気をつけてください

右下に配置とかでもok

4. 入力方法の設定

NovelPlayerオブジェクトのNovelPlayerコンポーネントから入力方法を決めます。

デフォルトでは以下の表のようになっています。

NextButton	次のセリフに進む	Return、Space、左クリック
SkipButton	選択肢or会話が終わるまで飛ばす	N
HideOrDisplayButton	UIの表示切り替え	H
StopOrDtartButton	再生の一時停止	S

入力方法をCustomにすると、UnityのInputを使用した操作が指定できます。

Rewirdとかを使いたい場合はNovelInputProviderを継承したクラスを実装して、そちらをスクリプトから指定することで設定できます。

5. データの作成

立ち絵の位置を作ります(不要な場合は作らなくてもいいです)。CharaManagerの子にImageを作成し、実際に使用する画像を使用しながら位置を調整してください。作成したらImageをプレハブにします

会話のデータを作成します。プロジェクトビューで左クリックして、メニューのNovelDataからデータを作成します。

作成したらデータを選択し、インスペクターから先程作成したImageのプレハブを指定して、下の「プレハブをセットしたら押す」ボタンを押します

（立ち絵の位置は後から増やしたり減らしたりすることもできます。同じプレハブが含まれている場合はその立ち絵に設定したイラストやエフェクトのデータは引き継がれます）

Openボタンを押すとエディタ画面が開きます。

右クリックのメニューからノード追加、ノードごとにインスペクターから会話を設定してください。一つのノードに複数の会話を追加できます。

ピンク色のノードから会話が開始します。設定の詳細はこちら

こんな感じの設定もできます

6. 設定、再生

プレハブについてるNovelPlayerコンポーネントの値を適当に設定します

設定項目についてはこちらに記載しています。

うさぎ流星群

NovelEditor機能

https://usagi-meteor.com/noveleditor-feature/#component

作成したデータを指定してPlayOnAwakeのチェックを入れるとゲーム開始と同時に再生されます。

スクリプトから再生する場合は、以下のようにして再生することができます。AudioSource的な感じです。詳しくはスクリプトリファレンスやサンプルを見てみてください

[SerializeField] NovelPlayer novelPlayer;
[SerializeField] NovelData data;

void Start(){
    //二つ目の引数でtrueを指定すると、再生終了後に非表示になります
    player.Play(data,true);
}