CraftyJS - viewport.centerOn() not working

Question

I am trying to make 2D JavaScript game with CraftyJS framework. But I am stuck with "centerOn" feature.

Here is the code: 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);

When you uncomment last JavaScript line, you will see the method not working:

1. Hero is not in center of the screen (he is on top screen).
2. Hero's movement rendering is broken (at least in my Chrome and Firefox).

Any ideas what am I doing wrong?

Thanks for answers.

Answer 1

1. The centering isn't working correctly because, by default, Crafty clamps the viewport to the visible set of entities. You can disable this with Crafty.viewport.clampToEntities = false. (This comes up often enough I suspect it needs to be disabled by default!)

2. The rendering is broken because you are giving the entities both the DOM and Canvas render components -- you should only use one of those.

3. Just so you know, calling a viewport animation like centerOn will disable follow. (Or any other current animation.)

Here is a working version of your code.