人魚との触れ合いを描いた小説、「ELENA 人魚と過ごした時間」のゲーム化を目指し、日々コツコツと開発を進めているのですが、もう少し時間がかかりそうです。
さて、そんなわけで、今回はUnityによるゲーム開発の状況を少しだけお見せしながら、Unityによるノベルゲーム開発の方法を紹介していきたいと思います。
今回作成するノベルゲームについて
まず、今回作成するノベルゲームについてです。
次のようなゲームを作成します。

今回行いたいのは、次のようなものです。
では、はじめていきましょう。
Unityのダウンロードとインストールについて
Unityのインストールがまだの方は、以下の記事を参考にしてください。
新しいプロジェクトの作成
では、今回のノベルゲーム開発用に新しいプロジェクトを作成します。
テンプレートから「2D」を選択し、プロジェクト名を付け、「作成」をクリックします。

シーンの名前を変更
デフォルトではシーンの名前がSampleSceneになっているので変更します。
変更するには、プロジェクト(Project)にあるAssetsの中のScenesから「SampleScene」を右クリックし、「名前を変更(Rename)」をクリックします。

今回は「MainScene」に変更しました。

次のようなダイアログが表示された場合は、「再ロード(Reload)」をクリックします。

白い背景を表示する
つづいて、白い背景を表示したいと思います。
ヒエラルキー(Hierarchy)の+をクリックし、「UI」→「パネル(Panel)」を選択します。

名前は「Background」に変更しました。(Panelの追加と同時にCanvas、EventSystemが生成されます)

Backgroundを選択した状態で、インスペクター(Inspector)の、ソース画像(Source Image)を「None(Sprite)」に変更し、Color(色)のAを「255」に変更します。


さらにヒエラルキー(Hierarchy)から「Canvas」を選択します。

Canvasのインスペクター(Inspector)から、以下の部分を変更します。

- レンダーモード(Render Mode):スクリーンスペース – カメラ(Screen Space – Camera)
- レンダーカメラ(Render Camera):Main Camera(Camera)
- UI スケールモード(UI Scale Mode):画面サイズに拡大(Scale With Screen Size)
- 参照解像度(Reference Resolution):Xは2048、Yは1024(ノベルゲームで使いたい画像のサイズにしておく)
- マッチ(Match):1
これで画面に白い背景を表示することができました。

背景画像を表示する
つづいて、背景画像を表示していきます。
また、今回はAddressable Assets Systemを使いたいので、こちらの記事を参考に、Addressableパッケージをインストールしておいてください。
Addressableパッケージをインストールが済んだら、背景画像を入れておくためのフォルダを作成します。
プロジェクト(Project)から「Assets」を選択し、下の画像のように右クリックして、「作成(Create)」→「フォルダー(Folder)」をクリックします。

フォルダ名は「Images」にしました。

さらに、Imagesフォルダの中には、「Backgrounds」というフォルダを作成します。

作成したBackgroundsフォルダを開き、使いたい背景画像をドラッグ&ドロップします。

追加した背景画像を選択し、インスペクター(Inspector)を編集します。

インスペクター(Inspector)のAddressableにチェックを入れます。
すると画像ファイルまでのパスが表示されます。

今回はデフォルト(パス)のままで作っていこうと思います。
では、この背景画像を表示したいのですが、これはスクリプトを使って行いたいと思います。
そこで、スクリプトを保存しておくためのフォルダを作成します。今回は「Scripts」というフォルダ名にしました。

作成したScriptsフォルダを選択し、画像のように、右クリックして「作成(Create)」→「C# スクリプト(C# Script)」をクリックします。

ファイル名は「BGManager」にしました。

さらに、作成したBGManagerをヒエラルキー(Hierarchy)の「Background」にドラッグ&ドロップすることでアタッチします。

Backgroundのインスペクター(Inspector)に、「BG Manager」が追加されたのを確認してください。

さらに、BGManagerは以下のようにします。
BGManager.cs
//using System.Collections;
//using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.AddressableAssets;
public class BGManager : MonoBehaviour
{
Image _bgImg;
// Start is called before the first frame update
void Start()
{
Addressables.LoadAssetAsync<Sprite>( "Assets/Images/Backgrounds/shinshimodabashi.jpg" ).Completed += sprite =>
{
_bgImg = GetComponent<Image>();
_bgImg.type = Image.Type.Simple;
_bgImg.sprite = Instantiate( sprite.Result );
};
}
// Update is called once per frame
void Update()
{
}
}
これで再生すると、背景画像が表示されます。

ただ、このままだとゲームをビルドしたときに画像が表示されません。
Addressables Asset Systemでは、アプリをビルドする前に、コンテンツを手動でビルドする必要があるのです。
ただ、まだ他のファイルも使いたいので、ここではコンテンツの手動ビルドは行わずに進めたいと思います。
手動でビルドすることについての詳しくは、こちらをご覧ください。
画像のアスペクト比を固定(高さに合わせて両端を切る)
これで画像を表示することができたのですが、このままだと、画面のサイズを変更したとき、画像のアスペクト比が崩れてしまいます。

ここまでですでにCanvasの設定は済んでいるので、Backgroundのインスペクター(Inspector)の設定をしていきます。
ヒエラルキー(Hierarchy)から「Background」を選択します。

アンカープリセット(Anchor Presets)を、中央からのものにします

また、幅(Width)と高さ(Height)の値は、表示したい画像のサイズにしておきましょう。

これで画面のサイズが変わっても、画像はそのままのアスペクト比で表示され、高さに合わせて両端が切られるようになります。

ゲーム画面以外の領域を黒く塗りつぶす
今の状態では、ゲーム画面以外の領域が紺色に塗りつぶされています。

これを黒く塗りつぶしましょう。
まず、ヒエラルキー(Hierarchy)から、「Main Camera」を選択します。

インスペクター(Inspector)の背景(Background)を黒に設定します。

これでゲーム画面以外の部分を黒く塗りつぶすことができました。

次のページでは、画面にテキストを表示していきたいと思います。