質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

Unity

Unityは、Unity Technologiesが開発・販売している、IDEを内蔵するゲームエンジンです。主にC#を用いたプログラミングでコンテンツの開発が可能です。

WebGL

WebGL(ウェブジーエル)は、ウェブブラウザで 3次元コンピュータグラフィックスを表示させるための標準仕様です。

Q&A

解決済

1回答

5222閲覧

【Unity】WebGL上でマルチタッチに対応したい

Y0241-N

総合スコア1066

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

Unity

Unityは、Unity Technologiesが開発・販売している、IDEを内蔵するゲームエンジンです。主にC#を用いたプログラミングでコンテンツの開発が可能です。

WebGL

WebGL(ウェブジーエル)は、ウェブブラウザで 3次元コンピュータグラフィックスを表示させるための標準仕様です。

0グッド

0クリップ

投稿2019/08/20 08:59

編集2019/08/26 04:53

実現したいこと

現在、WebGLをモバイルデバイスで稼働させ、タッチ入力で移動とカメラの回転操作を実現する為にテストしているのですが、
指一本で移動か、カメラの操作か、どちらか一方の操作なら問題なく動くのですが、
指二本以上で移動とカメラの操作を同時に行おうとすると、様々な問題が発生します。

こちらで実際にお試しいただけます。タッチ可能デバイスで稼働してください。
touch test
操作方法は左下のスティックで移動、画面タッチ&ドラッグでカメラ回転、ダブルタッチで縦回転リセットです。
.

解決したい問題は、
1.移動中にカメラ操作をすると操作できない時や、指を離したときに回転がリセットされる。

2.指二本で同時に操作している時に、移動スティックを隅に位置する状態で指を離すと移動したままになる。

.
この二点です。
色々と試してみたものの、どれもうまくいかず完全に手詰まりとなってしまったため、お力を貸していただけませんでしょうか。

もし、有料アセットで簡単にタッチで移動&カメラ操作ができるという物がありましたら、そちらの情報もお待ちしています。

試したこと

・touchの入力をTouch[] touchesにしてfor文で割り当て、fingerIDに応じて処理を分けようとしてみたが、
割り当てがうまくいかなかったのか回転しなくなる。

・カメラの移動をするタッチの入力のfingerIDを割り当てなおすことで、常にGetTouch(0)で処理できるようにすれば、
どちらから動かしても問題ないのでは?と思い、fingerIDを割り当てようとしてみるも失敗。

 (touchの入力は先に置かれた指から0,1,2...と割り当てるため、移動スティックを先に触るとしたの指が0、上が1。
カメラを操作して移動しようとすると上が0、下が1となってしまうので、これを常に上が0、下が1としようとした)

移動とスティックとカメラ操作のスクリプト

AddForceMove.cs(移動)

cs

