1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. Unity
  6. »
  7. 【絶対できる!】Unityでの2Dノベルゲームの作り方を詳しく解説

【絶対できる!】Unityでの2Dノベルゲームの作り方を詳しく解説

人魚との触れ合いを描いた小説、「ELENA 人魚と過ごした時間」のゲーム化を目指し、日々コツコツと開発を進めているのですが、もう少し時間がかかりそうです。

さて、そんなわけで、今回はUnityによるゲーム開発の状況を少しだけお見せしながら、Unityによるノベルゲーム開発の方法を紹介していきたいと思います。

目次
  1. 今回作成するノベルゲームについて
  2. Unityのダウンロードとインストールについて
  3. 新しいプロジェクトの作成
  4. シーンの名前を変更
  5. 白い背景を表示する
  6. 背景画像を表示する
  7. 画像のアスペクト比を固定(高さに合わせて両端を切る)
  8. ゲーム画面以外の領域を黒く塗りつぶす

今回作成するノベルゲームについて

まず、今回作成するノベルゲームについてです。
次のようなゲームを作成します。

今回行いたいのは、次のようなものです。

  • 文字を一文字ずつ表示
  • クリックで文字を次のものに切り替える
  • 文字に影をつける
  • 背景画像の表示
  • イベントCGの表示
  • 外部テキストファイルの読み込み
  • 外部テキストファイルによる、背景画像とイベントCGの操作

では、はじめていきましょう。

Unityのダウンロードとインストールについて

Unityのインストールがまだの方は、以下の記事を参考にしてください。

Windows

Mac

新しいプロジェクトの作成

では、今回のノベルゲーム開発用に新しいプロジェクトを作成します。

テンプレートから「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)を黒に設定します。

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

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

スポンサードリンク

関連コンテンツ

オススメ記事

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。背景を変更する。

三度の飯よりも好きなものが多すぎて比較にならない@It_is_Rです。 FC2ブログ"最強"カスタマイズ入門講座の続きですね。最強にカスタマイズしていきましょう。 今回は背景色の変更をメインに

【Git】ブランチを使って履歴を分岐させる方法

こんにちは、@It_is_Rです。 前回「Gitの使い方。バージョン管理する流れを、実際にやってみよう」では、 実際にGitを使ってバージョン管理する流れを学びました。 さて、

【Bootstrap 4】badgeを使ってテキスト横に小さな文字を入れる方法

前にBootStrap4の記事を書いていましたが、日にちが空いてしまいましたね。@It_is_Rです。 前回は全体的な機能とアラートの使い方を紹介しました。 今回はバッジの使い方を紹介していき

ショートコード

BEMによるCSS設計の方法を解説。命名規則から使い方まで。

完璧を求めすぎて、平均以下な@It_is_Rです。 CSSは比較的簡単なものですが、CSS設計をしっかりしておかなければ、余分なコードが多くなったり、後から修正が大変になったりしてこまることにな

Chrome拡張機能の作り方。誰でもかんたんに開発できる!

Webサイトを見るとき、ブラウザはなにを使っていますか? Edge、Safari、Opera、firefox、色々ありますが、やはりChromeを使っている、という方はとても多いと思います。ほ

Unityのダウンロードとインストールの方法【Mac】

UnityはUnity Technologiesのゲームエンジンです。2D、3Dゲーム両方に対応しており、大手企業も使用してゲームを開発している、とても高機能なツールです。 Unityにはいく

scratch

Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門

さて、プログラミングの勉強をはじめていきましょう! 前回の「Scratchでじゃんけんゲームを作ろう!」では、じゃんけんゲームの作り方を学びました。今回は、もうちょっと本格的(ほんかくてき)な

GitHubのアカウントを作成する方法

Gitを使うとバージョン管理が簡単になりますが、それ以前に自分の頭の中を管理するのが大変な@It_is_Rです。 Gitの使い方をいくつかの記事に分けて紹介していきたいと思います。まず今回はG

npm-scriptsの使い方。自作のコマンドによるタスク実行方法

畳んだ布団が飼い猫のお気に入りの場所になってます。@It_is_Rです。 npm-scriptsを使うことで、あらかじめタスクをかんたんな名前で指定しておき、そのタスクを素早く実行できるように

プログラミングのクラスってなぁに?

【JavaScript】クラスの概念をしっかりと理解しよう! 小学生からのプログラミング入門

小学生からのプログラミング講座《こうざ》、今回もはじめていきましょう! 前回はマップ上をキャラクターが自由に動くことができるようにしました。 今回はES6から使われるようになった「クラス

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です