Unityメモ – 宴でタイトル画面を設定する方法

Posted: 2016年3月27日 カテゴリー: プログラミングメモ, Unity, Unity メモ
タグ:, , , ,

今回はちょっと書きたくなる事情が有ったので、宴でタイトル画面を設定する方法を紹介します。内容的には、新規プロジェクトは作ってある前提で描きます。

 

宴においてタイトル画面等のUI等は基本Unityで操作します。もしかしたらエクセルとかで操作する機能が追加されているかもしれませんが、今回はUnity上での操作を紹介します。

 

書いてみたら無駄に長くなってしまいました・・・

タイトル背景設定

まず、Unity上でタイトル画面を探してみます。

宴のプロジェクトで作成されたシーンをダブルクリックして開いてください。

utage0

この画像の右上にある英語がゴチャゴチャっと並んでいる所が「ヒエラルキー」と言って、Unityのゲーム内に存在する物、今回の場合はタイトル画像等、が置かれている場所です。

 

余談ですが、このヒエラルキー内配置されている物は「ゲームオブジェクト」と言います。これはゲーム開発でゲーム内に存在する物を表す時に良く使われる言葉で、環境によっては「アクター」「エンティティー」と呼ばれたりもします。

 

ヒエラルキー内のゲームオブジェクトを見ると、左側に矢印が付いている物が有ります。これを広げると、そのゲームオブジェクトにくっ付いているゲームオブジェクトが見える用になります。タイトル画面を探す為に、まずは” Canvas-AdvUI”と言うオブジェクトの横にある矢印を押してみてください。

utage1

何か広がって色々見える様になります。

この中にタイトル画面がありまして、タイトル画面はまんま”Title”と言う名のオブジェクトです。

ただ、今見てみて解ると思うのですが、Titleのオブジェクトは灰色なっている上に、左側のゲーム内を表示している部分でも見えません。

これは現状このオブジェクトがオフになっている為です。ゲームを開始した時に宴が自動にこれらのオンオフをしてくれるので普段は気にする必要は無いのですが、タイトル画面を設定する上では不便なので、一回オンにしましょう。

ヒエラルキー上で”Title”をクリックすると、”Inspector”(インスペクター)と言う一番右にあるウィンドウにそのオブジェクトの詳細が表示されます

[*注]ヒエラルキーやインスペクターの位置は画像の物と違う可能性が有ります。

インスペクター内の左上にチェックボックスが有りますので、これをクリックしてみてください。

これをクリックすると、オブジェクトのオン/オフを切り替える事が出来、今オンにした為タイトルが画面に表示されます。

utage2

utage3

長くなりましたが、タイトル画面が見つかったので、さっそく変えて生きましょう。

まず、背景を変えます。背景は”Title”オブジェクトに設定されています。先ほど見たインスペクター上で少し下に下がっていくと”Image (Script)”と書かれている箇所が有ります。そこで表示する画像を指定しています。

具体的に画像の指定は、”Source Image”と書かれている所の右側の欄にある、”title”という文字が入っている所で設定されていますので、そこをクリックしてみてください。文字だと解りにくいと思うので下記の画像を見てください

utage4

すると、表示している背景画像が出てきます

utage5

ここで黄色くなった”tltle”というファイルの上にある”title”と言う青いアイコンが右にあるやつが表示されている画像です。なので、これをそのまま上書きすれば、背景が変わります。

ではやってみましょう。まず、”title”の画像を右クリックし、「Show in Explorer」を選択してください。

utage6

すると使われている画像が出てきます。

utage7

ではこれを実際にタイトルに使いたい画像を用意し、名前を”title”にした上で元々の画像を上書きしましょう。上書きする時に気をつけるのは、ファイル形式を.png形式にし、そのまま背景して使う時は大きさを画面の大きさにしてください(プロジェクトを作る時に設定した大きさ、デフォルトだと800×600)。

utage8

上書きしたので、Unityに戻ってみましょう

utage9

これで背景は変わりました。ゲーム名/ロゴ等を背景に含めておくと、Unity上で追加する必要が無くなるので楽です(Unityなれてる人にはオススメしませんが)。

 

ボタンの移動

背景は変わりましたが、現状ボタンが背景に有っていないので、調整してみましょう。
まずヒエラルキーをまた見て、先ほど画像を変えた”Title”のゲームオブジェクトにぶら下がっているオブジェクトをみてみましょう。これらが今画面に表示されている各ボタンです。では試しに”Download”ボタンをヒエラルキーから選択してみましょう。

utage10

選択すると左側の画面でも選択されているボタンがハイライトされます。ちなみにこの画面は”Scene”(シーン)ウィンドウと言います。

今回このボタンはいらないので、一旦画面外に移動します(消しても大丈夫ですが、再度必要になった時に面倒なのでどかしています)。

シーンウィンドウにある”ハイライトされているボタンをドラッグ&ドロップで移動できますので、画面の外になる様に移動してみてください。

utage11

これで退かせました。今回の例に使っている画像とゲーム(ヒミツのおまじない)ではギャラリーもないので、これもどかします。動かし方は前と同じで、ヒエラルキーでボタン選択、左のシーン画面で動かすだけです。その後に他3つのボタンを全部選択し、纏めて下にずらします。この辺は自分のゲームに合わせて調整してください。

utage12

これで使わないボタンの排除と、ボタンの位置調整が終わりました。

 

ボタンの画像変更

では次にボタンの画像を変えてみましょう。

一つの方法としましては、タイトル背景と同じで現在しようしている画像を上書きする事がで出来ますので、やってみましょう。ではボタンを一つ選択し、先ほどと同じ様にインスペクターで画像を選択して画像を見つけましょう。

utage13

見つかったので、上書きしてみます。今回は拾ったボタン画像をそのまま使用して上書きしてみてます。

utage14

えー、何か変ですね。変な理由としましては、ボタンの画像が元々の画像よりも縦幅が小さいからです。画像の大きさが変わるとボタンの画像表示設定によっては見た目が変わります。

問題が無い場合は、ここからは飛ばしてください。

今回の例では、インスペクターの画像の下の方にある、”Image Type” と言う文字がある部部の横にあるプルダウンをクリックし、”Simple”を選択します。

utage15

すると、画像がそのまま表示されます。

utage16

Image Typeの設定についての詳細は下記を参照してください:

– http://docs.unity3d.com/ja/current/ScriptReference/UI.Image.Type.html

 

これで元々のSystemButton.pngを使っているボタンは一斉に新しい画像に替わります。

ただ、これだと全てのボタンが影響を受けるので、個別の画像を設定したい時の手順を紹介します。

まず、新しくボタンの画像を用意し、ボタンの画像をUnityのプロジェクト内に追加します。用意したボタンは取りあえず他のボタンが入っているフォルダに追加します。画像を新しく入れると、Unity上でも表示されます。
utage17

このボタンを試しに「はじめから」のボタンに設定してみます。

まず、ヒエラルキー上で”StartGame”のゲームオブジェクトを選択してください。

インスペクター上で前にも見たSystemButtonが指定されている所を確認し、新しく追加したボタン(画像では”NewButton.png”)をそこにドラッグ&ドロップしてください。

utage18

これでボタン一つだけ画像が変わります

utage19

これで画像設定は終わりです。もし各ボタンに設定したい場合は、上記の手順をボタン毎に行ってください。

 

ボタンの文字変更

では最後にボタンに書いてある文字を変える方法を紹介します。

「はじめから」を「New Game」にしてみます。

まず先ほどから弄っている”StartGame”のゲームオブジェクトを選択します。見ると分かる思いますが、ヒエラルキー上で横に矢印が出ており、他のオブジェクトが中に入っています。この”Label”と言うオブジェクトが文字です。では選択してみましょう。

utage20

文字を選択すると、インスペクターに「はじめから」の文字が入っている部分が表示されます。これがボタンに表示される文字です。

その文字のテキストボックスを選択し、今有る文字の代わりに”New Game”を入れてみます

utage21

これで文字が変わります。もしボタンの画像に文字を含めたりしていて文字を消したい場合は、テキストボックス内の文字を全部消すか、”Label”のゲームオブジェクト自体を消してください。

 

物凄く長くなりましたが、タイトル画面の設定は以上です。最後に、最初にしたオンにした”Title”のゲームオブジェクトをオフに戻してから、ゲームを起動して試してみてください。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中