4

これがあまりにもオープンエンドでないことを願っています。

これを行うためのより良い（よりバッテリーに優しい）方法があるかどうか疑問に思っています-

キャンバスに描画された小さな HTML 5 ゲームがあります (500x500 としましょう)。50ms ごとに位置を更新するオブジェクトがいくつかあります。私の現在の実装では、キャンバス全体を 50 ミリ秒ごとに再描画します。モバイルプラットフォームでのバッテリー寿命が非常に良いとは想像できません.

これを行うより良い方法はありますか？これはゲームでよくあるパターンでしょう。

編集：

リクエストに応じて、さらにいくつかの更新があります。

現在、オブジェクトは円弧と線で描かれたジオメトリ プリミティブです。私は、これらの小さな png/jpg/gif ファイルを作成することに反対しているわけではありません。これらは小さなグラフィックです -- わずか 15x15 程度です。

ゲームが進行するにつれて、一度に多くの画面が変化します。ただし、最初は画面が比較的ゆっくりと変化します (オブジェクトは 50 ミリ秒ごとに数ピクセルずつランダムに移動します)。

4

4 に答える 4

3

背景を描画せず、画像にして、キャンバスの CSS background-image を設定します。

requestAnimationFrame を使用すると、バッテリーの寿命を延ばすことができます。

http://paulirish.com/2011/requestanimationframe-for-smart-animation/

何かが実際に変更された場合にのみ、再描画を行います。無効化の概念をまだ導入していない場合は、導入してください。(つまり、キャンバスは有効であるため、何かが移動するまで何も再描画されません。キャンバスのウィンドウ内で何かが移動すると、キャンバスが無効になり、再描画が必要になります)

于 2012-06-09T19:22:11.533 に答える
1

バッテリーを使いたい場合は、Craftyを使用できます。このゲーム エンジンは最新の CSS3 テクノロジを使用しているため、キャンバスを常に更新する必要はありません。ここでこの例のゲームを見てください。

于 2012-06-09T16:35:33.487 に答える
0

フレームごとにキャンバス全体を再描画したくない方法は、「Dirty-Check」または「Dirty Matrix」アルゴリズムのみです。

ダーティチェックは、再描画全体よりも効率的です。しかし、それはレンダリングの実装に依存すると思います。

レンダリングに canvas2D を使用している場合は、これを使用する必要はありません。ほぼすべてのゲームには、複雑なスプライトとアニメーションがあります。ダーティ チェックを使用する場合、スプライトまたは背景マップの一部を更新する必要がある場合、この部分に何が重なっているかを把握する必要があります。次に、キャンバスのこの小さな領域を clearRect し、すべてのスプライトまたはマップを再描画します。など、重なっているもの。オーバーラップ部分のため、通常の render 実装よりも canvas render api を実行する必要があったことを意味します。また、Canvas2d のレンダリング パフォーマンスは通常、効率的とは言えません。

しかし、WebGL を使用している場合、それはおそらくかなりの違いです。私は WebGL の家族ではありませんが、おそらくより効率的であることは知っていました。Dirty-Check は、あなたの提案に合う良い選択です。

于 2014-11-24T11:02:18.037 に答える