連載
» 2017年04月03日 05時00分 公開

UnityのGUIの基本的な作り方――uGUIのPanel、Button、Text、Imageの使い方ゲーム開発初心者のためのUnity入門(15)(3/5 ページ)

[薬師寺国安,PROJECT KySS]

Panel上にTextを付けたButtonを配置する

 Hierarchyの「Create」→「UI」→「Button」と選択して、Buttonを配置する。Buttonを配置する場合は、Hierarchy内で必ずPanelより前に配置する必要がある。Panelより後ろに配置すると、Panelが前面に表示され、Buttonがクリックできなくなるので注意してほしい。

 Panelより前というと勘違いしやすいのだが、後から追加したコンポーネントが前面に表示される。よって、Panelより前ということは、Hierarchy内においては、下の方に表示されてるものが前面に表示されることになる。図22のHierarchy内を見ると分かるので参照してほしい。

Buttonの設定

 Canvas内にButtonが表示されるので、Panelが配置されている場所まで移動する。ただしButtonを配置していても、画面の解像度を変更するとButtonの位置がずれて表示してしまう不具合が発生する。これを解消するには、Hierarchy内の「Canvas」を選択し、Inspectorの「Canvas Scaler(Script)」の「UI Scale Mode」に「Scale With Screen Size」を選択するといい(図14)。これを選択すると、現在配置していたButtonの位置もずれるので、再度配置し直す必要がある。

 次にButtonを選択し、Inspectorの「Button(Script)」の「Pressed Color」に赤色などを指定しておく(図15)。すると、Buttonをクリックした際に一瞬ボタンが赤色に変わるようになる。

図14 Canvasの「UI Scale Mode」に「Scale With Screen Size」を選択する
図15 ButtonをPanel上まで移動し、Inspectorから「Pressed Color」には赤色を指定している

uGUIのTextにフォントを指定して使う

 次に、Hierarchyから「Button」を展開すると「Text」が表示され、「Text」を選択するとInspectorが表示される。「Text(Script)」の「Text」に「ガッツポーズ」と入力しておこう。今回は、Asset StoreからImportした、日本語のフォントを使用するので、日本語を使っている。

 次に「Character」の「Font」に「mplus-1-c-black」を選択する。これは、冒頭でAsset Storeからインポートした「Selected U3D Japanese Font」に含まれるフォントだ。「Font Size」はデフォルトの「14」のままにし、「Paragraph」の「Alignment」では「Center Align」と「Middle Align」(デフォルト)を指定しておく(図16)。Buttonの文字を見ると分かるが、Scene画面では、鏡に映ったように文字が反転している。しかし、Game画面では正常に表示されている。

図16 「Button」の「Text」のプロパティを設定する

「Duplicate」でUIオブジェクトを複製

 同じように、もう1個Buttonを追加する。Hierarchyから「Button」を選択し、マウスの右クリックで表示されるメニューから「Duplicate」を選択して、複製する。同じ位置に重なって表示されるので、図12の「トランスフォームツール」の左から2番目の移動ツールを選択して、Buttonを下に移動させる。

 複製したButtonを展開して「Text」を表示し、「ジャンプポーズ」と入力する。レイアウトは図17のようになる。

図17 Buttonを2個配置し

 Inspectorで、2個追加したButtonの名前を「GutsPoseButton」「JumpPoseButton」としておこう。

実行結果

 これを実行すると、図18のようになる。

図18 実行した画面

 UIオブジェクトの配置と設定が完了したので、Buttonにユニティちゃんのアクションを関連付けよう。

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。