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

按位非运算符 ( ~)只是截断数字的小数部分（例如is ~~100.1; 100is ~~-100.1）-100。所以很自然，如果你添加小于1to的值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，那么渲染它肯定101比? 更有意义100？

于 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 回答