Unityでノベルゲームを作ろう！(第1回)

お疲れ様です、poppyです。本日もこちらのブログを見に来てくださりありがとうございます。
今回からUnityでアセットを使わずにノベルゲームを作るところをお見せいたします。
シリーズものになると予想していて、第1回は「階層構造・テキストメッセージの日本語表示」をやっていきたいと思います。

制作環境

今回は以下のようなUnity環境を整えました。適宜参考にしてください。ここでは各種インストールは終わっているものとします。

• バージョン：2022.3.24f1 (日本語化パッチ適用済み)
• テンプレート：Universal 2D
• スクリプト：Visual Studio 2022 (Windows)

今回は「宴」などのアセットは用いませんのでご了承ください。(多分使ったほうが早くできるとは思うけど)

ついでに言えば私自身趣味かつ個人でプログラムを打つことはあっても組織でプログラムを打ったことはないので、ガチのプログラマーからみたら「なんだこのクソコード！？」と思われるかもしれません。
それについては申し訳ございません。なのでこれらのコードを参考にしすぎないようにお願いします･･･。
また、今回はこちらのサイトを大いに参考にさせてもらっています。第3回くらいからは自力＋ChatGPTを使ったものになりますのでお楽しみに？

今回の目標

第1回では以下のことができるようにします。

• ゲームの階層構造を作成する
• メッセージウィンドウを作成する
• テキストを日本語で表示する

画面としては以下のような状態を目指します。

シーン名を変更する

まず、シーン名がデフォルトだと「SampleScene」になっているので変更します。「Assets」から「Scene」フォルダを開くとSampleSceneがありますのでこちらを右クリックして「名前の変更」をクリックして名前を「MainScene」に変更します。

画面の階層構造(ヒエラルキー)を作成する

続いてゲーム画面に必要な要素を作成していきます。

ゲーム画面(全体)

「ヒエラルキー」の何もないところを右クリックし、「UI」→「パネル」と進んでください。

すると「Canvas」とその下に「Panel」が出現しますので、「Panel」の方を「Game」という名前に変更しておいてください。

背景・イベント画像

次に先ほど作った「Game」を右クリックして「空のオブジェクト」を選択し、名前を「Background」にします。
もう一度「Game」を右クリックして「空のオブジェクト」を選択し、名前を今度は「Event」にします。
これらはそれぞれ背景画像と背景以外の画像(キャラ絵だったりイベント絵だったり)を区別するためにつけます。

メッセージウィンドウ

次にメッセージウィンドウ(仮)をつけます。「Game」を右クリックして「UI」→「パネル」と進み、名前を「MessageWindow」とします。
さらに、今度は「MessageWindow」を右クリックして「UI」から「テキスト – TextMeshPro（Text – TextMeshPro）」を選択します。
すると、以下のようなTMP Importerが起動するはずですので、上のImport TMP Essentialsを選択します。
選択後、「MessageWindow」直下にText(TMP)が出ますので「NameText」とおきます。
もう一度「UI」から「テキスト – TextMeshPro（Text – TextMeshPro）」を選択し、今度は「MainText」とします。
これで最低限の階層構造ができました。

オブジェクトの設定

続いて各オブジェクトの設定をします。

Main Camera

右側の「インスペクター」の「環境」→「背景」の色を黒(R,G,Bともに0)に変更します。

Canvas

Canvasのインスペクターの「Canvas」→「レンダーモード」を「スクリーンスペース – カメラ」に設定し、レンダーカメラを「Main Camera」に設定します。
その下の「Canvas Scaler」の「UIスケールモード」を「画面サイズに拡大」、参照解像度を適当に設定します(ここではX：1980、Y：1080にします)。
そしてマッチを1にしたらCanvasの設定は完了です。

Game

続いてGameのインスペクターをいじります。
「Rect Transform」のアンカープリセット(正方形のやつ)を「middle、center」にして、幅と高さが先ほど設定した参照解像度の値になっているかを確認します。
その下の「Image」の色を(R,G,B,A) = (0,0,0,255)にします。

Background, Event

BackgroundとEventのインスペクターは同様の操作をします。
「Rect Transform」のアンカープリセットを一番右下のstreachにして、上下左右の数値を全て0にします。

MessageWindow

MessageWindowのインスペクターですが、まず「Rect Transform」で左右と下は0、上を700とします。アンカーのピボットはX,Yともに0に設定します。
そして「Image」で色を(R,G,B,A) = (40,40,40,180)とします。
すると、画面の下半分より少し下部分が薄い黒になっていることが確認できると思います。これがメッセージウィンドウ部分になります。実際画像などでフレームをつけると思いますが、とりあえず仮段階なのでこれで進めていきます。

NameText

まずMainTextと区別できるようにインスペクタのText Inputのところ(デフォルトだとNew Textと書いてあるところ)に「Name」など適当な文字をいれておき、フォントサイズを適当に大きくしましょう(一旦72で設定)。そのうえで「Rect Transform」を以下の画像のように設定します。

MainText

MainTextも同様で区別できるようにインスペクタのText Inputのところ(デフォルトだとNew Textと書いてあるところ)に「Main」など適当な文字をいれておき、フォントサイズを適当に大きくしましょう(一旦60で設定)。そのうえで「Rect Transform」を以下の画像のように設定します。

中央のシーンが以下のようになっていれば成功です！

フォントの設定をする

Text Inputをいじってもらえればわかると思いますが、現時点では日本語が使えません。そのため日本語を表示できるようにフォントを設定していきます。
まず、日本語が使えるお好きなフォントを用意してください。ここではNoto Sans JPを使用します。
Assets上で右クリックして「作成」→「フォルダー」を押して、「名前の変更」で「Fonts」にします。「Fonts」をダブルクリックしてその中に先ほどのフォントファイルをいれます。Noto Sans JPの場合は「NotoSansJP-VariableFont_wght.ttf」をいれます。

続いてメニューバーの「ウィンドウ」から「TextMeshPro」→「フォントアセットクリエーター」を選択します。

フォントアセットクリエーターですが、Source Font Fileには先程のフォントファイル(NotoSansJP-VariableFont_wght.ttf)をいれ、Character Setを「Custom Characters」に設定します。
そうするとCustom Character Listが出てきます。これに全ての文字をぶち込む必要がありますが、非常に大変です。そのため、こちらのサイトを利用しましょう。
kgsi/japanese_full.txt：https://gist.github.com/kgsi/ed2f1c5696a2211c1fd1e1e198c96ee4
こちらのjapanese_full.txtをダウンロードして、テキストの中身を全てコピーしてCustom Character Listに貼り付けます。そしてGenerate Font Atlasを押します。

できましたら下のSaveを押して「Fonts」フォルダ下に保存します。
続いてNameTextに移動して、「Main Settings」の「Font Asset」に先ほど保存した「NotoSansJP-VariableFont_wght SDF.asset」をいれます。
MainTextでも同様のことを行います。
試しにText Inputに日本語をいれて、ちゃんと反映することを確認してください。

終わりに

ということで今回はノベルゲーム開発の第1回ということで設定がメインとなりました。第2回からは実際にスクリプトを打ったりしますのでご期待ください。
それではまた！