【第22回】アンカー・ピボットを使ったUIのレイアウトのチュートリアル

【第22回】アンカー・ピボットを使ったUIのレイアウトのチュートリアル

前回のチュートリアルでは、UIのスライダーをカスタマイズして、ボール発射の強さを決めるメーターを作りました。

上下するメーターで打ち出す力の強さを決めるのはゲームっぽい感じ。

さて今回は打ち出しの角度をプレイヤーが決められるようにします。これができれば、力の大きさと力の向き、両方をプレイヤーの操作によって決めることができます。

スクリプトまで……と思っていましたが、外部ファイルのインポートなど、やることも多かったのでUIの配置までをこの記事で扱います。今回は内容が特盛。

前回のチュートリアルはこちらから。

 

今回の目的

ボールを打ち出す角度を選択できるボタンを実装します

今何度なのかを示す矢印のインポートを行い、ボタンを押しっぱなしにすることでその矢印の向きを変えてみましょう。

今回は動作までは実装せず、UIの配置までとします。結構量が多いのよね。

プロジェクトの準備

前回のチュートリアルで作成したプロジェクトをそのまま使います。

このページに先にたどり着いた方は、チュートリアルの初回から追っていただけるといいかもしれません。

Assetのインポート

ついにきましたAssetのインポート。Unityでは、ゲームで使用するファイルをAssetと呼んでいます。画像とか、音楽データ、3Dモデルのデータなどがあります。

これまではUnityのインストール時のリソースを使ってチュートリアルを進めてきましたが、今回はUnityの外部からリソースをインポートします。

今回インポートするのは、この矢印の画像ファイル。右クリックで保存して使います。

今回使う矢印
今回使う矢印

 

外部リソースのインポート方法は2通りあります。

ひとつは、右クリックまたは二本指タップで開かれるコンテキストメニューから[Import New Asset]を選択する方法です。ファイル選択のダイアログが出るので、そこからファイルを選択します。

もうひとつは、エクスプローラーやFinderから直接Unityの『Project』ウィンドウにドラッグ&ドロップする方法です。私はこっちの方法でインポートすることが多いので、今回はこちらで紹介していきます。

まずは『Project』ウィンドウの『Assets』フォルダにて、右クリックまたは二本指タップでコンテキストメニューを開き、[Create] -> [Folder]を選択して新しいフォルダを作りましょ。

フォルダの作成
フォルダを作成するのだポッター

 

名前は[Images]にします。フォルダ名はそのまんまにするくらいがちょうどいいです。

Imagesフォルダ
君の名前はImagesフォルダ

 

『Images』フォルダを開いて、エクスプローラー(Win)またはFinder(Mac)からファイルをドラッグ&ドロップします。

Assetのインポート
ドラッグ&ドロップでインポート

 

Unityの『Project』ウィンドウにインポートしたファイルが表示されます。Assetのインポートは簡単にできるので、どんどん使っていきましょ。というかインポートなしでゲームを作ることもそうそう無いかな。

インポートできた
インポートできた!

 

インポートした画像の設定

今回は.pngファイルをインポートしました。このインポートしたファイルをどう使うか、Import Settingsで設定を行なっていきます。

単純にインポートするだけでは、オブジェクトに貼り付けるテクスチャとして扱われてしまいます。今回やりたいのは、UIのボタンやスライダーのように透過ピクセルを持った画像を表示させること。

なので、スプライトとして扱ってもらえるように設定を変えます。

先ほどインポートした『angle_guide_arrow』をクリックすると、『Inspector』ウィンドウにインポート用の設定がズラリと表示されます。

Import Settings
設定がてんこ盛り

 

個々の設定の解説は別の機会にするとして、ここではTexture Typeを[Sprite (2D and UI)]にセットします。2D画像オブジェクトであるスプライトとして使いますよーとUnityに伝えます。

TextureTypeの選択
TextureTypeの選択

 

Texture Typeの切り替えが終わったら、Import Settings画面の下の方にある[Apply]ボタンを押します。

設定の保存
セーブは忘れずに

 

これで透過ピクセル付きの画像が表示されるようになります。

ImportSettingsの設定後
設定ができた

 

画面への表示

次は画面に表示してみましょ。コンテキストメニューを表示して、[Create Empty]を選択します。

空のオブジェクトを作成
空のオブジェクトを作成

 

作成した空のオブジェクトは[AngleGuideParent]にリネーム。親オブジェクトとして使うようにします。

AngleGuideParentにリネーム
君の名前はAngleGuideParent

 

続いてこの『AngleGuideParent』オブジェクトの子オブジェクトとして、画像表示用のオブジェクトを作成します。『AngleGuideParent』オブジェクトを選択した状態で、コンテキストメニューから[UI] -> [Image]を選択します。