1using System.Collections; 2using System.Collections.Generic; 3using UnityEngine; 4 5public class AddForceMove : MonoBehaviour 6{ 7 Rigidbody _rb; 8 public bool isUseCameraDirection; // カメラの向きに合わせて移動させたい場合はtrue 9 public float moveSpeed; // 移動速度 10 public float moveForceMultiplier; // 移動速度の入力に対する追従度 11 public GameObject mainCamera; 12 float _horizontalInput; 13 float _verticalInput; 14 public SimpleTouchController leftController; 15 16 private Vector3 velocity; 17 private Vector3 yelocity; 18 private Vector3 helocity; 19 public float forwardSpeed = 4.0f; 20 public float backwardSpeed = 3.0f; 21 private Rigidbody rb; 22 23 24 void Start() 25 { 26 _rb = GetComponent<Rigidbody>(); 27 28 if(mainCamera == null) 29 mainCamera = GameObject.FindGameObjectWithTag("MainCamera"); 30 } 31 32 void Update() 33 { 34 _horizontalInput = leftController.GetTouchPosition.x; 35 _verticalInput = leftController.GetTouchPosition.y; 36 } 37 38 void FixedUpdate() 39 { 40 Move(); 41 _rb.AddForce (Vector3.down * 50f, ForceMode.Acceleration); //落下速度を早くする 42 } 43 44 void Move() 45 { 46 Vector3 moveVector = Vector3.zero; // 移動速度の入力 47 48 if(isUseCameraDirection) 49 { 50 Vector3 cameraForward = mainCamera.transform.forward; 51 Vector3 cameraRight = mainCamera.transform.right; 52 cameraForward.y = 0.0f; // 水平方向に移動させたい場合はy方向成分を0にする 53 cameraRight.y = 0.0f; 54 55 moveVector = moveSpeed * (cameraRight.normalized * _horizontalInput + cameraForward.normalized * _verticalInput); 56 } else 57 { 58 moveVector.x = moveSpeed * _horizontalInput; 59 moveVector.z = moveSpeed * _verticalInput; 60 } 61 62 moveVector = transform.TransformDirection(moveVector); 63 64 _rb.AddForce(moveForceMultiplier * (moveVector - _rb.velocity)); 65 } 66}

SimpleTouchController.cs(スティック)

cs

1using UnityEngine; 2using UnityEngine.UI; 3using System.Collections; 4 5 6public class SimpleTouchController : MonoBehaviour { 7 8 // PUBLIC 9 public delegate void TouchDelegate(Vector2 value); 10 public event TouchDelegate TouchEvent; 11 12 public delegate void TouchStateDelegate(bool touchPresent); 13 public event TouchStateDelegate TouchStateEvent; 14 15 // PRIVATE 16 [SerializeField] 17 private RectTransform joystickArea = null; 18 private bool touchPresent = false; 19 private Vector2 movementVector; 20 21 22 public Vector2 GetTouchPosition 23 { 24 get { return movementVector;} 25 } 26 27 28 public void BeginDrag() 29 { 30 touchPresent = true; 31 if(TouchStateEvent != null) 32 TouchStateEvent(touchPresent); 33 } 34 35 public void EndDrag() 36 { 37 touchPresent = false; 38 movementVector = joystickArea.anchoredPosition = Vector2.zero; 39 40 if(TouchStateEvent != null) 41 TouchStateEvent(touchPresent); 42 43 44 if (Input.touchCount == 0) // タッチされているかチェック 45 { 46 movementVector = joystickArea.anchoredPosition = Vector2.zero; 47 } 48 } 49 50 public void OnValueChanged(Vector2 value) 51 { 52 if(touchPresent) 53 { 54 // convert the value between 1 0 to -1 +1 55 movementVector.x = ((1 - value.x) - 0.5f) * 2f; 56 movementVector.y = ((1 - value.y) - 0.5f) * 2f; 57 58 if(TouchEvent != null) 59 { 60 TouchEvent(movementVector); 61 } 62 } 63 64 } 65 66} 67

上のスクリプトをEventTriggerで割り当てて稼働している。
イメージ説明

MainCtrl.cs(カメラ操作)

cs

1using System.Collections; 2using System.Collections.Generic; 3using UnityEngine; 4using DG.Tweening; 5 6public class MainCtrl : MonoBehaviour 7{ 8 public GameObject MainCamera; 9 public GameObject TargetObject; 10 11 private Vector2 lastTouchPosition; 12 private Vector3 newAngle = new Vector3(0, 0, 0); 13 14 private void Start() 15 { 16 DOTween.Init(false, true, LogBehaviour.ErrorsOnly); 17 } 18 public void Update () 19 { 20 if (Input.touchCount > 0) // タッチされているかチェック 21 { 22 Touch touch = Input.GetTouch(0); // タッチ情報の取得 23 24 if (touch.phase == TouchPhase.Began) 25 { 26 newAngle = MainCamera.transform.localEulerAngles; 27 lastTouchPosition = touch.position; 28 } 29 30 if (touch.phase == TouchPhase.Moved) 31 { 32 if (DCTF.doble == true)return; 33 else 34 { 35 if(lastTouchPosition.y >= Screen.height * 0.28f || lastTouchPosition.x >= Screen.width * 0.25f) 36 { 37 newAngle.y += (touch.position.x - lastTouchPosition.x) * 0.1f; 38 newAngle.x -= (touch.position.y - lastTouchPosition.y) * 0.1f; 39 MainCamera.gameObject.transform.localEulerAngles = newAngle; 40 41 lastTouchPosition = touch.position; 42 } 43 } 44 } 45 } 46 47 if (DCTF.doble == true) 48 { 49 Quaternion RY2 = TargetObject.transform.rotation; 50 RY2.z = 0; 51 RY2.x = 0; 52 TargetObject.transform.DORotateQuaternion(RY2,0.3f) 53 54 .OnComplete(() => DCTF.doble = false); 55 56 } 57 } 58}

##追記(新しいカメラのスクリプト)

cs

1using System.Collections; 2using System.Collections.Generic; 3using UnityEngine; 4using UnityEngine.EventSystems; 5using UnityEngine.UI; 6using DG.Tweening; 7 8public class CamContorl : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler, IPointerDownHandler, IPointerUpHandler 9{ 10 public GameObject MainCamera; 11 public GameObject TargetObject; 12 13 private Vector3 lastMousePosition; 14 private Vector2 lastTouchPosition; 15 private Vector3 newAngle = new Vector3(0, 0, 0); 16 public Text text1; 17 public Text text2; 18 19 int touchID = -10; 20 bool doble = false; 21 double clickTimeAt; 22 // ダブルクリックと判定するクリック間隔 23 double asDoubleClickTime = 0.2; 24 public void Start() 25 { 26 DOTween.Init(false, true, LogBehaviour.ErrorsOnly); 27 clickTimeAt = Time.time; 28 } 29 public void OnBeginDrag(PointerEventData eventData) 30 { 31 if(touchID == -10) 32 { 33 touchID = eventData.pointerId; 34 } 35 } 36 37 public void OnEndDrag(PointerEventData eventData) 38 { 39 if(touchID == eventData.pointerId) 40 { 41 touchID = -10; 42 } 43 } 44 45 public void OnPointerDown(PointerEventData eventData) 46 { 47 if (Input.GetMouseButtonDown(0)) // エディタで実行中 48 { 49 50 // キーを押した間隔を時間から算出 51 double interval = Time.time - clickTimeAt; 52 text1.text = ("time:" + clickTimeAt.ToString("f2")); 53 text2.text = ("click:" + interval.ToString("f2")); 54 55 // 間隔がダブルクリック判定時間以下であれば 56 if (interval < asDoubleClickTime) 57 { 58 doble = true; 59 } 60 // クリックした時間を保存 61 clickTimeAt = Time.time; 62 63 } 64 newAngle = MainCamera.transform.localEulerAngles; 65 lastMousePosition = Input.mousePosition; 66 } 67 68 public void OnPointerUp(PointerEventData eventData) 69 { 70 lastMousePosition = Input.mousePosition; 71 } 72 73 public void OnDrag(PointerEventData eventData) 74 { 75 if (DCTF.doble == true)return; 76 else 77 { 78 if(lastMousePosition.y >= Screen.height * 0.28f || lastMousePosition.x >= Screen.width * 0.25f) 79 { 80 newAngle.y += (Input.mousePosition.x - lastMousePosition.x) * 0.01f; 81 newAngle.x -= (Input.mousePosition.y - lastMousePosition.y) * 0.01f; 82 83 newAngle.x = Mathf.Clamp(newAngle.x, -60, 60);//ここ 84 85 MainCamera.gameObject.transform.localEulerAngles = newAngle; 86 } 87 } 88 } 89 90 void Update() 91 { 92 93 if (doble == true) 94 { 95 Quaternion RY2 = TargetObject.transform.rotation; 96 RY2.z = 0; 97 RY2.x = 0; 98 TargetObject.transform.DORotateQuaternion(RY2,0.3f) 99 100 .OnComplete(() => doble = false); 101 102 } 103 } 104}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

まずカメラ移動の方もBeginDrag / EndDrag / OnDragで動作させるようにしておきます。

BeginDragに引数付けるとポインターの情報が取れると思います。
(取れなかったらEvent TriggerではなくIBeginDragHandlerのインターフェース実装してください。参照→EventSystems.IDragHandler - Unity スクリプトリファレンス

で、ポインターの情報であるPointerEventDataに含まれているpointerIdでポインターIDが取れます。
EventSystems.PointerEventData-pointerId - Unity スクリプトリファレンス

あとは「自分に触れられたポインターID」を意味する変数(例えばtouchId(初期値-10))を用意して、
BeginDragtouchIdが-10ならドラッグ処理開始、touchId = eventData.pointerId;する。(-10でなかったら何もしない)
EndDragtouchIdeventData.pointerIdと同一だったらドラッグ処理終了、touchId = -10;する。(同一でなかったら何もしない)
(カメラのOnDragも同じ要領で。要は自分に触れられたポインターIDをずっと維持して、それ以外の入力は無視させる。多分こうしておけばスティックの領域とカメラ移動領域が被っていても大丈夫だと思います)

という感じで出来るのではないかと思います。未検証ですがご参考までに。

投稿2019/08/22 01:42

sakura_hana

総合スコア11425

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Y0241-N

2019/08/26 04:57 編集

返信が遅くなりました、回答ありがとうございます。 提案の通り、Dragでカメラの移動処理を定義したところ競合せずに動かすことができました。 ただ、PointerEventDateを実装するとEventTriggerの方ではメソッドが表示されなかったため、インターフェースを実装して処理しました。 重ねて質問させていただきたいのですが、カメラの縦の視野角をMathf.Clampで制限すると、何故か制限値の角度までカメラを向けた後に再度カメラを動かそうとすると、反対の制限値の角度に切り替わってしまいます。 この原因はわかりますでしょうか? こちらからテストプレイできます。[touch test](https://unityroom.com/games/tuchtest) カメラ操作スクリプトは本文に追記しました。
sakura_hana

2019/08/26 07:29

とりあえずDebug.Logで Input.mousePosition.y と lastMousePosition.y の値を確認してください。 Clampを掛けても lastMousePosition.y には変化が無いので、ここに極端な値が入っていて、次の計算の際に想定外な値を出しているんじゃないかと予想しています。
Y0241-N

2019/08/26 08:52

色々と試してみてわかったのですが、`OnPointerDown`の中の`newAngle = MainCamera.transform.localEulerAngles;`の部分をコメントアウトすると、カメラリセットが発生しなくなりました。 恐らくですが、この代入によってオイラー角のnewAngleにクォータニオン角の数値が入ることで再計算の際に数値がおかしくなるのでは?と思います。 Inputやlastposは特に気になる点はありませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問