Как смягчить повороты объекта?

Question

[Александр Андропов]

Добрый день! Рисую через Line Renderer линию и пускаю объект по этому пути. Всё работает нормально за исключением дёрганья объекта на поворотах. Подскажите как убрать эти дёрганья и сделать повороты и вообще само движение объекта плавное и приятное для глаз. Спасибо. Код ниже и то, как у меня сейчас это работает

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class PlayerController : MonoBehaviour
{
    public float speed = 5f;

    [SerializeField]
    private LineRenderer lineRenderer;
    private List<Vector3> linePoints = new List<Vector3>();
    private int targetPointIndex = 0;
    private Vector3 targetPoint;
    private float lineLength;
    private float elapsedTime;
    private bool isMoving = false;

    void Start()
    {
        lineRenderer = GetComponent<LineRenderer>();
    }

    void Update()
    {
        if (Input.GetMouseButton(0))
        {
            Vector3 mousePosition = Camera.main.ScreenToWorldPoint(Input.mousePosition);
            mousePosition.z = 0;
            linePoints.Add(mousePosition);

            if (lineRenderer != null)
            {
                lineRenderer.positionCount = linePoints.Count;
                lineRenderer.SetPosition(linePoints.Count - 1, mousePosition);
            }
        }

        if (Input.GetMouseButtonUp(0))
        {
            lineLength = 0;
            for (int i = 1; i < linePoints.Count; i++)
            {
                lineLength += Vector3.Distance(linePoints[i], linePoints[i - 1]);
            }

            targetPointIndex = 1;
            targetPoint = linePoints[targetPointIndex];
            transform.up = (targetPoint - transform.position).normalized;

            isMoving = true;
        }

        if (isMoving && linePoints.Count > 1 && targetPointIndex < linePoints.Count)
        {
            Vector3 direction = (targetPoint - transform.position).normalized;
            transform.up = direction;
            transform.position += direction * speed * Time.deltaTime;

            if (Vector3.Distance(transform.position, targetPoint) < 0.1f)
            {
                targetPointIndex++;
                if (targetPointIndex < linePoints.Count)
                {
                    targetPoint = linePoints[targetPointIndex];
                    transform.up = (targetPoint - transform.position).normalized;
                }
            }
        }
    }
}

Как это работает сейчас

Answer 1

[twobomb]

Ну естественно откуда там плавность если точки стоят друг возле друга и соеденены прямыми линиями.
Вам нужно вашу линию преобразовывать в набор квадратичных или кубических кривых безье.
И двигать нужно присваивая напрямую координаты получаемые из функции которая возвращает координату точки на кривой безье в определенном deltaT, и deltaT двигать одним шагом ну или если нужно делать ускорение,то плавно увеличивать шаг deltaT.
P.S. Когда-то делал нечто подобное на канвасе, можешь выдрать себе функции получения точки на кривой и функцию интерполяции между двумя 4х точечными кривыми

Comments

[Александр Андропов]

А есть пример для C# ?

Я рисую линию сейчас так:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
 
public class Line : MonoBehaviour {
    [SerializeField] private LineRenderer _renderer;
    [SerializeField] private EdgeCollider2D _collider;
 
    private readonly List<Vector2> _points = new List<Vector2>();
    void Start() {
        _collider.transform.position -= transform.position;
    }
 
 
    void Update()
    {
 
    }
 
    public void SetPosition(Vector2 pos) {
        if(!CanAppend(pos)) return;
 
        _points.Add(pos);
 
        _renderer.positionCount++;
        _renderer.SetPosition(_renderer.positionCount-1,pos);
 
        _collider.points = _points.ToArray();
    }
 
    private bool CanAppend(Vector2 pos) {
        if (_renderer.positionCount == 0) return true;
 
        return Vector2.Distance(_renderer.GetPosition(_renderer.positionCount - 1), pos) > DrawManager.RESOLUTION;
    }
}

[twobomb]

Александр Андропов, Нет, примера для C# нет.
В моем примере нужно решить будет одну проблему, это проблема скорости движения.
Шаг движения одинаковый, но из-за того что длинна линий разная получается разная скорость.
Получить любую точку можно по параметру t, он в диапазоне от 0 до 1.
И получается допустим если шаг 0.1, то любую линию мы проходим за 10 шагов, если линия длинной условно 10 пикселей, то реальная скорость движения будет 1 пиксель\рендер, а если линия длинной 100, то скорость уже будет 10 пикселей\рендер.
Поэтому для решения этой проблемы как вариант нужно узнать длинну каждой линии , и шаг с которым мы будем двигаться смещать в зависимости от длинны линии. Тогда мы будем двигаться по всем линиям с одниковой скоростью.

