チュートリアル(導入編)

TogakiMakerはシナリオデータのエディットと再生のためのUnity機能拡張アセットになります。

このページでは、TogakiMakerのAssetに含まれるSimpleAVGのシーンを使って、操作方法や画面構成などを学んでいきます。
SimpleAvg はオーソドックスなアドベンチャーゲーム(ビジュアルノベルゲーム)を作るための機能を持っており、これだけで簡単なゲームを作ることができます。

このページを読み終わるころにはTogakiMakerの基本的な操作方法や画面構成がマスターできるようになっています。


Step01.プロジェクトへパッケージをインポート

まずはプロジェクトへAssetをインポートしてください。

詳しいインポート方法はUnity公式サイトを参照してください。
https://docs.unity3d.com/ja/2019.3/Manual/AssetPackages.html


Step02.エディット機能の言語を切り替える

TogakiMakerのエディット機能は、英語と日本語の2言語に対応しています。
最初にツールバーからウィンドウを開き、言語を切り替えます。


Step02.SimpleAvgの環境をセットアップしてシーンを開く

インポートしたばかりではSimpleAvgの環境準備ができていません。
ツールバーからSimpleAvgの設定用のエディタウィンドウを開き、環境をセットアップします。


Step03.TogakiMakerのメインツールを開く

Unityの再生ボタンを押し、ゲームを実行したままキーボードの”F5”を押すとメインツールが開きます。

TogakiMakerでは、このメインツールを使ってデータを作っていきます。


Step04.サンプルシナリオを開いて再生

メインツールのシナリオ選択の欄をクリックすると、既存のシナリオデータが一覧で選択できます。
今回は既存のシナリオデータを再生していきますが、TogakiMakerのメインツールでは編集中のシナリオをその場で再生して動作を確認することもできます。

インポートした直後はサンプルのシナリオデータしか選べませんが、シナリオデータを新しく作ることでリスト項目が増えていきます。


Step05.ストーリーファイルをインポートして再生する

ここからはデータの作成と編集、確認の流れをまとめていきます。
TogakiMakerでの作業は、最初に会話内の台詞をまとめたストーリーファイルを作るところから始まります。

今回はチュートリアル用のストーリーファイルを用意していますのでこちらを使っていきましょう。


インポートしているcsvを開いてみると、簡単なストーリーが記述されていることを確認できます。

それぞれの列には意味があり、以下のように並んでいます。

  • A列:台詞ID ※{シナリオ名 . シナリオ内の台詞固有コード} が組み合わさったものです
  • B列:発言者名
  • C列:本文内容
  • D列~:他言語対応の際にはD列から右側に翻訳された本文を入力

実際にストーリーを書く際にも、このフォーマットになるよう注意してください。

Tips.台詞IDについての注意点

入力済みのデータのうち、台詞IDのシナリオ名の部分は「avg~」の形になっています。
この接頭辞の「avg」には重要な意味がありますので変更しないようにしてください。

TogakiMakerでは複数種類の再生機能を拡張実装できるように設計されています。
このページの手順で使用するSimpleAVGの再生機能では、「avg」を接頭辞とするシナリオのみ編集再生できるようになっています。

Tips.ストーリーのファイル分割について

ストーリーファイルは任意の粒度でファイルを分割することができますが、1つの会話は1つのファイルに収まっている必要があります。
1つ1つの会話ごとにファイルを分けてもいいですし、チャプターごとにファイルを分けても問題はありません。


Step06.背景を変える

台詞は流れるようになりましたが、このままではゲームになりません。

まずは簡単なところで背景に画像を出してみましょう。


今回は背景画像変更コマンドを編集しましたが、表示されるパラメータが違うだけで基本はどのコマンドも同じです。
台詞コマンドの間にコマンドを挿入してパラメータを設定し、その場で再生確認しながらデータを作り上げていきます!

Tips.背景画像の追加について.

それぞれのコマンドで選択できるリソースは、コマンド固有のルールにあわせてリストアップされるようになっています。
ルールはそれぞれのコマンドで異なりますが、おおよそ以下のようなパターンになっています。
– 特定のフォルダ内のリソースが自動でリストアップされるもの
– SimpleAVG 専用のマスターデータを参照するもの
– プログラム側で選択肢を直接指定されたもの

背景画像を追加したい場合は、特定のフォルダに画像ファイルを追加するだけでリストアップされるようになっています。
コマンドパラメータウィンドウにあるOpenボタンを押して開くフォルダに画像ファイルを入れてみてください。

これにより、間違った画像を選んだりタイプミスするようなヒューマンエラーは起きないようになっています。

for Programmer.

プロジェクトの仕様によっては2Dの背景コマンドは使わないかもしれません。
その場合には、コマンドを選択肢から除外したり、別のコマンドを新規作成して選択肢に含めたりが容易にできます。

また、SimpleAvgのようなアドベンチャーゲーム方式の会話とは別に、複数種類の再生機能を1つのプロジェクトに持たせることができます。

TogakiMakerでは仕様に合わせてコマンドや再生機能を自作できるよう、ウィザードやカスタマイズ機能を重視した設計になっています。

for Programmer.

標準実装されている SimpleAVG ではプログラマがいない開発体制でアドベンチャーゲームを作ることに特化しているため、Resources.Load / Resources.LoadAsync での読み込みをメインに使っています。

そのままでは AssetBundleやAddressablesの仕組みは標準対応されていませんが、AssetBundleの知識さえあれば対応は容易な作りになっています。


Step07.キャラクターを表示する

操作に慣れるために今度はキャラクターを配置してみましょう。

画面上への配置は専用のUIを使って行います。
これにより、配置の微調整が簡単に行えるようになっています!

Tips.デコレーションコマンドの削除について

コマンドリストの各コマンドについている×ボタンを押すことで、そのコマンドを削除できます。
台詞や一部の特殊なコマンドは削除できなくなっています。


Step08.編集したデータを保存する

ここまできたら一旦保存しておきましょう。
ツールバーの「Save」ボタンを押すことで、シナリオデータが上書き保存されます。

保存ボタンを押さずにUnityを停止させると編集中のデータが元に戻ってしまうので、こまめに保存するようにしてください。


Step09.登場人物を追加する

前項ではサンプル用のキャラクターを配置しましたが、二人では寂しいのでオリジナルのキャラクターを追加してみましょう。

for Programmer

ここで使用するマスターデータや設定ファイルは、標準搭載しているアドベンチャーゲーム向けの再生機能であるSimpleAvg専用のものです。
SimpleAVGとは、TogakiMakerに内包されるウィザードで作った再生機能のサンプルのようなものです。

TogakiMakerでは、プログラマがいれば簡単に再生機能を自作することができるようになっています。
プロジェクト固有の再生機能を作り出し、独自のマスターデータを参照したりデコレーションコマンドをオリジナルなものへ差し替えるような改造も可能です。

拡張方法についてはプログラマ向けのページで解説します。
http://doilworks.com/index.php/documents/tutorial-002/

Tips.ユーザーによるプレイヤー名の入力について

SimpleAvgでは、名前やストーリー本文中に <!-username> のタグを入れることで実行時のプレイヤー名に置き換えるよう実装されています。


Step10.台詞の発言者を指定する

多くのノベルゲームでは、登場人物が喋ると台詞ウィンドウに発言者の名前が表示されます。
TogakiMakerでは、台詞本文と発言者はストーリーファイルをインポートする際に解析するようになっています。
この解析のため「CharacterMaster」に登場人物を追加した際に設定したDevelopmentNameを使います。

for Programmer

ここではCharacterMasterに設定されているDevelopmentNameをもとにインポート時の解析を行っていますが、これはSimpleAvgScenarioPlayer独自の実装です。

プロジェクト独自のScenarioPlayer実装を行う場合は、勿論独自の変換テーブルを使って解析を行えるようになっています。
以下の関数内で返している構造体をプロジェクトの実装にあうようカスタマイズしてください。
GetTheCharacterDevelopmentNameToCompareWithTheLineSpeaker


Step11.選択肢を表示して分岐する

ノベルゲームでは選択肢での分岐が必要になります。
SimpleAVG にもシナリオ分岐の仕組みが実装されています。


Step12.台詞をスキップする

選択肢での分岐はできましたが、このままでは「海」を選んで話を進めると「山」を選んだ時の台詞に入ってしまいます。
本来は海の話題が終わったところで会話の終端に飛ぶべきです。

このような場合にはスキップのコマンドを使用します。


Step13.新しいシナリオを追加して連鎖させる

最後に、チュートリアルの会話が終わったら別の会話に飛ぶように設定しましょう。

このコマンドと分岐のコマンドを組み合わせることで、柔軟なシナリオ分岐を作ることができます。


Step14.UIの見た目を変える

台詞ウィンドウなどのUIの見た目は、既存のものをもとに自由に変更可能です。

SimpleAvgのエディタウィンドウから「UI Overwrite」のタブを開くと、UIの差し替え用の設定欄が表示されます。
画面右の置き換え実行ボタンを押すことでUIのリソースが複製され編集ができるようになります。

オリジナルのUIを書き換えてしまうとAssetのバージョンアップの際にマージが大変ですので、複製したUIを編集するようにしてください。


Step15.最後に

ここまでで、ストーリーの本文を作り、キャラクターを表示し、背景を差し替え、選択肢でストーリーを分岐できるようになりました。
またUIの見た目を変えることもできるようになりました。

これでTogakiMakerでゲームを作れるようになったはずです。

SimpleAVG には今まで見てきたコマンド以外にも様々なコマンドが用意されています。
コマンドによってパラメータは違いますが、どれも基本的な使い方は変わりません!
また、プログラマがいればプロジェクト固有のコマンドを自作することも容易です。

コマンドのパラメータはほとんどがリストからの選択や値の範囲が決まっているものから入力するため、ヒューマンエラーが起こりにくくなっています。
また、覚えるべきものが最小限ですむため学習コストが低く抑えられるのも利点です。


TogakiMakerを使って、楽しくゲームを作っていきましょう!