Imageオブジェクトの作成
Imageオブジェクトの作成

 

作成した子オブジェクトは[AngleGuide]にリネームします。

AngleGuide
AngleGuideにリネーム

 

『AngleGuide』オブジェクトにはImageコンポーネントがあります。その中のSource Imageフィールドに[angle_guide_arrow]を設定しましょ。『Project』ウィンドウからこのフィールドに『angle_guide_arrow』ファイルをドラッグ&ドロップするか、右の丸ボタンから選択します。

インポートした画像をセット
インポートした画像をセット

 

この状態で『Game』ウィンドウを見ると……矢印が表示されました!

画面に矢印
画面に矢印が表示された

 

角度を変えてみる

今回やりたいのは、この後追加する角度変更のボタンに応じて、矢印の向きを変えること。

そのため、まずはアンカーとピボットの設定を行います。『AngleGuide』オブジェクトを選択し、Rect Transformコンポーネントのアンカー設定で[middle – left]を選択します。位置に関してはスクリプトから設定するので変更せずで大丈夫です。

Widthは[128]、Heightも[128]に設定しておきます。

アンカーの設定
[alt(option)]キー+[shift]キーを忘れずに

アンカーとピボットを変更したのは、矢印のしっぽを軸に回転させたかったため。アンカーを変更することで座標の基準が矢印のしっぽになり、ピボットも合わせて変更したことで回転軸も矢印のしっぽになりました。これらの変更後に、Rect TransformのRotationでZ軸周りの回転をさせると、こんな動きになります。

矢印の動作
Z軸周りに回転する

 

上記の動きを見ると、ボールの角度に合わせてZ軸を中心に回転させれば良さそうです。スクリプトではこの方針で処理を実装しましょ。

角度変更のボタンを追加

角度の変更はキーボードの上下矢印キーと、画面に表示する変更ボタンで行います。今回は画面に表示するボタンを作るところまでになりそうかな。スクリプトの編集まで入れると胸焼けするレベルの長さになりそうですし。

角度変更のボタンについては、これまでのUIの作り方の復習になるので、設定内容と手順はざっくりとお伝えします。

完成予想図
角度変更ボタンの完成予想図

 

まずは『Canvas』オブジェクトを選択し、コンテキストメニューから[Create Empty]を選択。親オブジェクトを作成します。名前は[AngleChangeParent]にしました。

アンカーは[alt(option)]キーと[shift]キーを押しながら[middle – left]を選択します。

AngleChangeParentの設定
AngleChangeParentの設定

 

次に背景用のImageを表示します。同じグループだと分かるように背景画像を設定すると、プレイヤーも操作がしやすくなります。

『AngleChangeParent』オブジェクトを選択し、コンテキストメニューから[UI] -> [Image]を選択。名前は[AngleBackground]にします。

Rect Transformコンポーネントでは、Widthを[300]に、Heightを[350]に設定します。Imageコンポーネントで、Source Imageフィールドに[Background]を選択し、Colorを[20202080](暗い灰色)に。ボタンをPowerMeterのオレンジと合わせたかったので、背景は暗くしてみました。

AngleBackgroundの設定
AngleBackgroundの設定

 

続いて上下のボタンを作ります。先にひとつボタンを作ってDuplicateすると楽です。

『AngleChangeParent』オブジェクトを選択し、コンテキストメニューから[UI] -> [Button]を選択します。名前は[AngleUpButton]です。

Rect Transformコンポーネントでは、Pos Yを[100]、Widthを[200]、Heightを[100]にしました。ImageコンポーネントではColorを[FFA840FF](オレンジ色)にしています。

AngleUpButtonの設定
AngleUpButtonの設定

 

『AngleUpButton』オブジェクトの子オブジェクトである『Text』オブジェクトは、[AngleUpButtonText]にリネーム。

TextコンポーネントでTextを[▲](上向きの三角記号)、Font Styleを[Bold]、Font Sizeを[64]、Alignmentを[中央寄せ – 中段]に、Colorは[FFFFFFFF](白色)に設定します。

[Add Component]から[UI] -> [Effects] -> [Outline]を選択してOutlineコンポーネントを追加します。今回はEffect Distanceを変更せず、デフォルトのままにしています。

AngleUpButtonTextの設定
AngleUpButtonTextの設定

 

『AngleUpButton』オブジェクトの設定が終わったら、これを複製して下向きボタンを作っちゃいましょ。

『AngleUpButton』オブジェクトを選択し、コンテキストメニューから[Duplicate]を選択します。新しく作成されたオブジェクトの名前は[AngleDownButton]に変更します。

