Question

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

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

有谁知道这种maping风格叫什么？（维基百科没有任期）

或者有这样一个程序的现有例子吗？

我正在寻找使用Canvas或仅使用Native JS来尝试它。

Answer 1

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

|
\ _

每行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以获取路径在世界中的位置和屏幕偏移量。

为了使转弯更平滑，请使用较小的线段。

游戏地图引擎，最终幻想战术Esk

1 个答案: