javascript - CraftyJS - viewport.centerOn() 不起作用

Question

我正在尝试使用 CraftyJS 框架制作 2D JavaScript 游戏。但我坚持使用“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. Hero 的移动渲染已损坏(至少在我的 Chrome 和 Firefox 中)。

有什么想法我做错了什么吗？

感谢您的回答。

Answer 1

1. 居中无法正常工作，因为默认情况下，Crafty 会将视口(viewport)固定到可见的实体集。您可以使用 Crafty.viewport.clampToEntities = false 禁用此功能。 (这个问题经常出现，我怀疑它需要默认禁用!)

2. 渲染被破坏，因为您为实体提供了 DOM 和 Canvas 渲染组件 - 您应该只使用其中之一。

3. 正如您所知，调用像 centerOn 这样的视口(viewport)动画将禁用 follow。 (或任何其他当前动画。)

Here是您的代码的工作版本。