如何找出敌人要遵循的草书路径
how to figure out cursive paths for an enemy to follow
问题
我正在制作一款游戏,其中敌人会出现在屏幕上的某个位置,然后沿着平滑的曲线路径在某个位置消失。我可以让他们走直线,但想不出让他们走图中描绘的路径的方法。
尝试次数
我从抛物线曲线入手并成功实现了它们。我只是用抛物线方程逐渐计算坐标。我不知道所需路径的方程式应该是什么。
我想要的
我不是要 code.I 只是想有人向我解释一般情况 technique.If 你仍然想展示一些代码那么我对这个特定的编程语言没有特别偏好问题你可以使用C,Java甚至伪代码。
我不明白你是怎么给出曲线的。如果你需要在图片上描绘的曲线,你可以找到解析给出的曲线并使用它。如果你没有任何曲线,你可以发给我:hedgehogues@bk.ru 我会帮你找到你。我把电子邮件留在这里是因为我没有从 Whosebug 收到任何关于用户答案的消息。不知道为什么。
如果你在[A, B]的参数视图中有一些曲线,你可以这样写代码:
struct
{
double x, y;
}SPoint;
coord = A;
step = 0.001
eps = 1e-6;
while (coord + step - eps < B)
{
SPoint p1, p2;
p1.x = x(coord);
p1.y = y(coord);
coord += step;
p2.x = x(coord);
p2.y = y(coord);
drawline(p1, p2);
}
如果你想生成你需要的螺旋路径。
- 总时间
- 多少个完整的旋转
- 最大半径
因此,总时间 T_f = 5sec,旋转 R_f = 2.5 * 2 * PI,距起点的最终距离 D_f = 200px
function SpiralEnemy(spawnX, spawnY, time) {
this.startX = spawnX;
this.startY = spawnY;
this.startTime = time;
// these will change and be used for rendering
this.x = this.startX;
this.y = this.startY;
this.done = false;
// constants we figured out above
var TFinal = 5.0;
var RFinal = -2.6 * 2 * Math.PI;
var RStart = -Math.PI / 2;
var DFinal = 100;
// the update function called every animation tick with the current time
this.update = function(t) {
var delta = t - this.startTime;
if(delta > TFinal) {
this.done = true;
return;
}
// find out how far along you are in the animation
var percent = delta / TFinal;
// what is your current angle of rotation (in radians)
var angle = RStart + RFinal * percent;
// how far from your start point should you be
var dist = DFinal * percent;
// update your coordinates
this.x = this.startX + Math.cos(angle) * dist;
this.y = this.startY + Math.sin(angle) * dist;
};
}
EDIT 这里有一个 jsfiddle 可以搞乱 http://jsfiddle.net/pxb3824z/
编辑 2 这是一个循环(而不是螺旋)版本 http://jsfiddle.net/dpbLxuz7/
循环代码将动画分成两部分,开始部分和结束部分。
开始一半:angle = Math.tan(T_percent) * 2 and dist = Speed + Speed * (1 - T_percent)
结束一半:angle = -Math.tan(1 - T_percent) * 2 and dist = **Speed + Speed * T_percent
T_percent 两半都归一化为 (0, 1.0)。
function LoopEnemy(spawnX, spawnY, time) {
this.startX = spawnX;
this.startY = spawnY;
this.startTime = time;
// these will change and be used for rendering
this.x = this.startX;
this.y = this.startY;
this.last = time;
this.done = false;
// constants we figured out above
var TFinal = 5.0;
var RFinal = -2 * Math.PI;
var RStart = 0;
var Speed = 50; // px per second
// the update function called every animation tick with the current time
this.update = function(t) {
var delta = t - this.startTime;
if(delta > TFinal) {
this.done = true;
return;
}
// find out how far along you are in the animation
var percent = delta / TFinal;
var localDelta = t - this.last;
// what is your current angle of rotation (in radians)
var angle = RStart;
var dist = Speed * localDelta;
if(percent <= 0.5) {
percent = percent / 0.5;
angle -= Math.tan(percent) * 2;
dist += dist * (1 - percent);
} else {
percent = (percent - 0.5) / 0.5;
angle -= -Math.tan(1 - percent) * 2;
dist += dist * percent;
}
// update your coordinates
this.last = t;
this.x = this.x + Math.cos(angle) * dist;
this.y = this.y + Math.sin(angle) * dist;
};
}
推导准确的行进距离和这个循环的高度需要更多的工作。我任意选择了 50px/sec 的 Speed,它给出了 ~+145 的最终 x 偏移和 ~+114 的循环高度,距离和高度将从这些值线性缩放(例如: Speed=25 最终 x 约为 73,循环高度约为 57)
首先你需要用一组随时间变化的点来表示每条曲线,例如:
-在 T(0) 处,object 应位于 (X0, Y0)。
-在 T(1) 处,object 应位于 (X1, Y1)。
点数越多,曲线越平滑。
然后您将使用这些点集为 X 生成两个 formulas-one,为 Y-生成另一个 formulas-one,使用任何 Interpolation method, like The La-grange's Interpolation 公式:
- 请注意,您应该将 'y' 替换为时间 T,将 'x' 替换为您的 X for X 公式,Y 替换 Y for Y 公式。
我知道您希望得到一个简单的方程式,但不幸的是,这需要您付出巨大的努力来简化每个方程式,我的建议是除非值得,否则不要这样做。
如果您正在寻找一个更简单的方程式以在游戏的每一帧中表现良好,您应该阅读 SPline 方法,该方法是将曲线分成更小的段,并制作一个每个段的简单方程式,例如:
线性样条:
或者您可以使用二次样条或三次样条来获得更平滑的曲线,但这会降低您的游戏性能。您可以阅读有关这些方法的更多信息 here.
我认为线性样条对每条曲线都有合理的点集非常适合您。
- 请将问题标题更改为更通用。
问题
我正在制作一款游戏,其中敌人会出现在屏幕上的某个位置,然后沿着平滑的曲线路径在某个位置消失。我可以让他们走直线,但想不出让他们走图中描绘的路径的方法。
尝试次数
我从抛物线曲线入手并成功实现了它们。我只是用抛物线方程逐渐计算坐标。我不知道所需路径的方程式应该是什么。
我想要的
我不是要 code.I 只是想有人向我解释一般情况 technique.If 你仍然想展示一些代码那么我对这个特定的编程语言没有特别偏好问题你可以使用C,Java甚至伪代码。
我不明白你是怎么给出曲线的。如果你需要在图片上描绘的曲线,你可以找到解析给出的曲线并使用它。如果你没有任何曲线,你可以发给我:hedgehogues@bk.ru 我会帮你找到你。我把电子邮件留在这里是因为我没有从 Whosebug 收到任何关于用户答案的消息。不知道为什么。
如果你在[A, B]的参数视图中有一些曲线,你可以这样写代码:
struct
{
double x, y;
}SPoint;
coord = A;
step = 0.001
eps = 1e-6;
while (coord + step - eps < B)
{
SPoint p1, p2;
p1.x = x(coord);
p1.y = y(coord);
coord += step;
p2.x = x(coord);
p2.y = y(coord);
drawline(p1, p2);
}
如果你想生成你需要的螺旋路径。
- 总时间
- 多少个完整的旋转
- 最大半径
因此,总时间 T_f = 5sec,旋转 R_f = 2.5 * 2 * PI,距起点的最终距离 D_f = 200px
function SpiralEnemy(spawnX, spawnY, time) {
this.startX = spawnX;
this.startY = spawnY;
this.startTime = time;
// these will change and be used for rendering
this.x = this.startX;
this.y = this.startY;
this.done = false;
// constants we figured out above
var TFinal = 5.0;
var RFinal = -2.6 * 2 * Math.PI;
var RStart = -Math.PI / 2;
var DFinal = 100;
// the update function called every animation tick with the current time
this.update = function(t) {
var delta = t - this.startTime;
if(delta > TFinal) {
this.done = true;
return;
}
// find out how far along you are in the animation
var percent = delta / TFinal;
// what is your current angle of rotation (in radians)
var angle = RStart + RFinal * percent;
// how far from your start point should you be
var dist = DFinal * percent;
// update your coordinates
this.x = this.startX + Math.cos(angle) * dist;
this.y = this.startY + Math.sin(angle) * dist;
};
}
EDIT 这里有一个 jsfiddle 可以搞乱 http://jsfiddle.net/pxb3824z/
编辑 2 这是一个循环(而不是螺旋)版本 http://jsfiddle.net/dpbLxuz7/
循环代码将动画分成两部分,开始部分和结束部分。
开始一半:angle = Math.tan(T_percent) * 2 and dist = Speed + Speed * (1 - T_percent)
结束一半:angle = -Math.tan(1 - T_percent) * 2 and dist = **Speed + Speed * T_percent
T_percent 两半都归一化为 (0, 1.0)。
function LoopEnemy(spawnX, spawnY, time) {
this.startX = spawnX;
this.startY = spawnY;
this.startTime = time;
// these will change and be used for rendering
this.x = this.startX;
this.y = this.startY;
this.last = time;
this.done = false;
// constants we figured out above
var TFinal = 5.0;
var RFinal = -2 * Math.PI;
var RStart = 0;
var Speed = 50; // px per second
// the update function called every animation tick with the current time
this.update = function(t) {
var delta = t - this.startTime;
if(delta > TFinal) {
this.done = true;
return;
}
// find out how far along you are in the animation
var percent = delta / TFinal;
var localDelta = t - this.last;
// what is your current angle of rotation (in radians)
var angle = RStart;
var dist = Speed * localDelta;
if(percent <= 0.5) {
percent = percent / 0.5;
angle -= Math.tan(percent) * 2;
dist += dist * (1 - percent);
} else {
percent = (percent - 0.5) / 0.5;
angle -= -Math.tan(1 - percent) * 2;
dist += dist * percent;
}
// update your coordinates
this.last = t;
this.x = this.x + Math.cos(angle) * dist;
this.y = this.y + Math.sin(angle) * dist;
};
}
推导准确的行进距离和这个循环的高度需要更多的工作。我任意选择了 50px/sec 的 Speed,它给出了 ~+145 的最终 x 偏移和 ~+114 的循环高度,距离和高度将从这些值线性缩放(例如: Speed=25 最终 x 约为 73,循环高度约为 57)
首先你需要用一组随时间变化的点来表示每条曲线,例如:
-在 T(0) 处,object 应位于 (X0, Y0)。
-在 T(1) 处,object 应位于 (X1, Y1)。
点数越多,曲线越平滑。
然后您将使用这些点集为 X 生成两个 formulas-one,为 Y-生成另一个 formulas-one,使用任何 Interpolation method, like The La-grange's Interpolation 公式:
- 请注意,您应该将 'y' 替换为时间 T,将 'x' 替换为您的 X for X 公式,Y 替换 Y for Y 公式。
我知道您希望得到一个简单的方程式,但不幸的是,这需要您付出巨大的努力来简化每个方程式,我的建议是除非值得,否则不要这样做。
如果您正在寻找一个更简单的方程式以在游戏的每一帧中表现良好,您应该阅读 SPline 方法,该方法是将曲线分成更小的段,并制作一个每个段的简单方程式,例如:
线性样条:
或者您可以使用二次样条或三次样条来获得更平滑的曲线,但这会降低您的游戏性能。您可以阅读有关这些方法的更多信息 here.
我认为线性样条对每条曲线都有合理的点集非常适合您。
- 请将问题标题更改为更通用。