CraftyJS - viewport.centerOn()不工作

Question

我正在尝试用JavaScript框架制作2D CraftyJS游戏。但我被"centerOn“功能困住了。

下面是代码：http://jsfiddle.net/R8ND7/17/

Crafty.init(500, 350, document.getElementById('game'))
    .background('#eee');

Crafty.e('Earth, 2D, DOM, Canvas, Color')
    .attr({x: 0, y: 100, w: 480, h: 400})
    .color('#6C3108');

var hero = Crafty.e('Hero, 2D, DOM, Canvas, Color, Gravity, Fourway')
    .attr({x: 60, y: 90, w: 10, h: 20})
    .color('#338')
    .gravity('Earth')
    .fourway(4);

Crafty.viewport.follow(hero, -60, 0);
// Crafty.viewport.centerOn(hero, 10);

当您取消注释最后一个JavaScript行时，您将看到该方法不起作用：

1. 英雄不在屏幕中央(他在屏幕上方)。
2. 英雄的动作渲染被破坏了(至少在我的Chrome和Firefox中是这样)。

知道我做错什么了吗？

谢谢你的回答。

Answer 1

1. 中心没有正常工作，因为默认情况下，狡猾会将视图绑定到可见的实体集。您可以使用Crafty.viewport.clampToEntities = false禁用此功能。(这种情况经常出现，我怀疑默认情况下需要禁用它！)
2. 呈现中断是因为您向实体提供DOM和呈现画布组件--您应该只使用其中之一。
3. 正如您所知，调用像centerOn这样的视口动画将禁用follow。(或任何其他当前动画。)

这里是代码的工作版本。