Как создать джойстик для Android в Unity?

В этой статье мы пошагово разберем создание просто джойстика под Android, а также рассмотрим работу контроллера персонажа игры.

Подготовим сцену и элементы джойстика

Camera. Выбираем в сцене камеру, по умолчанию она названа Main Camera. И переключаем Clear Flags на Solid Color. Теперь камера будет отображать фон сплошным цветом заданным в поле Background.

Камера готова.

Теперь займемся основой джойстика

Для основы используем элемент UI под названием Image. В нем нам важна возможность отрисовывать фон джойстика и компонент Rect Transform. Создадим Image и переименуем его Joystic. В Rect Transform устанавливаем значения width и height равными 300. Это высота и ширина картинки. Далее обратим внимание на компонент Image.

Этот элемент отображает изображение для пользователя. Source image, как понятно из названия – источник изображения. В это поле назначаем спрайт с изображением джойстика. Теперь надо расположить наш джойстик на экране. В окне Hierarchy выберем Joystic и  в окне Editor переместим его в подходящее место. Например, нижний левый угол.

Далее нам потребуется еще один Image. Создадим его и назовем “Touch_marker”. Его мы используем для отображения точки нажатия на поле джойстика. На этом можно сказать что подготовка элементов джойстика закончена.

Написание управляющего скрипта

Создадим C# Script назовем его Joystic_controller и откроем его в редакторе.

Далее в скрипте объявим 3 переменные. Первая будет хранить ссылку на наш Joystic_touch, чтобы мы могли управлять им. А именно, перемещать его в центр джойстика, если на экран не было нажатий, а при нажатии на экран – в координаты, где произошло касание экрана.

Следующая переменная, приватная типа Vector3. В ней мы будем хранить вектор направленный из центра джойстика в координаты касания экрана. Vector3 tаrget_vector;

И последняя переменная – та, в которой мы будем хранить ссылку на класс, управляющий персонажем. public Square_green_controller sg_controller;

Ниже идет метод Start, который вызывается при старте сцены. В него мы добавим строку, перемещающую touch_marker в центр гейм объекта, к которому прикреплен скрипт. Это на случай, если при сборке сцены touch_marker находится не в центре джойстика.

if (Input.GetMouseButton(0))

Проверяем. Если нажата левая кнопка мыши или произошло касание  экрана, Модуль Unity Input позволяет для отслеживания touch использовать мышку. То есть Input.mouse будет работать и на телефоне. И если кнопка (касание) нажата (произошло), записываем координаты касания в локальную переменную Vector3.

Vector3  touch_pos = Input.mousePosition;

Чтобы полностью переключится на мобильные платформы, достаточно поменять Input.GetMouseButton(0) на Input.touchCount >0 и Input.mousePosition на Input.GetTouch (0).position, где 0 означает, что мы записываем координаты первого касания. Следующее что мы делаем, это получаем вектор направления. 

tаrget_vector = touch_pos – transform.position;

Делается это путем вычитания одной точки в пространстве из координат другой, и получается вектор, который “выходит” из второй точки и “заканчивается” в первой. Так же модуль данного вектора равен расстоянию между двумя позициями.  Чем мы и воспользуемся для ограничения зоны действия джойстика.  if (tаrget_vector.magnitude < 100)

Ограничим радиус действия джойстика равным 100. Если расстояние между позицией джойстика и точки касания экрана больше этого значения, то target_marker перемещается в центр джойстика, если меньше, то в точку касания экрана.

touch_marker.transform.position = touch_pos;

Далее передаем вектор направления классу, управляющему персонажем: sg_controller.target_move = tаrget_vector;

Затем проверяем, если нет нажатий на экран, то возвращаем target_marker в центр джойстика и второй строкой делаем вектор направления в классе персонажа нулевым, останавливая движение.

touch_marker.transform.position = transform.position;

sg_controller.target_move= new Vector3(0, 0, 0);

Полностью скрипт выглядит так:

На этом контроллер джойстика можно считать законченным.

Создаем персонажа и скрипт управления для него

Опять создаем  Image. Переименовываем в Square_green и в компоненте Image, в поле Color, выбираем зеленый. Height и width в компоненте Rect Transform выставим 50.

В нем объявляем две переменные. Скорость движения. Ее мы зададим в инспекторе. public float speed; 

Направление движения, которое передаст нам джойстик public Vector3 target_move;

В Update  первым делом ограничиваем движение персонажа границами экрана. Для этого используем Mathf.Clamp. функцию ограничения значения, то есть заключение его в определённый диапазон. От нуля которых находится в нижнем левом углу до противоположной границе экрана.

По ширине:

transform.position = new Vector3( Mathf.Clamp(transform.position.x, 0, Screen.width), transform.position.y, transform.position.z);

По высоте:

transform.position = new Vector3(transform.position.x, Mathf.Clamp(transform.position.y,0,  Screen.height), transform.position.z);

И зададим движение через Translate где вектор направления движения задает джойстик.

transform.Translate(target_move * speed * Time.deltaTime);

Полностью скрипт выглядит так:

Контроллер персонажа готов. Осталось назначить скрипты гейм объектам и скриптам некоторые переменные.

Скрипт Joystic_controller  мы назначаем Joystic. А Square_green_controller назначаем Square_green. Теперь в компоненте Joystic_controller  мы назначим путем простого перетаскивания из окна иерархии: в поле touch_marker назначим Touch_marker, а в поле sg_controller назначим Square_green.

И конечно не забудем Square_green >Square_green_controller выставить значение Speed. Например 5.

Готово. Нажимаем Play