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

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

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

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

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

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

エクスプラボ

 

1 User

2 Pockets

【第21回】ボールを打ち出す強さを決めるためのメーターを作るUnityチュートリアル

https://ekulabo.com/tutorial-power-meter

UnityのUIであるSliderを使って、上下するメーター(ゲージ)を実装するチュートリアルです。メーターを上下させる処理はUpdate()から呼んでいますが、こうした時間経過で値が変動する処理はUpdate()を使うことが多いですね。何かと使えるテクニックなので、マスターすべし! です。

今回の目的

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

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

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

プロジェクトの準備

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

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

エクスプラボ

 

1 Pocket

【第1回】初めてのUnity! 最初は物体の自由落下をさせることから

https://ekulabo.com/tutorial-free-fall

Unityをインストールして、Unity IDも登録してサインインした。でもここから何したら良いんだろう……? というあなたに向けた超入門チュートリアルです。Unityの物理演算を体験するため、物体を自由落下させてみましょ。

Assetのインポート

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

画面への表示

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

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

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

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

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

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

角度を変えてみる

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

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

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

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

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

角度変更のボタンを追加

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まずは角度変更の説明用テキストから。『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]としています。

メーターの背景も追加

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

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

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

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

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

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

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

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

もう一度『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]としています。

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

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

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

まとめ

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

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

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

エクスプラボ

【第23回】斜方投射の角度を画面から操作するUnityチュートリアル

https://ekulabo.com/tutorial-angle-guide-script

UIのボタンから、斜方投射の角度を操作できるようにするチュートリアルです。EventTriggerを使ってUIのボタンを押しっぱなしにしている間処理を続けるスクリプトを作成しています。また、角度の変更に合わせて予想経路のガイドも動くようにしています。