0

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. ヒーローの動きのレンダリングが壊れています (少なくとも私の Chrome と Firefox では)。

私が間違っていることは何ですか？

回答ありがとうございます。

4

1 に答える 1

3

  1. デフォルトでは、Crafty はビューポートをエンティティの可視セットにクランプするため、センタリングが正しく機能しません。でこれを無効にすることができますCrafty.viewport.clampToEntities = false。(これは、デフォルトで無効にする必要があると思われる十分な頻度で表示されます!)

  2. エンティティに DOM と Canvas の両方のレンダリング コンポーネントを与えているため、レンダリングが壊れています。どちらか一方のみを使用する必要があります。

  3. ご存知のように、のようなビューポート アニメーションを呼び出すと、centerOnが無効になりfollowます。(または他の現在のアニメーション。)

これがあなたのコードの作業バージョンです。

于 2014-04-28T15:19:13.093 に答える