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)を黒に設定します。

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

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

スポンサードリンク

関連コンテンツ

オススメ記事

【Xcode】Storyboardを使ってMacアプリ開発に挑戦。

こんにちは。@It_is_Rでございます。 さて、今回はStoryboardを使ってのmacOS用のアプリ開発の基本として、ウィンドウに文字の表示させてみたいと思います。開発環境はMac OS

scratch

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

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

java

Javaでじゃんけんゲームを作ろう。サンプルコードあり!

※追記(2018/8/29) より分かりやすい記事になるよう修正しました。 今回はJavaを使って、じゃんけんゲームを作る方法を紹介します。 eclipseがインストールされており、Java

WordPress のテーマ開発に絶対必須な gulp プラグイン9選!

3Dゲームに酔ってしまう@It_is_Rです。 今回は、テーマを自作するのに必須な gulp プラグインの紹介と使い方について書いていきます。 gulp について gulpは、sas

webpackの設定ファイル「webpack.config.js」の使い方を覚えよう

webpack.config.jsはwebpackを使う上での設定ファイルです。今回は、webpack.config.jsの使い方を紹介します。 webpack.config.jsとは

PythonでUSBメモリのパスワードを解析。総当たりでロック解除してみよう!

みなさんこんにちは。@It_is_Rです。今回はPythonを使って、総当たりでUSBメモリのパスワードを解析する方法を紹介します。(※このストーリーはフィクションです) Rりこ師匠、

homebrew

Homebrewのインストール方法を分かりやすく解説(M1 Macも対応)

みなさんこんにちは。@It_is_Rです。 Homebrewは、Mac、Linuxで使うことができる、パッケージマネージャというものです。パッケージマネージャを使うことで、ソフトウェアのインス

WindowsにPythonをインストールしてみよう!小学生からのPython入門

さて、今回もプログラミングを学んでいきましょう! 前回までで、Scratch《スクラッチ》やJavaScript《ジャバスクリプト》でのゲーム開発《かいはつ》を体験《たいけん》し、RPGを作る

【CSS設計】ボタンを作って覚える。機能ごとに分けて作る重要性。

手が回らない、頭が回らない、口が回らない。@It_is_Rです。 CSSはある程度大雑把に書いても動かすことができます。しかし、CSSを覚える上で一番難しい部分と言えばCSS設計でしょう。 パ

【Mac】Gitのダウンロードとインストールの手順

いらないファイルは残っているのに、欲しいファイルに限って見つからない@It_is_Rです。 前回「GitHubのアカウントを作成する方法」では、GitHubのアカウントを作成する方法を紹介しま

コメントを残す(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。