3

我在互联网上搜索试图找出是否有可能在 JavaScript 中构建最终幻想战术风格的世界地图引擎。地图和点的位置很简单，我仍然想知道如何在不一定笔直的点之间建立一条路径，并且精灵会沿着这条路径行走。

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

有谁知道这种映射风格叫什么？（维基百科没有术语）

或者有没有这样的程序的现有例子？

我正在考虑使用 Canvas 或仅使用 Native JS 来尝试它。

4

1 回答 1

0

您可以将这样的路径编码为一系列具有相对坐标的线段。假设您想要这样的路径：

|
\ _

其中每行是 10 个像素。您可以将其编码为线段的 javascript 数组（持续时间表示遍历该段应花费的秒数或毫秒数）：

[
    {"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}
]

然后，您只需使用时间估计来找到段开始和段结束之间的中间点。当前的偏移量为：

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);

其中 elapsed_time 是自您开始分段以来的时间。正如我所提到的，使用相对坐标，然后您只需调整 render_x/y 以适应路径在世界中的位置和屏幕偏移。

对于更平滑的转弯，请使用较小的线段。

于 2013-01-08T21:57:48.777 回答