Question

我正在尝试使用CraftyJS框架制作2D JavaScript游戏。但我坚持使用“centerOn”功能。

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行时，您将看到该方法无效：

英雄不在屏幕中央（他在屏幕上方）。
英雄的动作渲染被打破（至少在我的Chrome和Firefox中）。

任何想法我做错了什么？

感谢您的回答。

Answer 1

居中无法正常工作，因为默认情况下，Crafty会将视口固定到可见的实体集。您可以使用Crafty.viewport.clampToEntities = false停用此功能。（这经常出现，我怀疑默认情况下需要禁用它！）
渲染被破坏是因为您为实体提供了DOM和Canvas渲染组件 - 您应该只使用其中一个。
您知道，调用像centerOn这样的视口动画会禁用follow。（或任何其他当前动画。）

Here是您代码的有效版本。

CraftyJS - viewport.centerOn（）不起作用

1 个答案: