【Unityでノベルゲーム】画面サイズの変更・UIの設置

Unityで作るノベルゲーム第0回は、画面にオート(Auto)やセーブ(Save)などのボタン、セリフとその発言者の名前などのUIテキストを画面に整地します。

ゲームにおいて、ユーザーに情報を伝える「テキスト」やアクションを求める「ボタン」、そのほかにも、名前などを情報を入力を要求する「テキストボックス(InputFiled)」などUI(ユーザーインターフェイス)が必要です。

ゲーム制作のハードルが低く、だれでも簡単に開発ができる「Unity」では、これらUIが豊富で、機能も充実しています。

しかし、UIが充実している分だけ、これらの知識が要求されるので、Unityを始めたばかりでは、ボタンやテキストはどのように導入するのか、使い方はどうすればよいのか分からないことが多いことでしょう。

本記事では、ボタンやテキストなどのUIの作成の仕方や画面上に配置する方法などをUnityに初めて挑戦する人でも簡単にできるよう紹介します。

本記事は、冒頭の「関連記事」で紹介しているアセットを使わないノベルゲームを制作する企画の一部ですが、「第0回」は番外編としての位置づけです。

「第3回」以降からは画面も使用してシステム開発をしているので、分からなくなった場合は本記事「第0回」をしっかりと理解してください。

「Unity」でノベルゲーム

「ゲームをつくりたい！」
ゲームをされる方ならば、一度はこのようなことを考えるでしょう。ゲームの作り方を調べていると「Unity」はプログラミングをあまりしなくてよいからおすすめということで、「Unity」をインストールしたもののさっぱり分からない。とりあえず教本を購入したけど、結局よくわからず、やめてしまうことはよくあります。

また、入門書と謳っていても自分が分かっていることは長々と説明されて、あまり理解していない技術の解説は省略されていることが良くあります。

実際に、私もPCにUnityを導入して何度も挫折しました。

大学の図書館でUnityの教本を借りて勉強しましたが、何一つとして身につかずやめるこれの繰り返しでした。

しかし、2022年の12月にやはり、ノベルゲームを作りたいという気持ちがあり、挑戦を重ねて、現在は、Unityでノベルゲーム作りを発信しています。

本記事のシリーズ「Unityで作るノベルゲーム」は、ノベルゲームの作成に即して、「Unity」の使い方を理解する試みです。

必要最低限の知識でゲームを作っていくので、「Unity」を今日インストールした方、本記事を読んで「Unity」を始めようとしているような方でもノベルゲームを完成させることができます。

「Unity」とこのプラットフォームで用いるプログラミング言語「C#」について知識をある程度身に着けることができるかと思います。

画面サイズ変更

早速、ボタンやテキストを配置しようと思うかもしれませんが、UIを配置する前に、画面のサイズ変更をしてください。

PC版のゲームを作成する場合は、通常HD(1920×1080)のサイズです。
しかし、Unityを立ち上げたときの画面サイズは、「Free Aspect」であるため、調整をしなければいけません。

サイズ調整をする前にこれらUIを配置すると、UIの配置がずれるので、サイズ変更は初めにしなければいけません。

画面のサイズ変更の1つは、Gameビューにて変更が出来ます。

他にも、スクリプトによる画面サイズを変えることができます。

 画面のサイズは、1280×720 や 1920×1080 の解像度(HD規格)が選択できるほか、自由に解像度が変更できるので、iPhoneやiPad、Android端末の画面に調節できます。

Unityの強みはPC規格のゲーム以外にもiPhoneやAndroidなどのスマホやタブレッドにも対応したゲームをビルド（アプリ化）できることです。

※参考ページ「ビルドの画面サイズ」

ゲーム画面にUIを配置する

それでは、画面サイズ変更を行ったところで、UIを設置してゲーム画面を設計していきます。

初めに、目標である完成した画面を示します。

UI機能

UnityのUIは、Unityのゲームエンジンに標準搭載されているユーザーインターフェース（UI）を作成するためのフレームワークです。

UIの主な役割は、ユーザーに情報を提供・要求であり、ボタン・テキスト・画像・スライダーなどを豊富です。また、直感的な操作と高い柔軟性でゲーム開発が円滑に進められます。

HierarchyウィンドウからUIを作成すると、UI要素のコンテナであるCanvas（キャンバス）へ子要素として配置されます。

Unity UIを使用することで、ゲームのユーザーインターフェースを視覚的に作成し、柔軟に制御することができます。

UIの操作

UI（ゲームオブジェクト）の操作は、Sceneビューにて行います。ゲームオブジェクトのサイズや配置の変更は直感的に扱うには、ツールバーの６つのToolあるいは、Inspectorウィンドウにて操作します。Inspectorウィンドウは数値でサイズや配置の変更を行うので、より正確に作ることができるので、おすすめです。

思い通りのゲームが作れない

Unityでゲーム開発しているけど完成しない。
技術的な壁や知識不足が原因で、思い描いたゲームを実現するのは難しいです。

しかし、Udemyは動画で実践的なゲーム開発を解説していて、
購入した講座は再生・停止・スキップなどが可能なオンデマンド形式なので、
専門的な内容を自分のペースで学習できます。

Unityの機能を網羅したいや作りたいゲームがある人はUdemy学習を取り入れましょう。
数多くある講座の中から特におすすめな講座を３つ紹介します。

初夏のセール開催中！（5月23日まで）
対象のコースが1300円から。

View Tool

View Toolは、主にカメラの視点を変える機能です。そのほかにも、拡大・縮小・回転ができます。

Move Tool

ゲームオブジェクトをX,Y(縦・横)方向に動かします。表示される矢印を押して、カーソルを動かせば、移動します。

Rotate Tool

ゲームオブジェクトを３次元で回転することができます。

Scale Tool

ゲームオブジェクトを拡大、縮小できます。

Rect Tool

ゲームオブジェクトの拡大と縮小、移動ができます。

Transform Tool

ゲームオブジェクトを３次元で移動と回転ができます。

ボタン・テキスト作成

「Unity」のバージョンによって場所は異なりますが、UIの生成方法は基本的に同じです。

テキストとボタンを画面に表示させるときは、Hierarchyウィンドウの＋（追加）ボタンでUIを選択し、Legacy内の「Text」・「Button」を選択してください。「Legacy」は「Unity」のバージョンによって存在しないことがあります。

UIボタンは、Auto機能、セーブ・ロード機能、Quickセーブ・Quickロード機能、システムメニューがノベルゲームに必要なので生成します。

UIテキストは、セリフ・地の文、名前が必要なので生成します。

Inspectorウィンドウの使い方

Hierarchyウィンドウからテキストを生成すると、画面に適していないサイズのテキストとボタンが生成されます。

サイズの変更は前述したようにツールバーを使って編集できます。

UIテキストの編集でInspectorウィンドウを使う際は、「Rect Transform」と「Text」さえ使いこなせば、おおむね開発ができます。

「Rect Transform」のPosx、PosYはx座標、y座標を示しており、Posxの数値を大きくすると、右に、Posxの数値を大きくすると、上に動きます。

また、枠の大きさは、横幅「Width」と縦幅「Height」で変更可能です。

つづいて、文字のフォントや大きさ、色を変更するにはInspectorウィンドウの「Text」を使用します。

これらのUIは、Inspectorウィンドウの上部にある赤枠のチェックを解除することで無効にすることができます。

まとめ

画面上にテキストとボタンを画面に表示させるには、Hierarchyウィンドウの＋（追加）ボタンでUIを選択し、Legacy内の「Text」・「Button」を選択してください。ただし、「Legacy」は「Unity」のバージョンが古いと存在しないことがあります。

また、UIの配置やサイズの編集を行う際は、ツールバーを使うと直感的に作成できますが、Inspectorウィンドウの「Rect Transform」と「Text」を使うことで、正確な配置とサイズでシステム開発が可能です。

次回は、CSVでまとめたテキストを画面に表示させます。