人魚との触れ合いを描いた小説、「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）を黒に設定します。
これでゲーム画面以外の部分を黒く塗りつぶすことができました。
次のページでは、画面にテキストを表示していきたいと思います。
