5

EaselJS を使用する場合、大量のアニメーション化されたビットマップ (すべて同じスプライトシートに基づく) を使用すると、少し問題が発生するようです。ステージでこれらを一度に 2 つ実行する場合はまったく問題ありませんが、それらを動かしながら同時により多くの数を実行すると (30 から 40 程度から開始)、それらが発生し始めます」約 10 fps の場合でも、かなりちらつきます。

これらの線に沿って、影やその他のものは使用していません。アニメーション化されたビットマップを使用して移動するだけです。

このパフォーマンスを向上させるための良いアドバイスはありますか?

4

2 に答える 2

11

コードを見ないと、ボトルネックがどこにあるかを正確に知ることは困難です。しかし、ここに探し始める場所がいくつかあります(より些細な修正から始めます):

  1. 最新のブラウザを使用していることを確認してください。少なくとも、他のいくつかのブラウザ/プラットフォームをチェックして、パフォーマンスに大きな変化があるかどうかを確認してください。私が理解していることから、EaselJSのパフォーマンスは、ハードウェア以外の高速化されたキャンバスの実装では大幅に悪化します。

  2. 可能であれば、他のトゥイーンライブラリよりもcreateJSのバージョンのTweenJSを使用してくださいTickerTweenJSは、より効率的なEaselJSのクラスに自身を結び付けます。

  3. stage.update()どうしても必要な場合を除いて、電話をかけないでください。これstage.update()は非常に高額な電話なので、できるだけけちなことをする必要があります。実際、ティッカーを使用してステージを定期的に更新している場合は、実際にはそれを呼び出すべきではありません。

  4. 賢明かつ積極的にキャッシュします。ステージ上に複雑な静的要素がある場合、それらをキャッシュするとサイクルを節約できます。ただし、キャッシュにはオーバーヘッドがあるため、静的要素が多いコンテナや複雑に描画された形状のコンテナのためにキャッシュを保存してください。

  5. EaselJSがマウスオーバーをチェックする頻度を下げます。ステージ上でマウスオーバーを有効にしている場合は、低い頻度で渡します(ドキュメント)。必要ない場合(クリックのみを聞いている場合)は、まったく有効にしないでください。特にステージ上にたくさんの要素がある場合、マウスオーバーの監視はかなり費用がかかります。

  6. trueに設定stage.snapToPixelsEnabledします。これは役立つ場合と役に立たない場合があります。理論的には、ピクセル全体でビットマップをレンダリングする方がはるかに効率的ですが、これにより一部のアニメーションがギザギザになる可能性があり、他の長所と短所を十分に理解できていません。

30FPSで約600〜800のスプライトシートを使用し、4年前のiMacでChromeを使用して基本的なトゥイーンを行うことで、まともなパフォーマンスを得ることができました(簡単なテストです)。

于 2012-07-12T23:14:22.010 に答える
0

Stage同時に複数のオブジェクトを使用してみてください。

于 2012-06-25T02:38:56.030 に答える