我正在尝试使用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时,您将看到该方法不起作用:


英雄不在屏幕中央(他在屏幕顶部)。
Hero的运动渲染已损坏(至少在我的Chrome和Firefox中)。


有什么想法我做错了吗?

感谢您的回答。

最佳答案

居中无法正常工作,因为默认情况下,Crafty将视口钳制到可见的实体集。您可以使用Crafty.viewport.clampToEntities = false禁用它。 (经常出现这种情况,我怀疑默认情况下需要将其禁用!)
渲染已损坏,因为您同时给实体提供了DOM和Canvas渲染组件-您只能使用其中之一。
众所周知,调用centerOn之类的视口动画将禁用follow。 (或任何其他当前动画。)


Here是代码的有效版本。

09-27 04:32