YouTube
Instagram
support@unity3dschool.com
@itsupportchat
Онлайн чат
Вход
Товар добавлен в корзину

Корзина

В этой статье попробуем разобрать метод “свободного” перетаскивания 2D камеры на сцене с помощью мыши либо касаний, после прочтения которой вы узнаете как преобразовывать экранные координаты в координаты мира на сцене, как создавать проекции плоскостей и как управлять движением камеры. Примерный результат работы  можно увидеть по анимации ниже.

Проекция

Структура Plane представляет собой проекцию поверхности в пространстве. Этот мнимый объект представляет из себя плоскость бесконечного размера, который находится в определенной точке и повернут в определенную сторону. Зачем нужны какие то проекции вообще? Дело в том, что если мы хотим пускать луч из точки нажатия необходимо иметь поверхность с которой этот луч столкнется, чаще всего такие поверхности делают коллайдерами, но так как на сцене у нас кроме камеры и простого спрайта больше ничего нет, нам необходимо иметь какой то другой объект в который можно пускать луч. Этим объектом и является плоскость Plane.

Камера

Все действия камеры будем обрабатывать в скрипте CameraControl.

  1. public sealed class CameraControl : MonoBehaviour {
  2.  
  3.  private void Start() {}
  4.  private void Update() {}
  5.  
  6. }

В методе Start будем брать компонент камеры на объекте, а в методе Update обрабатывать действия мыши и перемещения. Для этого добавим еще пару методов: UpdateInput, где будем обрабатывать действия мыши либо касаний, и метод UpdatePosition, где будем совершать само перемещение камеры.

  1. public sealed class CameraControl : MonoBehaviour {
  2.  
  3.  private void Start() {}
  4.  
  5.  private void Update() {
  6.   UpdateInput();
  7.  UpdatePosition();
  8.  }
  9.  
  10.  private void UpdateInput() {}
  11.  private void UpdatePosition() {}
  12.  
  13. }

Для обработки действий мыши добавим еще несколько отдельных методов: OnPointDown который будет вызываться при нажатии мышкой либо касании экрана, OnPointMove метод, где будем обрабатывать перемещении мыши по экрану и метод OnPointUp который будет срабатывать при завершении перетаскивания мыши. Также каждый этот метод будет принимать параметры позиции мыши в виде Vector2.

  1. public sealed class CameraControl : MonoBehaviour {
  2.  
  3.  private void Start() {}
  4.  
  5.  private void Update() {
  6.   UpdateInput();
  7.   UpdatePosition();
  8.  }
  9.  
  10.  private void UpdateInput() {}
  11.  private void UpdatePosition() {}
  12.  
  13.  private void OnPointDown(Vector2 mousePosition) {}
  14.  private void OnPointMove(Vector2 mousePosition) {}
  15.  private void OnPointUp(Vector2 mousePosition) {}
  16.  
  17. }

Теперь необходимо в методе UpdateInput обработать события мыши.

  1. public sealed class CameraControl : MonoBehaviour {
  2.  
  3.  /*…остальной код…*/
  4.  
  5.  private void UpdateInput() {
  6.   Vector2 mousePosition = Input.mousePosition;
  7.   if (Input.GetMouseButtonDown(0)) OnPointDown(mousePosition);
  8.   else if (Input.GetMouseButtonUp(0)) OnPointUp(mousePosition);
  9.   else if (Input.GetMouseButton(0)) OnPointMove(mousePosition);
  10.  }
  11.  
  12.  private void OnPointDown(Vector2 mousePosition) {}
  13.  private void OnPointMove(Vector2 mousePosition) {}
  14.  private void OnPointUp(Vector2 mousePosition) {}
  15.  
  16. }

Тут все достаточно просто – в зависимости от того какое действие сейчас выполняет мышь, нажатие,  движение и тд, вызывается соответствующий метод обработки в который передается позиция мыши на экране. На заметку: действия кнопки мыши под индексом 0 также будут выполняться при обработки касаний. 
Добавим несколько переменных для работы скрипта. Первая переменная moveSpeed будет отвечать за скорость перемещения камеры в точку, sensitivity будет отвечать за чувствительность к движениям мыши по экрану, а boolean переменная isDragging будет показывать, что камера перемещается с помощью перетаскивания мыши.

  1. public sealed class CameraControl : MonoBehaviour {
  2.  
  3.  [Range(0, 10f)]
  4.  public float moveSpeed = 10f;
  5.  [Range(0f, 5f)]
  6.  public float sensitivity = 3;
  7.  public bool isDragging { get; private set; }
  8.  
  9.  /*…остальной код…*/
  10.  
  11. }

Еще добавим переменную камеры, в которую мы будем помещать сам компонент Camera в методе Start.

  1. public sealed class CameraControl : MonoBehaviour {
  2.  
  3.  [Range(0, 10f)]
  4.  public float moveSpeed = 10f;
  5.  [Range(0f, 5f)]
  6.  public float sensitivity = 3;
  7.  public bool isDragging { get; private set; }
  8.  
  9.  public new Camera camera { get; private set; }
  10.  
  11.  private void Start() {
  12.   this.camera = GetComponent<Camera>();
  13.  }
  14.  
  15.  /*…остальной код…*/
  16.  
  17. }

И так задача скрипта заключается в следующем: необходимо перемещать камеру в том направлении в котором мы двигаем мышкой либо касанием по экрану. Так как мы уже обрабатываем действия мыши в трех методах OnPointDown, OnPointMove и OnPointUp, необходимо экранные координаты перевести в координаты сцены, то есть мировые, для чего нам и понадобятся рейкасты и проекция Plane. Новый метод GetWorldPoint будет принимать экранные координаты мыши и переводить их в мировые.

  1. public sealed class CameraControl : MonoBehaviour {
  2.  
  3.  /*…остальной код…*/
  4.  
  5.  private Vector2 GetWorldPoint(Vector2 mousePosition) {
  6.   Vector2 point = Vector2.zero;
  7.   Ray ray = this.camera.ScreenPointToRay(mousePosition);
  8.  
  9.   return point;
  10.  }
  11.  
  12. }

Для начала инициируем новую переменную point и переменную ray в которую поместим рейкаст, вызвав метод ScreenPointToRay у компонента камеры. Для создания проекции необходимо указать ее место расположения на сцене – position, и направлении в которую она смотрит normal.

  1. public sealed class CameraControl : MonoBehaviour {
  2.  
  3.  /*…остальной код…*/
  4.  
  5.  private Vector2 GetWorldPoint(Vector2 mousePosition) {
  6.   Vector2 point = Vector2.zero;
  7.   Ray ray = this.camera.ScreenPointToRay(mousePosition);
  8.  
  9.   Vector3 normal = Vector3.forward;
  10.   Vector3 position = Vector3.zero;
  11.   Plane plane = new Plane(normal, position);
  12.  
  13.   return point;
  14.  }
  15.  
  16. }

При работе в орфографическом режиме на камере направление чаще всего будет forward, то есть туда же куда смотрит камера. Проекция готова, теперь необходимо пустить в нее луч с помощью метода Raycast и получить мировые координаты точки.

  1. public sealed class CameraControl : MonoBehaviour {
  2.  
  3.  /*…остальной код…*/
  4.  
  5.  private Vector2 GetWorldPoint(Vector2 mousePosition) {
  6.   Vector2 point = Vector2.zero;
  7.   Ray ray = this.camera.ScreenPointToRay(mousePosition);
  8.  
  9.   Vector3 normal = Vector3.forward;
  10.   Vector3 position = Vector3.zero;
  11.   Plane plane = new Plane(normal, position);
  12.  
  13.   float distance;
  14.   plane.Raycast(ray, out distance);
  15.   point = ray.GetPoint(distance);
  16.  
  17.   return point;
  18.  }
  19.  
  20. }

Готово, теперь переходим к обработке действий мыши. В методе OnPointDown будем указывать точку отсчета координат движения мыши.

  1. public sealed class CameraControl : MonoBehaviour {
  2.  
  3.  /*…остальной код…*/
  4.  
  5. private Vector2 tempCenter, targetDirection, tempMousePos;
  6.  
  7. private void OnPointDown(Vector2 mousePosition) {
  8.   this.tempCenter = GetWorldPoint(mousePosition);
  9.   this.targetDirection = Vector2.zero;
  10.   this.tempMousePos = mousePosition;
  11.   this.isDragging = true;
  12.  }
  13.  
  14. }

Во время нажатия левой кнопки мыши по экрану, получаем мировые координаты в в переменной tempCenter, это и станет точкой отсчета перемещения мыши. Теперь опишем действия при окончании перемещения мыши в методе OnPointUp.

  1. public sealed class CameraControl : MonoBehaviour {
  2.  
  3.  /*…остальной код…*/
  4.  
  5.  private void OnPointUp(Vector2 mousePosition) {
  6.   this.isDragging = false;
  7.  }
  8.  
  9. }

Здесь мы просто задаем переменно isDragging значение false, и переходим в метод OnPointMove, где будем обрабатывать движения мыши по экрану.

  1. public sealed class CameraControl : MonoBehaviour {
  2.  
  3.  /*…остальной код…*/
  4.  
  5.  private void OnPointMove(Vector2 mousePosition) {
  6.   if (this.isDragging) {
  7.    
  8.   }
  9.  }
  10.  
  11. }

Для начала проверим условие, что мы сейчас совершаем перетаскивание камеры мышкой используя переменную isDragging. Далее определим текущую мировую координаты позиции мышки с помощью метода GetWorldPoint.

  1. public sealed class CameraControl : MonoBehaviour {
  2.  
  3.  /*…остальной код…*/
  4.  
  5.  private void OnPointMove(Vector2 mousePosition) {
  6.   if (this.isDragging) {
  7.    Vector2 point = GetWorldPoint(mousePosition);
  8.   }
  9.  }
  10.  
  11. }

Для того чтобы камера не двигалась при минимальном движении мышки, добавим новое условие, в котором укажем минимальное расстояние для совершения действия  перемещения.

  1. public sealed class CameraControl : MonoBehaviour {
  2.  
  3.  /*…остальной код…*/
  4.  
  5.  private void OnPointMove(Vector2 mousePosition) {
  6.   if (this.isDragging) {
  7.    Vector2 point = GetWorldPoint(mousePosition);
  8.  
  9.    float sqrDist = (this.tempCenter – point).sqrMagnitude;
  10.    if (sqrDist > 0.1f) {
  11.  
  12.    }
  13.  
  14.   }
  15.  }
  16.  
  17. }

После чего можно определить направление в котором необходимо будет переместить камеру с помощью метода normalized.

  1. public sealed class CameraControl : MonoBehaviour {
  2.  
  3.  /*…остальной код…*/
  4.  
  5.  private void OnPointMove(Vector2 mousePosition) {
  6.   if (this.isDragging) {
  7.    Vector2 point = GetWorldPoint(mousePosition);
  8.  
  9.    float sqrDist = (this.tempCenter – point).sqrMagnitude;
  10.    if (sqrDist > 0.1f) {
  11.     this.targetDirection = (this.tempMousePos – mousePosition).normalized;
  12.     this.tempMousePos = mousePosition;
  13.    }
  14.  
  15.   }
  16.  }
  17.  
  18. }

Перемещать камеру будем в методе UpdatePosition используя текущую позицию камеры, направление движения и чувствительность.

  1. public sealed class CameraControl : MonoBehaviour {
  2.  
  3.  /*…остальной код…*/
  4.  
  5.  private void UpdatePosition() {
  6.   float speed = Time.deltaTime * this.moveSpeed;
  7.   if (this.isDragging) this.tempSens = this.sensitivity;
  8.   else this.tempSens = Mathf.Lerp(this.tempSens, 0f, speed);
  9.  }
  10.  
  11. }

В переменной speed укажем скорость перемещения используя дельту задержки Time.deltaTime и переменную moveSpeed. Дальше с помощью условия определяем текущую чувствительность мыши в переменной tempSens. После чего можно наконец задать новую точку куда следует переместить камеру.

  1. public sealed class CameraControl : MonoBehaviour {
  2.  
  3.  /*…остальной код…*/
  4.  
  5.  private void UpdatePosition() {
  6.   float speed = Time.deltaTime * this.moveSpeed;
  7.   if (this.isDragging) this.tempSens = this.sensitivity;
  8.   else this.tempSens = Mathf.Lerp(this.tempSens, 0f, speed);
  9.  
  10.   Vector2 newPosition = this.transform.position + this.targetDirection * this.tempSens;
  11.   this.transform.position = Vector2.Lerp(this.position, newPosition, speed);
  12.  }
  13.  
  14. }

Используя направление targetDirection и чувствительность tempSens задаем новую позицию камеры на сцене в переменной newPosition, после чего применяем ее Transform’у объекта. Теперь можно запустить игру и посмотреть на результат.
Заключение
Чаще всего проекции Plane используют в 3D проектах, так как им можно задавать разное направления, в отличие от 2D проектов, что позволяет реализовывать разные системы управления. Данный же способ позволяет работать с камерой как при помощи мыши так и при помощи касаний. Чтобы ознакомится с другими деталями статьи можно скачать исходник проекта по ссылке.

3 Цепочка комментария
1 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
3 Авторы комментариев
  Подписаться  
Уведомление о
IgNew

Ребят, если кто-то искал, как я, простое решение, то вот оно: public class CameraMove : MonoBehaviour { Vector3 touch; // Start is called before the first frame update void Start() { } // Update is called once per frame void Update() { if(Input.GetMouseButtonDown(0)) { touch = Camera.main.ScreenToWorldPoint(Input.mousePosition); } if (Input.GetMouseButton(0)) { Vector3 direction = touch – Camera.main.ScreenToWorldPoint(Input.mousePosition); Camera.main.transform.position += direction; } } } перетаскиваете на камеру и всё! а с границами и с зумом дальше сами, там всё тоже просто!

Голос за1Голос против  Ответить
30.03.2023 19:52
IgNew

я пытался вникнуть, как новичок – не вышло…

у меня проект 2D, думал тут будет банально три метода, как бы вроде это всё, что нужно, грубо говоря
private void OnPointDown(Vector2 mousePosition) {}
private void OnPointMove(Vector2 mousePosition) {}
private void OnPointUp(Vector2 mousePosition) {}

плюнул вникать, решил скопировать – юнити выдаёт 18 ошибок…

поищу что-то по проще и доступнее для понимания…

Голос за0Голос против  Ответить
30.03.2023 19:28
Dugers

нельзя весь код сразу написать?

Голос за3Голос против  Ответить
02.09.2022 20:33
Константин

М-да уж. Вы наверное даже не переписали уже готовый скрипт и просто нажали ctrl + c, ctrl + v. Вы хоть пытались вникнуть в то как работает этот скрипт?

Голос за-6Голос против  Ответить
09.09.2022 16:32
Меню