1

背景用に 800 x 100 の画像があり、そこから (スプライト シートのように) セクションを引き出して背景を生成しようとしています。将来、背景をいじって生成する方法を学ぶことができます!)

ただし、最初のアニメーションフレーム（速度が低下していることからわかりました）では、背景画像全体の半分（使用したいセクションではありません）が表示され、おそらく800ピクセル下に移動して表示されます3 番目のフレームまでに、それはなくなりました。

助けてください:/ありがとう!

    var bricks = [0, 1, 1, 1, 1, 2];

    function createBackground() {
        for(var i = 0; i < bricks.length; i++) {
            drawBackground(bricks[i]);
        }

    }
    var bg = new Image();
    bg.src = 'bgsheet2.png';
    var srcX, srcY = 0,srcW = 100,srcH = 100,destX = 0,destY = canvas.height-100,destW = 100,destH = 100;

    function drawBackground(type) {

        switch(type) {
            case 1:
                srcX = 0;
                ctx.drawImage(bg,srcX,srcY,srcW,srcH,destX,destY,destW,destH);
                destX+=100;
                break;
            case 2:
                srcX = 100;
                ctx.drawImage(bg,srcX,srcY,srcW,srcH,destX,destY,destW,destH);
                destX+=100;
                break;
            case 3:
                srcX = 200;
                destX+=100;
                ctx.drawImage(bg,srcX,srcY,srcW,srcH,destX,destY,destW,destH);
                break;
            default:
                srcX = 300;
                ctx.drawImage(bg,srcX,srcY,srcW,srcH,destX,destY,destW,destH);
                destX+=100;
                break;
        }
    }

     //this is in my main animation loop
    createBackground();
4

1 に答える 1

0

効率のために、次の一般的なソリューションがあります。

  1. 背景が静的な場合 (水のような可動部分や相互作用がない場合)、画面上のキャンバス (目に見えるキャンバス) に一度だけ描画できますが、そのキャンバスをクリアしないでください。そうすれば、タイルは一度だけ処理され、描画されます。

  2. 2 番目の方法は、最初の方法よりも少し難しいですが、(再) 描画の呼び出しを制限する目的で、オフスクリーン キャンバスにセクションを描画することです。

  3. また、基本的にディスプレイの変更された部分のみを更新する方法である「ダーティ レクタングル」を使用することもできます。これは、効率化のための最も難しいソリューションです。

于 2012-07-15T22:37:23.850 に答える