게이밍 맵 엔진, 파이널 판타지 전술 Esk

Question

JavaScript로 최종 판타지 스타일 월드 맵 엔진을 제작할 수 있는지 인터넷을 검색하고있었습니다. 지도와 포인트 위치는 간단합니다. 필자는 필연적으로 직선이 아닌 점들 사이에서 경로를 만들고 스프라이트가 그 경로를 따라 걷는 지 궁금해했습니다.

FFT지도 http://www.vintagevideogamer.net/wp-content/uploads/2012/04/world_map.jpg

사람이 maping의 스타일이라는 것을 알고 있나요? (위키 백과에는 용어가 없었습니다)

또는 그러한 기존 프로그램이 있습니까?

Canvas를 사용하거나 Native JS를 사용해 보려고합니다.

Answer 1

이러한 경로는 상대 좌표로 일련의 선분으로 인코딩 할 수 있습니다. 당신은 같은 경로를 원하는 가정 :

| 
\ _ 

각 라인은 10 픽셀입니다. 당신은 단지 중간 점을 찾기 위해 시간 추정을 사용하여 다음

[ 
    {"start_x":0,"start_y":0,"stop_x":0,"stop_y":10,"duration":2}, 
    {"start_x":0,"start_y":10,"stop_x":10,"stop_y":20,"duration":3}, 
    {"start_x":10,"start_y":20,"stop_x":20,"stop_y":20,"duration":2} 
] 

: (이 세그먼트를 통과하기 위해 수행해야 초 (밀리 초)을 나타 내기 위해 시간에) 당신은 라인 세그먼트의 자바 스크립트 배열로 그를 인코딩 할 수 세그먼트의 시작과 세그먼트의 끝 사이. 현재의 오프셋 (offset)는 다음과 같습니다

ELAPSED_TIME 당신이 세그먼트를 시작한 이후의 시간입니다

var pct_complete = elapsed_time/line_segment.duration, 
    x_diff = (line_segment.stop_x - line_segment.start_x), 
    y_diff = (line_segment.stop_y - line_segment.start_y), 
    render_x = line_segment.start_x + (x_diff * pct_complete), 
    render_y = line_segment.start_y + (y_diff * pct_complete); 

. 앞서 언급했듯이 상대 좌표를 사용하면 render_x/y를 월드의 경로 위치와 화면 오프셋으로 조정해야합니다.

더 부드러운 선을 사용하려면 더 작은 선분을 사용하십시오.