2

ゲームを最適化しようとしています。iPad 2 では問題なく動作しますが、Retina iPad では単純なスプライト アニメーションの動作が非常に遅くなります。Safari ブラウザを使用しています。

CSS を使用してアプリをスケーリングしています。最初は libcanvas フレームワークを使用しようとしましたが、後でプレーンな HTML5 キャンバスに切り替えました。-webkit-transform: translate3d(0,0,0); を適用しようとしました。ハックしますが、まったく運がありません。webkitRequestAnimationFrame メソッドを使用しています。

一連の drawImage を実行します。

ctx.drawImage(anim,
                        frame * widthFrame,
                        0,
                        widthFrame,
                        widthFrame,

                        devicePixelRatio * shape.x +0.5|0,
                        devicePixelRatio * shape.y +0.5|0,
                        devicePixelRatio * shape.width,
                        devicePixelRatio * shape.height);

に続く

window.webkitRequestAnimationFrame(draw,root)

テストケース: http://jsfiddle.net/LJRXb/7/高解像度 http://jsfiddle.net/AsfcL/1/低解像度

パフォーマンスを改善するために何ができるでしょうか? アプリに何か問題がありますか？スプライト アニメーションを実行するためのより良い方法はありますか? ご注意いただき、専門家のアドバイスをいただきありがとうございます。

4

1 に答える 1

-1

CSS を使用してアプリをスケーリングしています

キャンバスのCSSの幅と高さをCSSで設定しているということですか？これにより、パフォーマンスが低下します。canvas 要素の CSS プロパティをスケーリングするのではなく、キャンバス自体をスケーリングする必要があります。次のように、キャンバスを幅 / 高さ 100% に設定します。

<canvas id="myCanvas" width="100%" height="100%></canvas>

そして、それに応じてキャンバス コンテキスト setScale() を使用して描画します。

var canvas = document.getElementById('myCanvas'),
    ctx = canvas.getContext('2d');

ctx.setScale(myScaleX, myScaleY);
...
于 2013-05-09T20:47:09.027 に答える