Rect TransformではPos Yを[-100]に変更します。その他の設定は『AngleUpButton』オブジェクトから引き継がれたものを使用できます。

AngleDownButtonの設定
AngleDownButtonの設定

 

『AngleUpButton』オブジェクトの複製に伴って、『AngleUpButtonText』オブジェクトも複製されます。このオブジェクトの名前を[AngleDownButtonText]に変更しましょ。

Textコンポーネントでは、Textフィールドの値を[▼](下向きの三角記号)に変更します。ここ忘れがちなので注意。

AngleDownButtonTextの設定
AngleDownButtonTextの設定

 

最後に、ボタンの説明用テキストを表示します。これがないと何のボタンなのか分かりにくいですもんね。……右のメーターにも後で背景と説明用テキストを追加しましょうか(反省)

まずは角度変更の説明用テキストから。『AngleChangeParent』オブジェクトを選択し、コンテキストメニューから[UI] -> [Text]を選択します。名前は[AngleText]です。そのまんま。

Rect TransformではWidthを[300]に、Heightを[100]に設定。

TextコンポーネントではTextフィールドを[Angle]に、Font Styleを[Bold]、Font Sizeを[64]、Alignmentを[中央寄せ – 中段]に、Colorは[FFFFFFFF](白色)に設定します。

[Add Component]から[UI] -> [Effects] -> [Outline]を選択してOutlineコンポーネントを追加します。Effect DistanceはXが[2]、Yが[-2]としています。

AngleTextの説明
AngleTextの説明

 

メーターの背景も追加

角度の方に背景と説明用テキストをつけて、メーターの方にはつけないというのも変な感じ。

なので、メーターの方も修正をば。

『PowerMeterParent』オブジェクトを選択し、Rect TransformのPos Xを[-125]に設定します。今回追加する背景を画面に入れるため、ちょっと左にずらしました。

PowerMeterParentの設定
PowerMeterParentの設定

 

続いて、『PowerMeterParent』オブジェクトを選択した状態でコンテキストメニューを開き、[UI] -> [Image]を選択します。名前は[PowerMeterBackground]にします。

作成した状態だと、『PowerMeter』オブジェクトの下にあるため、スライダーより手前に表示されてしまいます。UnityのCanvasでは上にあるものから順番に描画されるため、下に配置したものは手前に表示されるんです(重要)

なので、『PowerMeterBackground』オブジェクトは『PowerMeter』オブジェクトより上に来るようにします。

Rect TransformではPos Yを[40]に、Widthを[250]に、Heightを[600]に設定します。

Imageコンポーネントでは、Source Imageを[Background]に変更し、Colorは[20202080](暗い灰色)にしています。

PowerMeterBackgroundの設定
PowerMeterBackgroundの設定

 

もう一度『PowerMeterParent』オブジェクトを選択した状態でコンテキストメニューを開き、[UI] -> [Text]を選択します。名前は[PowerText]に。

上の画像で写っていますが、背景である『PowerMeterBackground』オブジェクトの下に持ってきます。

Rect Transformでは、Pos Yを[285]に、Widthを[250]に、Heightを[100]に設定します。

Textコンポーネントでは、Textフィールドに[Power]、Font Styleを[Bold]、Font Sizeを[64]、Alignmentを[中央寄せ – 中段]に、Colorは[FFFFFFFF](白色)に設定します。

角度変更の説明テキストと同じように、[Add Component]から[UI] -> [Effects] -> [Outline]を選択してOutlineコンポーネントを追加します。Effect DistanceはXが[2]、Yが[-2]としています。

PowerTextの設定
PowerTextの設定

 

設定が終わると、以下のようになります。先述の完成予想図に加えて、メーターも修正しました。

UI配置済みの画面
上の完成予想図とは別の世界線

 

これでUIの配置が終わったので、次回、角度を変えられるように機能を実装しましょ。

……いやぁ今回は特盛でした。

まとめ

今回は、プレイヤーが斜方投射の角度を変更するためのUIを配置しました。

UIの配置は簡単だけど奥が深いので、自分でも色々なレイアウトを試してみると楽しいと思います。

スクリプトによる動作の実装は次回行います。回を重ねるごとにゲーム感が増してきましたね。

アセット作ってます!

CTA-IMAGE

Unityでの開発に役立つアセットを作っています。

3DダンジョンRPGを開発するスピードを200%加速するAssetや、ファンタジーRPGのダンジョンを彩るパーツを取り揃えています。

特に3DダンジョンRPGのゲームを1から作るのは結構時間がかかります。ダンジョン部分の作成はこうしたアセットを使って、開発をブーストさせてみませんか?