Unityに関連する記事です

 この手順ではキャラの姿勢を変更する処理を、ボタン操作によって制御する処理を実装します。
またボタンを操作するたびに、ボタンのアイコン画像を回転させて、姿勢の状態とリンクさせるようにします。


<完成画像>



<完成動画>
https://gyazo.com/3df9e1519a78258af0a8363cc6d14081


 以下の内容で順番に実装を進めていきます。

手順16 −ボタンによるキャラの姿勢変更の制御−
25.Canvas内にUI部品を作成する(姿勢変更用のボタン)
26.スクリプトを使って、姿勢の変更処理をボタンから行えるように変更する



 新しい学習内容は、以下の通りです。

 ・Button.onClick.AddListenerメソッド スクリプトからボタンタップ用メソッドの登録
 ・Transform.GetChild メソッド



25.Canvas内にUI部品を作成する(姿勢変更用のボタン)

1.設計


 キーボードでの姿勢変更操作は出来ましたので、ゲーム画面にボタンを配置して、そのボタンを押した場合にも
同じように姿勢の変更を行うよう制御を実装していきます。
 
 ボタンを設置するためには、 Button コンポーネントを持つゲームオブジェクトが必要になります。
Button コンポーネントを持つゲームオブジェクトは Canvas ゲームオブジェクトの子オブジェクトではないと動作しませんので
すでにある Canvas ゲームオブジェクトの子オブジェクトとして Button ゲームオブジェクトを追加します。

 設置が完了したら、Button コンポーネントを制御するプラグロムを PlayerController スクリプトに追加して
キーボードを押した際と同じように、ボタンを押した際にも ChangeAttitude メソッドを呼び出す処理を追加して、Button コンポーネントを制御します。


ヒエラルキー画像 完成図



2.Canvas ゲームオブジェクトの子オブジェクトとして Buttons ゲームオブジェクトを作成する


 最初にボタンを設置します。
すでに Canvas ゲームオブジェクトがありますので、こちらをそのまま利用しましょう。

 Canvas ゲームオブジェクトの上で右クリックをしてメニューを開き、Create Empty を選択します。
新しく空のゲームオブジェクトが作成されますので、名前を Buttons に変更します。
Buttons ゲームオブジェクトは、ボタンの表示に関連するゲームオブジェクト群をまとめておくための、フォルダ役のゲームオブジェクトです。


Buttons ゲームオブジェクト ヒエラルキー画像



 Buttons ゲームオブジェクトを選択して、RectTransform コンポーネントがアタッチされているか確認します。
Canvas ゲームオブジェクトに含まれるオブジェクトは Transform コンポーネントではなく、RectTransform コンポーネントによって位置情報を管理しています。
もしも通常の Transform コンポーネントがアタッチされている場合には、再度作り直してください。


Buttons ゲームオブジェクト インスペクター画像



Buttons ゲームオブジェクト Sceneビュー画像




 Buttons ゲームオブジェクトの位置とアンカーを変更します。
RectTransform コンポーネント内にある Anchor(アンカー)をクリックして、Alt キーを押しながら、Middle Right の位置をクリックしてください
Buttons ゲームオブジェクトが画面の右側中央の位置に移動するとともに、アンカーの位置も同じ位置に設定されます。


<手順動画 アンカーの設定(Altキーを押しながらクリックすることで、アンカーの設定とゲームオブジェクトの移動が一緒に行われる)>
https://gyazo.com/0ac1675c2a0bd9b4da943b526eacea17


Buttons ゲームオブジェクト アンカー設定後のインスペクター画像



Buttons ゲームオブジェクト アンカー設定後のSceneビュー画像



 以上で設定は完了です。


3.Buttons ゲームオブジェクトの子オブジェクトとして、btnChangeAttitude ゲームオブジェクトを作成する


 Buttons ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Button を選択します。
Button コンポーネントがアタッチされたゲームオブジェクトが新しく作成されますので、名前を btnChangeAttitude に変更します。


btnChangeAttitude ゲームオブジェクト ヒエラルキー画像


 btnChangeAttitude ゲームオブジェクトはボタンの制御とボタンの背景画像の設定を行うゲームオブジェクトです。


btnChangeAttitude ゲームオブジェクト インスペクター画像



btnChangeAttitude ゲームオブジェクト Sceneビュー画像




 最初に btnChangeAttitude ゲームオブジェクトの子オブジェクトにある Text ゲームオブジェクトは今回使用しませんので、これを削除します


 続いて、btnChangeAttitude ゲームオブジェクトのインスペクターを確認し、Image コンポーネントの Source Image の部分に画像を設定します。

 背景用の画像ですが、インポートしたアセットから選択してもよいですし、画像をダウンロードしてきてインポートして利用しても、どちらでも構いません。
こちらの画像がゲーム画面に適用されます。

 今回はこちらのパスにある画像を利用しています。
Assets/JKT_Art/UI/Arrow/box_6.png

フォルダ画像




 画像を設定したら、大きさを調整します。
Sceneビューで直接変更してもよいですし、RectTransform コンポーネントの Width、Height の値を変更しても調整できます。
下記のインスペクター画像を参考にして、適宜なサイズに調整してください。(同じである必要はありません)


btnChangeAttitude ゲームオブジェクト インスペクター画像



btnChangeAttitude ゲームオブジェクト インスペクター画像



btnChangeAttitude ゲームオブジェクト Sceneビュー画像



btnChangeAttitude ゲームオブジェクト Sceneビュー画像



btnChangeAttitude ゲームオブジェクト Gameビュー画像



 以上で設定は完了です。Button コンポーネントには変更はありません。

最後にボタン用のアイコン画像用のゲームオブジェクトを btnChangeAttitude ゲームオブジェクトの子オブジェクトとして作成します。


3.btnChangeAttitude ゲームオブジェクトの子オブジェクトとして、imgAttitude ゲームオブジェクトを作成する


 btnChangeAttitude ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Image を選択します。
Image コンポーネントがアタッチされたゲームオブジェクトが新しく作成されますので、名前を imgAttitude に変更します。


imgAttitude ゲームオブジェクト ヒエラルキー画像


 imgAttitude ゲームオブジェクトはボタンのアイコン画像の設定を行うゲームオブジェクトです。


imgAttitude ゲームオブジェクト インスペクター画像



imgAttitude ゲームオブジェクト Sceneビュー画像




 最初に画像を設定します。
imgAttitude ゲームオブジェクトのインスペクターを確認し、Image コンポーネントの Source Image の部分に画像を設定します。

 アイコン用の画像ですが、今回はこちらのパスにある画像を利用しています。
Assets/JKT_Art/UI/Character/peng_icon.png

フォルダ画像



 画像の設定が終了したら、Raycast Target のスイッチを外してオフにしておいてください



 画像を設定したら、大きさを調整します。
Sceneビューで直接変更してもよいですし、RectTransform コンポーネントの Width、Height の値を変更しても調整できます。
下記のインスペクター画像を参考にして、適宜なサイズに調整してください。(同じである必要はありません)


imgAttitude ゲームオブジェクト インスペクター画像



imgAttitude ゲームオブジェクト Sceneビュー画像



imgAttitude ゲームオブジェクト Sceneビュー画像



imgAttitude ゲームオブジェクト Gameビュー画像



 以上の手順で距離の表示用のゲームオブジェクト群は完成です。


ヒエラルキー画像



Gameビュー 完成画像



26.姿勢の変更処理をボタンから行えるように変更する

1.設計


 キーボードでの姿勢変更の操作をボタンでも制御できるように設計を行います。

 すでに姿勢変更用のメソッドは ChangeAttitude メソッドを準備してありますので、ボタンを押した際に、このメソッドを呼び出すように処理を追加します。
Button コンポーネントには OnClick というメソッドを登録できる場所があります。
ですが今回はそちらではなくて、スクリプトから OnClick イベントに ChangeAttitude メソッドを登録して制御を行います。

 またボタンを押すたびに、キャラの姿勢に合わせてボタンの向きを変更する処理も追加します。
このようにボタンの情報が更新させることによって、ユーザーはボタンを押すとどのような操作が可能になるのか分かりやすくなります。

 自分がゲームを遊ぶ側の立場に立って、どういった演出があればわかりやすいかという観点でプログラムを考えていきましょう


<ボタンを押すと姿勢と一緒にボタンの向きも変わる>
https://gyazo.com/3df9e1519a78258af0a8363cc6d14081


2.PlayerController スクリプトを修正する


 Button コンポーネントの操作を行いたいので、Button 型の変数を用意して Button コンポーネントの情報を紐づけ出来るようにします。
SerializeField属性をつけて変数を宣言しておいて、インスペクターより Button コンポーネントのアタッチされているゲームオブジェクトをアサインして登録します。


 メソッドの追加はありませんが、Start メソッドと ChangeAttitude メソッド内に Button コンポーネントの制御処理を追加します。

 Start メソッドには Button コンポーネントの OnClick イベントに ChangeAttitude メソッドをスクリプトから登録して
ボタンを押した際に ChangeAttitude メソッドが呼び出されるように制御を追加します。

 ChangeAttitude メソッドには、キャラの姿勢に応じてボタンの回転角度を変更する制御処理を追加します。
キャラが頭を下に向けて直滑降で落下している場合にはボタンは水平方向の回転向きで、ボタンを押すことによって変更になる姿勢を表示します。


<直滑降時 ボタンは横向き>



 伏せの状態の際には、ボタンの回転角度を変更して、キャラが頭を下にしている画像になるように制御します。
これらのボタンの回転には DOTween の機能を利用して、ペンギンのアイコン画像がアニメして回転するように演出します。


<伏せ時  ボタンは下向き>



PlayerController.cs

 <= クリックすると開きます



 スクリプトの修正が終了したら、Penguin ゲームオブジェクトのインスペクターから PlayerController スクリプトを確認します。
新しく追加した btnChangeAttitude 変数の表示が追加されていれば問題ありません。


Penguin ゲームオブジェクト インスペクター画像



3.<Button.onClick.AddListenerメソッド スクリプトからボタンタップ用メソッドの登録>


 ButtonコンポーネントにはOnClickというイベントを登録する場所があります。ここにゲームオブジェクトのアサインを行うことで、
アサインしたゲームオブジェクトにアタッチされているスクリプトに宣言されている public 修飾子のメソッドを登録することができます。





 この処理をスクリプトから制御して追加して行う処理が、onClick.AddListenerメソッドです。引数のない場合と引数のある場合で書式が変化します。

 利点は、private 修飾子のメソッドでも登録できること、スクリプトから登録しているので、Unity内の上記の画像のButton部分への登録作業や、確認をする必要がなくなること、などがあります。

 今回は引数のないメソッドを登録していますので、引数にはそのままメソッド名を記述します。メソッドの()を書くとエラーになるので、メソッド名のみを記述します。

 // ボタンのOnClickイベントに ChangeAttitude メソッドを追加する
 btnChangeAttitude.onClick.AddListener(ChangeAttitude);

 詳細については公式のリファレンスを参考にしてください。またネットには記事が多くありますので調べてみましょう。

参考サイト

Unity公式スクリプトリファレンス
Button.on.Click.AddListener
https://docs.unity3d.com/2019.1/Documentation/Scri...


4.<Transform.GetChild メソッド>


 ボタンを押すたびにボタンのアイコンの画像も回転させてキャラの姿勢とリンクするように制御を行いたいのですが
アイコンのゲームオブジェクトは、ボタンのゲームオブジェクトから見て、子オブジェクトとして存在しています。


