두 점 사이의 선에 점을 얻는다

9

JavaScript로 간단한 우주 게임을 만들고 있지만 이제 벡터에 관한 벽을 쳤습니다.

게임 뷰는 2D 그리드에서 하향식입니다. 사용자가 그리드를 클릭하면 우주선이 해당 지점으로 비행합니다.

따라서 두 세트의 점이 있으면

{ x : 100.2, y : 100.6 }; // the ship
{ x : 20.5,  y : 55.95 }; // the clicked coordinates

게임 루프가 초당 60 회 반복으로 틱하고 원하는 선박 속도가 틱당 0.05 포인트 (초당 3 포인트) 인 경우 게임 루프의 각 틱에 대해 선박의 새 좌표 세트를 어떻게 계산합니까?

추신 : 나는 관성 또는 배에 영향을 미치는 여러 벡터를 고려하고 싶지 않습니다. 배가 무엇이든하고 (즉, 한 방향으로 비행하는) 정지하고 고정 된 속도로 클릭 한 좌표로 이동하기를 원합니다.

javascript vector coordinates

— 스티븐
소스

8

의사 코드에서 :

speed_per_tick = 0.05
delta_x = x_goal - x_current
delta_y = y_goal - y_current
goal_dist = sqrt( (delta_x * delta_x) + (delta_y * delta_y) )
if (dist > speed_per_tick)
{
    ratio = speed_per_tick / goal_dist
    x_move = ratio * delta_x  
    y_move = ratio * delta_y
    new_x_pos = x_move + x_current  
    new_y_pos = y_move + y_current
}
else
{
    new_x_pos = x_goal 
    new_y_pos = y_goal
}

— 트리스탄
소스

@Tristan : 당신은 goal_dist당신의 if상태 를 의미 합니까?

— Nate W.

21

LERP-선형 보간

나는 며칠 전에 비슷한 문제에 대해이 대답을했지만 여기에 우리는 간다.

선형 보간은 진행률에 따라 두 숫자 사이의 숫자를 제공하는 함수입니다. 실제로 두 점 사이의 점을 얻을 수 있습니다.

위대한 공식-계산 방법

일반적인 LERP 공식은로 제공됩니다 pu = p0 + (p1 - p0) * u. 어디:

pu : 결과 번호
p0 : 초기 번호
p1 : 최종 수
u : 진행 상황. 0에서 1 사이의 백분율로 제공됩니다.

백분율을 얻는 방법

"이 백분율을 어떻게 얻을 수 있습니까?" 걱정마 시작 벡터가 끝나기까지 포인트가 이동하는 데 몇 시간이 걸립니까? 좋아, 이미 지나간 시간으로 나눕니다. 이것은 당신에게 백분율을 줄 것입니다.

이것처럼 percentage = currentTime / finalTime;

벡터 계산

결과 벡터를 얻으려면 X 구성 요소와 Y 구성 요소에 하나씩 수식을 두 번 적용하기 만하면됩니다. 이 같은:

point.x = start.x + (final.x - start.x) * progress;
point.y = start.y + (final.y - start.y) * progress;

변동 시간 계산

당신은 당신의 포인트를 0.5 포인트 속도로 여행하고 싶을 수도 있습니다. 따라서 더 긴 거리가 더 긴 시간에 여행됩니다.

다음과 같이 할 수 있습니다.

거리 길이를 얻으려면 두 가지가 필요합니다. 거리 벡터를 얻은 다음 길이 값으로 변환하십시오.

distancevec = final - start;
distance = distancevec.length();

나는 당신이 벡터 수학을 알고 있기를 바랍니다. 그렇지 않은 경우이 수식으로 벡터 길이를 계산할 수 있습니다 d = sqrt(pow(v.x, 2) + pow(v.y, 2));.

소요 시간을 확인하고 최종 시간을 업데이트하십시오. 이것은 쉽다. 각 진드에 0.5 길이를 얻으려면 나누고 우리가 얻은 진드기 수를 가져와야합니다.

finalTime = distance / 0.5f;

끝난.

주의 사항 : 아마도이 속도가 의도 한 속도가 아닐 수도 있지만 이것이 맞습니다. 대각선으로 움직일 때도 선형으로 움직입니다. x + = 0.5f, y + = 0.5f를 수행하려면 벡터 수학 책을 읽고 계획을 다시 확인하십시오.

— 구스타보 메이 엘
소스

당신의 위치에서 %를 목적지에 남겨두고 싶다면? 델타 시간을 사용할 수없고 x : y 좌표를 사용하는 경우.

— Dave

progress이 답변에 명시된대로 계산 하면 0..1범위 내에 있어야합니다 . 그냥 할 :progressLeft = 1.0 - progress;

— 구스타보 마시 엘

3

방향의 법선을 계산 한 다음 파라 메트릭 방정식을 통해 현재 위치를 계산하면됩니다.

newPoint = startPoint + directionVector * velocity * t

여기서 t는 선박이 원하는 방향으로 이동하기 시작한 이후의 시간입니다. 다음을 통해 업데이트마다이 작업을 수행 할 수도 있습니다

newPoint = currentPoint + directionVector * velocity * timeDelta

그리고 당신은 모든 프레임 / 물리 / 등에서 이것을 계산합니다. 선박이 목적지에 도달 할 때까지 업데이트합니다.

— 모자
소스