0

キャンバス要素にスプライトをレンダリングしています。ぼやけた画像を避けるために、サブピクセルの配置を避けようとしています (ここの情報に基づく: http://seb.ly/2011/02/html5-canvas-sprite-最適化/ )。

次のように x 位置を再割り当てしようとすると、私の問題が発生します。

this.pos.x = ~~ this.pos.x;

これにより、スプライトが画面上で動かなくなり、その位置をコンソールに記録すると、開始位置で動かなくなっていることがわかります。

ここで、自分の位置でビット単位の演算子を実行せず、単に出力をログに記録すると:

console.log(~~ this.pos.x);

ビット単位の演算子が期待どおりに実行されていることがわかります。次のように表示されます。

100
101
102
...

注: 私のアニメーションはフレームレートに依存しないため、デルタを掛けて次のようなフロートを取得しています。

100.64
101.36
102.04
102.68
103.32000000000001
104.00000000000001
104.68000000000002
...

ここで位置を更新しますが、ここでのみ:

this.pos.x += BE.delta.getSeconds() * this.accelleration;

したがって

this.pos.x += ~~ (BE.delta.getSeconds() * this.accelleration);

動かない

4

2 に答える 2

2

ビット単位のNOT 演算子 ( ~)は、数値の小数部分を切り捨てるだけです (たとえば、~~100.1is 100; ~~-100.1is -100)。したがって、 に 未満の値を追加する場合、 に追加する場合1、this.pos.xがthis.pos.x = ~~this.pos.x増加することはありません。

多くのコンテキストを提供していませんthis.pos.xが、浮動小数点数のままにしておくことを許可したいかもしれませんが、レンダリングにはそのフロアバージョンを使用します。

var renderX = ~~this.pos.x;
// Use `renderX` rather than `this.pos.x` to render to the canvas;
// `renderX` will remain 100 while `this.pos.x` will gradually climb
// from 100 to 100.1, 100.5, 100.999999, etc. Once `this.pos.x`
// reaches 101 (or 101.1, etc.), `renderX` will become 101.

別に、フローリングよりも丸みを帯びた方が適切かもしれません。this.pox.xである場合、確かに?よりも100.999999999レンダリングする方が理にかなっています。101100

于 2012-05-29T13:19:29.310 に答える
2

画像をアニメーション化するときは、画像の位置とは別の変数に位置を保持する必要があります。そうすれば、計算のために浮動小数点値を保持し、画像の位置を整数値にすることができます。

座標の小数部分を切り取り、それを次の計算の入力として使用すると、値が前後にジャンプします。

100 + 0.64 = 100.64
~~100.64 = 100
100 + 0.64 = 100.64
~~100.64 = 100
...

また、roundメソッドを使用して、浮動小数点値を最も近い整数値に変換します。

x += BE.delta.getSeconds() * this.accelleration;
this.pos.x = Math.round(x);
于 2012-05-29T13:23:15.590 に答える