【Unity講座_5時限目】ゲーム画面へのテキストとボタンの配置〜ギルド画面編〜

Unity講座

さて、今回はUnityを操作して、前回作成した画面の上にテキストやボタンなどのUI部品を配置していきます。

シーン名を表示するテキストの作成と配置

STEP1:テキストボックスの作成

先ずはテキストオブジェクトを作成します。下の図のようにBackGroundImageを選択した状態で右クリックし、UI→Textを選択し、左クリックを押します。

結果として、下図のようにBackGroundImageの子要素としてTextオブジェクトが作成されます。

STEP2:テキストオブジェクトのサイズ変更

次に作成したTextオブジェクトのサイズを変更します。

下の図を参考にWidthを400、Heightを80に設定し、FontSizeは80にしましょう。

 

 

 

 

 

 

 

 

 

STEP3:テキスト色の変更

このままでは背景の色と文字が同化し見づらいので、下図を参考にインスペクターウィンドウから文字の色を変更しましょう。文字色は皆さんのお好みで結構です。

また、文字の大きさも自動調整されるよう、BestFitにチェックを入れておきます。

 

STEP4:テキストボックスの位置調整

続いてテキストボックスの配置位置を調整します。

先ず、ヒエラルキーウィンドでTextを選択した状態で下図を参考に、Textオブジェクトをマウスで移動させます。

次にTextオブジェクト位置の微調整を行うのですが、その前に下図を参考にアンカーをtop-leftに変更しておきます。

 

アンカー設定の理由:ここでは詳しく説明しませんが、画面解像度を変更してもオブジェクトが適切に配置されるようにするためです。

 

アンカーを変更したら、最後に下図を参考にPosX,Yの微調整をしましょう。

今回はPosX:220,PosY:-50にしました。

STEP5:テキストの表示内容の変更

続いてテキストの表示内容を変更しましょう。上図を参考に、Textオブジェクトを選択し、インスペクターウィンドからTextの表示内容を変更します。今回は冒険者ギルドに変更しました。

STEP6:Textオブジェクトの名前変更

最後にTextオブジェクトの名前を変更しておきましょう。今回は下図のようにSceneNameTextという名前にすることとします。

ホーム画面へ戻るボタンの作成と配置

テキストの次はボタンの作成と配置を行いましょう。

STEP1:ボタンの作成

先ほどのTextオブジェクトとほぼ同じ手順でボタンも作成することができます。

BackGroundImageを選択した状態で右クリックし、UI→Buttonを選択します。(下図参照)

STEP2:ボタン位置の調整

次は位置の調整です。こちらも先ほどとほぼ同様なので詳細は省略しますが、下図を参考に調整して下さい。

①アンカー:bottom-right
②PosX:-100,PosY:300
③Width:200,Height:80

 

STEP3:ボタンテキストのサイズ及び表示内容の変更

続いてボタン上に表示されているテキストの大きさと表示内容を変更します。

先ずは下図を参考にButtonオブジェクトの子要素となっているTextオブジェクトを選択します。

 

次に先のTextオブジェクトと同様、下図のようにインスペクターウィンドからTextの表示内容、FontSizeを変更しましょう。また、BestFitにもチェックを入れておきます。

①Text表示内容:戻る
②FontSize:80
③BestFit:True

STEP4:ボタンオブジェクトの名称変更

最後にButtonオブジェクト関連の名前を変更してきます。

具体的には以下のように変更することとします。

変更前と変更後の名前
①Button→ReturnButton
②Text→ReturnButtonText

 

少し長くなってしまいましたが、今回はここまでとしたいと思います。皆さんお疲れ様でした。

次回はギルドシーンにダンジョン名を表示するパネルの作成と配置をしたいと思います。

以上。

-ゲームアプリ「HelloAnotherWorld」ダウンロードのお願い-

私が作成したゲームアプリ「HellowAnotherWorld」をダウンロードしていただけると嬉しいです。
有料ではありますが、ペットボトル飲料一本分程度の値段ですので、是非お願いします。
皆様にもメリットがあり、「このサイトで勉強すればこの程度のアプリであれば自分一人で作成できるようになる」という一つの目安にもなるかと思います。

-ゲームアプリ「HelloAnotherWorld」ダウンロードのお願い-

私が作成したゲームアプリ「HellowAnotherWorld」をダウンロードしていただけると嬉しいです。
有料ではありますが、ペットボトル飲料一本分程度の値段ですので、是非お願いします。
皆様にもメリットがあり、「このサイトで勉強すればこの程度のアプリであれば自分一人で作成できるようになる」という一つの目安にもなるかと思います。

スポンサーリンク
HelloAnotherWorld
HelloAnotherWorld
¥120
posted withアプリーチ
Unity講座
ソフィーのUnity講座

コメント