0

JavaScriptを利用したcanvas要素を使用してゲームを構築しています。私のプレーヤークラスの一部には、update()ティックごとに1回呼び出されるメソッドが含まれています。この方法では、キーボード入力に基づいてプレーヤーのベロシティを更新し、プレーヤーを移動するための計算を行っています。そのコードのチャンクは次のとおりです。

// Gradually make the players velocity 0
if(this.xv > 0) {
    this.xv -= 0.1;
} else if(this.xv < 0) {
    this.xv += 0.1;
}
if(this.yv > 0) {
    this.yv -= 0.1;
} else if(this.yv < 0) {
    this.yv += 0.1;
}

// Update player position based on velocity
this.x += this.xv;
this.y += this.yv;

// Update velocity based on keyboard inputs
if(keyState[87]) {
    this.yv -= 0.5;
}
if(keyState[65]) {
    this.xv -= 0.5;
}
if(keyState[83]) {
    this.yv += 0.5;
}
if(keyState[68]) {
    this.xv += 0.5;
}

理論的には、これはすべて問題なく機能するはずです。プレーヤーがWキーを4ティック押し続けると、速度はになり2、さらに40ティックを超えると、速度はに低下し0ます。

ただし、浮動小数点数の操作に関してJavaScriptは完全に正確ではないように思われるため、これは実際には機能しません。ゲームティックごとにconsole.log()速度変数を使用すると、次のような出力が得られます。

x: -1.0241807402167069e-14           y: -1.379452108096757e-14
x: 0.09999999999998976           y: 0.09999999999998621
x: -1.0241807402167069e-14           y: -1.379452108096757e-14
x: 0.09999999999998976           y: 0.09999999999998621

したがって、ここで間違っているのは2つあります。1つはJavaScriptが速度を正確に計算しないこと、もう1つは速度が負の場合は常に少なくとも-1であるということです。これは、プレーヤーのスプライトが1ピクセルあたり1ピクセルで移動するため問題です。ティック。

このタスクのより正確な計算を取得するにはどうすればよいですか？

4

1 に答える 1

1

速度遷移を滑らかにするために、「指数関数的減衰」アプローチを使用することをお勧めします。速度をゼロに下げるために現在使用している条件付きブロックの代わりに、次を使用します。

this.xv *= 0.9;
this.yv *= 0.9;

これにより、最大速度が一定の加速度の10倍に制限され、減衰率を変更するとその乗数が変更されることに注意してください。これは問題ないかもしれませんが、そうでない場合は、方程式を微調整して目標速度に簡単に合わせることができます。

var p = 0.9;
var q = 1.0 - p;
this.xv = this.xv * p + this.txv * q;
this.yv = this.yv * p + this.tyv * q;

免責事項： これはニュートン物理学の本当の根拠はありません。これは、ロボットの状態遷移をスムーズにするために私が思いついたものです。しかし、それは私にとってはうまくいきました、そしてうまくいけばあなたにとってもそうなるでしょう。

于 2013-02-19T21:31:52.287 に答える