<アイコンの画像は btnChangeAttitude ゲームオブジェクトではなく、その子オブジェクトである imgAttitude に設定されている>



 こういった場合には色々な参照方法がありますが、今回の場合は、Unityが用意している Transform クラスの GetChild メソッドを利用しています。
このメソッドは引数に int 型の値を指定します。この値が親オブジェクトからみて n 番目の子オブジェクトの Transform の情報を戻り値として取得する、というメソッドです。

  // ボタンの子オブジェクトの画像を回転させる
  btnChangeAttitude.transform.GetChild(0).DORotate(new Vector3(0, 0, 180), 0.25f);

 上記の命令は、btnChangeAttitude ゲームオブジェクトの Transform クラスに対して命令を出し、自分の子オブジェクトのうち、0 番目の子オブジェクトの Transform の情報を取得します。
つまり、GetChild(0) の部分は、imgAttitude ゲームオブジェクトの Transform の値が取得されていることになります。

そしてimgAttitude ゲームオブジェクトの Transformに対して、DORotate メソッドを実行してください、という処理になります。
(親オブジェクトからみて、自分の一番上にいる子オブジェクトから番号が割り当てられ、最初は 0 番です)

 そのため、btnChangeAttitude ゲームオブジェクトを経由して、子オブジェクトである imgAttitude ゲームオブジェクトの Transform に対して回転させる命令を出すことが出来ています
 

 このようにスクリプトが操作を行いたいゲームオブジェクトの参照を持っていない場合であっても、親子関係を利用することによって
親オブジェクトを経由して子オブジェクトの制御を行う、あるいは子オブジェクトを経由して親オブジェクトの制御を行うという制御処理が実装出来ます。


参考サイト
Unity公式スクリプトリファレンス
Transform.GetChild
https://docs.unity3d.com/ja/current/ScriptReferenc...
Quita @Armyporoco 様
【Unity】親オブジェクトについたスクリプトから子オブジェクトを操作する!
https://qiita.com/Armyporoco/items/391776d4c79d25c...


5.Penguin ゲームオブジェクトの PlayerController スクリプトのアサイン情報に必要な情報をアサインする


  PlayerController スクリプトにButton コンポーネントのアサイン情報が追加されましたので、
Button コンポーネントがアタッチされている対象のゲームオブジェクトをドラッグアンドドロップして btnChangeAttitude 変数に登録します。
アサインの手順については割愛します。
 

Penguin ゲームオブジェクト アサイン後のインスペクター画像



6.ゲームを実行して動作を確認する


 ボタンを押すたびに姿勢が変更なり、かつ、ボタンが回転して、押すと変更する姿勢の向きになるように制御されているか確認してください。


<直滑降時 ボタンは横向き>



<伏せ時  ボタンは下向き>



<実行動画>
https://gyazo.com/3df9e1519a78258af0a8363cc6d14081


 以上でこの手順は終了です。

 => 次は 手順17 −姿勢変更ゲージの作成− です。

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

Menu



技術/知識(実装例)

2Dおはじきゲーム(発展編)

2D強制横スクロールアクション(発展編)

3Dダイビングアクション(発展編)

2Dタップシューティング(拡張編)

レースゲーム(抜粋)

2D放置ゲーム(発展編)

3Dレールガンシューティング(応用編)

3D脱出ゲーム(抜粋)

2Dリアルタイムストラテジー

2Dトップビューアドベンチャー(宴アセット使用)

3Dタップアクション(NavMeshAgent 使用)

2Dトップビューアクション(カエルの為に〜、ボコスカウォーズ風)

VideoPlayer イベント連動の実装例

VideoPlayer リスト内からムービー再生の実装例(発展)

AR 画像付きオブジェクト生成の実装例

AR リスト内から生成の実装例(発展)

private



このサイト内の作品はユニティちゃんライセンス条項の元に提供されています。

管理人/副管理人のみ編集できます