さて、今回は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：ボタン位置の調整
次は位置の調整です。こちらも先ほどとほぼ同様なので詳細は省略しますが、下図を参考に調整して下さい。
②PosX:-100,PosY:300
③Width:200,Height:80
STEP3：ボタンテキストのサイズ及び表示内容の変更
続いてボタン上に表示されているテキストの大きさと表示内容を変更します。
先ずは下図を参考にButtonオブジェクトの子要素となっているTextオブジェクトを選択します。
次に先のTextオブジェクトと同様、下図のようにインスペクターウィンドからTextの表示内容、FontSizeを変更しましょう。また、BestFitにもチェックを入れておきます。
②FontSize:80
③BestFit:True
STEP4：ボタンオブジェクトの名称変更
最後にButtonオブジェクト関連の名前を変更してきます。
具体的には以下のように変更することとします。
①Button→ReturnButton
②Text→ReturnButtonText
少し長くなってしまいましたが、今回はここまでとしたいと思います。皆さんお疲れ様でした。
次回はギルドシーンにダンジョン名を表示するパネルの作成と配置をしたいと思います。
以上。
コメント