どうも、ラブヘイトです
今回はキャラクターUIコントローラーを作成していきます！
ジョイスティックと言うそうです！
◆ジョイスティックとは
モバイルアプリとかによくあるキャラクターを操作する擬似スティックコントローラのようなイメージをしています
こんな感じのやつ↓↓
アーチャー伝説や、荒野行動など
fortniteも多分そうかな？スマホ版はやったことないけど
◆準備
・丸い画像を二つ用意
適当に作ったんで、よかったら使ってください↓
１つはコントローラーの背景用(左)と
もう１つは実際にタップして動かす用(右)です
・Canvasを用意
RenderModeはカメラ越しに写ればなんでも良いです
Canvasに関しての過去記事はこちら↓
3DでUIを配置する 操作方法を表示してみた #11 - うにty生活
【まとめ】Canvasを使いこなそうのコーナー #11.1 - うにty生活
背景はImageUI、コントローラーはButtonUIとして配置
先ほどの画像をアタッチすればok
◆IDragHandler
今回はドラッグメソッドを簡単に実装するためのクラス、IDragHandlerを利用します
この「I〜Handler」クラスはそれぞれクラスと役割が異なるので
使う分だけ継承する必要があります
・IBeginDragHandler：ドラッグが開始した時を検知
・IDragHandler：ドラッグを検知
・IEndDragHandler：ドラッグの終わりを検知
これらを継承したクラスを、ドラッグさせたいオブジェクト
（今回でいうとコントローラー）にアタッチ ※EventSystemsが必要です
gist9e4fa82ecb0b6182ca264cb01c31f1dc
これだけでもうドラッグ可能です
gifだと速すぎてよくわかりませんでしたが、ここまではすぐに試せると思います
あと、ここままでは背景の枠からはみ出てしまうので調節します
◆実装
とりあえずカメラは追従して欲しいので、過去の記事を参考にしてね！
といったけど私は親切なので、コード載せちゃいます笑
Cameraクラス
gist2d7e45849cfef03b276ea5bc45bd8d72
こちらがコントローラーにアタッチするクラスになります
gist02c108b23a3b28b99394392d912587dc
PointerEventDataにはdeltaTimeなるものがなかったので、固定で0.1
GetAngle()メソッドは他の人の記事を参考にしました。ありがとうございます
参考：すとーぶろぐさん
【Unity】Mathf.Atan2で取得する角度を上向き0度スタートで時計回りにする【2D】 - すとーぶろぐ
過去記事：
ブレンドツリー使ってみた #17 - うにty生活 ←アニメーションについて
コントローラークラスをボタンの方にアタッチして必要な項目を
埋めたら完成です
毎度のことながら、ここからは応用編
◆Drag距離によって速さを変化
OnDragメソッドでstartPositionと現在のタップ位置とのDistance（距離）を取得しているので、コントローラーの中心からの外側になるにつれて走っていくようにします
ControllerUIのフィールドに追加
animator.SetBool("walking",true)以下に登録
アニメーションを含めないバージョンならこれだけでok
◆押した場所から始まるコントローラー
キャラコンのUIはずっと表示していると邪魔なので、押した場所だけに表示したい
まず、Canvasと同じ大きさの透明なImage(Controller_View)を作成して
背景(controller_back)を子にします
そして先ほどまでcontrollerにアタッチしていたControllerUIは、Controller_Viewに移動します
最終的なコードがこちら
gist2523c951bc51f9d6352d12904b9b76ab
◆完成
今回ブログ史上最長かもしれない
あとGist初めて使ってみました！簡単だし綺麗だし、白目向いちゃう
ではまた