А код переписать это 2 секунды, вам нужны только эти 2 функции

//Вычисляем точки на кривой безье по формуле 4х точеченой кривой
//P = (1−t)3P1 + 3(1−t)2tP2 +3(1−t)t2P3 + t3P4
//Подробнее https://learn.javascript.ru/bezier-curve
function getCordOnCurve(t,x0,y0,x1,y1,x2,y2,x3,y3){//t[0-1]
  var x  = Math.pow(1-t,3)*x0 + 3* Math.pow(1-t,2)*t*x1 + 3 * (1-t) * Math.pow(t,2)* x2 + Math.pow(t,3)*x3;
  var y  = Math.pow(1-t,3)*y0 + 3* Math.pow(1-t,2)*t*y1 + 3 * (1-t) * Math.pow(t,2)* y2 + Math.pow(t,3)*y3;
  return {x:x,y:y};
}

function calcControlPoints(x0,y0,x1,y1,x2,y2,x3,y3){
//Вычисляем промежуточные точки между двумя точками, по методу Maxim Shemanarev Interpolation with Bezier Curves
        //Подробнее http://agg.sourceforge.net/antigrain.com/research/bezier_interpolation/index.html
    var xc1 = (x0 + x1) / 2.0;
    var yc1 = (y0 + y1) / 2.0;
    var xc2 = (x1 + x2) / 2.0;
    var yc2 = (y1 + y2) / 2.0;
    var xc3 = (x2 + x3) / 2.0;
    var yc3 = (y2 + y3) / 2.0;

    var len1 = Math.sqrt((x1-x0) * (x1-x0) + (y1-y0) * (y1-y0));
    var len2 = Math.sqrt((x2-x1) * (x2-x1) + (y2-y1) * (y2-y1));
    var len3 = Math.sqrt((x3-x2) * (x3-x2) + (y3-y2) * (y3-y2));

    var k1 = len1 / (len1 + len2);
    var k2 = len2 / (len2 + len3);

    var xm1 = xc1 + (xc2 - xc1) * k1;
    var ym1 = yc1 + (yc2 - yc1) * k1;

    var xm2 = xc2 + (xc3 - xc2) * k2;
    var ym2 = yc2 + (yc3 - yc2) * k2;

    
    var smooth_value  = 1;//КОЭФИЦИЕНТ СГЛАЖИВАНИЯ ОТ 0 ДО 1
    ctrl1_x = xm1 + (xc2 - xm1) * smooth_value + x1 - xm1;
    ctrl1_y = ym1 + (yc2 - ym1) * smooth_value + y1 - ym1;

    ctrl2_x = xm2 + (xc2 - xm2) * smooth_value + x2 - xm2;
    ctrl2_y = ym2 + (yc2 - ym2) * smooth_value + y2 - ym2;
    
    return {cx1:ctrl1_x, cy1: ctrl1_y, cx2:ctrl2_x, cy2:ctrl2_y};
}

[twobomb]

Александр Андропов, Я попросил chat gpt написать для вас функцию вычисления длинны 4х точечной кривой, это сильно упростит вам задачу вот код

function bezierCurveLength(x1, y1, x2, y2, x3, y3, x4, y4) {
  const n = 100; // Количество сегментов для интегрирования
  let length = 0;
  let px = x1;
  let py = y1;
  for (let i = 1; i <= n; i++) {
    const t = i / n;
    const cx = (3 * x2 - 3 * x1) * t * t * t + (3 * x1 - 6 * x2 + 3 * x3) * t * t + (3 * x2 - 3 * x3) * t + x4 - x1;
    const cy = (3 * y2 - 3 * y1) * t * t * t + (3 * y1 - 6 * y2 + 3 * y3) * t * t + (3 * y2 - 3 * y3) * t + y4 - y1;
    length += Math.sqrt((cx - px) * (cx - px) + (cy - py) * (cy - py));
    px = cx;
    py = cy;
  }
  return length;
}

P.S. Шаг движения для 4х точечной кривой по идее будет (1/bezierCurveLength) * speed

[twobomb]

Александр Андропов, Ну или если вам не нужен такой уровень заморочек, просто делайте плавную интерполяцию между текущим углом машинки и углом машинки который должен быть в текущей точке.
Тоесть смысл в том чтобы не менять угол машинки резко, тогда всё будет сильно плавнее, хотя направление машинке может быть не верным тому которое должно быть в текущей точке, особенно заметно будет на разворотах на 180...