1

そのため、キャンバスを使用して単純なスプライト読み込みメソッドを作成しようとしていますが、リフレッシュ レートがひどいことに気付きました。これは私が使用している描画方法です。

function DrawSprite(context,
                drawX,
                drawY,
                drawH,
                drawW,
                spriteXIndex,
                spriteYIndex,
                spriteW,
                spriteH,
                image){
    var imageObj = new Image();
    imageObj.onload = function() {
        //draw cropped image
        var sourceX = (spriteXIndex * spriteW);
        var sourceY = (spriteYIndex * spriteH);

        context.drawImage(imageObj, sourceX, sourceY, spriteW, spriteH, drawX, drawY, drawW, drawH);
    };
    imageObj.src = image;

}

これが呼び出されるたびに、非常に目立つ画像の再描画が行われます。いくつかの解決策を考えましたが、それらを実装する最善の方法がわかりません。まずはダブルバッファです。しかし、2番目のキャンバスを作成してその下に描画し、z-indexを使用してスワップを処理する以外に、それを実装する方法がわかりません。もう 1 つは、画像を保存し、スプライトを描画するたびに再作成しないことです。最初に 2 番目の方法を試して、プログラムを開始する前に画像をプリロードしますが、これを処理する最善の方法に関する情報を期待していました。

4

1 に答える 1

2

あなたがしているように見えるのは、新しいイメージを作成し、毎回ソースからロードすることです。これにより、パフォーマンスの問題が確実に発生します。これを処理する最善の方法は、画像を保存して再利用することです。以下は非常に簡単な例です。フィドルは、サービスhttp://retroships.comから画像をロードしているため、ロード部分でもう少し複雑です。

function Sprite(options){
    this.load(options.imagePath);  
    this.x = 0;
    this.y = 50;
    this.isLoaded = false;
}

Sprite.prototype.load = function(imagePath){
    this.image = new Image();
    var that = this;   

    this.image.src = imagePath;

    this.image.onload = function(){
        that.isLoaded = true;
    }
}

Sprite.prototype.draw = function(){
    ctx.drawImage(this.image, this.x, this.y);
}

// to use, you can pass other params and handle them like x/y/width/height what have you.
var yourSprite = new Sprite({imagePath : "pathtoimage.png"});

function render(){
    if(yourSprite.isLoaded){
        canvasContext.drawImage(yourSprite.image, yourSprite.x, yourSprite.y);
    }
}

ワーキングデモ

于 2012-10-21T05:05:15.090 に答える