Как задать свой путь перемещения объекта

Передвижение персонажем

Большинство игр, как правило, имеют в себе функции передвижения, которые присутствуют у игровых персонажей, ботов, или других игровых объектов. В данной статье мы рассмотрим несколько способов реализации передвижения персонажем.

Способ 1. Смена координат

Для начала нужно понять, что такое передвижение объекта? – Это плавное изменение координат X и Y (если говорить о 2D играх.) у нашего объекта. Следовательно, для передвижения любого объекта необходимо циклически менять его координаты, тем самым, создавая эффект передвижения. Координаты любого игрового объекта находятся в классе(компоненте) Transform. Изменим позицию объекта по оси X на единицу вправо, через метод FixedUpdate():

В представленном выше коде, сначала мы получаем текущую позицию объекта по оси X с помощью transform.position.x. После чего передвигаем наш объект на одну единицу вправо с помощью оператора +1.

На самом деле, данный код можно упростить используя метод Translate(), который сразу меняет позицию объекта на определённое значение.

Представленный код меняет позицию объекта на 1 в правую сторону по оси Х, и на 3 единицы вниз по оси Y.

Передвигать игровой объект мы научились. Но что делать, если нам передвигать объект необходимо только в тот момент, когда была нажата определённая кнопка. Для этого воспользуемся Input.GetAxisRaw("Horizontal") и Input.GetAxisRaw("Vertical").

Input.GetAxisRaw("Horizontal") отвечает за горизонтальное передвижение. Оно получает значение -1, если игрок двигается НАЗАД(нажал стрелочку влево). При движении ВПЕРЁД(нажата стрелочка вправо), мы получаем значение 1.

Input.GetAxisRaw("Vertical") отвечает за вертикальное передвижение. Оно поучает значение -1, если игрок двигается НАЗАД(нажал стрелочку вниз). При движении ВПЕРЁД(нажата стрелочка вверх), мы получаем значение 1.

Так же стрелочки «влево», «вправо», «вверх» и «вниз», соответствуют нажатым клавишам A, D, W и S. Но их так же можно изменить в настройках Unity. Данные настройки находятся в меню Edit — Project Settings — Input Manager.

Давайте немного переделаем наш код:

Последнее, на чём хотелось бы заострить внимание, это на скорости передвижения объекта. Чтобы указать скорость, с которой мы будем передвигать нашего персонажа, нам необходимо объявить переменную, например runSpeed, и умножить её на наши параметры метода GetAxisRaw. Итоговый код передвижения будет выглядеть следующим образом:

Способ 2. Толкание

Очень часто при реализации передвижения, разработчики хотят, чтобы передвигаемый персонаж не проходил сквозь стены и другие твёрдые объекты. Поэтому для реализации такого передвижения используют компонент Rigidbody2D, и его метод velocity(). Смысл данного передвижения в том, что мы не перемещаем наш объект по координатам(как в предыдущем способе), а мы как бы толкаем его. И если наш объект встретит препятствие на своём пути, он будет замедлен, либо полностью остановлен. Данный способ передвижения самый распространённый.

Поскольку мы будем работать с компонентом Rigidbody2D, то объявим для неё поле rigidbody, а так же объявим скорость передвижения объекта в поле runSpeed:

Теперь нам необходимо получить ссылку на экземпляр класса(компонента) Rigidbody2D, ведь именно через этот компонент мы и будем перемещать нашего персонажа.

Теперь мы можем с помощью rigidbody, обратиться к методу velocity – который как говорилось выше, будет толкать наш объект в определённую сторону. Чтобы эти значения изменить как нам необходимо, воспользуемся new Vector2(1, 0). Например, нам необходимо переместить объект вправо по оси Х, на единицу:

Давайте разберём несколько важных моментов. В компоненте Rigidbody2D , свойство velocity может иметь всего 2 параметра, X и Y. Чем выше X и Y, чем сильнее наш объект будет толкаться по соответствующим координатам. Например, если мы хотим направить персонажа двигаться вправо(по вектору X), то нам нужно первым параметром передать значение больше нуля, например, velocity(6, 0). Если нужно двигаться влево, то velocity(-6,0). Аналогичная ситуация и с осью Y.

Задание траектории движения анимированного объекта

Траектория — это путь движения анимированного объекта или текста по слайду.

Перейдите в режим Обычный.

Перейдите к слайду, в который хотите добавить анимацию.

Выделите текст или объект, который хотите анимировать.

В меню Показ Слайдов выберите пункт Настройка анимации.

В области задач Настройка анимации выберите Добавить эффект, затем — Пути перемещения. Раскроется меню.

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

Можно создать собственный путь движения объекта, выбрав подменю Нарисовать пользовательский путь, а затем — инструмент рисования пути.

Для рисования отрезков прямых линий выберите инструмент Линия. Подведите курсор к точке начала отрезка, нажмите левую кнопку мыши и, удерживая ее, переместите указатель к конечной точке отрезка.

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

Выберите инструмент Полилиния для создания траектории в виде ломаных линий. Приемы работы с этим инструментом аналогичны приемам работы с инструментом Кривая.

Для создания произвольной траектории можно воспользоваться инструментом Рисованная Кривая. Подведите указатель мыши к начальной точке, нажмите левую кнопку мыши и, удерживая ее, нарисуйте произвольную траекторию. Для завершения достаточно отпустить кнопку в конечной точке.

Анимация с движением для презентации

Заставить объекты двигаться на слайде можно очень легко с помощью анимационных эффектов:

1. Выделите объект
2. Перейдите на вкладку «Анимация» ленты инструментов PowerPoint
3. Выберите понравившуюся анимацию в подгруппе «пути перемещения» (в PowerPoint доступно 6 базовых эффектов, а также 60 дополнительных, задающих различные маршруты передвижения объекта)
4. Задайте дополнительные опции в настройках «параметры эффектов»

В дополнительных настройках эффектов есть некоторые пункты, характерные только для данного типа анимации:

Настроенный путь перемещения останется на своем месте даже при перемещении объекта анимации

При перемещении объекта, для которого был настроен данный анимационный эффект, путь перемещения также будет двигаться

Начать изменение узлов

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

Обратить направление пути

Задает направление, по которому будет двигаться объект во время анимации (по часовой или против часовой стрелки)

Примечание: Сформированный путь перемещения можно выделить, он при этом помещается в стандартный прямоугольник выделения, который поможет трансформировать путь — например изменить ширину и высоту, выставить угол поворота.

Использование SVG путей в canvas для движения объектов

Если для анимации объекта в canvas (и не только), нужно перемещать его по некоторому желаемому пути, возможно даже по нескольким, которые могут выбираться случайным образом или последовательно, то это можно сделать с помощью svg путей. Давайте, для начала, запустим по траектории простой но зеленый квадрат.

Для этого сделаем или позаимствуем svg, с одним или несколькими путями.

Создадим элемент с помощью функции document.createElementNS. MDN сообщает нам, что метод имеет базовую поддержку во всех современных браузерах. Затем добавим созданному элементу путь.

Здесь, в атрибуты, внесен первый попавшийся на глаза путь из какого-то svg файла, методом копируй-вставляй. Конечно это не единственный и более того, не самый удобный способ, но достаточно наглядный для использование в первом примере.

Теперь в цикле, будем получать координаты точек пути и назначать их нашему объекту. Для этого нам хватит двух методов SVGGeometryElement:

возвращает вычисленное значение общей длины пути и

Получает аргументом float число, а возвращает объект SVGPoint у которого есть, интересующие нас, координаты x и y. При значениях аргумента, меньше нуля или больше длины пути, в качестве результата будет возвращаться первая или последняя точки соответственно.

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

→ Полный код примера на codepen

Но, можно использовать более интересный вариант двигать объект по координатам нескольких путей, например такой:

Опять же, возьмем svg файл с несколькими путями. Тот который был использован в примере, сделан в редакторе Inscape. Теперь надо получить эти пути, это возможно через разбор объекта или, если svg был получен в виде текстового файла, то следующей функцией, с помощью регулярных выражений, можно получить их как строки.

После создания массива путей, остается извлекать их по очереди и обрабатывать, таким же образом, как и единственный путь для движения квадрата. получая интересные эффекты.
Полный код примера смотрите ниже.

Что бы добавить больше контроля при движение объекта по координатам пути можно использовать твины. Для тестовых примеров я взял первую попавшуюся на глаза библиотеку GreenSock, но это могла оказаться и любая другая.

В первом случае при движении квадрата по единственному пути, создадим промежуточный объект помощник, и передадим его при создании твина.

Увидеть движение квадрата по пути с использованием твина, в первом примере на codepen, можно поставив галочку use tween.